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.
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
