World mapWorld 3 · Open now

Build Your Portfolio

បង្កើតគេហទំព័រផ្ទាល់ខ្លួន

Start from a reference picture, break it into boxes, and build a bento-style profile page step by step: semantic HTML, design tokens, flexbox, CSS Grid, a live clock, a slider, and a phone layout. Then put it online.

Beginner5 hours3 chaptersFree
10 of 10 lessons ready
Start lesson one

Chapter 01Plan and structure

  1. 01Read the design: from picture to boxesconcept · 15 mins
  2. 02The HTML skeletoncode · 25 mins
  3. 03Design tokens and the page backgroundcode · 20 mins

Chapter 02Layout

  1. 04The top bar with flexboxcode · 20 mins
  2. 05The bento gridcode · 25 mins
  3. 06The hero card: layering a portraitcode · 25 mins
  4. 07Card details: images, labels, little touchescode · 30 mins

Chapter 03Behaviour and launch

  1. 08JavaScript: a live clock and a countdowncode · 30 mins
  2. 09JavaScript: the slider and the credits panelcode · 30 mins
  3. 10Responsive, accessible, and onlineproject · 30 mins