Week 5, September 27

Briefly, Feedback #

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:

• Don’t use br for spacing! Unless you’re writing us poetry, we shouldn’t see these—use margin or padding instead (we’ll see today).

• Also no h# for sizing. Pulling in the reset.css will have negated this—headings are for semantic structure, not size.

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

• Only reach for a div when no other semantic elements are appropriate—we probably shouldn’t see any of these in your code, for this project!

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

• To reiterate: 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!

• Relatedly, everyone should be writing their own code here—other than your copied text and the provided reset.css.

• More activity in the Slack would help. Triumphs and tragedies! We’re all in this together.

About Next Week #

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

Project 1 Notes on Format

From Last Week #

A couple things we skipped past last week:

An Intro to CSS

Some Proper Layout #

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

Demo Time! #

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

1. First, let’s try the Zoom stuff out ahead of next week—to get a feel for if it is workable. Our pals in IT have a write-up for this!

   • Head to newschool.zoom.us
   • You can SIGN IN there, or click HOST to get right into one (if you’ve already done SSO)
   • Make sure your mic and camera are on and share your screen!
   • After your nerves have settled and such, start the recording (sometimes under ⊙ More )
   • It doesn’t matter to us if you use cloud or on this computer recording! Whatever gets you to that Yourname.mp4 at the end

2. Okay, back to code. We “worked ahead” a bit with the example repo we shared in Slack last weekend—adding margin and padding in addition to color and type styles. Let’s go through this together.

   manuscript

   This is a branch of the repo that has the layout properties removed.

3. Some more ergonomics adjustments:

   • Side-by-side (tabbed) editing—HTML and CSS simultaneously
   • Enable the minimap if that is your jam
   • Toggle breadcrumbs and sticky-scroll
   • Make sure indentation guides are on (in settings)
   • Speaking of indentation, ⌘ ~ Ctrl [ and ]
   • Toggle a comment with ⌘ ~ Ctrl /
   • Maybe a find-and-replace

4. Right, right, actual code:

   • <meta charset="utf-8"> if you have any weird characters showing up
   • max-width for body text
   • margin between elements
   • 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 with .gitignore
   • Let’s add a README.md
   • These are written in Markdown, which gives us some basic formatting

For Next Week #

• 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 Future You.

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

  Project 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!

  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 here, if nothing else.

• When you are done, submit a link to your URLs:

  Submission Form

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

• Prepare your video presentations and upload them by the end of class time next week! Help us make this async thing work.

  Notes on Format

Good night, and good luck.