English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 207 lectures (14h 15m) | 5.41 GB
Deeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more.
In this course you’ll gain a deep understanding of HTML and CSS, 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.
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
Table of Contents
Introduction
1 Introduction
2 Tools and Setup
3 Downloading Code for this Course
Trees
4 Trees
5 Conceptual Aside Data Structures
6 The Language of Trees
7 Engine Aside Not Really a Tree
8 Traversal and Search
HTML
9 HTML
10 A Document
11 Conceptual Aside User Agents
12 Markup Describing Content
13 Language Consistent Meaning
14 Conceptual Aside Semantics and Authoring
15 Tags, Attributes, and Elements
16 Elements and Trees
17 Markup is Everywhere
18 Conceptual Aside Specifications
19 The HTML Specification
20 Conceptual Aside Author vs Implementor
21 Content Models and Kinds of Content
The Document
22 The Document
23 A Starting Point
24 Document Types
25 The Root
26 Metadata
27 Content
Document Sections
28 Document Sections
29 The Outline
30 Self-Contained Compositions
31 Thematic Groupings
32 Tangential Content
33 Headings and Rank
34 Headers and Footers
35 Addresses
Grouping Things
36 Grouping Things
37 Paragraphs
38 Did You Catch The Invalid Markup
39 Quotes
40 Unordered Lists
41 Ordered Lists
42 A Quick Check
43 Association Lists
44 Multidimensional Content
45 Multidimensional Content and Doing It Wrong
46 Dominant Content
47 div and Doing It Wrong
Text Itself
48 Text Itself
49 Emphasis
50 Importance
51 Side Comments
52 Have You Found The Invalid Markup
53 Line Breaks
54 Author’s Comments
55 span and Doing It Wrong
The Browser and the DOM
56 The Browser and the DOM
57 Conceptual Aside HTTP
58 Anchor Tags and Hypertext
59 Conceptual Aside User Agents (again)
60 Conceptual Aside The Browser
61 Blink A Rendering Engine
62 Engine Aside Parsing
63 Named Character References
64 Conceptual Aside Objects
65 Conceptual Aside Models
66 The Document Object Model
67 Building the DOM
68 Conceptual Aside Developer Tools
69 The Inspector
70 Anchor Tags (again)
71 Engine Aside Gecko
72 Engine Aside WebKit
Accessibility
73 Accessibility
74 Conceptual Aside Accessibility
75 Conceptual Aside Screen Readers
76 Semantics and Accessibility
77 ARIA
Interactivity
78 Interactivity
79 Navigation
80 Engine Aside Forms and HTTP
81 Forms, Fields, and Labels
82 Buttons
83 More Fields
84 Even More Fields
JavaScript Frameworks
85 JavaScript Frameworks
86 Conceptual Aside DOM Manipulation
87 React, Angular, Vue, and HTML Authoring
Stylesheets and Querying Trees
88 Stylesheets and Querying Trees
89 Conceptual Aside Querying a Tree
90 The CSS Specifications
91 User Agent Stylesheet
92 Type Selectors
93 Declarations
94 Inheritance
95 Author Stylesheets
96 Universal Selector
97 Attribute Selectors
98 ID Selector
99 Class Selector
100 Grouping Selectors
101 Combinators Descendant
102 Combinators Child
103 Combinators Next-Sibling
104 Combinators Subsequent Sibling
105 Conceptual Aside CSS Standards and Drafts
106 Browser Support (caniuse and MDN)
107 Child-Indexed Pseudo-classes
108 Typed Child-Indexed Pseudo-classes (and Debugging a Problem)
109 User Action Pseudo-classes
110 Input Pseudo-classes
111 Negation Pseudo-class
112 Pseudo-elements
113 The Cascade
114 Importance
115 Specificity
116 Order of Appearance
117 Cascade Layers and @import
118 inherit, initial, and Specified Values
119 Matches-Any Pseudo Class
120 Specificity-Adjustment Pseudo Class
121 Optimization
122 Engine Aside The CSSOM
Box Model
123 Box Model
124 Conceptual Aside Rendering
125 Visual Formatting Model
126 Box Model
127 Viewport and Coordinates
128 Engine Aside Layout
129 Conceptual Aside Pixels, Pixel Density, and Reference Pixels
130 Units and Computed Values
131 Engine Aside Intrinsic Size
132 Box Sizing
133 Conceptual Aside Functions
134 Calc, min, max, clamp
135 Engine Aside Formatting Contexts
Box Position
136 Box Position
137 Positioning Schemes
138 Static
139 Relative
140 Absolute
141 Fixed
142 Sticky
Painting and Images
143 Painting
144 Engine Aside Painting
145 Visibility
146 Z-Index
147 Images img
Flow
148 Flow
149 Display
150 Block
151 Float
152 Inline, Vertical Align, Line-Height and More
153 flow-root and BFCs
154 Conceptual Aside Multilingual Support
155 Writing Mode
156 Direction
157 Text-Orientation
158 Logical Properties
159 Sticky Nav Note
160 Inline-Block
161 None
162 Table, List-Item, and More
Flexbox
163 Flexbox
164 Flex Formatting Context
165 Flow Direction
166 Display Order
167 Wrapping and Overflow
168 Flex
169 Alignment
170 Collapse
171 Inline-Flex
Grid
172 Grid
173 Grid Formatting Context
174 Conceptual Aside Fractional Units
175 Track Sizing
176 Item Placement
177 Track Repetition
178 Alignment and Spacing
179 Layering
180 A Visual Change
Fonts, Colors, and More
181 Fonts, Colors, and More
182 Fonts
183 Hexadecimal, RBG, and Named Colors
184 Opacity
185 Backgrounds
186 Transitions
187 Animations
188 Images SVGs
189 A Semantic Change
190 Visual Design and User Experience
Responsiveness and Querying Media
191 Responsiveness and Querying Media
192 Conceptual Aside Media
193 Media Queries
194 Viewports and Zoom
195 Media Features
196 Mobile First
197 Images srcset and picture
198 Print
Saving Time and Effort
199 Saving Time and Effort
200 Custom Properties for Cascading Variables
201 Minification
202 HTML Validation
CSS Frameworks
203 CSS Frameworks
204 Being Better Than Frameworks
Conclusion
205 Conclusion
206 You Are An Author
207 Bonus
Resolve the captcha to access the links!