Deep Fundamentals

Understanding HTML and CSS

Master semantic HTML and modern CSS for accessible, well-structured websites

18 hrs, self-paced
11,415 students enrolled

Build Web Interfaces That Last

HTML and CSS are the foundation of everything you build for the web. Every framework, every library, every fancy tool eventually compiles down to HTML and CSS. If you don’t understand these fundamentals deeply, you’re building your entire career on shaky ground.

I’ve taught over 360,000 students how to build web applications, and here’s what I’ve learned: the developers who struggle most aren’t struggling because they don’t know enough tricks. They struggle because their mental models are broken.

You’ve probably felt this. You follow a tutorial, it works, you feel good. Then your boss asks you to build something slightly different, and you’re lost. You don’t know why your CSS cascade isn’t behaving. You don’t understand why your layout breaks. You Google frantically, try random Stack Overflow solutions, and hope something sticks.

I’m going to be direct with you: that’s not a sustainable way to build a career.

Stop Building Divs and Spans Everywhere

Here’s a hard truth: most developers are building inaccessible websites without even knowing it. They reach for <div> and <span> for everything because that’s what they’ve seen in tutorials. But HTML gives you semantic elements for a reason. When you use proper semantic HTML, you’re not just writing cleaner code. You’re making your sites accessible to people using screen readers, keyboard navigation, and assistive technologies. You’re improving SEO. You’re writing markup that actually means something.

I’ll teach you to break this habit and author HTML the way it was designed to be written.

Go to the Source

This course is different because we go to the source. Not just my interpretation, not just best practices someone made up. We read the actual HTML and CSS specifications together. We look at how browser rendering engines actually work, under the hood. We understand the problems these technologies were designed to solve, so when you face new problems, you’ll know how to think about them.

For Beginners: Start Right

You’ll build accurate mental models from day one. You won’t develop the bad habits that take years to unlearn. You’ll understand semantic HTML and how it makes your sites accessible to everyone. You’ll learn the cascade, inheritance, and specificity in a way that actually makes sense. When you finish this course, you won’t just know how to build layouts. You’ll understand why CSS works the way it does.

For Experienced Developers: Reset Your Mental Models

This course will reset the mental models you’ve been fighting against. You know that feeling when CSS doesn’t behave the way you expect? That’s not CSS being weird. That’s a gap in understanding. We’ll fill those gaps. You’ll learn to read the specs with confidence, which means you’ll be able to teach yourself every new CSS feature that comes along, from Container Queries to :has to CSS Nesting. You’ll stop fighting your tools and start wielding them with precision.

What You’ll Master

We’ll build modern, responsive interfaces using Flexbox, Grid, and cutting-edge CSS features. You’ll learn mobile-first responsive design. You’ll even learn how to prompt AI tools to generate better HTML and CSS, because you’ll understand what quality output actually looks like.

This isn’t about memorizing properties. It’s about understanding systems. The students who take this approach, who commit to truly understanding rather than just imitating, they’re the ones who become senior developers, tech leads, and architects. They’re the ones who solve problems instead of creating them.

Your career deserves a solid foundation. Let me help you build it.

Curriculum

Introduction03:00
Tools and Setup00:55
Downloading Code for this Course00:42
Trees00:14
Conceptual Aside: Data Structures03:42
The Language of Trees02:22
Engine Aside: Not Really a Tree01:30
Traversal and Search01:46
Understanding Trees00:00
HTML00:54
A Document02:23
Conceptual Aside: User Agents03:47
Markup: Describing Content03:23
Language: Consistent Meaning02:10
Conceptual Aside: Semantics and Authoring01:51
Tags, Attributes, and Elements02:09
Elements and Trees02:31
Markup is Everywhere02:36
Conceptual Aside: Specifications01:30
The HTML Specification07:15
Conceptual Aside: Author vs Implementor02:04
Content Models and Kinds of Content02:44
Understanding HTML00:00
The Document00:12
A Starting Point00:49
Document Types01:22
The Root02:52
Metadata03:53
Content01:47
Understanding The Document00:00
Document Sections00:12
The Outline04:19
Self-Contained Compositions06:01
Thematic Groupings06:05
Tangential Content04:05
Headings and Rank05:20
Headers and Footers03:33
Addresses03:06
Quiz: Document Sections00:00
Grouping Things00:11
Paragraphs02:19
Did You Catch The Invalid Markup?00:48
Quotes02:15
Unordered Lists02:46
Ordered Lists01:58
A Quick Check01:23
Association Lists07:29
Multidimensional Content10:13
Multidimensional Content and Doing It Wrong05:10
Dominant Content02:32
div and Doing It Wrong08:41
Quiz: Grouping Things00:00
Text Itself00:27
Emphasis07:45
Importance02:59
Side Comments02:02
Have You Found The Invalid Markup?01:02
Line Breaks05:37
Author's Comments02:08
span and Doing It Wrong03:08
Thinking Semantically00:00
The Browser and the DOM00:32
Conceptual Aside: HTTP08:20
Anchor Tags and Hypertext05:15
Conceptual Aside: User Agents (again)01:35
Conceptual Aside: The Browser02:15
Blink: A Rendering Engine02:27
Engine Aside: Parsing02:10
Named Character References04:17
Conceptual Aside: Objects01:24
Conceptual Aside: Models02:45
The Document Object Model02:34
Building the DOM07:59
Conceptual Aside: Developer Tools01:52
The Inspector08:33
Anchor Tags (again)08:09
Engine Aside: Gecko02:11
Engine Aside: WebKit01:39
Accessibility00:13
Conceptual Aside: Accessibility00:38
Conceptual Aside: Screen Readers01:43
Semantics and Accessibility08:58
ARIA02:19
Interactivity00:22
Navigation01:48
Engine Aside: Forms and HTTP04:40
Forms, Fields, and Labels15:15
Buttons06:59
More Fields09:56
Even More Fields08:58
JavaScript Frameworks00:31
Conceptual Aside: DOM Manipulation02:17
React, Angular, Vue, and HTML Authoring05:48
Stylesheets and Querying Trees00:21
Conceptual Aside: Querying a Tree02:00
The CSS Specifications11:44
User Agent Stylesheet07:01
Type Selectors02:19
Declarations02:23
Inheritance02:37
Author Stylesheets04:11
Universal Selector04:19
Attribute Selectors09:29
ID Selector03:12
Class Selector06:34
Grouping Selectors05:57
Exercise: Grouping Selectors04:14
Combinators: Descendant03:11
Exercise: Descendant Combinator02:48
Combinators: Child01:58
Exercise: Child Combinator06:38
Combinators: Next-Sibling06:18
Exercise: Next-Sibling08:20
Combinators: Subsequent Sibling14:12
Exercise: Subsequent Sibling03:44
Conceptual Aside: CSS Standards and Drafts02:42
Browser Support (caniuse and MDN)02:12
Child-Indexed Pseudo-classes02:49
Exercise: Child-Indexed Pseudo-classes15:59
Typed Child-Indexed Pseudo-classes (and Debugging a Problem)06:58
Exercise: Typed Child-Indexed Pseudo-classes07:34
Location Pseudo-classes03:04
Exercise: Location Pseudo-Class06:33
User Action Pseudo-classes08:03
Exercise: User Action Pseudo-Class03:15
Negation Pseudo-class05:18
Exercise: Negation Pseudo-Class04:13
Pseudo-elements01:50
Exercise: Pseudo-Element00:00
The Cascade00:00
Importance00:00
Specificity00:00
Exercise: Specificity00:00
Order of Appearance00:00
Cascade Layers and @import00:00
inherit, initial, and Specified Values00:00
Matches-Any Pseudo-Class00:00
Specificity-Adjustment Pseudo-Class00:00
Optimization00:00
Engine Aside: The CSSOM00:00
Box Model00:26
Conceptual Aside: Rendering03:04
Visual Formatting Model04:36
Box Model04:31
Viewport and Coordinates02:58
Engine Aside: Layout01:26
Conceptual Aside: Pixels, Pixel Density, and Reference Pixels03:03
Units and Computed Values09:45
Engine Aside: Intrinsic Size02:17
Box Sizing20:05
Conceptual Aside: Functions02:03
Calc, min, max, clamp03:01
Engine Aside: Formatting Contexts03:53
Box Position00:16
Positioning Schemes01:37
Static02:08
Relative03:57
Absolute05:32
Fixed02:28
Sticky01:28
Painting00:18
Engine Aside: Painting01:31
Visibility01:23
Z-Index13:39
Images: img08:25
Flow00:18
Display01:58
Block11:20
Float04:34
Inline, Vertical Align, Line-Height and More11:56
flow-root and BFCs03:20
Conceptual Aside: Multilingual Support03:27
Writing Mode08:00
Direction02:47
Text-Orientation03:24
Logical Properties14:03
Sticky Nav Note00:12
Inline-Block01:03
None02:21
Table, List-Item, and More02:58
Flexbox00:10
Flex Formatting Context08:12
Flow Direction14:13
Display Order04:42
Wrapping and Overflow04:25
Flex14:59
Alignment09:33
Collapse02:59
Inline-Flex01:41
Grid00:18
Grid Formatting Context10:13
Conceptual Aside: Fractional Units01:44
Track Sizing09:34
Item Placement10:08
Track Repetition05:34
Alignment and Spacing06:40
Layering01:40
A Visual Change08:03
Fonts, Colors, and More00:21
Fonts05:25
Hexadecimal, RBG, and Named Colors06:47
Opacity01:36
Backgrounds01:50
Transitions04:27
Animations07:12
Images: SVGs04:19
A Semantic Change03:24
Visual Design and User Experience07:25
Responsiveness and Querying Media00:26
Conceptual Aside: Media00:41
Media Queries03:18
Viewports and Zoom03:22
Media Features07:50
Media Query Range Syntax03:45
Mobile First04:02
Images: srcset and picture01:18
Print01:20
Saving Time and Effort00:08
Custom Properties for Cascading Variables05:17
Minification02:36
HTML Validation02:10
CSS Frameworks00:09
Being Better Than Frameworks05:14
Game Changing CSS03:37
CSS Nesting00:45
The Nesting Module06:44
Nesting in Practice07:04
& and Pseudo-classes03:54
at-rules and Nesting06:51
CSS Layers00:57
Cascade Layers (@layer)05:20
Defining Layers09:56
Layers and the Cascade03:48
Layers in Practice06:17
Container Queries and Units (@container)00:43
The Containment Module06:08
Containment Contexts and Queries10:43
Container Query Units02:45
Container Queries in Practice07:54
The superpower of :has00:20
The Relational Pseudo-class03:51
:has in Practice05:56
:has in Practice (Part 2)04:03
Native Over Custom02:27
Landing Page00:45
Analyzing the Designer's Prototype04:35
Page Structure: HTML Authoring05:08
Exercise: Navigation (HTML Authoring)02:09
Navigation: HTML Authoring02:56
Exercise: Hero (HTML Authoring)02:04
Hero: HTML Authoring01:00
Exercise: Features (HTML Authoring)02:22
Features: HTML Authoring01:52
Exercise: About Us (HTML Authoring)08:36
About Us: HTML Authoring17:34
Exercise: Contact Us (HTML Authoring)06:29
Contact Us: HTML Authoring08:10
Exercise: Footer (HTML Authoring)01:44
Footer: HTML Authoring05:53
Layout: CSS Authoring03:38
Navigation: CSS Authoring00:00
Hero: CSS Authoring00:00
Features: CSS Authoring00:00
About Us: CSS Authoring00:00
Contact Us: CSS Authoring00:00
Footer: CSS Authoring00:00
Dashboard00:39
Analyzing the Designer's Prototype01:31
Page Structure: HTML Authoring02:41
Navigation: HTML Authoring00:55
Exercise: Overview (HTML Authoring)04:11
Metrics: HTML Authoring01:37
Exercise: Products (HTML Authoring)01:07
Table: HTML Authoring00:27
Exercise: Analytics (HTML Authoring)05:35
Analytics: HTML Authoring03:39
Footer: HTML Authoring06:05
Layout: CSS Authoring03:38
Navigation: CSS Authoring01:04
Metrics: CSS Authoring01:29
Table: CSS Authoring00:00
Analytics: CSS Authoring00:00
Footer: CSS Authoring00:00
AI, LLMs, HTML, and CSS00:36
Make Your AI an HTML Author06:02
Make Your AI a Modern CSS Author02:53
Conclusion00:08
Thank you!00:21
You Are An Author01:58
Bonus01:19

What Students Are Saying

Hear from students who have taken this course

I am a professional developer with many years of backend and frontend experience and this course has been invaluable in clearing out bad HTML habits, as well as my general antagonism toward CSS...but Tony makes sense of the HTML/CSS universe!

I highly recommend this course, and if you haven't taken it yet, his Javascript course is also absolutely fantastic! If you are a professional developer, even if you have many years of HTML and CSS under your belt (as did I), do yourself a favor and take this course. I have already made many semantic changes (for the better) to a major site that I am responsible for leading and managing, and it has made a huge difference.

I initially purchased this course for the CSS portion and almost skipped the HTML section entirely (because everyone knows HTML, right?) but boy am I glad that I went through all of the HTML as well. I had no idea I was missing so much! Thanks, Tony, for another GREAT COURSE!

John Grow

Very deep explanation of the core principals. Well structured and easy to comprehend. You get the whole picture of HTML/CSS right from the beginning so you can understand why you should do things in a certain way.

Christian Janz

A word to any new student or to-be, Tony never disappoints. From class #1, he will make sure that the course's objective is to make each student understand the subject from scratch and build from zero, holding your hand at every new concept or technical big word. Going more specifically in this course, I started my career more than years ago, and this is the type of study that brings you back to basics and provides quality classes, making you feel like you are starting web development again I can assure you a new understanding of web building and good practices for a subject much underappreciated.

It will make your everyday work better by knowing how to make good sites/apps with the correct basic understanding and building better products in the future of your career. Tony is the teacher every programmer needs to listen to at least one time in their lives.

Nicolas Omar Gonzalez Passerino

This course and this man that teaching the course I just don't know how to describe them, there's no words can describe the ability that this course will give you, the course will teach you how to understand things under the hood, how to write html and css that will make everyone happy if you are a client, a browser user agent, another developer or human being user.

Hassan Ghorab

To so sum it up in one word: INCREDIBLE! There's really good info on how things are done, but even more importantly, in my opinion, the course explains WHY things work the way they do. I've taken other HTML and CSS courses online and as part of my college curriculum, but none of them have explained either topic even half as well as this course does. I'd seen others mention Tony as a good instructor, and after taking this course, I can see why. I wish Tony could teach everything!

James S.

Ready to enroll?

Start learning today and unlock your potential.

Don't Imitate Understand by Tony Alicea. Courses, coaching, and more to grow you from beginner to dev to lead to architect and beyond in the age of AI-assisted software development.

Copyright 2026 Pioneering Pathways, LLC. All Rights Reserved