Skip to content

Separating Content from Display, a.k.a. Intro to Webslinging

Texts to have read:

  • Notes and suggestions for revising the audio project

Work to have done:

  • Finalized, at least for now, your audio project (soundwriting remediation), and pushed to GitHub if possible
  • Add a link from your GitHub README.md file to your Box folder, if you're using the Box folder

Plan for the Day

Welcome to the second half of the semester!

Let's look at the calendar. (5 min)

In-class writing (5-10 min)

Over the weekend, you wrote a reflection on your audio project; now, take a few minutes to write a broader reflection on the semester as a whole. Given your goals and expectations when you began this class, what have you begun to learn, and what, especially, haven't you begun to learn? What skills do you want to have practiced before the semester is over? Can you think of any projects you might compose over the next month or so that would help you get that practice?

Take 5-10 minutes. I won't collect these directly, but you will use them to write a pitch for a collaborative project soon.

Intro to the web-design unit assignment (10 min)

As is my wont, I've tried to present the assignment prompt in the form of the genre assigned. With no claims that this is anywhere near perfect, let's have a look at that prompt.

Intro to markup (10 min)

Can someone remind us all what HTML stands for?

How about CSS?

Let's look at what that separation allows. Come with me to the CSS Zen Garden.

"Web Design in 4 Minutes" (15+ min)

Because time-in-class is short, and because we have a wide range of web design experience among us, I'm going to accelerate past the beginning for a moment. In the process, we'll see examples of some of the essential things you can do with CSS – but we'll skip over the breadth of information you'd need to build something like this from scratch. My hope is that, having been to the top of the mountain, you'll have a better sense of why it's worth trekking across the desert of the tutorials to get back up there on your own two feet typing hands.

I expect this will take a bit more than four minutes, because I fully plan to interject, and I hope you will, too. But that's really what this is called:
http://jgthms.com/web-design-in-4-minutes

Using your browser's inspector (10 min)

I really do like that tutorial I posted for homework last time: "html & css is hard (but it doesn't have to be)". If you're going to go linearly from zero to skillz, I do recommend that route, and I'm going to assign you to read more in it over the weekend.

But when you see something cool and you just want to know how it works, you have Developer Tools already baked into your browser. (Unless you use Internet Explorer. Because it's not a "modern browser." So, um. Please don't use Internet Explorer any more. If you must stick with Microsoft, upgrade to Edge.)

In general, the easiest way to activate the dev tools is to right-click on what you want to inspect, and click "Inspect Element" or something like it.

DevTool Tips for modern browsers:

We can practice with that assignment sheet website I made.

EXT: https://css-tricks.com/how-css-selectors-work/

Homework for Next Time

  • Inputs
    • (Re)read chapters 2 and 3 of Writer/Designer, on "Analyzing Multimodal Projects" and "Choosing a Genre and Pitching Your Project," respectively.
  • Outputs

  • Do the Process! activity on page 37: "Analyzing a Web Site's Design Choices."

    • Use your browser's developer tools (e.g. the Chrome inspector) to view the html and css of the website you chose for this exercise. How are the chunks of content organized behind the scenes?
    • Post your analysis to WordPress under the new Reflections subcategory.
  • Sign up for a midterm conference with Ben over the next 2-3 weeks (absolute latest deadline: 11/9)
css.php