Check out a free preview of the full CSS Grid & Flexbox for Responsive Layouts, v2 course

The "Final Flexbox Exercise" Lesson is part of the full, CSS Grid & Flexbox for Responsive Layouts, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to complete the previously built website by implementing a final "popular prints" section with Flexbox that matches the provided png files for each viewport size.

Preview
Close

Transcript from the "Final Flexbox Exercise" Lesson

[00:00:00]
>> Okay, so let's go through them these last exercises. So we're your last exercise the big wrap up the big finish here for Flexbox. I'd like you to finish up this particular web page, and I'd like you to add one final section to this particular website. So I am inside of the GitHub files, I'm inside of VS code.

[00:00:26]
We're looking at chapter number seven. And I am going to go through the screenshots of what it is you're going to be doing here. Starting with the desktop. This is what your web page is going to wind up looking like so right now you've got the hero image we put that in place we have our featured print that we added is as well.

[00:00:46]
What you are going to add is the popular print section of this and that is right there in between the mission and the featured print so that is the part of the webpage that you're gonna add. And as you see here on desktop that is three images next to each other and the colour needs to stretch all the way to the edges of the page we've talked about how to do that earlier today then we're gonna go to the tablet here.

[00:01:15]
And let me just zoom in on the popular prints part of this. I want you to do this crazy thing right here in the middle under popular prints. So when we go to popular prints and we go to a tablet dimension, that last image, normally would wrap on to the next line you'd have to on the top and one underneath and then a big gaping hole.

[00:01:36]
So instead I'd like you to use Flexbox to make that final image here on tablet dimensions stretch all the way across the width of the screen. So you get two on top and a big one on the bottom. And then finally, of course, when we go to mobile, these will just stretch set right on top of each other, okay?

[00:01:55]
A lot of the code is already there inside of so you're inside of the webpage that we've been coding all day. So a lot of the stuff like the the figures and the styling, the borders and so forth. A lot of that's already there. But you're gonna have to write some additional code to make these pictures do the crazy things that I want you to do here.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now