css

CSS Basics

In this part you will learn how to make your HTML pretty. Give it some structure and colors.

Goals

1. Learn basic css selectors
2. Understand selectors specificity and cascading
3. Get familiar with different measure units
4. Understand principals of box model
5. Understand differences between positions
6. Learn principles of layout
   1. Flexbox
   2. CSS Grid

Exercise

1. Implement the following layout without flexbox.

   Requirements:

   1. Header, navigation and footer re always visible (sticky)
   2. Content panel (right) should be scrollable depending on the amount of text there.
   3. Page should be responsive but height of header and footer do not change, only the middle part.

   

2. Implement the same layout with flexbox.

3. Replicate Wix Support page without internal pages.

Resources

• CSS Basics
• How is specificity calculated
• Guide to Flexbox
• W3C Selectors List
• W3C Box model