In Class

We will check in and look at project 1.

I will give a few lectures.

I will also talk to you individually about purchasing your domain and git.

Lectures

HTML vs CSS vs JavaScript (A Metaphorical Adventure)

Project 1 Demo

1. Overview of the Process (40 min) (slides)
2. HTML (33 min)
3. CSS Reset and Fonts (11 min)
4. Adding Classes (8 min)
5. Mobile CSS (59 min)

Reading

Responsive Web Design by Ethan Marcotte (May 2010)

This piece represents important web history: it’s the blog post where the term ‘responsive design’ was coined. Read it for some historical context, but do not take any of the code examples at face-value. Most of them are outdated. In fact, you can stop reading before the section ‘Adapt, respond, and overcome.’

Specifics on CSS Specificity by Chris Coyier

I mention CSS specificity the ‘Overview of the Process’ lecture. It gets pretty esoteric, but if you want to get really good at CSS, read this article. It might save you hours of debugging in the future.

Due Next Week (Sep 22)

Project 1

• After watching all demo lectures, revise your mobile CSS code from scratch starting with these files.
• Also code the desktop view. Note that you’re jumping ahead here again. Next class, I will show how I would code the desktop view.You will need to employ media queries, like so:
  @media screen and (min-width: 800px) {
/* desktop css here */
}

Show & Tell

Michael: Post your discoveries of the week in the #show-and-tell Slack channel and give a short presentation in the beginning of class.

Syllabus

You can review the Syllabus here.

Lectures

Survey of Web Technologies

Due next class (Sep 16)

Get Settled In

• Install Slack and join our group (Here’s the invitation link to join.)
• Install Figma & create a Figma user account
• Install the VS Code editor
• Sign up for a Github account (with your student email address!)
  • Then, get verified for an educational account.

Project 1

Please read the Project 1 Brief.

Due Next Class

For Project #1, concentrate on only two things for next class:

• write the HTML
• write the CSS for small screens (mobile)

Test browser widths between 320 and 500 pixels. (We will deal with the design for larger screens later.)

Don’t worry about the mobile menu button behavior for now. This (hamburger) menu button will eventually show and hide the menu. For this round, the menu items should just be shown expanded as they appear in the mockup.

Here is a video of me walking through how to set up for this project (similar to what I covered in class).

Delivery

Bring your files on your laptop to class.