Learn HTML CSS

Materi pembelajaran HTML dan CSS modern untuk software engineer berbasis framework The First 20 Hours: target skill, deconstruction, deliberate practice, feedback loop, dan rencana 20 jam pertama.

How the Web Renders: From HTML, CSS, DOM, CSSOM to Pixels

Materi mendalam tentang browser rendering pipeline: bagaimana HTML dan CSS diparse menjadi DOM, CSSOM, render tree, layout, paint, compositing, dan pixel, disertai mental model debugging untuk software engineer.

Documents, Resources, URLs, Origins, and the Browser Contract

19 min

Materi HTML dan CSS modern untuk software engineer: memahami dokumen web, resource graph, URL resolution, origin, browser security boundary, metadata, preload, dan kontrak browser sebelum membangun UI production-grade.

HTML Fundamentals: Elements, Attributes, Trees, and Content Categories

17 min

Materi HTML fundamental untuk software engineer: element vs tag, attributes, boolean attributes, global attributes, nesting rules, void elements, DOM tree, content categories, transparent content model, dan invalid HTML failure modes.

Semantic HTML: Building Meaningful Documents

Materi mendalam semantic HTML untuk software engineer: heading hierarchy, landmarks, sectioning content, article, section, nav, main, aside, header, footer, lists, tables, figure, time, blockquote, code, dan semantic decision tree.

Forms as Product Workflow: Inputs, Labels, Validation, and Submission

Materi mendalam HTML forms untuk software engineer: form sebagai workflow boundary, label, input types, fieldset, validation, autocomplete, inputmode, GET vs POST, error states, accessibility, dan production-grade form architecture.

HTML Tables, Data Semantics, and Complex Enterprise Screens

18 min

Materi mendalam tentang HTML table untuk software engineer: kapan memakai table, caption, th, scope, headers, complex headers, responsive tables, enterprise data screens, sorting, filtering, data grid boundaries, dan accessibility checklist.

Media, Embeds, Images, SVG, Canvas Boundaries, and Asset Semantics

17 min

Materi mendalam tentang media HTML untuk software engineer: img, alt text, picture, srcset, sizes, lazy loading, video, audio, iframe sandbox, SVG, canvas accessibility boundary, responsive media, dan asset performance.

Metadata, SEO Basics, Social Sharing, Internationalization, and Document Identity

Materi mendalam HTML metadata untuk software engineer: head, title, meta description, viewport, canonical, robots, Open Graph, structured data, lang, dir, hreflang, dan document identity yang production-grade.

Accessibility Mental Model: Semantics, Names, Roles, States, and Focus

Materi mendalam accessibility untuk software engineer: accessibility tree, accessible name, native semantics, roles, states, keyboard focus, ARIA, hidden content, dan debugging accessibility secara production-grade.

Practical Accessibility Patterns for Buttons, Links, Dialogs, Menus, Tabs, and Forms

20 min

Practical accessibility patterns for software engineers: buttons, links, dialogs, menus, tabs, forms, focus management, ARIA boundaries, and production review checklists.

CSS Fundamentals: Selectors, Declarations, Properties, Values, and Units

CSS fundamentals for software engineers: syntax, selectors, declarations, properties, values, units, functions, custom properties, and practical debugging mental models.

The Cascade: Specificity, Inheritance, Source Order, Layers, and Scope

Panduan mendalam CSS cascade untuk software engineer: origin, importance, specificity, inheritance, source order, cascade layers, @layer, @scope, reset strategy, failure modes, debugging, dan latihan deliberate practice.

Selectors Deep Dive: Matching Strategy, Maintainability, and Performance Myths

12 min

Panduan mendalam CSS selectors untuk software engineer: selector matching, class/id/attribute selectors, combinators, pseudo-class, pseudo-element, :is(), :where(), :has(), :not(), specificity, maintainability, performance myths, dan latihan deliberate practice.

Box Model, Formatting Contexts, Display, Overflow, and Containment

Materi mendalam CSS box model, display, formatting context, overflow, scroll container, containment, content-visibility, dan failure modelling layout untuk software engineer.

Normal Flow, Inline Layout, Block Layout, and Writing Modes

11 min

Materi mendalam tentang normal flow, block layout, inline layout, line boxes, baseline, whitespace, writing modes, directionality, dan logical properties dalam CSS modern.

Flexbox Deep Dive: One-Dimensional Layout Without Guesswork

Panduan mendalam Flexbox untuk software engineer: mental model axis, flex-basis, flex-grow, flex-shrink, min-size auto, alignment, wrapping, debugging, pola komponen, dan latihan deliberate practice berbasis The First 20 Hours.

CSS Grid Deep Dive: Two-Dimensional Layout for Real Interfaces

Panduan mendalam CSS Grid untuk software engineer: grid container, explicit/implicit grid, tracks, fr, minmax, auto-fit, auto-fill, named lines, named areas, subgrid, alignment, debugging, pola enterprise UI, dan latihan deliberate practice.

Positioning, Stacking Context, z-index, Popovers, and Overlay Systems

Materi mendalam tentang CSS positioning, containing block, stacking context, z-index, top layer, dialog, popover, anchor positioning, tooltip/menu/modal architecture, dan strategi overlay system yang production-grade.

Responsive Design: Intrinsic Layout, Media Queries, Container Queries, and Fluid Systems

Materi mendalam tentang responsive design modern untuk software engineer: intrinsic layout, media queries, container queries, fluid typography, responsive spacing, viewport units, responsive images, component-driven responsiveness, dan strategi production-grade.

Typography Engineering: Fonts, Text Metrics, Readability, and Internationalization

Belajar typography engineering untuk HTML dan CSS modern: font stacks, web fonts, @font-face, font-display, variable fonts, line-height, text metrics, fluid type, readability, wrapping, internationalization, dan performa font loading.

Color, Theming, Contrast, Dark Mode, and Design Tokens

12 min

Belajar color engineering untuk HTML dan CSS modern: color spaces, semantic tokens, contrast WCAG, dark mode, prefers-color-scheme, forced colors, custom properties, state colors, theming architecture, dan design token strategy.

Spacing, Sizing, Borders, Shadows, Radius, and Visual Rhythm

Belajar spacing, sizing, border, shadow, radius, aspect-ratio, visual rhythm, density, dan UI primitives untuk membangun tampilan HTML/CSS yang konsisten, maintainable, dan production-grade.

Transitions, Animations, Motion Design, and Reduced Motion

12 min

Belajar CSS transitions, animations, transform, easing, motion tokens, prefers-reduced-motion, accessibility, performance rendering, dan pola motion design yang aman untuk UI production.

CSS Architecture: Naming, Boundaries, Layers, Utilities, Components, and Design Systems

Materi mendalam tentang arsitektur CSS untuk software engineer: global namespace, cascade layers, BEM, utility CSS, component CSS, design system boundaries, tokens, maintainability, dan strategi mencegah CSS entropy.

Component Contracts: States, Variants, Slots, Composition, and UI Invariants

Materi mendalam tentang component contracts dalam HTML/CSS: anatomy, states, variants, slots, composition, custom properties sebagai API, data attributes, accessibility states, dan invariant-driven styling.

Enterprise UI Patterns: Forms, Tables, Dashboards, Navigation, Case Management Screens

10 min

Materi mendalam tentang pola HTML dan CSS untuk enterprise UI: long forms, data tables, dashboards, navigation, case timelines, workflow steppers, audit trails, responsive admin layout, dan invariant produksi.

CSS and HTML Performance: Critical Rendering Path, Assets, Fonts, and Layout Stability

Materi mendalam tentang performa HTML dan CSS: critical rendering path, render-blocking CSS, LCP, CLS, image/font loading, containment, content-visibility, unused CSS, dan performance budget produksi.

Debugging HTML/CSS Like an Engineer: DevTools, Computed Styles, Layout Inspection, and Failure Modelling

19 min

Materi mendalam tentang debugging HTML dan CSS secara engineering: DevTools, computed styles, cascade inspection, box model, Flexbox/Grid overlays, accessibility inspection, performance debugging, dan failure modelling.

Testing HTML/CSS: Accessibility Tests, Visual Regression, Cross-Browser Strategy, and Baseline

18 min

Materi mendalam tentang testing HTML dan CSS: accessibility checks, keyboard testing, visual regression, responsive matrix, cross-browser strategy, feature queries, Baseline, progressive enhancement, dan quality gates produksi.

HTML/CSS in Modern Apps: SSR, Hydration, SPAs, Web Components, Frameworks, and Build Pipelines

22 min

Materi mendalam tentang posisi HTML dan CSS dalam aplikasi frontend modern: SSR, hydration, SPA, Web Components, Shadow DOM, CSS Modules, CSS-in-JS, utility-first CSS, design tokens, microfrontend, build pipeline, dan invariant engineering untuk UI production-grade.

Capstone: Build a Production-Grade Responsive, Accessible, Maintainable UI System