Learn Intermediate CSS

Take your CSS skills to the next level! This course teaches you how to add dynamism and visual effects to your web pages, helping you recreate the polish of professional websites. You'll gain the skills to build flexible layouts, elegant transitions, and accessible designs that adapt to varying devices and user needs.

Syllabus

Layout with Flexbox: Learn CSS Flexbox to create flexible page layouts.

Lesson: Flexbox
Project: Flexbox: To-Do App
Project: Off-Platform Project: Tea Cozy
Quiz: Flexbox

Grid: In this course, you will master a technology that was recently added to CSS! This is a long-awaited improvement to laying-out and positioning elements on web pages.

Lesson: Grid Essentials
Project: PupSpa
Quiz: Grid
Lesson: Advanced CSS Grid
Project: CSS Grid: Task Board
Quiz: Grid

CSS - Transitions: Implement CSS animation using transitions

Lesson: CSS Transitions
Project: Transitions - 20,000 Leagues Under the Sea
Quiz: Transitions

Learn Responsive Design : Learn responsive design techniques, like relative sizing units and media queries, to create websites viewable on devices of all sizes.

Lesson: Sizing Elements
Lesson: Media Queries
Project: Tsunami Coffee
Quiz: Sizing Elements
Quiz: Media Queries

Variables and Functions: Learn how to use CSS variables and functions to create more organized, efficient, and dynamic websites.

Lesson: CSS Variables
Lesson: CSS Functions
Project: Curious Ornithologist
Quiz: Variables and Functions

Accessibility: Learn how to build web pages that are accessible to everyone using modern CSS techniques and accessibility standards.

Lesson: Accessibility
ExternalResource: Start Testing for Web Accessibility
Project: Code! Blog
Quiz: Accessibility

Browser Compatibility: Learn about browser compatibility and the different techniques to create a consistent user experience regardless of the browser.

Lesson: Browser Compatibility
Article: CSS Feature Queries
Quiz: Browser Compatibility