Playback starts YouTube’s embedded player (privacy-enhanced mode).
CSS Tutorial - Zero to Hero (Complete Course)
ChannelfreeCodeCamp.orgIn brief
This complete CSS course takes you from absolute beginner to advanced, covering everything from basic text styling and colors to complex layouts, animations, and responsive design techniques. Perfect for web developers who want to master the visual side of websites—no prior CSS experience needed.
Key steps
- Start with CSS fundamentals: selectors, properties, and how to link stylesheets to HTML.
- Explore text manipulation, colors, backgrounds, and the CSS box model for layout control.
- Dive into Flexbox and CSS Grid to create flexible, responsive page structures.
- Add interactivity with transitions, transformations, and custom animations using keyframes.
Questions & answers
What software do I need to follow along?
The course covers downloading and setting up the necessary software at the start.
Chapters
Description from the creator
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!
💻 Code: github.com/Video-Lab/css-course-content
🎥 Course from Jad Khalili. To view more content from this instructor, visit:
udemy.com/user/jad-khalili/
❤️ Try interactive CSS courses we love, right in your browser: scrimba.com/freeCodeCamp-CSS (Made possible by a grant from our friends at Scrimba)
⭐️ 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
--
Learn to code for free and get a developer job: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
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!
💻 Code: github.com/Video-Lab/css-course-content
🎥 Course from Jad Khalili. To view more content from this instructor, visit:
udemy.com/user/jad-khalili/
❤️ Try interactive CSS courses we love, right in your browser: scrimba.com/freeCodeCamp-CSS (Made possible by a grant from our friends at Scrimba)
⭐️ 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
--
Learn to code for free and get a developer job: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
About this tutorial
freeCodeCamp.org published this 6:18:38 video tutorial on November 13, 2019. It has been watched 3,498,643 times on YouTube.
- Channel
- freeCodeCamp.org
- Category
- Education
- Duration
- 6:18:38
- Published
- November 13, 2019
- Views
- 3,498,643
- Likes
- 71,279
Tags
Share
This tutorial in other languages
- FRTutoriel CSS - Zero to Hero (Cours de complet)
- ESCSS Tutorial - Zero to Hero (Curso Completo)
- PTCSS Tutorial - Zero to Hero (curso completo)
- ITCSS Tutorial - Zero to Hero (Corso completo)
- DECSS Tutorial - Zero Held (Komplettkurs)
- NLCSS Tutorial - Zero to Hero (Complete Course)
- RUУчебник CSS - Нулевой Герою (полный курс)
- PLCSS - Zero to Hero (Complete Course)
- JACSSチュートリアル - ヒーローにゼロ（完全コース）
- ARCSS دروس - صفر إلى بطل (دورة كاملة)
- HIसीएसएस ट्यूटोरियल - शून्य हीरो के लिए (पूरा कोर्स)
- IDCSS Tutorial - Zero to Hero (Complete Course)