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.
Requirements
No experience needed.
Description
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.
Overview
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