Skip to main content

Intro to Markup and Web Design

Texts to have read
Work to have achieved
  • Fork the assignment repo
  • Write a website proposal and post it to the issue queue

Plan for the day:

  1. Introduction to HTML markup and CSS style (30–40 min)
  2. Brief tour of key text editor features (5–10 min)
  3. Start the homework tutorial
  4. EXT: Tour of unit resources
  5. HW for next time

1. Introduction to markup and style

Can I once again get a couple of volunteers to take notes / monitor anonymous questions today?

Begin in the garden

Before we dive in deep, come with me to the CSS Zen Garden.

Some things to notice:

  • Responsive design: the same page can change appearance to suit the “viewscreen” (especially as the width changes).
  • The visual hierarchy holds here, too – including uses of containment and alignment to form groups, and negative space to establish rhythm.
  • So, too, are we retaining the importance of color schemes for both coherence and contrast.
  • Oh, and also? Every page you’ve just seen has exactly the same underlying content: literally the same HTML file.

HTML vs CSS: separating content from display

How? The key is encoding the content separately from the presentation. And that’s where our “web stack” begins: with HTML and CSS.

acronym stands for used for
HTML HyperText Markup Language content, groupings
CSS Cascading Style Sheets display / presentation

In other words, per the tutorial I’m assigning you for homework,

  • HTML is for adding meaning to raw content by marking it up.
  • CSS is for formatting that marked up content.

There are other languages that interact with these two, especially JavaScript, but also PHP and Python and Ruby: they can dynamically generate or change the HTML and CSS. There are also “preprocessor” languages that make it easier to write HTML and CSS in the first place by eliminating some repetition. You’ve already seen one of these: Markdown, the syntax you use in GitHub READMEs and forum posts, is essentially a shortcut form of HTML.

But even with all that complexity, it boils down to this: HTML and CSS are the core of what gets shown on the screen.

HTML gives the document structure

Even if you’ve never used a formal markup language, you already use symbols to highlight one part of a text document and show that it’s different from the rest. Let’s take Markdown as an example:

  • If you want to make something bold, you…
    • put **asterisks** on either side of it.
  • If you want italics, you…
    • put _underscore_ on either side (single asterisks will work, too).
The basic idea is that you need to signal where the marked-up text begins and ends.

The same is true in HTML, but it looks a little different:

what we’re marking Markdown syntax HTML syntax What you get*
strong text **surrounding asterisks** <strong>opening and closing tags</strong> strong text
emphasized text _surrounding underscore_ <em>opening and closing tags</em> emphasized text

Unlike in Markdown, opening and closing tags in HTML aren't exactly the same. But they're almost the same: a closing tag in HTML just adds the slash after the first angle bracket.

You can think of them as being like parentheses: In general, every HTML tag you open, you should close. (You can nest a complete pair of tags inside another pair (like these parentheses), but you can't close the outer pair before closing the inner pair – at least, not without causing problems.)

One nice thing about having the tags themselves marked by angle brackets is that you can add information to them, called parameters:

what we’re marking Markdown syntax HTML syntax what you get
a basic hyperlink [anchor text](http://destination) <a href="http://destination">anchor text</a> anchor text
a hyperlink with special styling no default way to do it! <a href="http://destination" class="alert-success">anchor text</a> anchor text

HTML in practice

Armed with that information, you now know enough to go back to the CSS Zen Garden and see how it’s structured.

Right-click in any blank spot on the page, and choose View Source from the context menu that pops up.

Let’s have a look!

A note about web browsers, especially Safari

NB: Chrome and Firefox have the best tools for web development, as we'll see. If you're using Safari, you won't see View Source by default. But you can activate it under Safari > Preferences > Advanced, down on the bottom: "Show Develop menu in menu bar."

Show me
The option to 'Show Develop menu in menu bar' is at the end of the Advanced tab of Preferences.
Safari's advanced preferences page

While you're there, you may want to tell the Smart Search Field to show the full site address, too. URLs often contain a lot more useful info than just the home page!

A few things to note in the Zen Garden source
  • h1, h2, and h3 are headers, and establish hierarchy, and can be used to generate a page outline. You shouldn't skip levels.
  • p is a paragraph.
  • a, as we saw above, is an anchor for a hyperlink; it almost always has a hypertext reference, or href, as a parameter inside the opening tag.
  • divs are like layer groups: they wrap around content that function as a unit.
  • sections and headers and footers are basically special divs!
  • classes and ids are labels we can use to identify reusable content-types (classes) or unique locations (ids) within the document. They live as parameters inside opening tags.

CSS in practice

CSS works by selecting labeled content – HTML elements or classes, and sometimes other contextual cues – and assigning rules for how to display what’s been selected.

These rules generally live in a style sheet that’s linked inside the head element of the HTML document.

To see this in action, let’s look at the stylesheet I’m using for this site!

You can play

You can View Source on literally any website – though some are more complicated than others.

You can also Inspect a live website, using the same context menu (again, Safari users have this disabled by default), and see all the CSS rules currently being applied to any HTML element you want.

What’s more, you can change or add CSS rules on the fly. (It’ll stay as long as you don’t refresh the page… though you can also copy the new rules before you leave.)

You’ll want to come back to this when you’re working on your own designs!

Text Editor orientation, then start the homework tutorial

For now, though, I suspect for many of you it’ll be most useful to get your feet back on the ground. I’ll be asking you to work through some more concrete tutorials for homework, building out a simple site from a shared design so you can get a feel for the steps before building your own.

Before you leave today, I want to make sure you're able to get up and running with your text editor and a browser, and seeing how they interact.

If you haven’t yet done so, clone your forked repository onto your local computer, and open it up: GitHub Desktop should even give you the option to do so directly in your text editor of choice.

GH Desktop's open in editor button appears when there are no changes to commit.'

If at any time you need to open the files from VS Code directly, you can also open the explorer from the sidebar, and choose your root folder from there.

VS Code's open folder button appears in the explorer when you haven't yet specified your workspace.'

Key code editing features that will make your life easier

Let’s confirm that you can…

  • Create new files and folders within the explorer (right-click on a blank space)

  • Right-click in the explorer to Reveal a file in Finder/Explorer. From there, you can double-click to open an html file in your browser.

  • Split Left / Split Right (right-click any filename)

    • View your HTML and CSS files at the same time! Or any two files. Or three, or six if you want to split top/bottom, too. It’s the best.

Okay, go ahead and start the tutorial!

Excitingly, the website for my up-til-now favorite tutorial is having some pretty major issues (at least intermittently)! But my still-favorite CSS YouTuber, Kevin Powell, very recently launched an introductory tutorial of his own. So I spent a bunch of time yesterday swapping out the tutorial assignments I'd had planned with these new ones.

Please bear with me if the timings aren't quite as worked-out: in fact, if you can keep me up to date with how long you're spending on homework this unit, that will help me fine-tune the assignments in response.

Get through as much as you can of…

Show your work by building out the model website he guides you through, pushing your tutorial code to the tutorials folder of your project repository. (Note, though, that the subfolders there referred to the old tutorial, so you’ll want to replace them with the folders recommended in the new tutorial.)

As Powell explains in the introduction, you can for the most part either read or view the videos – they mostly repeat each other at varying degrees of detail. Some people will find the videos easier to follow, others will find the text easier to search through as a reference. Do whichever you find clearest, or a combination!

I’ll float around and help.

EXT: Web unit resources

If possible, please at least skim through the assets and advice I’ve compiled so far on the course site’s resources page.

If you're already experienced at web design and/or you find yourself breezing through the assigned tutorial, you can find other self-paced learning opportunities here.
Of particular note: Text editor extensions

NB: If there's something you expect VSCode or Pulsar to do, but it doesn't, chances are someone's already coded an Extension to make the program do it.
To search for, install, or otherwise manage extensions, in VS Code, go to View > Extensions or click on the icon that looks like building blocks. You can search from the top bar. In Pulsar, use Packages > Open Package Manager > + Install.

Some extensions I expect you'll find useful:

  • Close HTML/XML tag, by Compulim: adds a keyboard shortcut to automatically detect the last-opened html tag, and close it. Useful for proofreading!

  • Auto Rename Tag, by Jun Han. If you change an h2 to an h3, this will automatically update the corresponding closing or opening tag so you don’t end up with a mismatch.

  • CSS Peek, by Pranay Prakash. Detects definitions for CSS ids and classes from inside your HTML files, by looking in linked stylesheets.

  • Intellisense for CSS Class Names in HTML, by Zignd. Offers autocomplete for CSS class names from linked stylesheets while you’re working in HTML.

  • HTML Preview, by George Oliveira (note that the more-frequently downloaded one, by Thomas Haakon Townsend, is no longer being maintained). Lets you see a preview of your HTML file without having to head to the browser (though you may still want to, for inspector reasons!)

  • Auto-Close Tag, by Jun Han. Every time you open a new HTML tag, the corresponding closing tag will be generated automatically. A lot of people love this, but I find it annoying; your mileage may vary.

Read the README inside any installed package for tips on how to use it. This will open just like any other file, so you can move it, split it, etc.

Homework for Next Time

  • Sign up for Kevin Powell’s HTML & CSS for absolute beginners. It requires a free login, but that’s mainly to help save your progress; you shouldn’t get any spam emails.
    • If you’re unable to log in, even at home (though I’m hopeful the delay will help), you can also work through the old tutorial at Interneting is Hard (but it doesn’t have to be). Work through up through “Hello, CSS”
      • If you’re zooming through: “float” layouts used to be a big deal, but aren’t recommended any more: modern techniques like grid and flex are more flexible, and easier to get right. So please skip that chapter and instead skip ahead to read about Web Typography and Semantic HTML. The Resources page also has links to some resources on Grid layout that will serve you better and that won’t be covered in the old tutorial.
  • Work through the first three modules. Note that you should be able to either read the text or watch the videos: they mostly repeat each other’s content. Use whichever suits your preferences!
  • Show your work by building out the model website he guides you through, pushing your tutorial code to the tutorials folder of your project repository.
    • Note that the subfolders there referred to the old tutorial, so you’ll want to replace them with the folders recommended in the new tutorial.
    • If your local pages are not working the same as in the tutorial videos, please do check with me! I’ll set aside some breakout group time next class, but feel free to email or use the issue queue in the meantime: see if your question’s been answered, and if not, post a new issue, because you’re probably not alone.