Understanding HTML and CSS

Deeply understand Semantic HTML5, CSS3, Flexbox, Grid, learn to read the specifications, and more.
Understanding HTML and CSS
File Size :
5.94 GB
Total length :
14h 16m



Anthony Alicea


Last update

Last updated 7/2022



Understanding HTML and CSS

What you’ll learn

Author semantic HTML.
Use semantic HTML to improve the accessibility of your websites and apps.
Layout web pages visually using CSS.
Read and understand the HTML and CSS specifications to be able to continue teaching yourself.
Understand how browser rendering engines work.
Gain a proper understanding of the CSS cascade, inheritance, and specificity.
Advanced CSS features like Flexbox and Grid.

Understanding HTML and CSS


No experience needed.


In this course you’ll gain a deep understanding of HTML and CSS (HTML5, CSS3 and beyond), as we dive into how these technologies really work. We’ll look at the problems HTML and CSS are trying to solve and how they solve them. We’ll dive into how browser rendering engines really work. We’ll gain confidence to read and understand the HTML and CSS specifications, so you can continue to teach yourself in the future and keep your skills fresh.Along the way we’ll follow our core philosophy of “Don’t Imitate, Understand”. Simply copying others’ projects won’t help you when faced with a real-world job that doesn’t look like the projects you’ve copied. To succeed in a real world job, you need to truly understand.This course is designed for beginners to learn from scratch, but also to break experienced developers out of bad habits.Some things you will learn in this course are:Learn to author semantic HTML.Learn how semantic HTML improves the accessibility of your user interface.Learn to read and understand the HTML and CSS specifications, so you can continue to teach yourself.Understand how browser rendering engines work, under the hood.Gain a deep understanding of the browser DOM.Gain a proper understanding of the CSS cascade, inheritance, and specificity.Understand advanced CSS features such as Flexbox and Grid.If you are new to HTML and CSS: you will learn fundamentals and skills that will help you the rest of your career.If you are an experienced developer: you will learn to reset your mental models, understand and rely on the official specifications, and dramatically improve your day-to-day development experience.


Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Tools and Setup

Lecture 3 Downloading Code for this Course

Section 2: Trees

Lecture 4 Trees

Lecture 5 Conceptual Aside: Data Structures

Lecture 6 The Language of Trees

Lecture 7 Engine Aside: Not Really a Tree

Lecture 8 Traversal and Search

Section 3: HTML

Lecture 9 HTML

Lecture 10 A Document

Lecture 11 Conceptual Aside: User Agents

Lecture 12 Markup: Describing Content

Lecture 13 Language: Consistent Meaning

Lecture 14 Conceptual Aside: Semantics and Authoring

Lecture 15 Tags, Attributes, and Elements

Lecture 16 Elements and Trees

Lecture 17 Markup is Everywhere

Lecture 18 Conceptual Aside: Specifications

Lecture 19 The HTML Specification

Lecture 20 Conceptual Aside: Author vs Implementor

Lecture 21 Content Models and Kinds of Content

Section 4: The Document

Lecture 22 The Document

Lecture 23 A Starting Point

Lecture 24 Document Types

Lecture 25 The Root

Lecture 26 Metadata

Lecture 27 Content

Section 5: Document Sections

Lecture 28 Document Sections

Lecture 29 The Outline

Lecture 30 Self-Contained Compositions

Lecture 31 Thematic Groupings

Lecture 32 Tangential Content

Lecture 33 Headings and Rank

Lecture 34 Headers and Footers

Lecture 35 Addresses

Section 6: Grouping Things

Lecture 36 Grouping Things

Lecture 37 Paragraphs

Lecture 38 Did You Catch The Invalid Markup?

Lecture 39 Quotes

Lecture 40 Unordered Lists

Lecture 41 Ordered Lists

Lecture 42 A Quick Check

Lecture 43 Association Lists

Lecture 44 Multidimensional Content

Lecture 45 Multidimensional Content and Doing It Wrong

Lecture 46 Dominant Content

Lecture 47 div and Doing It Wrong

Section 7: Text Itself

Lecture 48 Text Itself

Lecture 49 Emphasis

Lecture 50 Importance

Lecture 51 Side Comments

Lecture 52 Have You Found The Invalid Markup?

Lecture 53 Line Breaks

Lecture 54 Author’s Comments

Lecture 55 span and Doing It Wrong

Section 8: The Browser and the DOM

Lecture 56 The Browser and the DOM

Lecture 57 Conceptual Aside: HTTP

Lecture 58 Anchor Tags and Hypertext

Lecture 59 Conceptual Aside: User Agents (again)

Lecture 60 Conceptual Aside: The Browser

Lecture 61 Blink: A Rendering Engine

Lecture 62 Engine Aside: Parsing

Lecture 63 Named Character References

Lecture 64 Conceptual Aside: Objects

Lecture 65 Conceptual Aside: Models

Lecture 66 The Document Object Model

Lecture 67 Building the DOM

Lecture 68 Conceptual Aside: Developer Tools

Lecture 69 The Inspector

Lecture 70 Anchor Tags (again)

Lecture 71 Engine Aside: Gecko

Lecture 72 Engine Aside: WebKit

Section 9: Accessibility

Lecture 73 Accessibility

Lecture 74 Conceptual Aside: Accessibility

Lecture 75 Conceptual Aside: Screen Readers

Lecture 76 Semantics and Accessibility

Lecture 77 ARIA

Section 10: Interactivity

Lecture 78 Interactivity

Lecture 79 Navigation

Lecture 80 Engine Aside: Forms and HTTP

Lecture 81 Forms, Fields, and Labels

Lecture 82 Buttons

Lecture 83 More Fields

Lecture 84 Even More Fields

Section 11: JavaScript Frameworks

Lecture 85 JavaScript Frameworks

Lecture 86 Conceptual Aside: DOM Manipulation

Lecture 87 React, Angular, Vue, and HTML Authoring

Section 12: Stylesheets and Querying Trees

Lecture 88 Stylesheets and Querying Trees

Lecture 89 Conceptual Aside: Querying a Tree

Lecture 90 The CSS Specifications

Lecture 91 User Agent Stylesheet

Lecture 92 Type Selectors

Lecture 93 Declarations

Lecture 94 Inheritance

Lecture 95 Author Stylesheets

Lecture 96 Universal Selector

Lecture 97 Attribute Selectors

Lecture 98 ID Selector

Lecture 99 Class Selector

Lecture 100 Grouping Selectors

Lecture 101 Combinators: Descendant

Lecture 102 Combinators: Child

Lecture 103 Combinators: Next-Sibling

Lecture 104 Combinators: Subsequent Sibling

Lecture 105 Conceptual Aside: CSS Standards and Drafts

Lecture 106 Browser Support (caniuse and MDN)

Lecture 107 Child-Indexed Pseudo-classes

Lecture 108 Typed Child-Indexed Pseudo-classes (and Debugging a Problem)

Lecture 109 User Action Pseudo-classes

Lecture 110 Input Pseudo-classes

Lecture 111 Negation Pseudo-class

Lecture 112 Pseudo-elements

Lecture 113 The Cascade

Lecture 114 Importance

Lecture 115 Specificity

Lecture 116 Order of Appearance

Lecture 117 Cascade Layers and @import

Lecture 118 inherit, initial, and Specified Values

Lecture 119 Matches-Any Pseudo Class

Lecture 120 Specificity-Adjustment Pseudo Class

Lecture 121 Optimization

Lecture 122 Engine Aside: The CSSOM

Section 13: Box Model

Lecture 123 Box Model

Lecture 124 Conceptual Aside: Rendering

Lecture 125 Visual Formatting Model

Lecture 126 Box Model

Lecture 127 Viewport and Coordinates

Lecture 128 Engine Aside: Layout

Lecture 129 Conceptual Aside: Pixels, Pixel Density, and Reference Pixels

Lecture 130 Units and Computed Values

Lecture 131 Engine Aside: Intrinsic Size

Lecture 132 Box Sizing

Lecture 133 Conceptual Aside: Functions

Lecture 134 Calc, min, max, clamp

Lecture 135 Engine Aside: Formatting Contexts

Section 14: Box Position

Lecture 136 Box Position

Lecture 137 Positioning Schemes

Lecture 138 Static

Lecture 139 Relative

Lecture 140 Absolute

Lecture 141 Fixed

Lecture 142 Sticky

Section 15: Painting and Images

Lecture 143 Painting

Lecture 144 Engine Aside: Painting

Lecture 145 Visibility

Lecture 146 Z-Index

Lecture 147 Images: img

Section 16: Flow

Lecture 148 Flow

Lecture 149 Display

Lecture 150 Block

Lecture 151 Float

Lecture 152 Inline, Vertical Align, Line-Height and More

Lecture 153 flow-root and BFCs

Lecture 154 Conceptual Aside: Multilingual Support

Lecture 155 Writing Mode

Lecture 156 Direction

Lecture 157 Text-Orientation

Lecture 158 Logical Properties

Lecture 159 Sticky Nav Note

Lecture 160 Inline-Block

Lecture 161 None

Lecture 162 Table, List-Item, and More

Section 17: Flexbox

Lecture 163 Flexbox

Lecture 164 Flex Formatting Context

Lecture 165 Flow Direction

Lecture 166 Display Order

Lecture 167 Wrapping and Overflow

Lecture 168 Flex

Lecture 169 Alignment

Lecture 170 Collapse

Lecture 171 Inline-Flex

Section 18: Grid

Lecture 172 Grid

Lecture 173 Grid Formatting Context

Lecture 174 Conceptual Aside: Fractional Units

Lecture 175 Track Sizing

Lecture 176 Item Placement

Lecture 177 Track Repetition

Lecture 178 Alignment and Spacing

Lecture 179 Layering

Lecture 180 A Visual Change

Section 19: Fonts, Colors, and More

Lecture 181 Fonts, Colors, and More

Lecture 182 Fonts

Lecture 183 Hexadecimal, RBG, and Named Colors

Lecture 184 Opacity

Lecture 185 Backgrounds

Lecture 186 Transitions

Lecture 187 Animations

Lecture 188 Images: SVGs

Lecture 189 A Semantic Change

Lecture 190 Visual Design and User Experience

Section 20: Responsiveness and Querying Media

Lecture 191 Responsiveness and Querying Media

Lecture 192 Conceptual Aside: Media

Lecture 193 Media Queries

Lecture 194 Viewports and Zoom

Lecture 195 Media Features

Lecture 196 Mobile First

Lecture 197 Images: srcset and picture

Lecture 198 Print

Section 21: Saving Time and Effort

Lecture 199 Saving Time and Effort

Lecture 200 Custom Properties for Cascading Variables

Lecture 201 Minification

Lecture 202 HTML Validation

Section 22: CSS Frameworks

Lecture 203 CSS Frameworks

Lecture 204 Being Better Than Frameworks

Section 23: Conclusion

Lecture 205 Conclusion

Lecture 206 You Are An Author

Lecture 207 Bonus

Complete beginners as well as experienced developers.

Course Information:

Udemy | English | 14h 16m | 5.94 GB
Created by: Anthony Alicea

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top