Understanding HTML and CSS (2024 Edition) by Udemy
Deeply understand modern HTML/CSS: Layers, Containers, :has, Nesting, Grid, Flexbox, Semantic HTML, Multiple projects
Course Highlights
- 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.
- Hyper-modern features like Container Queries, :has, Nesting, and Layers to keep your skills modern and cutting-edge.
Skills you will learn!
Curriculum
3 Topics
Introduction
Tools and Setup
Downloading Code for this Course
6 Topics
Trees
Conceptual Aside: Data Structures
The Language of Trees
Engine Aside: Not Really a Tree
Traversal and Search
Understanding Trees
14 Topics
HTML
A Document
Conceptual Aside: User Agents
Markup: Describing Content
Language: Consistent Meaning
Conceptual Aside: Semantics and Authoring
Tags Attributes and Elements
Elements and Trees
Markup is Everywhere
Conceptual Aside: Specifications
The HTML Specification
Conceptual Aside: Author vs Implementor
Content Models and Kinds of Content
Understanding HTML
7 Topics
The Document
A Starting Point
Document Types
The Root
Metadata
Content
Understanding The Document
9 Topics
Document Sections
The Outline
Self-Contained Compositions
Thematic Groupings
Tangential Content
Headings and Rank
Headers and Footers
Addresses
Quiz: Document Sections
13 Topics
Grouping Things
Paragraphs
Did You Catch The Invalid Markup?
Quotes
Unordered Lists
Ordered Lists
A Quick Check
Association Lists
Multidimensional Content
Multidimensional Content and Doing It Wrong
Dominant Content
div and Doing It Wrong
Quiz: Grouping Things
9 Topics
Text Itself
Emphasis
Importance
Side Comments
Have You Found The Invalid Markup?
Line Breaks
Author's Comments
span and Doing It Wrong
Thinking Semantically
17 Topics
The Browser and the DOM
Conceptual Aside: HTTP
Anchor Tags and Hypertext
Conceptual Aside: User Agents (again)
Conceptual Aside: The Browser
Blink: A Rendering Engine
Engine Aside: Parsing
Named Character References
Conceptual Aside: Objects
Conceptual Aside: Models
The Document Object Model
Building the DOM
Conceptual Aside: Developer Tools
The Inspector
Anchor Tags (again)
Engine Aside: Gecko
Engine Aside: WebKit
5 Topics
Accessibility
Conceptual Aside: Accessibility
Conceptual Aside: Screen Readers
Semantics and Accessibility
ARIA
7 Topics
Interactivity
Navigation
Engine Aside: Forms and HTTP
Forms Fields and Labels
Buttons
More Fields
Even More Fields
3 Topics
JavaScript Frameworks
Conceptual Aside: DOM Manipulation
React Angular Vue and HTML Authoring
47 Topics
Stylesheets and Querying Trees
Conceptual Aside: Querying a Tree
The CSS Specifications
User Agent Stylesheet
Type Selectors
Declarations
Inheritance
Author Stylesheets
Universal Selector
Attribute Selectors
ID Selector
Class Selector
Grouping Selectors
Exercise: Grouping Selectors
Combinators: Descendant
Exercise: Descendant Combinator
Combinators: Child
Exercise: Child Combinator
Combinators: Next-Sibling
Exercise: Next-Sibling
Combinators: Subsequent Sibling
Exercise: Subsequent Sibling
Conceptual Aside: CSS Standards and Drafts
Browser Support (caniuse and MDN)
Child-Indexed Pseudo-classes
Exercise: Child-Indexed Pseudo-classes
Typed Child-Indexed Pseudo-classes (and Debugging a Problem)
Exercise: Typed Child-Indexed Pseudo-classes
Location Pseudo-classes
Exercise: Location Pseudo-Class
User Action Pseudo-classes
Exercise: User Action Pseudo-Class
Negation Pseudo-class
Exercise: Negation Pseudo-Class
Pseudo-elements
Exercise: Pseudo-Element
The Cascade
Importance
Specificity
Exercise: Specificity
Order of Appearance
Cascade Layers and @import
inherit initial and Specified Values
Matches-Any Pseudo-Class
Specificity-Adjustment Pseudo-Class
Optimization
Engine Aside: The CSSOM
13 Topics
Box Model
Conceptual Aside: Rendering
Visual Formatting Model
Box Model
Viewport and Coordinates
Engine Aside: Layout
Conceptual Aside: Pixels Pixel Density and Reference Pixels
Units and Computed Values
Engine Aside: Intrinsic Size
Box Sizing
Conceptual Aside: Functions
Calc min max clamp
Engine Aside: Formatting Contexts
7 Topics
Box Position
Positioning Schemes
Static
Relative
Absolute
Fixed
Sticky
5 Topics
Painting
Engine Aside: Painting
Visibility
Z-Index
Images: img
15 Topics
Flow
Display
Block
Float
Inline Vertical Align Line-Height and More
flow-root and BFCs
Conceptual Aside: Multilingual Support
Writing Mode
Direction
Text-Orientation
Logical Properties
Sticky Nav Note
Inline-Block
None
Table List-Item and More
9 Topics
Flexbox
Flex Formatting Context
Flow Direction
Display Order
Wrapping and Overflow
Flex
Alignment
Collapse
Inline-Flex
9 Topics
Grid
Grid Formatting Context
Conceptual Aside: Fractional Units
Track Sizing
Item Placement
Track Repetition
Alignment and Spacing
Layering
A Visual Change
10 Topics
Fonts Colors and More
Fonts
Hexadecimal RBG and Named Colors
Opacity
Backgrounds
Transitions
Animations
Images: SVGs
A Semantic Change
Visual Design and User Experience
9 Topics
Responsiveness and Querying Media
Conceptual Aside: Media
Media Queries
Viewports and Zoom
Media Features
Media Query Range Syntax
Mobile First
Images: srcset and picture
Print
4 Topics
Saving Time and Effort
Custom Properties for Cascading Variables
Minification
HTML Validation
2 Topics
CSS Frameworks
Being Better Than Frameworks
1 Topic
Game Changing CSS
5 Topics
CSS Nesting
The Nesting Module
Nesting in Practice
& and Pseudo-classes
at-rules and Nesting
5 Topics
CSS Layers
Cascade Layers (@layer)
Defining Layers
Layers and the Cascade
Layers in Practice
5 Topics
Container Queries and Units (@container)
The Containment Module
Containment Contexts and Queries
Container Query Units
Container Queries in Practice
5 Topics
The superpower of :has
The Relational Pseudo-class
:has in Practice
:has in Practice (Part 2)
Native Over Custom
22 Topics
Landing Page
Analyzing the Designer's Prototype
Page Structure: HTML Authoring
Exercise: Navigation (HTML Authoring)
Navigation: HTML Authoring
Exercise: Hero (HTML Authoring)
Hero: HTML Authoring
Exercise: Features (HTML Authoring)
Features: HTML Authoring
Exercise: About Us (HTML Authoring)
About Us: HTML Authoring
Exercise: Contact Us (HTML Authoring)
Contact Us: HTML Authoring
Exercise: Footer (HTML Authoring)
Footer: HTML Authoring
Layout: CSS Authoring
Navigation: CSS Authoring
Hero: CSS Authoring
Features: CSS Authoring
About Us: CSS Authoring
Contact Us: CSS Authoring
Footer: CSS Authoring
17 Topics
Dashboard
Analyzing the Designer's Prototype
Page Structure: HTML Authoring
Navigation: HTML Authoring
Exercise: Overview (HTML Authoring)
Metrics: HTML Authoring
Exercise: Products (HTML Authoring)
Table: HTML Authoring
Exercise: Analytics (HTML Authoring)
Analytics: HTML Authoring
Footer: HTML Authoring
Layout: CSS Authoring
Navigation: CSS Authoring
Metrics: CSS Authoring
Table: CSS Authoring
Analytics: CSS Authoring
Footer: CSS Authoring
4 Topics
Conclusion
Thank you!
You Are An Author
Bonus
Understanding HTML and CSS (2024 Edition)
Related CSS Courses
Thank You!
Your review has been submitted successfully.