This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Responsive Images Exercise" Lesson
[00:00:00]
>> Jen Kramer: In that folder, for seven wrap up, we're gonna do the following. There is the original picture of Merilee. Merilee Wilbure, the founder of Pie in the Sky Bakery. What I'd like for you to do is to take that original picture. Make three different sizes that you can use on your website.
[00:00:15] Put them on the history.html page that you've already worked on. You re-coded it in flexbox. And then use the picture tag and picturefill in order to make it all work, okay? So you've got that image in place. Then, you should be able to take the finished image gallery from the 5-image-gallery folder, and put that on another page.
[00:00:34] Call it Gallery, the Pie in the Sky Gallery. So we take that image gallery, we already coded by itself. Now we're gonna drop it on into the rest of the website, okay? And if you have extra time, you're more than welcome to create a homepage as well. And so just so you're aware, there is a folder up here called branding.
[00:00:54] In the branding folder, there are background images, fonts. Examples of fonts from the PDF that I used here, a site comp, some web copy. So anything that you want here. And I'll just show you real quick what my results look like.
>> Jen Kramer: So here is my image gallery page, okay?
[00:01:21] So I chose one of my flexbox solutions here, the neater looking of them, and dropped it in as a Pie Gallery page. Here's my history page and Marilee is a little bit bigger, all right? And we adjusted the projector, so she's even nicer looking, so there we go.
[00:01:40] Different size pictures there for Marilee. And then I also added a homepage. And on my homepage, I got the picture of the pie buffet and put it on up here on the top. Underneath we've got little boxes, which I think are required by law now on all homepages, right?
[00:01:57] And if we go on ahead and scrunch this down, then you can see that we change our layouts and so forth, all right?