Week Nº 5

Let’s see how folks retained their CSS:

Topic Quiz

You should have all received some initial feedback via GitHub Issues.

This is a common tool to comment on and track code tasks⁠—another one of the reasons organizations use GitHub. Check off those task lists! We want to see that you’ve tackled them. Some common threads:

• Some folks are behind. You know who you are! If we say we need to see more effort/​engagement from you, we mean it. This course requires more than an hour the night before. </sternteacher>

• Don’t use <br> for spacing! Like we said last week, unless you’re writing us poetry, we shouldn’t see these⁠—use margin or padding instead (we’ll see today).

• Also don’t use <h#> for sizing. Pulling in the reset.css should have negated this⁠—headings are for semantic structure, not size.

  <h2> does not mean smaller than <h1>; it means a new section of content nested under it.

• Likewise <p><em><strong>Something</strong></em></p> is usually a bad sign⁠—you are probably conflating the style with semantics, again. It is probably one tag (or a heading) and the rest will be in CSS! Maybe using a class.

• Give yourself more material. Some folks hadn’t pulled in their source text (or enough of it), and almost all the projects need more varied/​unique elements to work with.

  Pull out some blockquote, add links and “metadata” around your text, put in some page “furniture” with a nav and footer. Enrich these documents semantically, then stylistically. Make it interesting; make it yours.

• Only reach for a div when no other semantic elements are appropriate⁠—we probably shouldn’t see any of these in your code, this project! Unless absolutely necessary for some styling trickery.

• Also though, don’t directly mimic/​copy the demo repo! Some folks submissions so far this week are… very close to our example. Interpret the structure for your design and your texts! And for our visual variety, if nothing else.

• It’s best/​easiest to keep id and class names lowercase, and they can’t have spaces (you can always kebab-them).

• In the styles we’ve seen so far⁠—the too-small type continues! Set your :root /​ html type size larger:

  						:root {
  	font-size: 150%;
  }
  
  			
  	

  This is what all your rem values are then based off of⁠—play around with that percentage until it feels right/​comfortable for readability.

• More activity in the Slack would always help. “Check out this cool thing.” Triumphs and tragedies! We’re all in this together.

We’re going to try and get another round of more-visual feedback in this weekend, if we can! But also don’t wait for it; we’ll respond to wherever folks are at.

Your first projects are due! (We know.) Let’s talk about the format for your presentations, adjusting for some hiccups:

Project Nº 1: Notes on Format

You’ll need more than font and color to make your designs work. Today’s main topic will give us some tools:

The Box Model

We’ll spend the remainder of our time working through some of these things together:

2. We “worked ahead” a bit with the example repo we shared in Slack last weekend⁠—adding margin and such in addition to color and type styles. Let’s glance through this together:

   manuscript

3. Some more ergonomics adjustments:

   • Enable the minimap if that is your jam
   • Toggle breadcrumbs and sticky-scroll
   • Speaking of indentation, ⌘ [ and ]
   • Toggle comments with ⌘ /​
   • Maybe a proper find-and-replace
   • Even multi-cursor editing, ⌘ D

4. Right, right, actual code:

   • <meta charset="utf-8"> if you have any weird/​� ▯ characters showing up
   • max-inline-size for body text
   • margin between elements (take off body/​* stuff)
   • padding for the elements with a background, lists
   • border to accentuate quotes, separate areas
   • sticky article headers
   • fixed Top link
   • absolute on header pseudos

5. If we have some time, GitHub niceties:

   • Ignoring things (especially **/.DS_Store) with .gitignore
   • Let’s add a README.md⁠—notes for others/​Future You
   • These are written in Markdown, a mark…up lingua franca which gives us some basic formatting

The entire course site is written in Markdown!

• Add a brief README.md to the root/​base of your repo⁠—describing the project, your readings, how you made it, things you want to remember, etc. This is good GitHub practice! Both for others, and always Future You.

• You’ll be completing the last phase of your Manuscript projects:

  Project Nº 1: Spacing and Refinement

  Layer in the box-model/​layout material from today, and second, refine your design and code based on our feedback. You should emphasize both of these efforts toward your final deliverable.

• We completely recognize that we are very early in our technical progression⁠—so we know that your finished pages will only be approximations or even interpretations of your sketches.

  Don’t let this discourage you; it’s inherent to our medium! Our process is meant to inform the design.

  We’re looking for you to try and problem solve towards your designs. There is often no single correct way, and we want to see your engagement here in discovering your own solutions towards your needs. We are problem solvers, if nothing else.

• When you are done, submit a link to your URL⁠s:

  Submission Form

  Please check that these work outside of your own, signed-in browsers!

• Finally, review the project requirements and our expectations, and prepare for your presentations:

  Project Nº 1: Notes on Format

We’re looking forward to seeing your stuff!