Understanding HTML and CSS

Name: Understanding HTML and CSS
Price: 12.75 USD
Availability: InStock

17h 52m 36s

English

Paid

July 20, 2024

Deeply understand Semantic HTML, CSS, Flexbox, and Grid. In this course, you'll gain a deep understanding of HTML and CSS, as we dive into how these technologies really work. We'll explore the problems HTML and CSS aim to solve and how they address them. Additionally, we will delve into the workings of browser rendering engines, building your confidence to read and understand the HTML and CSS specifications so you can continue to teach yourself and keep your skills up-to-date.

Course Philosophy

Our core philosophy is "Don’t Imitate, Understand." Simply copying others' projects won't help you when faced with real-world challenges that differ from the projects you've copied. Success in the professional world requires a true understanding.

Who Should Take This Course?

This course is designed for both beginners and experienced developers looking to refresh their skills. Beginners will learn from scratch, while seasoned professionals can break out of any bad coding habits.

Beginners

If you are new to HTML and CSS: You'll acquire fundamentals and skills essential for a successful career.

Experienced Developers

If you are an experienced developer: Learn to reset your mental models, understand and rely on official specifications, and significantly enhance your day-to-day development experience.

Key Learning Points

Author semantic HTML effectively.
Enhance the accessibility of your user interface with semantic HTML.
Read and comprehend the HTML and CSS specifications to continue self-education.
Understand the intricacies of browser rendering engines.
Develop a deep understanding of the browser DOM.
Grasp the CSS cascade, inheritance, and specificity.
Master advanced CSS features such as Flexbox and Grid.

About the Author: udemy

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 256 lessons

0:00

#1: Introduction

All Course Lessons (256)

#	Lesson Title	Duration
1	Introduction Demo	03:02
2	Tools and Setup	00:56
3	Trees	00:15
4	Conceptual Aside: Data Structures	03:43
5	The Language of Trees	02:23
6	Engine Aside: Not Really a Tree	01:31
7	Traversal and Search	01:47
8	HTML	00:55
9	A Document	02:24
10	Conceptual Aside: User Agents	03:48
11	Markup: Describing Content	03:24
12	Language: Consistent Meaning	02:11
13	Conceptual Aside: Semantics and Authoring	01:52
14	Tags, Attributes, and Elements	02:10
15	Elements and Trees	02:32
16	Markup is Everywhere	02:37
17	Conceptual Aside: Specifications	01:31
18	The HTML Specification	07:16
19	Conceptual Aside: Author vs Implementor	02:05
20	Content Models and Kinds of Content	02:45
21	The Document	00:13
22	A Starting Point	00:50
23	Document Types	01:23
24	The Root	02:54
25	Metadata	03:54
26	Content	01:48
27	Document Sections	00:13
28	The Outline	04:20
29	Self-Contained Compositions	06:02
30	Thematic Groupings	06:06
31	Tangential Content	04:06
32	Headings and Rank	05:21
33	Headers and Footers	03:34
34	Addresses	03:07
35	Grouping Things	00:12
36	Paragraphs	02:20
37	Did You Catch The Invalid Markup?	00:49
38	Quotes	02:16
39	Unordered Lists	02:48
40	Ordered Lists	01:59
41	A Quick Check	01:24
42	Association Lists	07:31
43	Multidimensional Content	10:14
44	Multidimensional Content and Doing It Wrong	05:11
45	Dominant Content	02:33
46	div and Doing It Wrong	08:43
47	Text Itself	00:28
48	Emphasis	07:46
49	Importance	03:01
50	Side Comments	02:04
51	Have You Found The Invalid Markup?	01:03
52	Line Breaks	05:38
53	Author's Comments	02:09
54	span and Doing It Wrong	03:10
55	The Browser and the DOM	00:33
56	Conceptual Aside: HTTP	08:21
57	Anchor Tags and Hypertext	05:16
58	Conceptual Aside: User Agents (again)	01:36
59	Conceptual Aside: The Browser	02:17
60	Blink: A Rendering Engine	02:28
61	Engine Aside: Parsing	02:11
62	Named Character References	04:18
63	Conceptual Aside: Objects	01:25
64	Conceptual Aside: Models	02:46
65	The Document Object Model	02:35
66	Building the DOM	08:00
67	Conceptual Aside: Developer Tools	01:53
68	The Inspector	08:34
69	Anchor Tags (again)	08:10
70	Engine Aside: Gecko	02:12
71	Engine Aside: WebKit	01:40
72	Accessibility	00:14
73	Conceptual Aside: Accessibility	00:39
74	Conceptual Aside: Screen Readers	01:44
75	Semantics and Accessibility	08:59
76	ARIA	02:20
77	Interactivity	00:23
78	Navigation	01:49
79	Engine Aside: Forms and HTTP	04:41
80	Forms, Fields, and Labels	15:16
81	Buttons	07:01
82	More Fields	09:57
83	Even More Fields	08:59
84	JavaScript Frameworks	00:32
85	Conceptual Aside: DOM Manipulation	02:18
86	React, Angular, Vue, and HTML Authoring	05:49
87	Stylesheets and Querying Trees	00:22
88	Conceptual Aside: Querying a Tree	02:01
89	The CSS Specifications	11:46
90	User Agent Stylesheet	07:03
91	Type Selectors	02:20
92	Declarations	02:24
93	Inheritance	02:38
94	Author Stylesheets	04:12
95	Universal Selector	04:20
96	Attribute Selectors	09:31
97	ID Selector	03:13
98	Class Selector	06:35
99	Grouping Selectors	05:58
100	Combinators: Descendant	04:15
101	Combinators: Child	03:12
102	Combinators: Next-Sibling	02:49
103	Combinators: Subsequent Sibling	01:59
104	Conceptual Aside: CSS Standards and Drafts	06:39
105	Browser Support (caniuse and MDN)	06:19
106	Child-Indexed Pseudo-classes	08:21
107	Typed Child-Indexed Pseudo-classes (and Debugging a Problem)	14:14
108	Location Pseudo-classes	03:45
109	User Action Pseudo-classes	02:43
110	Negation Pseudo-class	02:13
111	Pseudo-elements	02:50
112	The Cascade	16:00
113	Importance	06:59
114	Specificity	07:36
115	Order of Appearance	03:05
116	Cascade Layers and @import	06:35
117	inherit, initial, and Specified Values	08:04
118	Matches-Any Pseudo-Class	03:16
119	Specificity-Adjustment Pseudo-Class	05:19
120	Optimization	04:14
121	Engine Aside: The CSSOM	01:52
122	Box Model	00:27
123	Conceptual Aside: Rendering	03:05
124	Visual Formatting Model	04:37
125	Box Model	04:32
126	Viewport and Coordinates	02:59
127	Engine Aside: Layout	01:27
128	Conceptual Aside: Pixels, Pixel Density, and Reference Pixels	03:04
129	Units and Computed Values	09:46
130	Engine Aside: Intrinsic Size	02:18
131	Box Sizing	20:06
132	Conceptual Aside: Functions	02:04
133	Calc, min, max, clamp	03:02
134	Engine Aside: Formatting Contexts	03:54
135	Box Position	00:18
136	Positioning Schemes	01:38
137	Static	02:09
138	Relative	03:59
139	Absolute	05:33
140	Fixed	02:29
141	Sticky	01:29
142	Painting	00:19
143	Engine Aside: Painting	01:32
144	Visibility	01:24
145	Z-Index	13:40
146	Images: img	08:26
147	Flow	00:19
148	Display	01:59
149	Block	11:22
150	Float	04:35
151	Inline, Vertical Align, Line-Height and More	11:57
152	flow-root and BFCs	03:22
153	Conceptual Aside: Multilingual Support	03:28
154	Writing Mode	08:01
155	Direction	02:48
156	Text-Orientation	03:25
157	Logical Properties	14:05
158	Inline-Block	01:04
159	None	02:22
160	Table, List-Item, and More	02:59
161	Flexbox	00:12
162	Flex Formatting Context	08:13
163	Flow Direction	14:14
164	Display Order	04:43
165	Wrapping and Overflow	04:26
166	Flex	15:00
167	Alignment	09:34
168	Collapse	03:00
169	Inline-Flex	01:42
170	Grid	00:19
171	Grid Formatting Context	10:14
172	Conceptual Aside: Fractional Units	01:45
173	Track Sizing	09:35
174	Item Placement	10:09
175	Track Repetition	05:35
176	Alignment and Spacing	06:41
177	Layering	01:41
178	A Visual Change	08:05
179	Fonts, Colors, and More	00:22
180	Fonts	05:26
181	Hexadecimal, RBG, and Named Colors	06:48
182	Opacity	01:37
183	Backgrounds	01:51
184	Transitions	04:28
185	Animations	07:13
186	Images: SVGs	04:20
187	A Semantic Change	03:25
188	Visual Design and User Experience	07:26
189	Responsiveness and Querying Media	00:27
190	Conceptual Aside: Media	00:42
191	Media Queries	03:20
192	Viewports and Zoom	03:23
193	Media Features	07:51
194	Media Query Range Syntax	03:46
195	Mobile First	04:03
196	Images: srcset and picture	01:19
197	Print	01:21
198	Saving Time and Effort	00:09
199	Custom Properties for Cascading Variables	05:18
200	Minification	02:37
201	HTML Validation	02:11
202	CSS Frameworks	00:10
203	Being Better Than Frameworks	05:15
204	Game Changing CSS	03:38
205	CSS Nesting	00:46
206	The Nesting Module	06:45
207	Nesting in Practice	07:05
208	& and Pseudo-classes	03:55
209	at-rules and Nesting	06:52
210	CSS Layers	00:58
211	Cascade Layers (@layer)	05:21
212	Defining Layers	09:57
213	Layers and the Cascade	03:49
214	Layers in Practice	06:18
215	Container Queries and Units (@container)	00:45
216	The Containment Module	06:09
217	Containment Contexts and Queries	10:44
218	Container Query Units	02:47
219	Container Queries in Practice	07:56
220	The superpower of :has	00:21
221	The Relational Pseudo-class	03:52
222	:has in Practice	05:58
223	:has in Practice (Part 2)	04:04
224	Native Over Custom	02:28
225	Landing Page	00:46
226	Analyzing the Designer's Prototype	04:36
227	Page Structure: HTML Authoring	05:09
228	Navigation: HTML Authoring	02:10
229	Hero: HTML Authoring	02:57
230	Features: HTML Authoring	02:05
231	About Us: HTML Authoring	01:01
232	Contact Us: HTML Authoring	02:23
233	Footer: HTML Authoring	01:53
234	Layout: CSS Authoring	08:37
235	Navigation: CSS Authoring	17:35
236	Hero: CSS Authoring	06:30
237	Features: CSS Authoring	08:12
238	About Us: CSS Authoring	01:45
239	Contact Us: CSS Authoring	05:54
240	Footer: CSS Authoring	03:39
241	Dashboard	00:40
242	Analyzing the Designer's Prototype	01:32
243	Page Structure: HTML Authoring	02:43
244	Navigation: HTML Authoring	00:56
245	Metrics: HTML Authoring	04:12
246	Table: HTML Authoring	01:38
247	Analytics: HTML Authoring	01:08
248	Footer: HTML Authoring	00:28
249	Layout: CSS Authoring	05:36
250	Navigation: CSS Authoring	03:40
251	Metrics: CSS Authoring	06:06
252	Table: CSS Authoring	03:39
253	Analytics: CSS Authoring	01:05
254	Footer: CSS Authoring	01:30
255	Conclusion	00:10
256	You Are An Author	01:59

Unlock unlimited learning

Get instant access to all 255 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription