StudioWeb
Questions?
info@studioweb.com
Courses

Beginners CSS3

Foundation

Beginners CSS3 CSS, which stands for Cascading Style Sheets, is the computer language used to style web pages. Having a basic understanding of CSS is fundamental for any web designer or programmer!

Beginners CSS 2015, is our new CSS course specially designed for classroom teaching. Students learn modern CSS through video lessons, code challenges, multiple choice quizzes and real-world take-home projects. Includes HTML5, CSS3 and mobile design.

  • Prereqs: Beginners HTML
  • Estimated Class Time: 10-12 hours (depending on grade level and student aptitude.)
  • Number of Lessons: 98
  • Quiz Questions: 301
  • Workshops / side projects: 13
  • Included documents: Chapter objectives, teacher's cheat sheet, glossary of terms, project guidelines.

The course starts with the basics, and quickly moves into real-world CSS projects including responsive mobile ready web design.

Sample Videos:

Course Outline:

Chapter 1: The Basics

  • Introduction
  • 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 intro
  • Don't repeat code
  • CSS layout types - part 1
  • CSS layout types - part 2
  • CSS layout types - part 3
  • CSS selectors - a refresher

Chapter 2: CSS Styling Basics

  • Page template & browser tools
  • Page template & external CSS
  • Page template & cleaner code
  • The 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
To Top