Writer/Designer’s studio: web unit

Work to have done:

• As much of the Interneting is Hard tutorial as you can – at least parts 1-6 (from “Introduction” through “CSS Selectors”), with exercises pushed to your repo’s “tutorials” folder
• More on CSS selectors: the CSS Diner game and/or a CSS-Tricks roundup

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.</p>

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.

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>

Note that:

• The semantic element <nav> automatically communicates the navigation role, so you don’t need to specify it with role.
• 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 {
    height: 3em;            /* Make the navbar taller, easier to click */
    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 */
  }

  .main-nav li {
    padding: 1em;           /* Add a little space around each link */
  }

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

  .main-nav .active a {
    color: #eee;            /* light gray */
  }

  /* etc */

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

Viewing the full page source is great for seeing how professional designers organize their documents. But most of the time, you’ll want to be more targeted: you don’t want to have to sift through everything just to figure out the color or font on that one blockquote or button (or whatever it is you want to imitate and thereby learn from).

Chrome and Firefox (especially Firefox) have great built-in developer tools to “inspect” elements of the page. It’s already available: just right-click anywhere 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.

Crucially, you can also add CSS rules and immediately see what effect they would have on the page. (Safari users, note that the button to add a new rule is on the bottom left, not the top right as in the other two browsers.) Color pickers are an especially nice feature – and perhaps the one thing that Chrome's inspector does better than Firefox's at the moment, in that Chrome lets you change from hex color to RGBA or HSL, and directly adjust saturation / luminosity, e.g. to improve contrast.

2. Ideas for studio

In a moment, I’m going to invite you to set goals for studio time. 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:

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.

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

4. Exit note

Homework for next time

• Do more of the tutorial, including at least Flexbox (8) and Responsive Design (10), if you haven’t yet.
  • As a reminder, you should write out the exercises in the tutorials and push them to your repository – probably in the tutorials subfolder. Once you have them working as presented, feel free to update them to test out ideas for your own site! But do try to confirm you can get them working first. HTML, like all code, is fiddly: punctuation (including spaces) matters for things like close-tags and CSS selectors.
• Separately, also read about Grid Layout (and optionally the followup post on responsive grid).
  • EXT: Want more CSS Grid templates and examples, including CodePens to play with? Try Grid By Example, which also has video tutorials.
• Compose and push a first website preview: a beginning, focused on content and navigation.