CSS Foundations

3 hours, 56 minutes CC
CSS Foundations

Course Description

Learn the essential CSS skills for modern web development from the ground up. Start with core terminology and build up to practical CSS layout designs with Flexbox and CSS Grid. You'll get hands-on challenges styling buttons, landing pages, and mobile navigation menus. By the end of this course, Emma will equip you with the fundamentals of creating professional, responsive websites!

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

Preview
Close

Course Details

Published: August 30, 2023

Topics

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 1 minute

CSS Basics

Section Duration: 39 minutes
  • CSS History & Basics
    Emma discusses the history of CSS, its rendering process, and CSS terminology regarding elements. This segment also includes a comparison of replaced and non-replaced elements, as well as block and inline elements.
  • Selectors
    Emma discusses type, class, ID, and universal selectors, which select the HTML element(s) that styling should be applied to. The makeup of a CSS style rule includes a selector, declaration block, declaration, property, and value.
  • Specificity
    Emma demonstrates the hierarchy of inheritance used to determine where styling declarations are applied. The different weights applied to CSS declarations are also discussed in this segment.
  • Color
    Emma discusses the different ways to define colors in CSS, including named colors, hexadecimal, RGB, RGBA, HSL, and HSLA.
  • Fonts & Typography
    Emma demonstrates utilizing generic font families as a fallback font if the declared font is not available. Other font-related properties such as font-weight, font-size, text-decoration, and the values used to define them are also covered in this segment.

Project

Section Duration: 23 minutes

Layout

Section Duration: 1 hour, 15 minutes

Interactive & Responsive UI

Section Duration: 1 hour, 33 minutes

Wrapping Up

Section Duration: 2 minutes
It's good to remember the basics of CSS and I just completed "CSS Foundations" by Emma Bostian on Frontend Masters! It was great!
Miguel Angel Martelo Quiroz

Miguel Angel Martelo Quiroz

MigueMartelo31

I completed "CSS Foundations" by Emma Bostian on Frontend Masters! Totally worth the time!
Isaac Agboola

Isaac Agboola

the_isaacagbola

Emma Bostian's "CSS foundations" course on Frontend Masters really helped me gain a deeper understanding of CSS basics and responsive design.
Achara Chisom

Achara Chisom

Chisom14Solomon

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now