Mô tả

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.

Bạn sẽ học được gì

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.

Yêu cầu

  • No experience needed.

Nội dung khoá học

23 sections

Introduction

3 lectures
Introduction
03:00
Tools and Setup
00:55
Downloading Code for this Course
00:36

Trees

6 lectures
Trees
00:14
Conceptual Aside: Data Structures
03:42
The Language of Trees
02:22
Engine Aside: Not Really a Tree
01:30
Traversal and Search
01:46
Understanding Trees
1 question

HTML

13 lectures
HTML
00:54
A Document
02:23
Conceptual Aside: User Agents
03:47
Markup: Describing Content
03:23
Language: Consistent Meaning
02:10
Conceptual Aside: Semantics and Authoring
01:51
Tags, Attributes, and Elements
02:09
Elements and Trees
02:31
Markup is Everywhere
02:36
Conceptual Aside: Specifications
01:30
The HTML Specification
07:15
Conceptual Aside: Author vs Implementor
02:04
Content Models and Kinds of Content
02:44

The Document

6 lectures
The Document
00:12
A Starting Point
00:49
Document Types
01:22
The Root
02:52
Metadata
03:53
Content
01:47

Document Sections

8 lectures
Document Sections
00:12
The Outline
04:19
Self-Contained Compositions
06:01
Thematic Groupings
06:05
Tangential Content
04:05
Headings and Rank
05:20
Headers and Footers
03:33
Addresses
03:06

Grouping Things

12 lectures
Grouping Things
00:11
Paragraphs
02:19
Did You Catch The Invalid Markup?
00:48
Quotes
02:15
Unordered Lists
02:47
Ordered Lists
01:58
A Quick Check
01:23
Association Lists
07:29
Multidimensional Content
10:13
Multidimensional Content and Doing It Wrong
05:10
Dominant Content
02:32
div and Doing It Wrong
08:41

Text Itself

9 lectures
Text Itself
00:27
Emphasis
07:45
Importance
02:59
Side Comments
02:02
Have You Found The Invalid Markup?
01:02
Line Breaks
05:37
Author's Comments
02:08
span and Doing It Wrong
03:08
Thinking Semantically
1 question

The Browser and the DOM

17 lectures
The Browser and the DOM
00:32
Conceptual Aside: HTTP
08:20
Anchor Tags and Hypertext
05:15
Conceptual Aside: User Agents (again)
01:35
Conceptual Aside: The Browser
02:16
Blink: A Rendering Engine
02:27
Engine Aside: Parsing
02:10
Named Character References
04:17
Conceptual Aside: Objects
01:24
Conceptual Aside: Models
02:45
The Document Object Model
02:34
Building the DOM
07:59
Conceptual Aside: Developer Tools
01:52
The Inspector
08:33
Anchor Tags (again)
08:09
Engine Aside: Gecko
02:11
Engine Aside: WebKit
01:39

Accessibility

5 lectures
Accessibility
00:13
Conceptual Aside: Accessibility
00:38
Conceptual Aside: Screen Readers
01:43
Semantics and Accessibility
08:58
ARIA
02:19

Interactivity

7 lectures
Interactivity
00:22
Navigation
01:48
Engine Aside: Forms and HTTP
04:40
Forms, Fields, and Labels
15:15
Buttons
07:00
More Fields
09:56
Even More Fields
08:58

JavaScript Frameworks

3 lectures
JavaScript Frameworks
00:31
Conceptual Aside: DOM Manipulation
02:17
React, Angular, Vue, and HTML Authoring
05:48

Stylesheets and Querying Trees

35 lectures
Stylesheets and Querying Trees
00:21
Conceptual Aside: Querying a Tree
02:00
The CSS Specifications
11:45
User Agent Stylesheet
07:01
Type Selectors
02:19
Declarations
02:23
Inheritance
02:37
Author Stylesheets
04:11
Universal Selector
04:19
Attribute Selectors
09:29
ID Selector
03:12
Class Selector
06:34
Grouping Selectors
05:57
Combinators: Descendant
04:14
Combinators: Child
03:11
Combinators: Next-Sibling
02:48
Combinators: Subsequent Sibling
01:58
Conceptual Aside: CSS Standards and Drafts
06:38
Browser Support (caniuse and MDN)
06:18
Child-Indexed Pseudo-classes
08:20
Typed Child-Indexed Pseudo-classes (and Debugging a Problem)
14:12
User Action Pseudo-classes
03:44
Input Pseudo-classes
02:42
Negation Pseudo-class
02:12
Pseudo-elements
02:49
The Cascade
15:59
Importance
06:58
Specificity
07:34
Order of Appearance
03:04
Cascade Layers and @import
06:10
inherit, initial, and Specified Values
08:03
Matches-Any Pseudo Class
03:15
Specificity-Adjustment Pseudo Class
05:18
Optimization
04:13
Engine Aside: The CSSOM
01:51

Box Model

13 lectures
Box Model
00:26
Conceptual Aside: Rendering
03:04
Visual Formatting Model
04:36
Box Model
04:31
Viewport and Coordinates
02:58
Engine Aside: Layout
01:26
Conceptual Aside: Pixels, Pixel Density, and Reference Pixels
03:03
Units and Computed Values
09:45
Engine Aside: Intrinsic Size
02:17
Box Sizing
20:05
Conceptual Aside: Functions
02:03
Calc, min, max, clamp
03:01
Engine Aside: Formatting Contexts
03:53

Box Position

7 lectures
Box Position
00:16
Positioning Schemes
01:37
Static
02:08
Relative
03:58
Absolute
05:32
Fixed
02:28
Sticky
01:28

Painting and Images

5 lectures
Painting
00:18
Engine Aside: Painting
01:31
Visibility
01:23
Z-Index
13:39
Images: img
08:25

Flow

15 lectures
Flow
00:18
Display
01:58
Block
11:20
Float
04:34
Inline, Vertical Align, Line-Height and More
11:56
flow-root and BFCs
03:20
Conceptual Aside: Multilingual Support
03:27
Writing Mode
08:00
Direction
02:47
Text-Orientation
03:24
Logical Properties
14:04
Sticky Nav Note
00:12
Inline-Block
01:03
None
02:21
Table, List-Item, and More
02:58

Flexbox

9 lectures
Flexbox
00:10
Flex Formatting Context
08:12
Flow Direction
14:13
Display Order
04:42
Wrapping and Overflow
04:25
Flex
14:59
Alignment
09:33
Collapse
02:59
Inline-Flex
01:41

Grid

9 lectures
Grid
00:18
Grid Formatting Context
10:13
Conceptual Aside: Fractional Units
01:44
Track Sizing
09:34
Item Placement
10:08
Track Repetition
05:34
Alignment and Spacing
06:40
Layering
01:40
A Visual Change
08:04

Fonts, Colors, and More

10 lectures
Fonts, Colors, and More
00:21
Fonts
05:25
Hexadecimal, RBG, and Named Colors
06:47
Opacity
01:36
Backgrounds
01:50
Transitions
04:27
Animations
07:12
Images: SVGs
04:19
A Semantic Change
03:24
Visual Design and User Experience
07:25

Responsiveness and Querying Media

8 lectures
Responsiveness and Querying Media
00:26
Conceptual Aside: Media
00:41
Media Queries
03:18
Viewports and Zoom
03:22
Media Features
07:50
Mobile First
04:02
Images: srcset and picture
01:18
Print
01:20

Saving Time and Effort

4 lectures
Saving Time and Effort
00:08
Custom Properties for Cascading Variables
05:17
Minification
02:36
HTML Validation
02:10

CSS Frameworks

2 lectures
CSS Frameworks
00:09
Being Better Than Frameworks
05:14

Conclusion

3 lectures
Conclusion
00:08
You Are An Author
01:58
Bonus
00:35

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.