# 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.

{% embed url="<https://youtu.be/CD2BZFYJ61Q?list=PLcnK74EfSdzZHjRRW7QfKzEGw3X5lR3tg>" %}

#### 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.

{% embed url="<https://www.youtube.com/watch?v=1HLhzOiyL9A>" %}

### 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 CSS Box Model Exercise

{% content-ref url="/pages/-MZWAs4b842zMdS2XZIf" %}
[CSS Box Model](/mern-stack/css-box-model.md)
{% endcontent-ref %}

#### Complete CSS Display Property Exercise

{% content-ref url="/pages/-MYLeRZhFusOH79VJTUS" %}
[CSS Display Property](/mern-stack/css-display-property.md)
{% endcontent-ref %}

#### Complete Orange & Black Exercise

{% content-ref url="/pages/-MZWKo-MqV4ho5yDX7V6" %}
[Orange & Black](/mern-stack/orange-and-black.md)
{% endcontent-ref %}

#### 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.

{% content-ref url="/pages/-MZDogKvW\_KFSoTzzqT\_" %}
[Article CSS](/mern-stack/building-an-article/article-css.md)
{% endcontent-ref %}

#### 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.

{% content-ref url="/pages/-MX5epzFrluSzum1tNO-" %}
[First Article - Chrome Dev Tools](/mern-stack/building-an-article/building-an-article-part-4.md)
{% endcontent-ref %}

### Wednesday May 5th

#### Review CSS Selectors

specificity and inheritance

#### Introduce Grid/Flex

{% content-ref url="/pages/-MZUuJNFWt7F24fBkAZK" %}
[Grid vs Flexbox](/mern-stack/important-css-concepts/grid.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MXOyYqMOZJQSk647K09" %}
[Flexbox](/mern-stack/important-css-concepts/flexbox.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MZkYfhq04vqK248kM\_C" %}
[Grid](/mern-stack/important-css-concepts/grid-1.md)
{% endcontent-ref %}

####

#### Grid/Flex Exercises

Quick flexbox demo.

{% content-ref url="/pages/-MZuJxtEJBYveisj3Vx-" %}
[Four Square](/mern-stack/four-square.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MXcW2iCenEgMEq3uw25" %}
[Grids/Flex](/mern-stack/grids-flex.md)
{% endcontent-ref %}

### Class Recording

{% embed url="<https://www.youtube.com/watch?v=g0uC5NaESIk>" %}

{% embed url="<https://www.youtube.com/watch?v=25-lmB0nKCQ>" %}

&#x20;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.

{% content-ref url="/pages/-MXcW2iCenEgMEq3uw25" %}
[Grids/Flex](/mern-stack/grids-flex.md)
{% endcontent-ref %}

#### Complete Article Grid

Complete the article grid and create a git repository on your local computer.

git init

git add -all

git commit -m"inital checkin"

create a repository on github.

copy and execute the three commands to connect your local repository with the github repository

create the netifly site and submit that url for the assignment

{% content-ref url="/pages/-MXDW1caL3nDX02epmXc" %}
[Article Grid](/mern-stack/article-cards/building-a-landing-page-part-1.md)
{% endcontent-ref %}

### Resources

{% embed url="<https://scrimba.com/learn/flexbox/your-first-flexbox-layout-flexbox-tutorial-canLGCw>" %}

{% embed url="<https://scrimba.com/learn/cssgrid/intro-to-the-css-grid-course-cg9PpTb>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chnn-anne.gitbook.io/mern-stack/assignments/week-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.