Lay out real pages with flexbox, CSS grid, positioning, and responsive design that works on any screen.
HTML gives a page its structure, and CSS Basics gave every element its look. This course is the missing piece: arranging those elements into real pages. You will build rows and nav bars with flexbox, galleries and page shells with grid, layer badges and sticky headers with positioning, and make all of it respond to any screen size.
Every concept lands the same way: a short lesson you read beside a live editor, then a practice that checks itself as the preview repaints. You learn flexbox by lining up a real nav bar, grid by laying out a photo gallery, and responsive design by watching one layout change shape as the pane narrows.
You build five real pieces: a nav bar, a photo gallery, a dashboard shell, a badge-topped profile card, and a capstone responsive landing page that pulls it all together. This is the layout half of CSS; motion and theming come in CSS Advanced. Finish everything and you earn a verifiable certificate.
40 Lessons • 43 Practices • 16 Quizzes • 5 Projects · ~9h Total
Not just theory. You finish this course with real work to show.
This is the same in-browser editor every lesson uses. Edit the code, hit Run.
Run code in the browser and see the result immediately. Every lesson works this way.
Stuck? Puff explains the error and nudges you forward, without giving the answer away.
Streaks, diamonds, and certificates. Your progress saves automatically, forever.
Every completed course issues a certificate with a public verification link.
Every certificate has a public verification link employers can check.
One certificate per course. Finish a program and earn its program certificate too.
LinkedIn-ready, with a PDF you can download and attach.
You can style a box. Now arrange a hundred of them into a page.
You have pasted layout CSS that half-worked. This gives you the model behind it.
You need real page layouts, responsive, at work. This is exactly that skill.
CSS Layout is free to start, no credit card needed. Some later sections are part of Pro, and finishing every section, including the certificate, needs a Pro plan.
Yes, or know its ground: selectors, the cascade, the box model, and writing CSS by hand. This course styles nothing new; it arranges what you can already style.
No. Everything runs in your browser on Devpuff: two file tabs, an index.html and a styles.css, exactly as CSS Basics left you. You write CSS in styles.css, press Check, and the layout repaints instantly.
About nine hours of hands-on work across eight sections, most items under five minutes. A steady 20 minutes a day finishes it in about a month.
Five real pieces: a nav bar, a photo gallery, a dashboard shell, a profile card with a positioned badge, and a fully responsive landing page.
Both, and this course teaches when each wins: flexbox for rows, nav bars, and toolbars, grid for galleries and whole-page layouts. You build with each before you ever have to choose.
Yes. Finish every item in CSS Layout and Devpuff issues a course certificate with a public link that anyone can verify.
How this course connects to the bigger picture, and what to explore next.
Start programming for real: variables, strings, decisions, arrays, loops, functions, and objects.
Style real pages with CSS: selectors, the cascade, color, the box model, backgrounds, and typography.
Write real web pages by hand: document structure, text, links, lists, images, semantic HTML, and forms.
Free to start, no credit card required. Write real code from the first lesson and keep your progress forever.
Start Learning Free