CSS Essential Training

Course details

Dive into the world of CSS with this comprehensive course that equips you to craft professional-looking web pages. Tech professional and educator Christina Truong introduces core concepts and CSS syntax to efficiently style your HTML documents. Master the box model to control element spacing and utilize powerful tools like Flexbox and Grid for creating dynamic layouts. Discover how to add color and typography to enhance your page’s appearance. Gain skills in managing responsive layouts, ensuring your designs look great across all devices. Engage in practical, hands-on projects that solidify your learning. Learn how to apply CSS techniques confidently to produce fluid, responsive designs. This course is ideal for beginners and those seeking to refresh their CSS knowledge.

Learning objectives
Write well-structured CSS to style web pages.
Apply core CSS concepts including the box model, selectors, and specificity.
Implement page layouts with Flexbox and Grid.
Use font-related styles to enhance the display of your web content.
Create responsive layouts using media queries.

Concepts

Introduction

Why should you learn CSS

Getting Started

HTML and CSS
Working with website files
Setting up your text editor
Project - Overview
Project - Customizing the content
Project - Viewing files with Live Server
Where to find images
Creating web-ready images
Project - Adding images

CSS Core Concepts

CSS specifications and the W3C
CSS syntax and terminology
CSS data types
Type and universal selectors
ID selectors
Class selectors
Combinators and selector lists
Pseudo-classes and pseudo-elements
Inheritance, cascade, and specificity
Custom properties
Referencing CSS
Project - Create a CSS file

Color and Background Styles

The color property and value
Creating a color palette
Project - Defining custom properties
The background property
Using multiple background styles
Project - Background and text colors
Project - Background image styles

The CSS Box Model

Introduction to the CSS box model
Width, height, and display
Padding, margin, and border
Center-aligning with margin
Box-sizing and the box model fix
Working with developer tools
Margin collapse and inline spacing
Creating full-height layouts
Project - List reset and header updates
Project - Centering content with margin
Project - Heading resets and border styles

Layouts with Flexbox

Introduction to Flexbox
Working with flex items
Sizing with flex properties
Flexbox sizing exercise
Aligning flex items
Project - Aligning elements with Flexbox

Layouts with Grid

Introduction to CSS Grid
The explicit grid
The implicit grid
The gap property
Positioning with grid lines
Project - Grid layout
Project - Grid line positioning
Project - Grid and dev tools

Layouts with Float and Position

Layouts with float
The position property
Position and z-index
Project - Fixed navigation and header updates

Typography

Typography for the web
Changing fonts with font-family
Working with font-weight and font-style
Web fonts with @font-face
Online font services
Project - Add custom fonts
The font-size property
Font size and accessibility
Text-align, text-transform, and text-decoration
Line-height and letter-spacing
Project - Font and text styles
Project - Button styles
Project - Borders, spacing, and color

Responsive Layouts

Introduction to responsive design
Introduction to media queries
Breakpoints and media queries
Creating fluid layouts
The viewport meta tag
Testing responsive layouts
Project - Breakpoints
Project - Media queries

Conclusion

Next steps