CSS Projects – Frontend Masters

Looking to practice your CSS skills? Work through five distinct projects to practice writing semantic HTML, mobile-first designs, media queries, and CSS layout techniques. You’ll leverage CSS variables, flexbox and grid, inheritance, and responsive design strategies for supporting multiple device form factors. By completing these projects, you’ll gain the confidence and refine your skills to tackle any HTML and CSS challenge in your professional path!

This course and others like it are available as part of our Frontend Masters video subscription.

Table of Contents

Introduction

• Introduction

Style Guide Project

• Style Guide Overview
• Style Guide: Fonts & Font Sizes
• Style Guide: Image & Links
• Style Guide: Colors

Columns & Cover Project

• Columns & Cover Overview
• Column & Cover: Semantic HTML
• Column & Cover: Mobile Layout
• Column & Cover: Media Queries
• Columns & Cover: Desktop Layout

Background & Overflow Project

• Background & Overflow Project Overview
• Background & Overflow: Mobile Layout
• Background & Overflow: Scrollbar
• Background & Overflow: Media Queries
• Background & Overflow: Desktop Layout

Grid Project

• Grid Project Overview
• Grid: Mobile Layout
• Grid: Tablet Layout
• Grid: Desktop Layout

Team Project

• Team Project Overview
• Team: Semantic HTML
• Team: Mobile Layout
• Team: Icons
• Team: Tablet & Desktop Layouts

Cards Project

• Cards Overview
• Cards: Semantic HTML
• Cards: Mobile Portrait Layout
• Cards: Mobile Landscape Layout
• Cards: Tablet Layout
• Cards: Desktop Layout

Wrapping Up

• Wrapping Up