Week 3 - May 1st, 5th

Saturday May 1st

Review FE Mentors 3 Column Preview Challenge

Introduce CSS vars

Introduce @mediaQueries

Introduce CSS Grid

Work on 2-3 CSS exercises in class.

First Article CSS

Class Recording

Before you watch this one, note that I created a new recording for the section of the class where I walked through styling the First Article. You should skip that section in this video and watch the one after this one.

Article CSS Re-recording

I did a really bad job covering the styling of this article. I messed up and was using the wrong version of the article. So I created a new recording for that section of the class.

Homework

The three exercises that we worked on in class should be completed if you didn't do so in class. I am not going to make them as an assignment, but you should definitely spend the time on them to where you can pretty easily go through the styling steps and understand what's happening.

Complete Article CSS

This is an extension of the First Article project, so you should be working in the same project and just checking in your new code to GitHub and providing the Netifly URL with your assignment.

Article CSS

Chrome Dev Tools Video

This is not an assignment that has to be turned in, but a useful exercise. First watch the 10 minute video overviewing some of the main features of the Chrome Dev Tools, and then experiment with trying to perform some of the tasks on the First Article page.

First Article - Chrome Dev Tools

Wednesday May 5th

Review CSS Selectors

specificity and inheritance

Introduce Grid/Flex

Grid vs Flexbox Flexbox Grid

Grid/Flex Exercises

Quick flexbox demo.

Four Square Grids/Flex

Class Recording

Thursday 10am video link https://www.youtube.com/watch?v=25-lmB0nKCQ

Home work

Grid-Flex Exercise

Review the four grid/flex layout exercises. This doesn't need to be checked in, but you should work through them to make sure you are understanding how they work.

Grids/Flex