Learn CSS from Scratch : CSS for Beginners 2026

Name: Learn CSS from Scratch : CSS for Beginners 2026
Rating: 4.1 (50 reviews)

CSS - Complete Beginners Guide Scratch Flexbox Grid Sass Animations, Responsive Websites HTML CSS FlexboX Grid

Last updated 4/2026

English

English [Auto],

What you'll learn

Become a modern and confident HTML and CSS developer, no prior knowledge needed!
Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
How to use common components and layout patterns for professional website design and development
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout

6 sections • 22 lectures • 1h 20m total length

Introduction1:41
Explore css basics as a style language that defines presentation for structured documents, applying colors, sizes, fonts, layouts, and animations from top to bottom.
Topics Covered in this course?3:42
CSS Syntax1:00
*CSS Syntax Overview*

CSS (Cascading Style Sheets) syntax is used to control the layout and appearance of web pages.

*Basic Structure:*

1. Selector: Targets HTML elements (e.g., `h1`, `a`, `p`)
2. Property: Specifies the style attribute (e.g., `color`, `font-size`)
3. Value: Defines the property's value (e.g., `red`, `18px`)
4. Declaration: Combination of property and value (e.g., `color: red;`)
5. Declaration Block: Group of declarations enclosed in curly braces (`{}`)

*Syntax Example:*

selector {property: value}

*Example:*
h1 {
color: blue;
font-size: 24px;
}
Connect HTML & CSS File6:30
CSS Basic Quiz

3 Types of Selectors?2:09
Tag Selector-13:31
Apply the tag name selector to style all h1 elements in an HTML document with a shared font size, color, and font family such as Times New Roman.
Class Selector-25:50
Discover how the class selector targets specific elements with dot notation, applying styles to headings and paragraphs like font size, and how to reuse class names to style multiple elements.
ID Selector Intro1:12
ID Selector4:11
Learn how the id selector uses a hash and unique ids like country heading, population paragraph, and state paragraph to style specific elements with font size, color, and weight.
Quiz -2

Box model intro1:35
Height & Width1:22
Height6:47
Width2:11
Explore how the width property works in the CSS box model by resizing a parent div from full width to 250 pixel and noting the brown background.
Margin1:59
Explore how the CSS margin property creates space outside an element's border, separating it from neighboring elements. Set margins on all sides or use shorthand for top, left, right, bottom.
Padding3:24
Quiz Boxmodel

Well, I'm here to teach you HTML, CSS, and web design, step-by-step.

#Trending

So, in order to become a confident and independent developer, capable of building your own websites in the future, you will learn:

The fundamentals of modern and semantic HTML, CSS, and building layouts .This includes modern flexbox and CSS Grid!
How to design beautiful websites, by learning a web design framework I created just for this course. It consists of easy-to-use guidelines for design aspects like typography, colors, images, spacing, and more (this is like a small standalone course!).
How to use well-established website components and layout patterns in order to come up with professional-looking designs
How to make any website work on any mobile device, no matter the design and layout (responsive design)
How to use the 7 steps of building a professional website in practice: planning, sketching, designing, building, testing, optimizing, and launching
How to find and use free design assets such as images, fonts, and icons
Important developer skills such as reading documentation, fixing code errors on your own, and using professional web development tools

"I'm providing free notes and PDFs in an understandable way."

This course is for you if

you are a complete beginner with no idea of how to build a website.
you already know a bit of HTML and CSS from some tutorials or videos, but struggle to put together a good-looking, complete website.
you are a designer and want to expand your skills into HTML and CSS, because all your designer friends are learning how to code