Loading...
CodesCraft
Web Development · Day 15 of 32

CSS Mini Project — Landing Page

Combine typography, box model, Flexbox/Grid and positioning into a polished landing page.

60 minutesLive + guided practiceBeginner friendly
01 · LEARNING TARGETS

What students should understand today

  • Layout PlanningUnderstand what it means, where it is used and practise it in a small example.
  • Component StylingUnderstand what it means, where it is used and practise it in a small example.
  • Spacing SystemUnderstand what it means, where it is used and practise it in a small example.
  • Visual ConsistencyUnderstand what it means, where it is used and practise it in a small example.
Lesson preview

A small part of this day is visible. Detailed teaching content, code explanation and assignments remain blurred until the student signs in and reaches this scheduled day.

Student login
02 · TEACHING NOTES

Detailed lesson explanation

🔒 Locked for this dayDetailed explanation opens once this planner day is reached by the logged-in student’s schedule.
03 · LIVE BUILD

Teacher live build

🔒 Locked for this dayDetailed explanation opens once this planner day is reached by the logged-in student’s schedule.
04 · STUDENT CHALLENGE

Independent practice

🔒 Locked for this dayDetailed explanation opens once this planner day is reached by the logged-in student’s schedule.
05 · END-OF-DAY CHECK

Review and home practice

🔒 Locked for this dayDetailed explanation opens once this planner day is reached by the logged-in student’s schedule.
WHY THIS TOPIC MATTERS + CODE

Explanation and worked code example

🔒 Explanation & code lockedThis topic justification and code example unlock with this planner day.
06 · ASSIGNMENTS

Day 15 · three assignments

Each planner day includes three assignments. Their task details remain protected until that day is reached.

ASSIGNMENT 1

Assignment task

Complete the task using this day’s lesson concept and submit your code for admin review.

🔒 Assignment lockedThis assignment unlocks once this planner day has been reached by the student’s schedule.
ASSIGNMENT 2

Assignment task

Complete the task using this day’s lesson concept and submit your code for admin review.

🔒 Assignment lockedThis assignment unlocks once this planner day has been reached by the student’s schedule.
ASSIGNMENT 3

Assignment task

Complete the task using this day’s lesson concept and submit your code for admin review.

🔒 Assignment lockedThis assignment unlocks once this planner day has been reached by the student’s schedule.