🎨 HTML & CSS
Learn HTML & CSS from the Basics
The building blocks of every web page, taught from the ground up — no setup required. Write HTML and CSS and see a live preview rendered right on the page, exactly like a real browser would show it.
What are HTML & CSS used for?
HTML and CSS are the two languages that build every single page on the web — HTML provides the structure and content, while CSS provides the visual design and layout. They're the essential first step for anyone getting into front-end web development, web design, or building their own website.
Common uses & related roles:
- Front-end web development
- Web design
- UI/UX implementation
- Email template design
- Landing page production
🎨HTML & CSS Lessons
- 01Your First HTML
- 02Lists and Links
- 03Adding Color with CSS
- 04CSS Selectors and Classes
- 05Layout with Flexbox
- 06Trying Out Images and Tables
- 07Trying Out Form Controls
- 08Understanding the Box Model
- 09Intro to Responsive Design (Media Queries)
- 10CSS Variables (Custom Properties)
- 11Layout with CSS Grid
- 12Adding an Animation
- 13How to Write Comments
- 14Adding Interaction with Pseudo-Classes (:hover)
- 15CSS's :not() and Multi-Condition Selectors
- 16The Basics of Meta Tags and SEO
- 17The Basics of Accessibility (alt and aria-label)
- 18Trying Out data Attributes (data-*)
- 19CSS Transitions (Smooth Hover Changes)
- 20iframe (Embedding Another Page)
- 21position (Precisely Positioning an Element)
- 22z-index (Specifying Stacking Order)
- 23The Basics of localStorage (Saving Data in the Browser)
- 24The video and audio Tags (Embedding Media)
- 25Advanced Tables (colspan and rowspan)
- 26The Basics of CSS Specificity
- 27The Basics of SVG (Drawing Vector Images)
- 28Advanced Flexbox (Wrapping and Growing)
- 29Form Validation (required and pattern)
- 30Advanced CSS Grid (grid-template-areas)
- 31The details and summary Tags (Building a Collapsible Panel)
- 32CSS Counters (Automatic Numbering)
- 33Fluid Font Sizes with clamp()
- 34prefers-color-scheme (Dark Mode Support)
- 35Building a Slider with input type=range
- 36Fixing an Aspect Ratio with aspect-ratio
- 37Adjusting How an Image Displays with object-fit
- 38Rotating and Scaling with transform
- 39Serving Responsive Images with the picture Tag
- 40Showing Keyboard Focus with :focus-visible
- 41Scrolling Smoothly with scroll-behavior
- 42Switching Layouts Per-Component with Container Queries
- 43Creating a Frosted-Glass Effect with backdrop-filter
- 44Building a Flexible Grid with repeat() and minmax()
- 45Fixing a Header in Place with position: sticky
- 46Adding Pseudo-Elements with ::before and ::after
- 47Truncating Long Text with an Ellipsis Using text-overflow
- 48Using a Calculated Value in CSS with calc()
- 49[Applied] Build a Simple Website
Ad space (in-article)