Final CSS Grid Exercise

[00:00:00]
>> For the very last part of this course, I have given you some raw materials and some ideas for what you might do for laying out an inside page for our website that we've been working on. And I'm leaving this very open-ended for you. So if you look back over the grid portion of this unit, we've talked about cards, we've talked about magazine style layouts, we've talked about interesting effects that we can do with overlapping grid cells.

[00:00:29]
And we've talked about basic sorts of layouts in terms of mosaics or, just a general grid based layout. So any of those types of techniques are on the table for laying out these inside web pages. What I've done here, is I've given you a folder called raw materials, Inside of raw materials, you're going to find a series of images.

[00:00:52]
So these are pictures of doughnuts and they are very lovely. They're all different portrait and landscape, all kinds of mixed sort of images here and some basic text. So there is a woman on pexels, she is a professional photographer with pexels and some other various image agencies and so I have gotten her, here she is.

[00:01:19]
Here's her profile, these are links to the photos that I have pulled here from pexels. You're welcome to go on pexels and go pull some different images, if you prefer. And I've given you, let me wrap the text here, I've given you a little bit of information about her as an artist.

[00:01:37]
And so you should think about how you could go about laying this out as an inside webpage. Some things that I would suggest that you think about along the way, so first of all I've given you here is your beginning folder, this is listed of the default browser here, this is your web page as it currently exists.

[00:02:03]
This is the homepage of the website. And I give this to you because maybe there are elements from here that you want to reuse on the inside page of the website. So you can think about which some of these elements you'd like to carry over to the inside page, hint, hint, maybe the header and the footer might be a good idea.

[00:02:22]
But that's really up to you. And so you can pull whatever you think makes sense and set up some kind of inside pitch. So, if you don't have any ideas about what you want do, I have given you a goal if that is helpful to you? So I said, here's one idea for the way this donut love page.

[00:02:46]
I call it Sharon Mccutcheon Donut Love. And I set this up the following way as a mosaic grid based layout. Notice that the top square of this layout has got some text on top of it, that little bit of text that I gave you. This is one idea, you are more than welcome to try out some other ideas.

[00:03:08]
So something with cards would be a wonderful way to do this. Something with a magazine type of layout would be an interesting way to do this, or anything else that you can think of for an inside page, and then on tablet mobile, I have it set up to work this way.

[00:03:24]
Notice here I've got all the images stacked on top of each other. And I've got the text hanging out all by itself here at the top of the screen. So you might want to give some thought about how I managed to do that magic if that's the route you want to take.

[00:03:38]
Or maybe you want to code something else up on your own. So give that a try and I'll give you the my answer here very shortly