Today’s topics

• Using JS in the browser
• The DOM: the Document Object Model
• DOM manipulation with JS
• JS Events

Project

JavaScript Calculator

Link to the assignment invitation

Links and resources

• CSS-Tricks: What Is the DOM?
• MDN Introduction to Events
• MDN Event Reference
• DOM Manipulation with Vanilla JS
• Chapters 13-15 of Eloquent JavaScript

⭐️EXTRA/TMI

This resource is really not at all necessary to understand or do the project, but if you want to know more about the concept of tree structures in computer science, check out this piece from Vaidehi Joshi’s BaseCS blog series. She is awesome! There is also a thoroughly delightful accompanying BaseCS podcast with the equally amazing Saron Yitbarek.

• BaseCS blog series: How Not to be Stumped by Trees

And here is more info about what is happening when a browser renders a page – very interesting, but definitely not necessary at this stage:

• Browser rendering engine

Since this came up in class, I’ll add a reference here. This is the documentation for the ternary operator, the alternative syntax some folks used in their JS functions. Most helpful for short expressions – you’ll also see it used in React:

• MDN ternary operator

AND…if you would like to know more about the JavaScript Event Loop and how it works, I highly recommend this resource. Don’t miss the video of the conference talk that goes along with it – it’s excellent:

• Loupe: Visualizing the JS Event Loop

Code, slides, and video from class

• class slides PDF
• morning class video Access Password: 4h^05I

Today’s topics

• Using arrays
• Iteration: using loops with arrays
• Transforming arrays with map, reduce, and filter

Project

JavaScript Problem Set 2

Link to the assignment invitation

Links and resources

• MDN Loops and Iteration
• MDN Array
• A pretty good explanation of map, filter, and reduce
• map, filter, and reduce in a tweet
• A Visualization of What Reduce Does

⭐️EXTRA/TMI

• Eloquent JavaScript Chapter 5: Higher Order Functions

Code, slides, and video from class

• class slides PDF
• morning class video Access Password: 6X@13Q@.
• afternoon class video Access Password: 9a%f3$87

Today’s topics

• Basic programming concepts in JavaScript
• Using variables, data types, conditionals, loops, and functions

Project

JavaScript Problem Set 1

Link to the assignment invitation

TODO

1. Read So You Want to Be a Wizard by Julia Evans
2. MDN JS First Steps - The “Guides” section on this page is a good place to start familiarizing yourself with the basics of JS. You can jump in to whatever topic on that Guide list looks interesting to you.
3. JavaScript homework: problem set 1

Links and resources

• So You Want to Be a Wizard
• MDN JavaScript
• Kyle Simpson’s You Don’t Know JS: Get Started
• Eloquent JavaScript
• JS Equality Table
• MDN Falsy in JS
• MDN Truthy in JS

⭐️EXTRA/TMI

• Project Euler
• Exercism.io

Code, slides, and video from class

• class slides PDF
• morning class video Access Password: 4B^3..21
• afternoon class video Access Password: 8i@u$@6A

Today’s topics

• CSS layout with flexbox
• Responsive web design, media queries, and breakpoints
• Basic web design principles

Project

Build a professional portfolio site

Link to the assignment invitation

You can start work on this tomorrow, Friday, after you turn in the dog adoption website.

This assignment is due on Tuesday, May 26, at 9:30 am.

Links and resources

• CSS-Tricks A Complete Guide to Flexbox
• How Flexbox Works with gifs
• More Flexbox with gifs
• CSS-Tricks Flexbox Layout Thought Process
• CSS-Tricks flex property
• CSS-Tricks Guide to Centering Things
• MDN Using Media Queries
• How to use media queries alongside Grid and Flexbox

Design

• 10 Cheat Codes for designing user interfaces
• 7 Rules for Creating Gorgeous UIs
• 7 Rules Part Two
• Practical Color Theory for People Who Code
• Typography for Developers

⭐️EXTRA/TMI

We aren’t using grid or floats in class, but you may want to familiarize yourself at some point. Here are some references.

• CSS-Tricks Complete Guide to Grid
• Floats 101 Demo
• Simple float example

Jen Simmons is a Mozilla developer and educator with a great series on YouTube to teach you css layout best practices using grid and flexbox.

• Jen Simmons: Layout Land

Code, slides, and video from class

• class slides PDF
• flexbox demo code

Today’s topics

• Styling HTML with CSS
• CSS syntax: selectors, properties, values; shorthand properties
• Working with color, text and font properties, and backgrounds
• The box model, margin, and padding
• Units of measurement

Project

Build a Dog Adoption website

Link to the assignment invitation

This assignment is due on Friday, May 22, at 9:30 am.

Links and resources

• MDN CSS Basics
• CSS-Tricks Getting Started with HTML & CSS
• Rachel Andrew: How to Learn CSS
• CSS Diner
• MDN CSS Selectorss
• MDN CSS Reference
• The Box Model in CSS
• How Box Sizing Works

⭐️EXTRA/TMI

• A Look Back at the History of CSS
• Hacks for dealing with specificity
• 58 bytes of css to look great nearly everywhere

Code, slides, and video from class

• class slides PDF
• kitten-in-boxes glitch exercise
• garden store with css example
• adorable kitten exercise with css example
• morning class video Access Password: 5o!%v#=*
• afternoon class video part 1 Access Password: 2g*%H68?
• afternoon class video part 2 Access Password: 2g*%H68?