Skip to main content

Writer/Designer’s studio: web unit (content focus)

Texts to have read
Work to have achieved
  • Push your tutorial code to GitHub
  • Optional EXT playing with the selector game, [CSS Diner](https://flukeout.github.io/)

Plan for the day:

  1. Threshold Concepts: what you all need to know
  2. Ideas for studio
  3. Set goals and go forth!
  4. Update your goals

1. Here’s what you need to know today

Start by thinking about structure (i.e. HTML before CSS)

Remember that though you probably have a vision for how your site should look, it makes sense to begin by thinking about the structure of your content. That will give you the material you need to support multiple views, depending on screen size and/or what begins to feel most important.

So I recommend starting by listing and grouping:

  1. What are the content sections your site will include?
  2. How might you group those things hierarchically? That is, what’s the most important for a viewer to encounter first? Which things are (or could be) parts of others, and which things have to be at the same level?
  3. If you can make a nested list of your content areas, that could serve you as a navigation… and probably also a list of headers (h1, h2, etc).

You don’t have to reinvent the wheel

Like other kinds of media, web design has its genres… and certain genre conventions that solve recurring design problems. You can find some of these by looking at the code of websites you like: you can right-click on any page and choose “View Page Source” (or something like it) to see the full rendered HTML page. From there, you can also click the link in the head to see the full stylesheet.

NB: This works a lot better on simple, static sites than, say, an e-commerce site that's tracking your clicks in complex ways. But even there, you should be starting to get a sense of how to skim for the recurring chunks of markup.

For instance, a very common structure you should all know about is this one, for a basic navigation menu:

<nav class="main-nav" id="main-nav">
  <ul>
    <li class="active"><a href="/index.html">Home</a></li>
    <li><a href="/about.html">About the Author</a></li>
    <li><a href="/articles.html">Past Publications</a></li>
    <!-- etc -->
  </ul>
</nav>
Let's look at this in a testing space: https://codepen.io/benmiller314/pen/xxpZrOY?editors=1100

Note that:

  • The semantic element <nav> automatically communicates the navigation role to audio screen readers, helping blind users find their way around your site.
  • We use list items so screen readers can easily enumerate the number of locations
  • You can use a class like “active” to keep site visitors oriented within the space of your site. (There are other ways, too, but this is pretty simple.)

You can then style that menu to your heart’s content:


/***** Main menu styling *****/
  .main-nav {
    background-color: #eee; /* light gray */
  }

  .main-nav a {
    color: #4b8568;         /* dark green */
  }

  .main-nav ul {
    list-style-type: none;  /* Hide the bullets */
    display: flex;          /* Arrange horizontally, not vertically */
    flex-wrap: wrap;
  }

  .main-nav li a {
    display: block;
    padding: 1em 2em;           /* Add a little space around each link */
    text-decoration: none;
  }

  .main-nav .active, .main-nav a:hover, .main-nav a:focus   {
    background-color: #4b8568;  /* dark green, same as link color */
    color: #eee;            /* light gray, same as navbar */
  }

  .main-nav a:hover, .main-nav a:focus {
    text-decoration: underline;
  }

/* etc */

Note that:

  • We don’t need a specialized “button” element for navigation: we’re not submitting anything, we’re following hyperlinks.
  • Instead, we can just style our <a> or <li> directly (or by adding classes directly to those elements), so it looks and feels like a button.
  • This is a direct outcome of the Box Model you read about in the tutorial.

When you’re ready to work on appearances, test CSS rules directly in the browser

As I mentioned last time, there are real advantages to testing and revising CSS rules directly in the browser’s inspector – especially Chrome (my preference for color) and Firefox (my preference for layout and accessibility checks). Just right-click on any element and choose “inspect element” to see the local html, the full cascade of CSS rules that apply to it, and a few other features beside.

I won’t repeat the demo, but I’ve recorded a brief screencast demonstration of these tools, should you wish to see it at home.

2. Ideas for studio

In a moment, I’m going to invite you to set goals for studio time: if you’ve kept up to date with the tutorials, you should now know enough to really start marking up your own content!

If you haven’t yet sorted out your navigation, that’s a great place to start.

Here are some other things to consider as you move forward:

If you're working on the Interneting is Hard tutorial, skip ahead to the semantic html tutorial.

You already know that <div> can be used to group items together, e.g. to give them a shared background or border. (They're also kind of key for layout.) But they don't signal what kind of group you're looking at. HTML now has semantic elements like <header<, <main>, <footer>, <aside>, and more that signal the role each chunk of code plays in your site.

This is especially important for assistive devices and their users. And no matter your interface, while coding you may well find them easier to work with than <div>, <div>, <div> all the time!

Your homepage should be called index.html.

I'm going to recommend that everyone use GitHub Pages to publish your sites unless you have a good reason not to. (And you might; but talk to me about it.) In that system, you store your files in a GitHub repository (often in a subdirectory called "docs"), so GH knows where to look to find your stuff. By default, it'll show your README.md file as the home page, unless it finds a file called index.html or index.md.

Therefore, rather than call your landing page myproject.html, landing.html, or homepage.html, you're better off using the index.html name. You can always change the <title> to give it a more accurate name in the browser tab. : )

Strive for semanticity.

Ask yourself:

  • Can you tell what's going on just by reading the HTML file?
  • Do your header levels (<h1>, <h2>, etc) correspond to your intended hierarchy? Remember not to skip levels: that breaks the .
  • Does the HTML hard-code any display (e.g. <center>, <b>) that should be in the CSS? (Older tutorials will suggest this, but it's not a great idea, so you won't find it in either of the tutorials I assigned.)

Let appearances reflect the structure, not vice-versa

This one's related to the previous item, but applies especially when you're starting to think about appearances. Visuals are volatile; structure should be steady. It can be very tempting to just accept your browser's default styles as a given, e.g. to jump from a large <h1> page title to an <h5> subtitle because the latter "looks about right." But this would mis-represent the actual structure of the document – and would seriously confuse screen-reader software trying to present the page to a blind visitor. Instead, use your browser's Inspector to take note of the CSS rules defining that <h5>, and apply them to <h2> in your stylesheet.

Done with content, ready for CSS? Start with some basic spacing

As Kevin Powell will explain in the video you'll all watch for homework, "Before you write a single line of CSS, your website is responsive." If you keep your styles minimal, you'll have a fully-functional website, especially suited for smaller screens.

In particular, I recommend making the following quick changes for pretty much any site (and you can always make it more complex later):

    
    /* include padding/margin in your width declarations */
    * {
        box-sizing: border-box;  
    }

    /* basic spacing */
    body {
        padding: 1em;     /* avoid crowding content against the edges */
    }

    /* make the appearance less "default".
       Note that this is a light theme; you could also make a dark theme by reversing the colors. */
    body {
        font-family: sans-serif; /* for body text on a screen, sans-serifs are often easier to read */
        color: #333;             /* pull back from hard black */
        background-color: #ddd;  /* pull back from hard white */
    }

    /* Use this class on section, article, or div elements
       to keep text lines from getting too long to comfortably read */
    .wrapper {
        max-width: 50em;  
    }

    /* keep images from overflowing the viewport */
    img {
        max-height: 100vh;
        max-width: 100vw;
    }

3. Go forth!

In the shared google doc, set a goal for today: what do you need to do to level up on HTML, CSS, and resource gathering to move toward your specific project? Note that a Website Preview is due a week from today.

If you haven't yet, please do expand and read my notes above. Also remember that you have many Resources on our website; for today, might I especially point out the helpful VS Code extensions, especially Close HTML/XML Tag? Pulsar should have the equivalent function already installed when you download it; look for the keyboard shortcut under Packages > Bracket Matcher > Close Current Tag.

Save about five minutes at the end to write me a brief exit note about what you’ve been working on.

4. Exit note

Before you leave, just as a way for me to check in, I'd like to hear more about what happened today: Did you decide on your navigation? Block out the html? Make some progress on a stylesheet? Reply to your note in the google doc.

Homework for next time