CSS Exercises

These exercises are a series of CSS related tasks intended to complement the HTML and CSS content on The Odin Project.

For each exercise we have three main components:

• README.md: exercise details
• index.html: attempted solution to the exercise (some might not be solved yet!)
• solution.html: suggested solution the exercise

Viewing exercises

When I was going through these exercises I had a downloaded copy of the repo and used the Live Server extension in VSCode to view index.html and solution.html files. I also made use of VSCode's ability to preview Markdown files to read the README.md files.

I've deployed this repo to a github page

Thanks to Nicolas Vanhoren for helping me make the Markdown pages viewable in github pages. Note that the include list was created by using results from ls -1R **/README.md

Exercise	Attempted solution	Suggested solution
01-button-hover	01-button-hover	01-button-hover
02-pop-up	02-pop-up	02-pop-up
01-flex-center	01-flex-center	01-flex-center
02-flex-header	02-flex-header	02-flex-header
03-flex-header-2	03-flex-header-2	03-flex-header-2
04-flex-information	04-flex-information	04-flex-information
05-flex-modal	05-flex-modal	05-flex-modal
06-flex-layout	06-flex-layout	06-flex-layout
07-flex-layout-2	07-flex-layout-2	07-flex-layout-2
01-css-methods	01-css-methods	01-css-methods
02-class-id-selectors	02-class-id-selectors	02-class-id-selectors
03-grouping-selectors	03-grouping-selectors	03-grouping-selectors
04-chaining-selectors	04-chaining-selectors	04-chaining-selectors
05-descendant-combinator	05-descendant-combinator	05-descendant-combinator
06-cascade-fix	06-cascade-fix	06-cascade-fix
01-grid-layout-1	01-grid-layout-1	01-grid-layout-1
02-grid-layout-2	02-grid-layout-2	02-grid-layout-2
03-grid-layout-3	03-grid-layout-3	03-grid-layout-3
01-margin-and-padding-1	01-margin-and-padding-1	01-margin-and-padding-1
02-margin-and-padding-2	02-margin-and-padding-2	02-margin-and-padding-2