0% completed

All LessonsFree Lessons (13)

Introduction

Why I Wrote this Course How to get the most out of this course What to do when you get stuck What you will learn in this Course {New} Join the Slack Community

Getting started with CSS

Getting Started: Baby Steps How CSS rules work Multiple Declarations and Comments

Oh My Selectors!

A Quick Look at CSS Selectors: Type Selectors CSS Selectors - again!Best Practices for Selecting Elements One Final Look at CSS Selectors

CSS Fundamentals Everyone Should Know

How Default Browser Styles Affect a Document The Concept of Cascade and Inheritance in CSS Understanding Order and Specificity in CSS

Colors, colors, colors!

Making sense of Colors in CSS Practical Color Tools

We all Need Units

Making Sense of Units in CSS Pixels Points and Picas Ems The problem with the EM unit.Rems Exes Percentages vh and vw vmin and vmax

Typography in CSS

Beginning with Type in CSS The font stack Serif and Sans-Serif Monospace, Cursive and Fantasy 5 Font Tips You Should Know

The Box Model

Introducing the Box Model The Box Model - in Examples.The Padding Area Borders The Margin Area Practical: Applying Padding and Margins

Challenge: Hands-on Practice with Texts, Margin, Padding and Borders

Introducing Challenges The Problem The Solution

Getting creative with Backgrounds

Getting started with Background Images To repeat or not repeat?Sizing Background Images Sizing Backgrounds Using Keywords Sizing Backgrounds Using Length Measurements

Project: Build a Movie Order Page

What we will Build Initial Styling Planning and Investigation Understanding Box Sizing Fixing Our UI problems How Background Positions Work How to Position Backgrounds in CSS The Background Shorthand Property Final Polish

Making Sense of CSS Gradients

Introducing Gradients Linear Gradients Gradients are background Images!How Linear Gradients really Work

Hands-on Practice with Gradients

Problem: The French National Flag with Gradients Solution: The French National Flag with Gradients Problem: The German National Flag with Gradients Solution: The German National Flag with Gradients Problem: The Republic of the Congo Flag with Gradients Solution: The Republic of Congo National Flag

Project: Build a Sign Up Page for a Startup

Introduction Getting the Document Structure Right Initial Styling Flexbox Crash Course Web Fonts, Rounded Corners and Rounded Images The Final Steps

{New} Teach Me Positioning Like I'm Five

Introduction Beginning the Project Dealing with CSS Generated Content The CSS Positioning Lesson You Never Had Putting Positioning to Practice Building Realistic CSS Effects with Box-shadow I Never Get Satisfied. Do You?

{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties )

Introduction What you’ll Learn Getting Started with Variables Using CSS Variables Properties Worthy of Mention Common Mistakes and Gotchas What about Browser Support?

{New} CSS Variables Real World Applications

Creating Component Variations using CSS Variables Creating Themed Sites with CSS Variables Building the CSS Variable Booth 🤣

{New} Long Live the CSS Grid

Basic CSS Grid Terminologies You Should Know

CSS Grid, Baby Steps

Time to Code — CSS Grid, Hands-on

Naming and Positioning Items by Grid Areas

Grid area placement

Responsive Design — Redefining Grid Areas with Media Queries

Placing Content within the Grid.

Making CSS Grid work with Flexbox

Final Words

Real World Use Cases Where To Go From Here {New} The One Thing You Can do For Me The End.

The Complete Advanced Guide to CSS/

...

/

Grid area placement

Grid area placement

Story time!

We'll cover the following...

A young man has a well baked cake. He has 3 children asking him to give them some portions. Ideally, who shares the cake?

The young man!

The young man cuts out the areas and gives them to his children.

Here’s why I told that sweet story.

Like the cake, the entire grid area is owned by what element?

The grid container!

Like the young man, the grid container has 3 children too .aside, .main and .footer.

Now the grid container gets to choose how the entire area portions are ...