CSS Essential Training (2023)

Course details

Cascading Style Sheets (CSS) is a stylesheet language that allows you to control the appearance of your webpages. In this hands-on course, instructor Christina Truong demonstrates the concepts that form the foundation of CSS, explaining what you need to know to tweak existing CSS and start writing your own with ease. Christina explains how to add colors and other design elements to take your webpages beyond just black text on a white background. She shows how to use selectors, how the box model defines the spacing and sizing of page elements, and how to style text and manage basic layouts with Flexbox and Grid. Learn the basics of working with typography, creating fluid and responsive layouts, and determining when to use the float and position properties. Along the way, test out your know-how with real-world projects that let you practice applying new content and skills.

Concepts

Introduction

Getting started with CSS
What you should know
How to complete the exercises

Getting Started

HTML and CSS
Working with website files
Writing code with a text editor
Customizing your text editor
Project - Overview and setup
Where to find images
Optimizing images for the web
Relative and absolute paths
Project - Adding images and icons
Referencing CSS
Project - Creating a CSS file

CSS Core Concepts

CSS specifications and the W3C
CSS syntax and terminology
CSS values and units
The color property and values
Creating a color palette
Type and universal selectors
ID selectors
Class selectors
Descendant combinators and selector lists
The background property
Project - Prepping the CSS file
Project - Adding background styles
Pseudo-classes and pseudo-elements
Inheritance and the cascade
Specificity
Project - Styling links

The CSS Box Model

Intro to the CSS box model
The box model properties
Box-sizing and the box model fix
Inline, block, and display
Project - Footer styles and icons
Debugging with developer tools
Managing box model quirks
Project - Background image update
Using negative margin values
Center aligning with margin
Project - Adding content wrappers
Project - Adding a header image

Layouts - Float and Position

Intro to CSS Layout
Layouts with the float property
Clearing floats
Project - Float images and text
The position property
Position and z-index
Project - Fixed positioning

Layouts - Flexbox and Grid

Intro to Grid and Flexbox
Intro to Flexbox
Flexbox - Orientation and ordering
Sizing with flex properties
Flexbox exercise
Project - Sticky footer with flexbox
Aligning flex items
Project - Aligning elements with Flexbox
Intro to CSS Grid
The explicit grid
The implicit grid
Adding gutters with the gap property
Project - Adding columns with Grid

Typography

Typography for the web
Changing fonts with font-family
font-weight and font-style
Web fonts with @font-face
Web fonts with Google Fonts
Project - Google Fonts
The font-size property
Font-size and accessibility
Text-align and text-transform
Line-height and letter-spacing
Project - Typography styles
Project - Buttons and spacing

Layouts - Fluid and Responsive

Intro to responsive design
Intro to media queries
Breakpoints and media queries
Fluid layouts
The viewport meta tag
Testing responsive layouts
Project - Breakpoints
Project - Media queries - Part 1
Project - Media queries - Part 2
Project - Media queries - Part 3

Conclusion

Continuing beyond the essentials with CSS