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...
- Fork this repo
- Clone it.
- Navigate to the
fellow-submissions
directory - Create your own
first-last
folder - Add your
index.html
andstyle.css
there. - Commit changes often.
- Push back up to your remote repo when done.
- Open a pull request
- Post repo link in Google Classroom.
- The key features of this layout that must be replicated are the header, navbar, and two-column section at the bottom of the page.
- Ensure that your rendering has one narrow column and one wide column (and you use flexbox to achieve this effect!)
- Look at the
border-radius
property if you are stuck on how to make a picture round. - There should be no
float
s and minimal use of thetext-align
,display: block
, anddisplay: inline-block
properties for this lab, as you should be leaning on your flexbox properties.
Thursday, September 26, 2019