1 - Semantic HTML and CSS

If this is your first day, check the first day tips

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, 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

  • Created by Birmingham

Important Links

• Syllabus

• Instructor's Guide

• Suggested Homework in the Instructor's Guide

• Trello board to copy the homework

Homework Suggestion

Remember copy the Homework to the Trello at the end of the class

1) Finish the Zoo Project

• 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)

• 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