Final Project (preview)

Link: https://jasheloper.github.io/css-layout-project/

Objective

To test comprehension of CSS layout methods using Flexbox, Grid, Floating and Positioning.

Project Guidelines

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension

The tasks you need to achieve are:

[x] To display the navigation items in a row, with an equal amount of space between the items.

[x] The navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it.

[x] The image that is inside the article should have text wrapped around it.

[x] The <article> and <aside> elements should display as a two column layout. The columns should be a flexible size so that if the browser window shrinks smaller the columns become narrower.

[x] The photographs should display as a two column grid with a 1 pixel gap between the images.

You will not need to edit the HTML in order to achieve this layout and the techniques you should use are:

• Flexbox
• Grid
• Floating
• Positioning

There are a few ways in which you could achieve some of these tasks, and there often isn't a single right or wrong way to do things. Try a few different approaches and see which works best. Make notes as you experiment.

...and just some extra stuff I did to improve the layout:

• Added padding on the right of the article to add more space between each column
• Added a responsive breakpoint at 43.75em = 700px