CoursesFrontend DevelopmentCSS Tutorial
BeginnerFree
5.0(1,819 reviews)

CSS Tutorial logoCSS Tutorial

Learn CSS from beginner to advanced with practical examples, layouts, animations, responsive design, and modern styling techniques.

51 Lessons
Step by step
21 Hours
Estimated duration
19.8K
Students enrolled
Certificate
Upon completion
Start Learning Free

What You'll Learn

CSS Basics: Intro, Types, Syntax, and Selectors
CSS Colors and Backgrounds
CSS Typography: Text and Fonts
CSS Box Model: Content, Padding, Border, Margin
CSS Layout Basics: Display, Visibility, Overflow
CSS Positioning and z-index

Course Content

51 lessons • 21 hours total
Course Progress0% Complete

Practice editor is inside each lesson

Open any lesson to use the Try It Yourself editor with course-specific practice code.

Open First Lesson
01

Module 1

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Basics: Intro, Types, Syntax, and SelectorsTry It Yourself available
9:07Try It Yourself
CSS Colors and BackgroundsTry It Yourself available
11:17Try It Yourself
CSS Typography: Text and FontsTry It Yourself available
13:27Try It Yourself
CSS Box Model: Content, Padding, Border, MarginTry It Yourself available
15:37Try It Yourself
CSS Layout Basics: Display, Visibility, OverflowTry It Yourself available
17:47Try It Yourself
02

Module 2

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Positioning and z-indexTry It Yourself available
15:42Try It Yourself
Flexbox: Container and ItemsTry It Yourself available
17:52Try It Yourself
CSS Grid: Advanced LayoutTry It Yourself available
19:02Try It Yourself
Responsive Design: Media Queries and UnitsTry It Yourself available
9:12Try It Yourself
Transitions, Transforms, and AnimationsTry It Yourself available
11:22Try It Yourself
03

Module 3

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Pseudo Classes and Pseudo ElementsTry It Yourself available
9:17Try It Yourself
Advanced SelectorsTry It Yourself available
11:27Try It Yourself
Units and SizingTry It Yourself available
13:37Try It Yourself
Shadows and Visual EffectsTry It Yourself available
15:47Try It Yourself
CSS Variables (Custom Properties)Try It Yourself available
17:57Try It Yourself
04

Module 4

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Modern CSS: clamp, aspect-ratio, object-fitTry It Yourself available
15:52Try It Yourself
Modern CSS: backdrop-filter, scroll-behavior, scroll-snapTry It Yourself available
17:02Try It Yourself
Sass Basics: Variables, Nesting, MixinsTry It Yourself available
19:12Try It Yourself
CSS Forms StylingTry It Yourself available
9:22Try It Yourself
CSS Tables and Lists StylingTry It Yourself available
11:32Try It Yourself
05

Module 5

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Navigation Bars and MenusTry It Yourself available
9:27Try It Yourself
CSS Cards and Component DesignTry It Yourself available
11:37Try It Yourself
CSS Hero Sections and Landing LayoutsTry It Yourself available
13:47Try It Yourself
CSS Accessibility and Focus StatesTry It Yourself available
15:57Try It Yourself
CSS Dark Mode and Theme SwitchingTry It Yourself available
17:07Try It Yourself
06

Module 6

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Custom Scrollbars and Overflow PatternsTry It Yourself available
15:02Try It Yourself
CSS Image Galleries and Object PositioningTry It Yourself available
17:12Try It Yourself
CSS Multi-Column and Magazine LayoutsTry It Yourself available
19:22Try It Yourself
CSS Capstone Project: Responsive Course Landing PageTry It Yourself available
9:32Try It Yourself
Frameworks: Tailwind CSS and BootstrapTry It Yourself available
11:42Try It Yourself
07

Module 7

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Best Practices and ArchitectureTry It Yourself available
9:37Try It Yourself
CSS Borders Outline and RadiusTry It Yourself available
11:47Try It Yourself
CSS Display Flex vs Grid ComparisonTry It Yourself available
13:57Try It Yourself
CSS Sticky Sidebar and Page LayoutTry It Yourself available
15:07Try It Yourself
CSS Pricing TablesTry It Yourself available
17:17Try It Yourself
08

Module 8

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Testimonials and Review CardsTry It Yourself available
15:12Try It Yourself
CSS Badges Pills and TagsTry It Yourself available
17:22Try It Yourself
CSS Buttons States and VariantsTry It Yourself available
19:32Try It Yourself
CSS Icon and Avatar StylingTry It Yourself available
9:42Try It Yourself
CSS Section Spacing and Layout RhythmTry It Yourself available
11:52Try It Yourself
09

Module 9

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Utility Classes BasicsTry It Yourself available
9:47Try It Yourself
CSS Gradients and Layered BackgroundsTry It Yourself available
11:57Try It Yourself
CSS Loaders and Simple Micro AnimationsTry It Yourself available
13:07Try It Yourself
CSS Accordions and Expandable PanelsTry It Yourself available
15:17Try It Yourself
CSS Tabs and Active StatesTry It Yourself available
17:27Try It Yourself
10

Module 10

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
CSS Mobile Navigation Drawer StylesTry It Yourself available
15:22Try It Yourself
CSS Dashboard Panels and Stats CardsTry It Yourself available
17:32Try It Yourself
CSS Portfolio Grid ProjectTry It Yourself available
19:42Try It Yourself
CSS Blog Card and Article Preview LayoutTry It Yourself available
9:52Try It Yourself
CSS Landing Page Footer DesignTry It Yourself available
11:02Try It Yourself
11

Module 11

1 lessons • 20 minutes

Try It Yourself available

Try It Yourself
CSS Final Project Responsive Multi Section WebsiteTry It Yourself available
9:57Try It Yourself

Try It Yourself

Practice this course here with CSS Basics: Intro, Types, Syntax, and Selectors.

Open Full Lesson

Try It Yourself

Loading editor...

Requirements

  • No prior coding experience needed
  • A computer with internet access
  • Any modern web browser (Chrome, Firefox, Safari)
  • Text editor (VS Code recommended)

Student Reviews

0.0(0 reviews)
No reviews yet. Be the first student to add one.

Add Your Review

Rating

Instructor

Instructor Ali Moavia
Ali Moavia
Senior Web Developer

Full-stack developer with 3+ years of experience. Passionate about teaching web technologies.

50K+ students
12 courses

Related Courses

HTML Tutorial logo

HTML Tutorial

Beginner • Frontend Development

Learn HTML from beginner to advanced with practical examples.

4.9
JavaScript Tutorial logo

JavaScript Tutorial

Beginner • Frontend Development

Complete JavaScript roadmap from basics to advanced, including DOM, async JS, Node.js, interview concepts, and polyfills with practical examples.

4.7

Share this course