Writer/Designer’s studio: from structure toward layout

Work to have done:

As much of the Interneting is Hard (but it doesn’t have to be) tutorial as you can – at least parts 1-6 (from “Introduction” through “CSS Selectors”) plus 8 (“Flexbox”) and 10 (“Responsive Design”) – as well as the Medium post on Grid Layout (and optionally responsive grid)
A first website preview, focused on content and structure (html)

Plan for the day:

Share and talk it out
Resources, some new
Set goals
Go forth! (Studio time or talk to me for demo / Q&A)
Revisit and update your goals
HW for next time

In breakout rooms, share and discuss the previews you brought in for today… and talk through the questions and excitements that came up as you did it.

Write down any questions you’d like to bring to me in the Google doc

EXT: I know some people are feeling behind, for various reasons. If you run out of previews to talk through in your group, but still have time left, continue in the tutorial assignments from where you left off – and add in my screencast video on Canvas (see below) after you finish with Flexbox.

2. Resources, some new (15 min)

I’ve been fielding a few questions by email since last class, and I expect you may have more now. Some things I think might help more than just the people I’m responding to:

A screencast on `<div>`, repetition, and flexbox

Rather than take up class time on these things, which I do think are important, I recorded myself talking about ways to level up beyond the Flexbox tutorial; you can find that video in the Panopto section on Canvas.

When to use Grid, and when Flexbox?

Generally speaking, if you only have one dimension (one row, or one column), Flexbox is your friend. To put that another way: use Grid for layout, Flexbox for components. (That link goes to a nice explanation, with examples, of when you’d want to use which.) Some things really are harder with Grid!

And remember that HTML is often about nesting boxes inside boxes: there’s no reason you can’t have a flexbox inside a gridbox.

Do we have to use Grid or Flexbox?

Not at all! You can lay out your page using real widths and heights, and if you express them as responsive units (em or %), you’ll even get scaling effects as the viewport changes size. To get a horizontal centering effect, you can use margin: 0 auto; on any block element with a declared width, or text-align: center; on any inline element, and you should be good to go.

That said, for dynamically adjusting space between elements, and especially for centering things vertically, these new layout tools are definitely your friends.

Can I learn Flexbox in a more bloodthirsty way?

Try Flexbox Zombies, an interactive course that’s currently free. In it, you imagine the flex layout as aiming a crossbow at undead monsters: you have to position the targets using CSS rules to survive. It’s kind of slow-paced, but that’s because it’s filled with challenges for you to solve, with the idea being that typing out the rules many times will make them second-nature by the end.

3. Set goals for studio

What do you need to do to level up on HTML and CSS in the direction of your specific project? As usual, please write down some goals in the google doc, so I can get an overview of where everyone’s at – and so you have a marker to come back to for your reflections, later.

Also for my sake and yours, please **be as specific as possible:** e.g. rather than “working on my site,” you might say, “choosing images for photo gallery” or “building grid for layout with top menu and areas for paragraphs with a featured image” etc etc.

4. Go forth!

I’ll stay in the main room, for Q&A or demo purposes, but please do call me into a room if you need me!

Things I expect people have questions about include: grid layout, responsive design and media queries. But you let me know and I’ll try to meet you wherever you are.

As usual, to get credit for asynchronous participation, please add your intentions and exit notes to the google doc when you start and stop working – and aim to work for at least two 20-minute pomodoros.

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

5. 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

Continue the tutorial – or revisit the sections that are still confusing. I especially encourage you to look at the sections on Semantic HTML (Wayback version) and Web Typography (Wayback), and if you’re having trouble with positioning even after looking at the resources I’ve shared, try reading the Advanced Positioning (Wayback) section.
- NB: I’ve been getting the Interneting Is Hard site to load in Chrome without Wayback, for whatever reason. Maybe I just have it cached.
- Email me with any questions, noting that I can help fastest if you include a screenshot and a link. Better yet, create a New Issue! Then my answer to you can help others, too.
Compose and push a second website preview, now adding or updating layout – or at least taking a stab at it, so you know what questions or concerns you’ll have. A full draft of your website project is due in one week.