CSS Tutorial - Zero to Hero (Complete Course)

Learn CSS in this full course for beginners. CSS, or Cascading Style Sheet, is responsible for the styling and looks of a website.

In this course, we cover CSS from the ground up. You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.

You will learn about:
•Coloring
•Formatting
•Text
•Layout
•Grid
•Flexbox
•Animations
•Transitions
•And more!

🎥 Course from Jad Khalili. To view more content from this instructor, visit:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Course Achievements & Results
⌨️ (0:02:36) Introduction to Course
⌨️ (0:11:19) Downloading Necessary Software
⌨️ (0:12:30) Where to Find Project Files

⌨️ (0:14:28) What is CSS?
⌨️ (0:17:09) Creating & Linking a CSS Stylesheet
⌨️ (0:20:39) How to Test a Stylesheet

⌨️ (0:22:12) What is a Selector?
⌨️ (0:25:54) Classes & ID's in HTML
⌨️ (0:31:52) Specificity & When to use Selectors
⌨️ (0:39:13) Pseudoselectors
⌨️ (0:47:58) Advanced Selectors
⌨️ (0:59:30) Attribute Selectors
⌨️ (0:09:38) What are Properties?
⌨️ (1:12:59) The CSS General Rule

⌨️ (1:17:37) Types of Colors
⌨️ (1:24:53) Coloring Text
⌨️ (1:32:30) Background Colors
⌨️ (1:36:56) Images/URL's in CSS
⌨️ (1:42:30) Other Background Properties
⌨️ (1:48:59) Opacity/Transparency
⌨️ (1:52:17) Gradients

⌨️ (2:04:12) Introduction to Types of Units
⌨️ (2:15:57) Text Manipulation
⌨️ (2:23:54) Font Size, Bolding & Style
⌨️ (2:30:33) Font Families
⌨️ (2:37:08) Including External Fonts w/ Google Fonts
⌨️ (2:43:14) Using External Fonts

⌨️ (2:49:07) The CSS Box Model
⌨️ (2:53:18) Changing Content Size
⌨️ (2:59:07) CSS Borders
⌨️ (3:05:51) Margin & Padding
⌨️ (3:15:17) Float & Display Types

⌨️ (3:27:47) What is Flexbox?
⌨️ (3:31:35) Creating a Flex Container
⌨️ (3:34:09) Flex Direction & Wrap
⌨️ (3:38:26) Content Alignment
⌨️ (3:44:45) Flex Item Order
⌨️ (3:49:32) Shrink, Grow, & Basis
⌨️ (4:00:03) The 'flex' Property
⌨️ (4:03:21) Item Alignment

⌨️ (4:08:16) Grid vs Flexbox
⌨️ (4:11:14) Creating a Grid
⌨️ (4:13:30) Template Columns & Rows
⌨️ (4:21:12) Justify & Align Grid
⌨️ (4:28:10) Row & Column Gaps
⌨️ (4:33:13) Column & Row Lines
⌨️ (4:40:46) Grid Area

⌨️ (4:44:38) The Transition Property
⌨️ (4:58:05) Transformation Functions
⌨️ (5:12:26) Creating Animations w/ Keyframes
⌨️ (5:20:30) Adding an Animation
⌨️ (5:23:23) Animation Properties

⌨️ (5:34:49) Website Transformation Challenge
⌨️ (5:38:22) Website Transformation - SOLUTION
⌨️ (6:13:32) What to Learn Next

--

[videolab]

Thanks for featuring me! I hope you all enjoy the content. Good luck learning CSS!

[blank]

I watched whole thing from first to last second, even write down some important things. It is amazing that courses like this are free.

[docalba]

Can we atleast have a moment of slience for legends like this
teaching us for free

[blackcitadel]

Whoever created this channel and had the idea of making these courses, i wish the best in life for you and the team behind all this awesome material

[kumarsanu]

section 1- introduction
2:38 course introduction
11:15 Lets get started
11:20 Downloading necessary software
14:30 section 2- css introduction
15:13 What is CSS
15:58 Why Use CSS?
16:34 How is CSS Used?
17:10 Creating and Linking a CSS StyleSheet
20:40 How To Test A Stylesheet
22:24 section 3- selectors & properties
22:31 What is a selector?
23:18 Selectors: The Element Selector
24:00 Selectors: The Class Selector
25:00 Selectors: The ID Selector
25:55 Classes & ID in HTML
31:54 Specificity & When To Use Selectors
39:15 Psudoselectors
48:00 Advance Selectors
59:33 Attribute Selectors
1:09:42 What are Properties?
1:13:03 The CSS General Rule
1:17:41 section 4- coloring & formatting
1:17:41 Types of Colors
1:24:59 Coloring Text
1:32:36 Background colors
1:37:02 Images/URLs in CSS
1:42:36 Other background Properties
1:49:06 Opacity / Transparency
1:52:23 Gradients
2:04:20 section 5- Fonts & text manipulation
2:04:20 introduction to types of units
2:16:04 Text Manipulation
2:24:02 Font Size, Bolding & Style
2:30:41 Font Families
2:37:17 Including external fonts W/Google Fonts
2:43:25 Using External Fonts
2:49:17 section 6- Layout
2:49:53 Introduction
2:50:41 The Box Model
2:51:14 Padding
2:51:57 Border
2:52:27 Margin
2:53:28 Changing Content Size
2:59:17 CSS Borders
3:06:01 Margin & Padding
3:15:29 Float & Display Types
3:27:59 section 7- Flexbox
3:28:44 Introduction
3:29:19 Flexbox Components
3:31:47 Creating a Flex Container
3:34:21 Flex Direction & Wrap
3:38:39 Content Alignment
3:44:58 Flex Item Order
3:49:45 Shrink, Grow & Basis
4:00:17 The 'Flex' Property
4:03:35 Item Alignment
4:08:30 section 8- Grid
4:08:30 Grid vs Flexbox
4:08:52 Introduction
4:09:30 Differences
4:11:28 Creating a Grid
4:13:45 Template Columns & Rows
4:21:27 Justify & Align Grid
4:28:25 Row & Column Gaps
4:33:28 Column & Row Lines
4:41:02 Grid Area
4:44:45 section 9- Animation & Transitions
4:44:45 The Transitions Property
4:58:23 Transformation Functions
5:12:44 Creating Animations w/Keyframes
5:20:49 Adding an Animation
5:23:42 Animation Properties
5:35:08 section 10- challenge (test)
5:35:08 Website Transformation Challenge
5:38:42 Website Transformation Solution
6:13:54 What To Learn Next

[trangbui]

"It's only six hours, I can do this"
Took several weeks

[KARIAP]

6 Hours and in exchange you learn CSS? Great.

3 Days Later: I Finally watched 2 Hours!!!!

[Adityaaaaaaa]

*suggestion*
while watching the video, open your text editor alongside, and take running notes if you can as comments right on your text editor. watch video for a particular section, try to make notes side by side, if u cant, no problem, after watching video for that particular section, make notes, then next section and so on. before moving on to next next section make sure u go through your previous notes as a small revision.
whenever u sit down to make new notes, make it a habit to go through your previous notes....helps a lot :D
all the best comrades.

[Sapkaal]

Few days ago I'm zero in CSS and now i think I'm going towards hero in CSS thanks man

[teawrld]

Girl: Lets break up...


This guy: Aight, lets move on.

[emman]

I finished this course in 3 days! Very informative and simple explanations that a beginner can grasp. More of this to come pls!

[drougnov]

Things I've learned in this video:

1. How to CSS
2. How to move on

[sumanmitra]

Whenever u want to pay and learn something.. FREECODECAMP appear... Truely the best channel for programmer...
Thank you.. gonna return something with donations when i ll get my first job.. currently i am in college 1st year...

[KishanFX]

For those who are watching in mobile
And also for me

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Course Achievements & Results
⌨️ (0:02:36) Introduction to Course
⌨️ (0:11:19) Downloading Necessary Software
⌨️ (0:12:30) Where to Find Project Files
⌨️ (0:14:28) What is CSS?
⌨️ (0:17:09) Creating & Linking a CSS Stylesheet
⌨️ (0:20:39) How to Test a Stylesheet
⌨️ (0:22:12) What is a Selector?
⌨️ (0:25:54) Classes & ID's in HTML
⌨️ (0:31:52) Specificity & When to use Selectors
⌨️ (0:39:13) Pseudoselectors
⌨️ (0:47:58) Advanced Selectors
⌨️ (0:59:30) Attribute Selectors
⌨️ (0:09:38) What are Properties?
⌨️ (1:12:59) The CSS General Rule
⌨️ (1:17:37) Types of Colors
⌨️ (1:24:53) Coloring Text
⌨️ (1:32:30) Background Colors
⌨️ (1:36:56) Images/URL's in CSS
⌨️ (1:42:30) Other Background Properties
⌨️ (1:48:59) Opacity/Transparency
⌨️ (1:52:17) Gradients
⌨️ (2:04:12) Introduction to Types of Units
⌨️ (2:15:57) Text Manipulation
⌨️ (2:23:54) Font Size, Bolding & Style
⌨️ (2:30:33) Font Families
⌨️ (2:37:08) Including External Fonts w/ Google Fonts
⌨️ (2:43:14) Using External Fonts
⌨️ (2:49:07) The CSS Box Model
⌨️ (2:53:18) Changing Content Size
⌨️ (2:59:07) CSS Borders
⌨️ (3:05:51) Margin & Padding
⌨️ (3:15:17) Float & Display Types
⌨️ (3:27:47) What is Flexbox?
⌨️ (3:31:35) Creating a Flex Container
⌨️ (3:34:09) Flex Direction & Wrap
⌨️ (3:38:26) Content Alignment
⌨️ (3:44:45) Flex Item Order
⌨️ (3:49:32) Shrink, Grow, & Basis
⌨️ (4:00:03) The 'flex' Property
⌨️ (4:03:21) Item Alignment
⌨️ (4:08:16) Grid vs Flexbox
⌨️ (4:11:14) Creating a Grid
⌨️ (4:13:30) Template Columns & Rows
⌨️ (4:21:12) Justify & Align Grid
⌨️ (4:28:10) Row & Column Gaps
⌨️ (4:33:13) Column & Row Lines
⌨️ (4:40:46) Grid Area
⌨️ (4:44:38) The Transition Property
⌨️ (4:58:05) Transformation Functions
⌨️ (5:12:26) Creating Animations w/ Keyframes
⌨️ (5:20:30) Adding an Animation
⌨️ (5:23:23) Animation Properties
⌨️ (5:34:49) Website Transformation Challenge
⌨️ (5:38:22) Website Transformation - SOLUTION
⌨️ (5:13:32) What to Learn Next

[pooyaestakhry]

In order to remember in what order to enter values for margin and padding just remember them as clockwise :
top -> right -> bottom -> left

[jaegercrown]

This is one of the finest css tutorial and the fact that this was uploaded 4 years ago, i couldn't find any better css tutorial than this

[Pimp]

Me when I started coding: 100 lines of code must mean a lot of feature

Me now: *Writes up to 200 lines of code for a login/registration system*

[dmitriykhegay]

I like the way he says : "Alright, Let's move on" at the end of every lesson.

[Rouge_Raven_]

The BEST CSS tutorial! You are a fantastic instructor. Really well organized and simplified. Thanks a bunch!!

[eleniminadaki]

After three years I have to get in touch with css, I started again with this video and I got so enthusiastic with the good communication you have and that you have covered all the basics. For me the way you teach is very pleasant! Thank you.