🗓️Today’s topics

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

🎯 Project

JavaScript Problem Set 2 - Due Wednesday

Link to the assignment invitation

🔖 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 - This is a pretty intense read but it includes examples of map, filter, and reduce.

🦉 Code, Notes & Video

• JavaScript Arrays notes
• Rebecca’s video on variables
• Rebecca’s video on types
• Rebecca’s video on functions
• Replit with some array examples from notes

🗓️ Today’s topics

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

🎯 Project: JavaScript Problem Set 1

This is due tomorrow (Tuesday) afternoon. We will work on it in class.

Link to the assignment invitation

✅ TODO Today

1. Watch Working Smarter: 5 Steps to Getting Unstuck with Rukia Sheikh-Mohamed
2. Review the notes from class. ⭐ PRO TIP: type out the examples in the notes – not from memory! – and run the code yourself to see what it does. Make some changes and see what happens! 💫
3. Continue these practice exercises, which we started in class. Get through at least the strings and numbers sections.
4. The first assignments for this week, due Tomorrow, Tuesday afternoon. We will work on it in class. JavaScript Practice Part 1

🔖 Resources

• So You Want to Be a Wizard
• MDN JavaScript Basics
• JS Equality Table
• MDN Falsy in JS
• MDN Truthy in JS

🦉 Notes

• Intro to JS Notes/Slides

🗓️ Today’s topics

• CSS backgrounds
• CSS layout with flexbox

🎯 Weekend Project: Dog Adoption

Continue working on your dog adoption website assignment. It’s due Monday morning.

Today you should begin to tackle layout for your site. It is not important that you only have 3 dogs per row on your page but your dogs should be laid out in a grid. If you use flexbox, they should rearrange nicely depending on the width of the browser window.

🔖 Resources

Flexbox

• CSS-Tricks A Complete Guide to Flexbox
• Flexbox Froggy
• How Flexbox Works with gifs
• More Flexbox with gifs
• CSS-Tricks Flexbox Layout Thought Process
• CSS-Tricks flex property
• demo flexbox nav menu with adjustable property values

General CSS

• CSS-Tricks Guide to Centering Things
• CSS-Tricks Tinted Images with Multiple Backgrounds
• MDN: Use CSS to solve common problems

Responsive CSS

• 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

Layout techniques for CSS include a lot of options other than flexbox. This reference summarizes them and gives you a good sense of other things you might see.

• MDN: CSS Layout Reference

A popular alternative to flexbox for layout is called “grid”, also built into CSS. With flexbox you choose to line up your boxes either vertically or horizontally, but with grid you can specify both horizontal and vertical arrangement in the same box.

• CSS-Tricks Complete Guide to Grid
• Grid Garden (from the makers of Flexbox Froggy)

Jen Simmons is a former 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

Before we had flexbox or grid built into CSS, we relied on floats for layout. You should not be using floats to lay out your pages, but you may still see them in other people’s code. Because of that, you may want to familiarize yourself at some point.

• Floats 101 Demo
• Simple float example
• CSS-Tricks All About Floats

🦉 Code, Notes & Code

• Notes on CSS Layout
• Notes on Responsive CSS
• CSS Flexbox

🗓️ 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

✅ TODO today

Between classes:

• Thinkific CSS and Styling unit

Begin working on your dog adoption website. 🐕

You won’t be able to do all of it at once. Start with the html, adding in classes for your elements. Think about how to group your elements together so you can apply styles effectively to groups of things.

🎯 Weekend Project: Build a Dog Adoption website

Link to the assignment invitation

This assignment is due on Monday, March 28, at 9:00 am.

🔖 Resources

Getting Started

• MDN CSS Basics
• CSS-Tricks Getting Started with HTML & CSS
• Rachel Andrew: How to Learn CSS

CSS Selectors & Properties

• CSS Diner -> This goes into a LOT of depth.
• MDN CSS Selectors
• MDN CSS Reference for Property Names
• Hacks for dealing with specificity

Box Model

• The Box Model in CSS
• How Box Sizing Works

⭐️ EXTRA/TMI

• A Look Back at the History of CSS
• 58 bytes of css to look great nearly everywhere
• Coolors Color Palette Generator

🦉 Code & Notes

• CSS Basics notes
• Example from class: bear site with CSS