lee2sman/freewrite-jam.md

## freewrite-jam.md

      
    Raw
  

              freewrite-jam.md
            
          
    Freewrite: Web Jam Session

Today's Plan


Welcome and Introductions
Intro to Mixr
HTML recap
CSS styling
Positioning
Getting it online
Web zine jam session

HTML

HTML - Hypertext Markup Language


aka The content
Hypertext - directional hyper links. Words are associated with another file. By clicking on the link you jump to the other file.
Markup - language used to describe formatting and placement. Other markup languages include Wikimarkup
Language - self-explanatory!
HTML reference

CSS

CSS - Cascading Style Sheets

aka The Style
Where HTML is said to be your content, your CSS describes its style. CSS is used to describe colors, placement, fonts, size of objects, and more.
CSS has a specific format. You specify what elements on your website you want to modify, then give rules for how to style those elements.
CSS reference
CSS for placement
We use CSS for style. Positioning is specified in CSS.

HTML Review

There are so many html tags, but most of the time you will be using probably only a dozen or two at most.
html

head

title

body

h1

h2

h3 

p

img

a

br

Anatomy of a webpage

<!DOCTYPE html>
<html>
  <head>

    <title>
    My website
    </title>
    
  </head>
  
  <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    
    <img src="my_image.jpg" alt="a description of my image">

  </body>
</html> 


External Stylesheets

It's considered best practices to place your CSS on a separate page and link to it from your <head> section.
Put your css in a file that ends in .css, for example style.css.
You link to it like this:
<head>
  <title>My title</title>
  
  <link rel="stylesheet" href="style.css">
</head>

Simple Sites

Gossip's Web - The Directory of the Handmade Internet

Web Design in 4 Minutes
Hundred Rabbits is a bit more stylish but mostly simple this way
Text-only NPR
Tim Berners-Lee is the inventor of the modern web.
Top 10 Web Design Styles of 1993
https://html-color-codes.com/
Under Construction
My Blog Is A Digital Garden
HTML Energy
Sounds of a Revolution - class site for Ari Melenciano's course at Hunter College
Learning Gardens - landing page for a collaborative group
tehn - electronic composer
oppenlab - a programmer's portfolio
Flip's Website - blog
snarkmarket - blog of novelist Robin Sloan

Positioning things with CSS Flexbox


HTML:
 <div class="flex-container">
  <div>ITEM1</div>
  <div>ITEM2</div>
  <div>ITEM3</div>
  <div>ITEM4</div>
</div> 

CSS:
.flex-container {
  display: flex;
}

With flexbox, you can use these CSS selectors:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Flex direction

Change the direction your items flow. Instead of left to right (the default), let's flow down in a column. Just add flex-direction: column; to the css of the container.
.flex-container {
  display: flex;
  flex-direction: column;
}


Flex wrap

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

alternatively:  flex-wrap: nowrap;

Justify-content - For SPACING

Use this to align items
.flex-container {
  display: flex;
  justify-content: center;
}


Many Other ways to justify-content

 justify-content: center;
 justify-content: flex-start;
 justify-content: flex-end;
 justify-content: space-around;
 justify-content: space-between;

align-items is used for aligning items!
Play with these here
CSS Resources


Definitive introduction: Complete Guide to CSS Flexbox
also good: CSS Flexbox on w3schools

Fun learning resources:


Flexbox Froggy
Flexbox Defense tower defense game

Treating a website like a zine


Low Tech Magazine
Elliott.computer
Taper web zine
the html review
Low Tech Webring

Getting Things Online

Using glitch.com.
Or
Using neocities.