Skip to main content

Core Concepts of HTML & CSS + Generative Studio

Work to have done:

Plan for the day:

  1. Key Concepts and Practical Takeaways (20-30 min)
  2. Loop writing (10 min)
  3. Offline sketching (10 min) – you’ll want paper again. Lined paper is fine (and in fact, may help with layout)
  4. Studio (25 min)

1. Key Concepts and Practical Takeaways (20-30 min)

In breakout rooms, work through the following questions, and be ready to discuss with the whole class if time allows. Some you should be able to go through rather quickly, while others may require more discussion. (For example, some of the True/False questions are actually a little subtler than that framing suggests: e.g. mostly true, except when __.)

Please take turns within your group reading questions and proposing answers, so that everyone in the group bears responsibility. Also, to help me keep track of where everyone's up to, please take notes in the shared google doc.

Speedy teams, note the EXTs at the end. Conversely, feel free to skip the EXTs in the middle if you’re running behind – we want to make sure you have enough writing time in the second part of class.

Call me in if you can’t come to a resolution! I will share my answer key at the end.

To get async credit for this portion of the class, please answer these questions in your own space (i.e. not in the gdoc) and send your answers my way. You'll also want to do the generative exercise a bit further down!

Organizing files

  1. True or False: filenames are not case sensitive, so it doesn’t matter if something is uppercase or lowercase.
  2. T / F: web browsers know how to handle spaces in filenames, so it doesn’t matter if you have spaces in a filename or not.
  3. T / F: all files referred to in an html document have to be in the same folder as that html document.
  4. What’s one advantage of using a relative link? What’s one risk?

EXT: What are some html elements can you use to refer to an external file? (Hint: you should know at least three already.) Where would you put the filename within each of those elements?

HTML basics

  1. What kind of information goes in the <head>?
  2. How do you mark up comments in HTML?
  3. T / F: every HTML element has an opening tag, some element content, and a closing tag.
  4. T / F: in rendering an HTML file, there’s no difference between a space, a blank line, or five blank lines.

EXT: What three tags should pretty much every published page’s <head> include?

Image basics

  1. T / F: every <img> tag should specify a source file.
  2. T / F: every <img> tag should specify a width and a height.
    • What happens if you only set one?
  3. T / F: every <img> tag should specify alternative text with alt.

EXT: What makes .jpg files better for photographs than .png files? What makes .png files better for simple diagrams?

CSS basics

  1. What do the curly brackets and semicolons in CSS rules do?
  2. How can you apply a single CSS rule to multiple HTML elements?
  3. How do you mark up comments in CSS?
    • EXT: what’s the shortcut in your text editor for commenting out/in the current line?
  4. Name three different places you could store CSS rules.
  5. Why is it generally a bad idea to use inline styles?

EXT: Given the three locations in question 4, when would you want to use each? What are the pros and cons?

If your group finishes early, (a) let me know you're done, (b) download my answer key and confirm we're on the same page. If not, let me know that, too!

Then (c) try the EXT activities below while you wait for the other groups to catch up.

EXT 1: Flip through these example web-design sketches. What design patterns do you notice? What drawing conventions?

EXT 2: Want to see some sites from past years? Here are a few (more to follow):

2. Anything to discuss further? (5-8 min)

Let me know if you have any challenges or questions after reading my answer key!

3. Loop writing (10 min)

The assignment for Tuesday includes another two chapters in the tutorial, a game to play (or a blog post to read) about advanced CSS selectors… and a short proposal for your website project. In a moment, I’ll lead you through a generative writing exercise designed to help you come up with an idea to propose.

Asynchronous participants, please work through the questions on your own! You can listen along to the recording, or you can set yourself a 2-minute timer for each question (or 10 minutes for the whole set of five).
If you're feeling stuck during the loop writing, you can turn to one of the parachute prompts.

Take a few minutes to think in writing about the websites you might want to make. I’ll read a series of questions aloud. Repeat them silently to yourself, and when you feel yourself answering, make a list.

These lists will remain private, unless you choose to share. I won’t ask for them.

  1. What have you been working on, in or out of this class, that you’d like to show the world? What have you made, or done, or pursued?
    • Or: if you’d rather the site not focus on you, what groups, things, or events might you represent?
  2. Is there anything else you might add to the list? A wider context for one of the projects already there, or a related next step?
  3. Is there anything you’re forgetting? Something you were recently talking about, or planning for? Add it to the list.
    • If you haven’t yet included your work for this class, be sure to add it now.

Take a moment now to read back over your lists. How might you group or divide these items? What clusters do they form? Mark these in some way.

Is there one cluster that stands out, that says, me, pick me? Choose one group to work with, at least for today, and name it in some way. Then copy the name into a clean page.

With that chosen subject, write again:

  1. What terms or images come to mind when you think of this subject? … Think about actions… things… descriptors.
  2. I’m going to interrupt you now and ask you to set aside the list, just for now, and ask: What’s the heart of this? What’s the essential component for this cluster of things? What ties them together?

    See if you can summon up the whole of this idea, like it’s right here in the room with you. Where does it live? Is it above you? Inside you? In the palm of your hand? Just sit with your idea for a moment, feeling where you connect to it.

4. Offline sketching (10 min)

And now, draw. Given what's essential, given your knowledge of how websites work, and given the principles of designing for attention we learned last unit, make a few quick sketches of your possible website's landing page.

Consider: How will it look on a phone? On a laptop? What might you add to the layout for a full-sized desktop monitor?

Not sure what that should look like? Here are 33 examples (but no one is asking you to be as elaborate as the most elaborate of these)

  • EXT: Will “inner” pages look the same as the landing page? Sketch out the possible differences. Consider the possibility that someone jumps directly to an inner page (e.g. from Google). What would they need to feel oriented? To get to other pages on the site? (What would you suggest they view next? How might you lead them there?)
  • EXT: Finished one drawing? Make another, using a different system of visually organizing your information.

5. Studio / Practice (20-25 min)

Options!

  • If you haven’t yet done so, why not start the tutorial sections from the homework?
  • Above all, call me over for help as needed. If your html pages aren’t looking like the examples in the tutorial, tell me now, so I can help you get there! You’ll get a lot more out of the later tutorials if you’ve got these first ones under your belt.
  • If you’re feeling good about all that, start gathering materials toward your website, to check feasibility.

Homework for Next Time

  • Do more of the tutorial, getting through at least The Box Model (5) and CSS Selectors (6), if you haven’t yet.
    • Remember that I won’t assign all the sections of the tutorial; you can look ahead in the schedule to see which parts I expect you to read and do, and what’s beyond baseline. You can probably skip Floats.
  • Read more about how CSS selectors work OR if you prefer game-based learning to straight-up reading, try loading and clearing plates at the CSS Diner. (There’s still reading, in the sidebar, which tells you how to win the round.)
  • Write a website proposal, posted to the Issue Queue, including:
    • some text about the idea or appeal you’re hoping to make;
    • some sense of what pages and page sections you expect to include;
    • a prospective assets chart (what you’ll need, where you might get it);
    • at least one design sketch, showing possible layouts; and
    • a link to your repository.
  • EXT: When you’ve finished all that, if you haven’t yet done so, open the docs folder in your forked assignment repo, and read there about how you can take your site public (when you’re ready).