CSS3 Foundations foundation

CSS3 Foundations CSS is short for Cascading Style Sheets, and it is the computer language that allows you to add color, design and layout to your websites. It is the styling language of web design and web development. Having a basic understanding of CSS is fundamental for any web developer.

Prereqs: You should have completed the HTML5 Foundations course.

Course Outline:

  • Chapter 1: The Basics
    • Introduction to CSS
    • CSS tag selectors - part 1
    • CSS tag selectors - part 2
    • CSS tag selectors - part 3
    • CSS tag selectors - part 4
    • CSS class selectors
    • CSS ID selectors
    • CSS cascade introduction
    • Don't repeat code
    • CSS layouts types - part 1
    • CSS layouts types - part 2
    • CSS layouts types - part 3
    • CSS selectors refresher
  • Chapter 2: CSS Styling Basics
    • Page template & browser tools
    • Page template & external CSS
    • Page template & cleaner code
    • Nav tag & semantic meaning
    • CSS Color - part 1
    • CSS Color - part 2
    • CSS Color - part 3
    • CSS Color - part 4
    • CSS Color - part 5
    • Styling text
    • Styling text - font weight - part 1
    • Styling text - complex selectors
    • Styling text - font weight - part 2
    • Font families - part 1
    • Font families - part 2
    • Font size - part 1
    • Font size - part 2
    • Font size - part 3
    • Parent / Child - part 1
    • Parent / Child - part 2
    • Parent / Child - part 3
  • Chapter 3: Diving deeper into CSS
    • Web safe fonts refresher
    • Google fonts - part 1
    • Google fonts - part 2
    • Google fonts - part 3
    • Browser developer tools review
    • Background colors - part 1
    • Background colors - part 2
    • Cascade in CSS
    • Background images
    • Background images - cover
    • 3 ways to insert CSS
  • Chapter 4: The Box Model
    • Box model - introduction
    • Box model - margin and layouts
    • Box model - borders - part 1
    • Box model - borders - part 2
    • Box model - more margins
    • Box model - shorthand
    • Box model - calculate width
    • Box model - centering in CSS
    • Color and background images
    • Height property
    • Opacity
  • Chapter 5: Styling Links and List
    • Intro pseudo classes - part 1
    • Intro pseudo classes - part 2
    • Intro pseudo classes - part 3
    • Specificity refresher
    • Creating buttons - part 1
    • Creating buttons - part 2
    • Creating buttons - part 3
    • Styling list with images
    • Block level tags
    • CSS list styles
    • CSS navbars
  • Chapter 6: Display and Position
    • Fixed vs fluid - part 1
    • Fixed vs fluid - part 2
    • Height and overflow
    • Block vs inline refresher
    • Visibility & floats - part 1
    • Visibility & floats - part 2
    • Position fixed
    • Position relative
    • Position absolute
  • Chapter 7: Mini Projects
    • The 'main' tag fix
    • Top nav - part 1
    • Top nav - part 2
    • Style table - part 1
    • Style table - part 2
    • Style table - part 3
    • Style table - part 4
  • Chapter 8: Media Queries
    • Media queries - part 1
    • Media queries - part 2
    • Media queries - part 3
    • Media queries - part 4
  • Chapter 9: CSS Layouts
    • Simple layout - part 1
    • Simple layout - part 2
    • Simple layout - part 3
    • Fixed / liquid layout - part 1
    • Fixed / liquid layout - part 2
    • Fixed / liquid layout - part 3
    • Fixed / liquid layout - part 4
    • Shark page - part 1
    • Shark page - part 2
    • Shark page - part 3
    • Shark page - part 4