Week 4

you know what can’t be acquired? html

Maxim Leyzerovich

Harmonic Collection review

As we did last week, let’s take a look at some of your entries:

Harmonic Collection entries

I’d love some volunteers who didn’t share last time.

More CSS!

We’ll learn some initial CSS layout:

The box model

We’ll break somewhere in the middle of the lecture, again.

Let’s try it out

We’ll do some CSS layout work, together.

Let’s briefly go over some hosting terminology, as a little appetizer.
Then we’re going to get ourselves organized. In our project repos, let’s create folders for each entry—entry-1, entry-2, etc.
Inside each of these, you will rename entry-#.html to index.html.

Remember that index.html is a special name that will load (without showing the filename) at a folder’s path. So the paths we had before:
```
 https://username.github.io/harmonic-collection/entry-1
```
…will now point to each entry folder’s index.html, instead of entry-1.html in the base/root project folder. The URL stays the same!
Be sure to update your main project index.html, if the links there include .html!

When that is done, let’s add an entry-3 folder with an index.html (and then a style.css):

								 <!DOCTYPE html>
 <html>
   <head>
     <title>Entry 3</title>
     <link href="style.css" rel="stylesheet">
   </head>
   <body>
     <!-- Some dummy content just to speed us up! -->
     <header>
       <nav>
         <a href="/">All entries</a>
       </nav>
       <h1>Entry 3</h1>
     </header>
     <main>
       <p>Homogenized media revelatory street art existence experimental phenomenon. Imitation graffiti displacement bodily experience repurposed materials navigate natural. Collective historicizing dogma violence .net art industrial translates displacement. Zine filmic male gaze disrupt martyr modern gallery space universal experience ethnography.</p>
       <p>Sustainable authoritarian institutional historical mass-produced intuitive utopia collage dogmatic. Ethnicity intimate art gender cultural authenticity the Canon consumer politics fragments interplay. Male gaze contemplation gendering consumerist memory pop art fabrication. Internal construct observers loss R. Mutt digital manifesto material. Performance consumption political interpretation authoritarian relational body art male-dominated.</p>
       <p>Meditate sustainable social justice female form appropriate Marina Abramovic subculture tokenism. Sentient kitsch boundaries alienation psychic sensuality ethnicity. Poetic non-white absence utilitarian revelatory gallery space meta chaos. Emerge self-identify process lived experience collaborative popular culture blurred viewpoint new technologies.</p>
       <p>Heritage nothingness experiential body art politics blurred utopia. Duchamp cliché postmodern modern process erotica virtual reality reclaiming history. Experiential destabilize ritual utilitarian Fluxus ghosts horror. Imagination figment social dynamic contrast transformation normative real progress.</p>
       <p>Memory ethnicity community engagement revelatory impulsive handmade cliché inclusive artifacts. Consumerist outsider subversive mythology genius form poetic. Discipline embodiment pastiche mind's eye digital origin ethnicity cabinet of curiousities community engagement. Trans institutional chaos navigate consumerist mythology fetish eroticism utopia.</p>
       <!-- Maybe add an anchor link example. -->
     </main>
   </body>
 </html>

							

Let’s install the Live Server plugin, to give us quick/auto reloading! I think this is a bit easier than the Live Preview one we looked at before, but both are fine. Mind your ergonomics!

Let’s add in our reset to start with a “clean slate”:

								 <link href="https://core-interaction.github.io/assets/styles/reset.css" rel="stylesheet">

							

And I’ll demo a few common layout properties from today’s lecture.
- Space between our elements with margin-top
- Controlling our line lengths with max-width
- Centering a content block with margin: 0 auto;
- Adding background-color with padding
- position: fixed; for a navigation element
- Whatever anyone else wants, if we have time!

For next week

Read the full box-model lecture, above! There are lots of specific examples there for you to use in your work. I expect to start seeing them!
Complete the third entry for your Harmonic Collection projects and add it to our doc, as we do:

Harmonic Collection entries
And we’re also going to do our next reading:

The Web’s Grain
Frank Chimero, 2015

This is much shorter than What Is Code?, but still a decent length. Leave yourself time. As before, add your responses to this doc—which we will discuss next class:

The Web’s Grain responses

Harmonic Collection review

More CSS!

Let’s try it out

For next week

Session recording