Skip to content
UNWIND Code Lab Co-funded by the European Union
Project Step 3: Your Website Layout
Log In

Project Step 3: Your Website Layout

  • 5 min reading
  • 7 min activity

Unit 3CSS

0 of 5 tasks doneup to 105 XP
  1. From sketch to CSS15 XPTo do
  2. My website layout60 XPTo do
  3. Warm-up for the challenge (1 of 3)10 XPOptional
  4. Warm-up for the challenge (2 of 3)10 XPOptional
  5. Warm-up for the challenge (3 of 3)10 XPOptional

Project Step 3. Your website gets the layout of the course sketch, and it will read well on a phone and on a computer.

In this lesson
  • Turn the sketch from the course slides into CSS for your own website.
  • Keep the look of the sketch on a computer and let it stack on a phone.
  • Use readable colours, link states and sections as cards.
Remember

In Project Step 2 you built five regions: header (banner), nav (main menu), main (content), aside (side menu) and footer (bottom menu). main and aside are inside <div class="columns">, ready for CSS.

From the sketch to CSS

The sketch in the slides is 900px wide, with boxes of fixed sizes: content 600px, side menu 300px. A phone screen is much narrower than 900px, so fixed boxes would stick out of it. We keep the look of the sketch on a computer, and on a phone the boxes stack.

Find on image

From sketch to CSS

Required 15 XP
On a computerheadernavmainasidefooterOn a phoneheadernavmainasidefooter
The same CSS on a computer and on a phone. On the phone, flex-wrap: wrap moves the side area below the content by itself.

The plan

Worked example
  1. The whole page

    * { box-sizing: border-box; }, then body with max-width: 900px; margin: 0 auto;, a font list with a fallback, line-height: 1.6 and readable colours (lessons 3.2, 3.3).

  2. Banner and main menu

    header and nav ul become flex containers that can wrap. The menu list loses its dots and its padding (lessons 3.5, 3.7).

  3. Content and side menu

    .columns { display: flex; flex-wrap: wrap; gap: 16px; } with main { flex: 2 1 300px; } and aside { flex: 1 1 200px; }: two shares to one, like 600 to 300 in the sketch (lesson 3.7).

  4. Cards and links

    Each section gets padding, a light border, round corners and a soft shadow. Links get a hover colour and a :focus-visible frame (lessons 3.3, 3.5, 3.6).

  5. Pictures, form, table, footer

    img { max-width: 100%; } keeps your picture on the screen; the table gets collapsed borders; the footer gets a thin line on top.

Step by step

Write one part, press Run, look at the result on Phone and on Computer, then write the next part. You need no extra code for phones: the columns wrap by themselves.

Build it: your website layout

Guess first, then write your CSS. Your HTML from Step 2 is loaded. If you open the solution, copy only the CSS: the solution shows Ayla's page, and your own text should stay yours.

Practice

My website layout

Required 60 XP

Your page from Project Step 2 is loaded (if you have not saved one, you see the page of Ayla, a fictional learner). Write the CSS for your website in the CSS tab, one part after the other. The comments show the order.

Ask your mentor

Show your mentor or a friend your website on a phone and on a computer. Ask: is everything clear to read? Which part do you look at first?

Warm-up for the challenge

Three optional questions before the Unit 3 challenge. They are not part of the challenge.

Quick check

Warm-up for the challenge (1 of 3)

10 XP

Optional practice before the Unit 3 challenge. It is not part of the challenge.

Quick check

Warm-up for the challenge (2 of 3)

10 XP

Optional practice before the Unit 3 challenge.

Quick check

Warm-up for the challenge (3 of 3)

10 XP

Optional practice before the Unit 3 challenge.

Layout
Where the parts of a page sit.
max-width
The largest width. The page can still be narrower on a phone.
Wrap
Items move to a new line when there is not enough space.
line-height
The height of a line of text. 1.5 to 1.6 is comfortable to read.

In short

  • The sketch's fixed 900px becomes max-width: 900px with margin: 0 auto.
  • Header, menu and columns are flex containers with flex-wrap: wrap.
  • flex: 2 1 300px and flex: 1 1 200px keep the 2 : 1 look of the sketch on a computer and stack on a phone.
  • Readable colours, link states and cards make the website friendly for everyone.
Next time

The Unit 3 challenge: 10 questions on CSS. Pass it to finish Mission 3, "Make it yours".

Sources

  1. MDN Web Docs (2026). Basic concepts of flexbox and flex (grow, shrink, basis).
  2. MDN Web Docs (2026). flex-wrap.
  3. MDN Web Docs (2026). max-width and box-sizing.
  4. MDN Web Docs (2026). line-height (unitless values).
  5. W3C WAI (2026). Understanding Success Criterion 1.4.10: Reflow (content without sideways scrolling at 320 CSS pixels).
  6. W3C WAI (2026). Understanding Success Criterion 1.4.3: Contrast (Minimum).

End of the lesson

This lesson: 0 of 115 XP

Next: Unit 3 Challenge