Learn CSS from Scratch : CSS for Beginners 2026

Name: Learn CSS from Scratch : CSS for Beginners 2026
Rating: 4.0 (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
Link a CSS file to an HTML page with the link tag in the head to apply styles from styles.css to the HTML elements.
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

Intro on HTML Elements2:55
Explain block level elements versus inline elements, showing how block elements like h1, p, and div take full width, while inline elements fit only as much content as needed.
Block Level Elements4:37
Explore block level elements using h1 and p with classes heading and paragraph to see their full-width, vertical stacking. Observe color styling that confirms the page-width behavior.
Inline Elements3:29
Demonstrate how inline elements differ from block elements, using a button and an anchor tag to show width equals content, and no line breaks.
Quiz-3

Box model intro1:35
Explore the CSS box model, the heart of CSS, that defines how elements render and how content, padding, border, and margin, along with width and height, shape layout.
Height & Width1:22
Explore how height and width properties define the size of an element within the CSS box model, controlling vertical and horizontal dimensions.
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
Learn how padding in the CSS box model creates internal spacing between content and border, applying on all four sides to affect inner elements like headings, paragraphs, and buttons.
Quiz Boxmodel

Div?4:40
CSS Combinators5:42
Learn css selectors and combinators, including descendant, child, adjacent sibling, and general sibling selectors, and apply targeted styles to div, p, and span elements to control color.
Flexbox11:30
Learn how flexbox works with display:flex to create responsive, flexible layouts and master justify-content and flex-direction for left-to-right, center, and column or row reverse arrangements.

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