In Class

We will review and work on project 3.

I’ll give a lecture on URLs.

Lectures

Parts of a URL

Read/Listen/Watch

Welcome to the Valley of Pain by Matteo Wong
Security in the age of AI 😬

The Psychology of Money podcast: Three Types of Intelligence
Intelligence in the age of AI.
(I highly recommend this podcast for its quest to understand humans and helpful advice on personal finance.)

Why Is CSS So Weird by Miriam Suzanne, Mozilla Developer channel (15 min)
A video from way before AI: Part history lecture and part pep talk, an insightful perspective on why CSS is what it is.

Project 3

Due Next Class (Nov 3):

Finalize the project. Final critique next class!

• Ask one of your class mates for their content and implement the second interview
• Revise and improve your code based on in-class feedback

Delivery

• Upload this new version to github pages and map a custom domain: project3.coding.yourdomain.com

Show & Tell for Next Class

Angel: Post a discovery of the week in the #show-and-tell Slack channel.

In Class

You’ll mostly work in class on your interview project.

Project 3

Due Next Class (Oct 27)

Continue coding:

• Revise and improve your HTML and CSS
• Implement dark mode (remember, CSS variables!)
• Design and code your landing page
• Optional: Implement the JavaScript plugin
  • Make sure that you read the plugin’s instructions carefully. This shouldn’t be too difficult, but if you miss a step, it’s easy to get stuck. Seek help via our Slack group if you’re not succeeding. Or ask your closest AI friend 👾

Delivery:

• Upload this new version to github pages.
  Ideally you map the following custom domain: project3.coding.yourdomain.com

Show & Tell

Dom: Post your discovery of the week in the #show-and-tell Slack channel.

In Class

I will give a demo on Accessibility and Typographic Scale.
(download example starting files)

We will also look at your Figma designs for the Interview Project and there is time to work in class.

Reading

Typographic Scale by Joseph Mueller
A rational approach to type sizes.

typescale.com
Tool to create and test type scales.

Full-Bleed Layout Using CSS Grid by Josh Comeau
An interesting way of coding a layout that includes full-bleed images.

Project 3 (Interview)

Due Next Class (Oct 20):

Code the HTML and CSS for one of your interviews.

• Don’t yet worry about the dark mode or implementing the javascript plugin for now
• Concentrate on proper HTML markup (with a proper document outline) and rock-solid, responsive, mobile-first CSS

Delivery

Bring your code to next week’s class.

Show & Tell for Next Class

Amber: Post your discovery of the week in the #show-and-tell Slack channel.

In Class

We will critique Project 2.

I will introduce Project 3.

We will figure out how to map a subdomain to GitHub.

Project 3

Project Brief: Interview Web Publication

Due Next Class (Oct 13)

🐌Very important: If scheduling your interview takes longer than expected, don’t delay your design work. Build your layout using placeholder text and images.

1. Conduct your interview. Do this as soon as possible!
2. Mock up the design for the entire interview page in Figma.
   • Create a mobile version (375px wide) and a desktop version (1024px wide). Make the height as tall as it needs to be.
   • Make sure the typefaces you choose can be used on the web (i.e., use Google Fonts or Adobe Fonts or something freely available).
   • Make sure all text/background color combinations meet WCAG AA contrast requirements. Use the A11y – Color Contrast Checker plugin for Figma (or Figma’s built-in contrast checker).
   • Don’t worry about designing the dark mode color palette yet. But add a color-mode toggle button in your layout.
3. Find one example of inspirational long-form typography to share with your classmates in the #show-and-tell channel.

Delivery

Post your Figma file’s “Share Prototype” link in the #general channel.

Readings

Why Does Color Contrast Matter For Website Accessibility?
You will need to know about color accessibility for your design of Project 3.

In Class

Project 1 Wrap-Up: Mobile Menu (40 min)

Intro to Git

Intro to GitHub

Starter Kit

Download this starterkit folder.

The folder includes a basic setup of the files and folder you need to start a website project.

🚨 Use it as the starting point for every project this class. 🚨

Over time, you might adjust it to make it your very own starter kit.

Project 2

Project Brief: Twelve Things

Due next class!

Reading

An Interactive Guide to CSS Grid by Josh W Comeau

An Interactive Guide to CSS Transitions by Josh W Comeau

Next Class is on Zoom!

My apologies—I’m traveling next week to give a lecture in Houston.

We’ll have class on zoom instead. Here is the Zoom Link.

Show & Tell

Annette: Post your discovery of the week in the #show-and-tell Slack channel.

 

In-class

CSS selectors (23 min) (slides)

Other Lectures

Project 1 Demo – Desktop CSS (62 min)

Reading

CSS Naming Conventions that Will Save You Hours of Debugging by Emmanuel Ohans

I already introduced the BEM naming convention. Here’s a great little article reiterating why it’s such a great framework. (You can stop reading at the section “CSS Names with JavaScript Hooks.”)

Due Next Week

Project 1

• Last round of Washoe!
  • 😢I know.
    
• After watching the Project 1 Demo lecture (see above):
  • re-write your desktop CSS code from scratch starting with these files
• Some added creativity:
  • Come up with your own color scheme for the page
  • Add hover effects for all links
• Challenge:
  • I included JavaScript code for the hamburger menu button. When the button is clicked, the class show-menu is added to the <body> tag. When the button is clicked again, the class is removed.
  • Based on this setup, can you write CSS that shows and hides the mobile menu? (Tip: You’ll have to use a descendant selector.)

Show & Tell

Becca: Post your discovery of the week in the #show-and-tell Slack channel.

 

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.