Learn HTML & CSS

Beginner friendly guide with short examples and a live editor to practice — just like CodePen.

HTML & CSS Learning Path

Introduction — HTML structure (elements, tags, attributes)
Text & Links — headings, paragraphs, anchors
Images & Media — <img>, responsive images
Box Model — margin, border, padding, width/height
Layout Basics — display, position, flexbox
Styling — colors, fonts, backgrounds
Forms & Inputs — basic form elements
Practice Projects — small page components & experiments

Tip: use the editor to edit HTML & CSS and press Run or enable Auto-run to see changes live.

Examples & Exercises

1. Simple page structure

Example:

<!doctype html>\n<html>\n  <body>\n    <h1>Hello</h1>\n    <p>A paragraph.</p>\n  </body>\n</html>

Exercises:

Easy: — Create a heading and paragraph.

Medium: — Add a link and image.

Hard: — Build a small card with heading, image, and text.

2. Box model & layout

Example:

.box { padding:16px; border:1px solid #ccc; margin:8px; }

Exercises:

Easy: — Make a colored box.

Medium: — Add padding and border radius.

Hard: — Use flexbox to align items horizontally.

3. Typography & colors

Example:

h1 { color:#ff6b6b; font-family: Arial, sans-serif; }

Exercises:

Easy: — Change heading color and font.

Medium: — Add a background gradient.

Hard: — Create a simple responsive typography scale.

4. Images & Media

Example:

<img src="https://picsum.photos/300/150" alt="placeholder">

Exercises:

Easy: — Insert an image and make it responsive.

Medium: — Add a caption under an image.

Hard: — Create a media card with cropped thumbnail.

5. Layout Basics

Example:

.row { display:flex; gap:12px; }

Exercises:

Easy: — Create two columns with flexbox.

Medium: — Wrap items and make them responsive.

Hard: — Build a CSS grid layout.

6. Styling

Example:

h2 { color:#0ea5e9; }

Exercises:

Easy: — Change heading color & font.

Medium: — Create a card with shadow and gradient.

Hard: — Use CSS variables for colors.

7. Forms & Inputs

Example:

<label>Name: <input /></label>

Exercises:

Easy: — Basic text input.

Medium: — Email and number inputs with validation.

Hard: — Styled login form.

8. Practice Projects

Ideas:

Simple landing header
Small gallery or card grid
Responsive hero section

Exercises:

Easy: — Starter page.

Medium: — Gallery layout.

Hard: — Small landing starter.