# 1 - Semantic HTML and CSS

{% hint style="info" %}
If this is your first day, check the [first day tips](https://volunteers.migracode.org/coding-course/class-information/teaching-instructions/html-css/broken-reference)
{% endhint %}

## Lesson Resources

### Lesson Objective

This is an opportunity for any students who are struggling to get another pass at the basics. Even if it seems like some students get it quickly, try not to rush through this section.

### Comments and Tips

**HTML Syntax**

When conducting the parent/child tags exercise, don't forget to point out that the first `<p>` tag is both a parent *and* a child.

**CSS Selectors**

Students may need more or less review depending on how much they remember from their application process. If students are struggling with the basics, have them go through this [CSS Introduction course](https://www.codecademy.com/courses/web-beginner-en-TlhFi/resume?curriculum_id=50579fb998b470000202dc8b), starting with the CSS Syntax lesson. Mentors should help guide them through and identify where they're struggling.

Students should set the button background color using the `.btn-primary` selector, and adjust the white button using the `.btn-secondary` selector. If they use the `.btn` selector, they'll effect both buttons. When they do that, use it as a lesson in how Object-Oriented CSS works and how to choose the right selector.

### **Exercises solutions**

Second exercise, the answer will look something like this:

```
.nav-link {
  border: 1px solid transparent;
}
.nav-link:hover,
.nav-link:focus {
  border-color: #ce5f31;
}
```

### Presentations

* [Week 1 - CSS \[Google Slides\] - 28/05/2020](https://docs.google.com/presentation/d/18gCQlySM5kNaK4og4-XF8kHlyJVZUrRcbRK1zXC5SBg/edit#slide=id.p)
  * Created by Birmingham

### Important Links

* [Syllabus](https://migracode-barcelona.gitbook.io/syllabus/html-css/week-1)
* [Instructor's Guide](https://migracode-barcelona.gitbook.io/instructors-guide/html-css/week-1)
* [Suggested Homework](https://migracode-barcelona.gitbook.io/instructors-guide/html-css/week-1#homework-suggestion) in the Instructor's Guide
* [Trello board](https://trello.com/b/wl6LgDXD/homework-overview) to copy the homework

## Homework Suggestion

{% hint style="info" %}
Remember copy the Homework to the [Trello ](https://trello.com/b/wl6LgDXD/homework-overview)at the end of the class
{% endhint %}

#### 1) Finish the Zoo Project&#x20;

* Finish all the steps of the project (1 Hour)
* Commit and Push all the changes to your Github account

#### 2) Advanced CSS Selectors

* CSS Diner (3 hours): The **Flukeout Game** online game will help you learn Advanced CSS Selectors. <https://flukeout.github.io/>

#### 3) HTML Reading (1 hour)

* Read this page on HTML syntax. It gives you a good overview of how HTML works inside a website. <https://marksheet.io/html-syntax.html>

#### 4) Portfolio Project (3 hours)

* In this repository you will find the **Portfolio Project**, complete the Step 1 <https://github.com/Migracode-Barcelona/HTML-CSS-Portfolio-Project>

## Practice Day (Saturday) <a href="#practice-day-saturday" id="practice-day-saturday"></a>

* Check together the result of the **Zoo Project** and the **Portfolio Project** (1 hour)
* Solve any doubt about the content
* Split into groups and keep working on the next steps of the **Portfolio Project** (3 hour)

## Feedback

We can always improve thanks to your feedback, you can use this document to send your ideas or suggestions on every week. This document will help us to improve Syllabus and this guide