Skip to main content

Core Concepts of HTML & CSS + Studio

Work to have done:

Plan for the day:

  1. Key Concepts and Practical Takeaways (20-30 min)
  2. Intro to studio
  3. Studio (25 min)

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

In groups at your tables, 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. .

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.

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 selectors?
  3. How do you mark up comments in CSS?
    • EXT: what’s the shortcut in your text editor for (un)commenting out 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: Talk through the example sites from last year (from HW reading before break, and pasted again below for convenience), looking at the HTML with either View Source or your browser’s inspector. How are the pages structured? Any surprises? Any changes you’d want to make? Anything you’d want to borrow for your own site?

Convenient links

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

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

3. Studio / Practice (45-60 min)

See below for options, then please go to bit.ly/cdm2022spring-notes and let me know what you're working on; this helps me figure out where I can be most helpful.

  1. If your tutorial pages aren’t looking like the examples, 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 solidly under your belt.

  2. The assignment for Thursday includes another two chapters in the tutorial and a game to play (or a blog post to read) about more advanced CSS selectors. If you haven’t yet done so, why not start those homework assignments?

  3. If you’re feeling good about all that, start translating your website sketches – especially your website content – into HTML and then CSS. Begin by adapting the tutorials, once you know you’ve got them working, to include your own materials.
    • Use the docs folder for files you’ll eventually want to publish on the web.
    • Call the file for your landing/home page index.html. You can always change the <title>.
  4. Above all, call me over for help as needed.

EXT: If you’ve already done the above, and you’re good on what a CSS class is, and how to add it to an HTML element, read up on CSS frameworks on our course Resources page. They’re basically a bunch of pre-created CSS classes you can use to design your own layout from scratch: a little like Lego for web design. (I use the Bootstrap framework on this site.)

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.
  • Please do, though 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.)
  • As you’re able to get the tutorials working, you can start adapting the files there to include your own content; save those more personal files in the docs folder.