Unit 1 Lesson 5 Lab

Flexbox Layout

Directions

In this lab, you will have the opportunity to use your new Flexbox toolkit to create a simple webpage layout. The header and the two column display can all be laid out more easily using Flexbox.

Here is a bare bones mockup of the indended layout. You should feel free to keep your rendering equally as sparse. You may use lorem ipsum text and grab placeholder images from placeholder.com. I'm most concerned with the layout being identical. Of course, if you want to make the design and content your own, go ahead!

To submit...

1. Fork this repo
2. Clone it.
3. Navigate to the fellow-submissions directory
4. Create your own first-last folder
5. Add your index.html and style.css there.
6. Commit changes often.
7. Push back up to your remote repo when done.
8. Open a pull request
9. Post repo link in Google Classroom.

Submission Tips

1. The key features of this layout that must be replicated are the header, navbar, and two-column section at the bottom of the page.
2. Ensure that your rendering has one narrow column and one wide column (and you use flexbox to achieve this effect!)
3. Look at the border-radius property if you are stuck on how to make a picture round.
4. There should be no floats and minimal use of the text-align, display: block, and display: inline-block properties for this lab, as you should be leaning on your flexbox properties.

Target Due Date

Thursday, September 26, 2019