Skip to content

Starting from an empty file Course

Layout with Flexbox and Grid

Flexbox, CSS Grid and media queries used on real layouts, so a page arranges itself from a 320-pixel phone to a wide monitor without guesswork.

“Everything lines up on my screen and falls apart on a phone.”

the problem this course starts from

A person types on a laptop showing code with a second laptop open beside it on a light desk

What is inside

38 lessons · about 12 min each · 7 h 36 min

  1. 01 Normal flow and why it matters 5 lessons 1 h
  2. 02 Flexbox in practice 9 lessons 1 h 48 min
  3. 03 CSS Grid in practice 10 lessons 2 h
  4. 04 Responsive design and media queries 8 lessons 1 h 36 min
  5. 05 Fluid type, spacing and images 6 lessons 1 h 12 min

// outcomes

You will be able to…

  • Choose between Flexbox and Grid for a given layout
  • Build a responsive page that works from phone to desktop
  • Use fluid type and spacing instead of fixed pixel values

What’s included

  • Eight common layouts rebuilt from a sketch: header, cards, sidebar, gallery and more
  • Each layout tested at phone, tablet and desktop width on screen
  • A Grid and Flexbox property map
  • End-of-unit exercises with the finished code shown on screen
  • 18 months of streaming access

who.txt

Who it suits

Learners who can write basic HTML and CSS and want pages that behave on every screen.

Suggested pace: 3 h a week · about 3 weeks

Pairs well with

Three questions about this course

How much time does it take each week?

There are 38 lessons, 7 h 36 min of video in total. At the suggested 3 hours a week that is about 3 weeks, but you set the pace: the planner works it out for other weekly hours.

How long can I watch it?

For 18 months from the day your access starts. Access details are emailed within one working day of payment, and you can rewatch any lesson as often as you like during that time.

Can I download the videos or ask a tutor?

No. The lessons are recorded and streamed online only, and there is no tutor, mentoring or marking of your code. The exercises listed under what’s included show the finished result on screen, so you can check your own work. Read before you start for what you need.