// 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.
This track is ordered for sequential learning. Start from the first part if you want the full mental model, or jump directly into a chapter if you already know the foundations.
Ordered progression from foundations to advanced topics
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 software engineers: buttons, links, dialogs, menus, tabs, forms, focus management, ARIA boundaries, and production review checklists.
CSS fundamentals for software engineers: syntax, selectors, declarations, properties, values, units, functions, custom properties, and practical debugging mental models.
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.
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.
Materi mendalam CSS box model, display, formatting context, overflow, scroll container, containment, content-visibility, dan failure modelling layout untuk software engineer.
Materi mendalam tentang normal flow, block layout, inline layout, line boxes, baseline, whitespace, writing modes, directionality, dan logical properties dalam CSS modern.
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.
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.
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.
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.
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.
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.
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.
Belajar CSS transitions, animations, transform, easing, motion tokens, prefers-reduced-motion, accessibility, performance rendering, dan pola motion design yang aman untuk UI production.
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.
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.
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.
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.
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.
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.
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 akhir seri HTML/CSS untuk software engineer: membangun mini UI system dan halaman aplikasi internal production-grade dengan semantic HTML, CSS architecture, responsive layout, accessibility, theming, performance budget, testing checklist, dan code review rubric.