Front End: HTML/CSS HW #4 Local Park

All Homework Must be Uploaded to it own GitHub repository. You will copy the URL Link for your GitHub Repository and Submit that link for each of your homework assignments

Your next client is asking for a landing page for a park – this can be a neighborhood park or national park, up to you. Bootstrap will be required for this project. Include a navbar, a photo gallery for the park, and a map image for the park location (this doesn’t need to be real). Feel free to use dribbble.com as a resource for layout ideas.

When you’re done, commit the project to Github and submit the link here.

Useful CSS Resources:

Playgrounds for Bootstrap columns, media queries, and grid. Feel free to change the code – it will go back to how I made it when you refresh.

Also, links for extra games/practice for Flexbox (Flexbox Froggy), and a cheat sheet for flexbox that I am sure will prove helpful. If you feel you have a good grip on flexbox, bootstrap containers and columns, and css-grid, feel free to move on.

Zen garden is useful for ideas for web layouts in the future; I also use https://dribbble.com/ and look at web designs on Figma for inspiration.

Bootstrap cheat sheet is best used with the inspector tool, so you can see what classes are being applied to each element.

Bootstrap Columns Codepen

Media Queries Code Pen

Zen Garden

CSS Grid Code Pen

Dribble

Figma

Flexbox Playground Code Pen

Flex Box Froggy

Flex Box Guide

Bootstrap 5.0 Cheatsheet

Skip to content