https://github.com/jasheloper/css-layout-project

To test comprehension of CSS layout methods using Flexbox, Grid, Floating and Positioning.
https://github.com/jasheloper/css-layout-project

css css-flexbox css-grid css-layout flexbox grid responsive-design

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jasheloper/css-layout-project
• Owner: jasheloper
• Created: 2023-05-22T13:10:40.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-22T14:24:54.000Z (about 3 years ago)
• Last Synced: 2025-08-05T18:43:39.813Z (11 months ago)
• Topics: css, css-flexbox, css-grid, css-layout, flexbox, grid, responsive-design
• Language: HTML
• Homepage: https://jasheloper.github.io/css-layout-project/
• Size: 926 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# Final Project (preview)

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




![CSS Layout Desktop Preview](/images/desktop-preview.png)

![CSS Layout Mobile Preview](/images/preview-mobile-layout.png)




## 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 `` and `` 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`