Week 3 · Layout Week — Frontend Development

Reading this plan

Every session carries a code.

The colour on the left of each session tells you what kind of class it is before you read a word of it. Tick a session off once you have done it — your progress is saved on this device.

FOR102

Virtual Class

Kemi · AI-guided, solo
9AM · Tue, Thu & Fri

FOR101

Core Frontend Dev

Mr. Okwe · Live
7:30PM · Monday & Wednesday

FOR103

Career Readiness

Mr. Joshua · Live
7:30PM · Friday

PODS

Public Building Week

35 pods · Saturday
Bonus SP for every member

Day by day

The full week.

Tap a day above, use the arrows, or swipe left and right. Every day shows exactly what you walk out able to do, why it matters, how many Skill Points are on the table, and what to post so your pod sees you building.

👉 Swipe or use ← → keys

01Mon

Position It. Display It.Live with Mr. Okwe

Live

🧭

Why today matters

You spent Week 2 spacing things with padding, margin, and border. Today you learn how to actually place an element exactly where you want it — pinned to the top of the screen, layered over another element, or locked to the corner of the page. This is also your first look at Flexbox and Grid, the two layout tools the rest of this week is built around.

Skill Points available today

1,000 SP

CHALLENGEPublic Building — Day 1 task+1,000

Live classes don't award SP automatically. Today's guaranteed points come from today's Public Building task — the rest of the week's SP is unlocked through the virtual sessions, the assignment, and your pod's video.

FOR101

7:30PM

Mr. Okwe

Core Frontend Dev

Positioning and Display

How to control exactly where an element sits — and what it sits next to.

What you leave able to do

Control display — block, inline, inline-block, and none, and how each changes what an element does and doesn't respect about the box model.
Control position — static, relative, absolute, fixed, and sticky, and what each one actually anchors to.
Understand stacking — a first working sense of z-index and why two positioned elements sometimes fight for the same space.
See where this is going — a first look at display: flex and display: grid, just enough to recognise them before Tuesday and Thursday's deep dives.

Prep issuedAssignment 3: Rebuild the Layout — full brief given today, peer-review required, due for pod review by Friday.

Pod task droppedMeet Your Pod — this week's public-building video brief goes out today. Roles get assigned inside each pod before class ends.

02Tue

Flexbox, ProperlyVirtual class with Kemi

🧩 Layout Tool #1

🧩

Why today matters

You saw Flexbox for a moment yesterday. Today you actually learn it — the single most-used layout tool on the modern web. Navbars, card rows, centering something perfectly without guesswork — it's almost always Flexbox doing the work underneath.

Skill Points available today

1,596 – 2,286 SP

FOR102Intro quiz20 – 60

FOR102Slide views — 8 SP per slide+64

FOR102Video lesson watched+100

FOR102Video quiz50 – 200

FOR102Reading progress+12

FOR102Reading quiz50 – 200

FOR102Final evaluation150 – 500

FOR102Session completion+100

FOR102Daily streak bonus+50

CHALLENGEPublic Building — Day 2 task+1,000

More than half of today's ceiling sits in the quizzes and the final evaluation, same as always — don't rush past them to get to the next slide.

FOR102

9AM

Kemi

Virtual Class

Flexbox Complete

The one-dimensional layout tool you will use in almost every project you ever build.

What you leave able to do

Turn any container into a flex container — display: flex, flex-direction, and what changes when you flip row to column.
Control alignment — justify-content and align-items, and finally understand which axis each one actually controls.
Control the items themselves — flex-grow, flex-shrink, flex-basis, flex-wrap, and order.
Build real layouts — a navbar, a row of cards, and perfectly centering something on a page, all with Flexbox.
Refactor your own page — turn Week 2's nav and section layout from plain block stacking into Flexbox.

03Wed

Make It Fit Every ScreenLive with Mr. Okwe

Live

📱

Why today matters

Your page works on your laptop — does it work on a phone? For most of the people who will ever visit a site you build, especially across Africa, mobile is the only screen they'll see it on. Responsive design is not a nice-to-have; it's the job.

Skill Points available today

1,000 SP

CHALLENGEPublic Building — Day 3 task+1,000

Live classes don't award SP automatically. Come with your Assignment 3 layout open — this is the class where responsiveness gets applied to it live.

FOR101

7:30PM

Mr. Okwe

Core Frontend Dev

Responsive Design That Actually Works

Building one page that holds together from a small phone to a wide desktop.

What you leave able to do

Write media queries — @media, common breakpoints, and how to decide where your own layout actually needs to change.
Think mobile-first — why designing for the smallest screen first, then expanding up, produces cleaner CSS than the reverse.
Use relative units on purpose — %, rem, em, vw/vh versus fixed px, and when each is the right choice.
Handle responsive images — keeping images from breaking a layout on small screens.
Test it live — using browser dev tools to check a layout at real device widths, applied directly to students' own pages in class.

04Thu

Grid — Layout in Two DimensionsVirtual class with Kemi

🧱 Layout Tool #2

🧱

Why today matters

Flexbox is one-dimensional — a row or a column. Grid is two-dimensional — rows and columns at once, which is what a real page layout actually is. This is the tool you reach for when you're arranging the whole page, not just one row of things.

Skill Points available today

1,596 – 2,286 SP

FOR102Intro quiz20 – 60

FOR102Slide views — 8 SP per slide+64

FOR102Video lesson watched+100

FOR102Video quiz50 – 200

FOR102Reading progress+12

FOR102Reading quiz50 – 200

FOR102Final evaluation150 – 500

FOR102Session completion+100

FOR102Daily streak bonus+50

CHALLENGEPublic Building — Day 4 task+1,000

Grid and Flexbox aren't rivals — most real pages use both together. Today's final evaluation checks that you know which one to reach for.

FOR102

9AM

Kemi

Virtual Class

CSS Grid Complete

The two-dimensional layout tool for arranging a whole page, not just a row.

What you leave able to do

Define a grid — display: grid, grid-template-columns, grid-template-rows, and gap.
Name your layout — grid-template-areas and placing elements by name instead of counting rows and columns.
Place items precisely — grid-column and grid-row for when an element needs to span more than one track.
Know when to reach for Grid over Flexbox — and when to use both on the same page.
Build a full page skeleton — header, sidebar, main content, and footer, laid out with Grid.

05Fri

Make It Move. Go Public.2 sessions

🔗 Submission Day

✨

Why today matters

Two things converge today. Transitions and animations are the polish that makes a page feel alive instead of static. And the career class flips the lens outward — setting up where the internet actually finds you, and turning "building in public" into a habit that outlasts this course. Both of today's submissions are due tonight.

Skill Points available today

1,596 – 2,286 SP

FOR102Intro quiz20 – 60

FOR102Slide views — 8 SP per slide+64

FOR102Video lesson watched+100

FOR102Video quiz50 – 200

FOR102Reading progress+12

FOR102Reading quiz50 – 200

FOR102Final evaluation150 – 500

FOR102Session completion+100

FOR102Daily streak bonus+50

CHALLENGEPublic Building — Day 5 task+1,000

FOR103 is a live class with Mr. Joshua — it builds your career readiness and your pod's public presence, not your SP balance directly. Showing up still counts toward your attendance record.

FOR103

7:30PM

Mr. Joshua

Career Readiness

Set Up Your Social Presence & Build Public Habits

Choosing where to show up online, and turning this week's posting into a habit that lasts.

What you leave able to do

Pick the platform that matters for you — X/Twitter, LinkedIn, or Instagram, chosen by what you're actually trying to get out of it, not all three at once.
Set up a clean profile in one sitting — photo, bio, and pinned post, done properly instead of half-finished.
Understand the "build in public" habit — what's actually worth posting as a developer, and a rhythm you can keep up without burning out.
Turn this week's Public Building Challenge into a repeatable habit — the daily posting you did this week doesn't have to stop when the course does.

Submission openMeet Your Pod video link is due tonight by 11:59 PM. Your pod lead submits one link for the whole pod.

Submission openAssignment 3 — submit your build to your pod's review thread tonight so your two reviewers have time before tomorrow.

FOR102

9AM

Kemi

Virtual Class

Transitions, Animations and Pseudo-classes

The motion that makes a page feel like it responds to you, not just displays at you.

What you leave able to do

Use the transition property — property, duration, and timing-function, and why a 0.2s ease beats an instant snap almost every time.
Work with pseudo-classes — :hover, :focus, and :active, and how they combine with transitions.
Write a basic keyframe animation — @keyframes and the animation property.
Know when subtlety beats spectacle — one tasteful hover effect reads as "polished"; five competing animations read as "unfinished."
Apply one transition to your own page — live, in class, on Assignment 3.

🎥

Pod Competition

Meet Your Pod

Brief dropped Monday · Runs all week · Submission Friday · Results Saturday

35 pods. One video, made together, that introduces every single person in the pod to the rest of the cohort — name, specialty, and what they've actually learned and lived through so far. Not a corporate intro. A real one.

Every pod must submit, by Friday

1One video — any length, any format: a phone reel, a multi-cut edit, a chain of talking-head clips. It introduces every member of the pod.

2Each member's segment covers three things — their name, their specialty or focus in the course, and one thing they've learned or experienced so far.

3Every member appears on camera or is heard on mic at least once — nobody's part of the pod's story gets skipped.

4Submitted as one link — YouTube, Drive, Instagram, TikTok, whatever the pod actually used — posted by the pod lead before 11:59 PM Friday.

Winning condition

Judged Saturday by the instructor team on two things — creativity and completeness, meaning every single member actually shows up in the video. The most polished edit with one confident face and four silent members loses to the pod where everyone, however awkwardly, said their own name on camera.

This isn't a video-editing contest. It's practice at exactly what Friday's career class covers — being visible, showing your work, and getting comfortable putting yourself and your team in front of an audience. The habit matters more than the polish.

Prize — SP per member, not per pod

🥇1st place pod10,000 SP each

🥈2nd place pod5,000 SP each

🥉3rd place pod3,000 SP each

✅Every other pod that submits2,000 SP each

Every day this week also carries its own 1,000 SP Public Building task — a classroom screenshot, a progress shot, a shoutout to a teammate, a peek at what you built. These are posted inside each day's card above and stack independently of the video project — showing up daily earns SP whether or not your pod wins Saturday.

Assignment 3 · Solo, Pod-Reviewed

Rebuild the Layout

Take the page you styled in Week 2 and rebuild how it's arranged — using Flexbox and/or Grid instead of plain block stacking, positioned deliberately in at least one place, and responsive across screen sizes. Same repo, new commits. Nothing counts as officially submitted until two people from your own pod have checked it and approved it.

1Rebuild your page's overall layout using Flexbox and/or CSS Grid — no more relying on default block stacking alone.

2Use at least one deliberate position — a sticky nav, a fixed "back to top" button, or an absolutely-positioned badge or label.

3Make the page responsive — at least one media query breakpoint where the layout visibly changes for a smaller screen.

4Add at least one transition — a hover effect on a button, link, or card that changes smoothly, not instantly.

5Keep the semantic structure, styling, and form from Week 2 intact — this is layout added on top of what you already built.

6Commit history should show the layout evolving — same repo, new commits, not a rebuild from scratch.

How you submit

Built locally in VS Code, pushed to the same GitHub repository from Weeks 1 and 2, submitted as a repo link — and posted, along with a screenshot of the responsive view, into your pod's review thread by Friday.

🔒 Peer Review Required — how the 5,000 SP is unlocked

1Post your repo link and a screenshot of the mobile/responsive view in your pod's review thread by Friday.

2Two different members of your pod review it against the six requirements above and each give it their approval — one approval isn't enough, and nobody approves their own work.

3Once both approvals are in, your submission locks in as officially approved and 5,000 SP is credited to your dashboard.

⚠ Layout skill and peer accountability, together

This week deliberately pairs the most technically dense stretch of the course so far — positioning, Flexbox, Grid, responsive design, transitions — with the first peer-gated assignment. Nothing is marked complete until two people from your own pod have actually looked at it. That's on purpose: reviewing a teammate's layout teaches you almost as much as building your own.

Two things to hold the line on. A review is a real check against the six requirements, not a rubber stamp — approving something you haven't actually looked at defeats the point of the exercise and the SP attached to it. And Meet Your Pod is judged on whether every member shows up, not on production quality — a pod where everyone, however awkwardly, said their name on camera beats a pod with one confident face carrying four silent members.

Ready for Week 3?

Layout Week builds directly on your Week 2 page — make sure your repo is pushed and up to date, and that your pod knows who's reviewing what, before Monday's live class.

Continue to Week 3 → Back to Course