AI Features
Log In
0% completed
All Lessons
Free 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
Introduction
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
Conclusion
Final Words
Real World Use Cases
Where To Go From Here
{New} The One Thing You Can do For Me
The End.
Home
Courses
The Complete Advanced Guide to CSS
Solution: The German National Flag with Gradients
We'll cover the following...
The Solution
And here’s the
...