Lesson 1

Content

• Semantic HTML tags
• CSS selectors
• CSS cascade
• Pseudo Classes
• Box model

Homework

• Let's refresh how HTML tags are structured - https://www.w3schools.com/html/html5_syntax.asp

1. Read about advanced CSS selectors and then practice by playing this CSS selector game. It gets hard at the end, but try your best!

2. Using what you have learned before, look at the build a house repository and try to build at least 2 of the houses in CSS.

3. Do our css challenge. With the same HTML, build different CSS stylesheets to give it several appearances. Do it for at least three examples. For example, example 1, example 2 and example 3. Or pick one from Zen Garden.

4. Fork this repo and follow the instructions on the README - https://github.com/Code-Your-Future/html-css-project

(If you need help with Forking - then refer back to this tutorial)

(If you need help on how to do pull-requests, check this pull-request tutorial)

Optional

1. Try changing the appearance of the bikes-for-refugees page without touching the HTML. Can you move the sidebar to the left side of the page? Can you reverse the order of "upcoming events", by putting "help us cycle" first and "join us for our fundraiser" last?

2. Start your own CSS library. Extract all the CSS that you would like to be able to use in other websites into a separate file. This file should be in a separate repository, and published under your-username.github.io/style.css. Determine the URL of this file and load it alongside your original CSS file in the index.html of bikes-for-refugees.