Skip to content
Codeloom

Topics / HTML

HTML

The structure of the web. Semantic HTML, forms, and accessibility.

Browse 30 tutorials → Other topics

Why learn HTML?

  • The non-negotiable foundation of every web page and web app.

  • Semantic HTML gives accessibility and SEO almost for free.

  • Takes hours to start, a career to fully master.

  • Often the difference between a usable site and a broken one.

What you can build with HTML

Every website, web app, and email template Static landing pages Forms, search boxes, and interactive content

HTML tutorials

30 articles · page 1 of 2

Hand-written tutorials, ordered as a recommended learning path.

  1. 01 What is HTML? A clear, professional introduction to HTML — what it is, how browsers read it, why it is the foundation of every website, and how to write your first page.
  2. 02 Essential HTML Tags A practical tour of the HTML tags you will use daily — headings, paragraphs, links, lists, images, forms, and the semantic containers that structure a real page.
  3. 03 What is CSS? A clear introduction to CSS — what it is, how it connects to HTML, how selectors and the cascade work, and how to write your first stylesheet from scratch.
  4. 04 The Box Model Every element on a web page is a rectangular box. This guide explains the four layers of that box — content, padding, border, and margin — and the box-sizing fix that makes them sane.
  5. 05 Flexbox Basics Flexbox is the modern tool for one-dimensional layout. This guide covers the container and item properties you need to align, distribute, and wrap any row or column of elements.
  6. 06 Forms & Inputs Forms are how the web collects information. This guide covers every part of an HTML form — the form element, input types, labels, validation, and submission — so you can build forms users can actually use.
  7. 07 CSS Grid CSS Grid is the modern tool for two-dimensional layout. This guide covers tracks, the fr unit, gaps, spans, and responsive grids — everything you need to build real page layouts.
  8. 08 Selectors Selectors decide which elements get styled; specificity decides which rule wins when more than one applies. This guide covers every selector you need and how to read a specificity score.
  9. 09 Responsive Design Responsive design makes a single site look right on every screen. This guide covers the viewport meta tag, mobile-first thinking, media queries, fluid units, and responsive images.
  10. 10 Accessibility Basics A practical introduction to web accessibility — semantic landmarks, alt text, labels, focus management, keyboard navigation, contrast, and when to reach for ARIA.
  11. 11 Meta Tags & SEO A practical tour of the meta tags every page should ship — title, description, viewport, charset, Open Graph, Twitter cards, canonical, robots, and a gentle intro to JSON-LD.
  12. 12 Animations & Transitions A practical guide to CSS transitions and @keyframes animations — properties, timing functions, transform-based performance, the animation shorthand, and prefers-reduced-motion.
  13. 13 CSS Variables A practical guide to CSS custom properties — declaring them, using var() with fallbacks, scoping by the cascade, building a light/dark theme, and updating them dynamically from JavaScript.
  14. 14 CSS Animations How CSS keyframe animations actually work: timing functions, fill modes, composition, and the patterns that keep them smooth and predictable.
  15. 15 Layers Stop fighting !important. Learn how the CSS cascade, specificity, and the new @layer rule combine to give you predictable, maintainable styles.
  16. 16 Fluid Type Use the CSS clamp function to build fluid typography and spacing that scales smoothly between breakpoints without media queries or jarring jumps.
  17. 17 Container Q Container queries let components style themselves based on their parent's size, not the viewport. Learn the syntax, the units, and when to use them.
  18. 18 Flexbox A focused deep dive into CSS Flexbox: axes, sizing, alignment, growth, shrink, basis, and the small set of rules that explain most layouts.
  19. 19 Grid vs Flex Stop flipping a coin between Grid and Flexbox. Learn the mental model that picks the right layout tool every time, with practical CSS examples.
  20. 20 :has() Tutorial Learn how the CSS :has() pseudo-class enables true parent selectors, conditional styling, and sibling-aware rules. Includes a mental model, examples, pitfalls, and best practices for production use.