This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories. Note: The previous design document may be incomplete, as you need to find an archived version of the challenge as all legacy challenges have had their documentation removed from DevChallenges.
- I can see a page following the given design
- I can see a page on mobile following the given design
- I can go to certain locations by selecting links in navigation or footer
- Surprise me with mobile navigation.
-
Bootstrap icons - use font-size and color to manipulate
-
Bootstrap overflow options are limited. Nothing to target overflow-x or overflow-y ?
-
Grid-template-areas > Bootstrap nested grids
-
Bootstrap grids expect content inside every column - leaving one column or row free is difficult and documentation / examples hard to find
-
Grid-template-areas you can just place a "." and you have free space - bootstrap equivalent to this is ... using br tags or clearfix
-
Rounded class is really weak even at maximum. Feel same can be said about quite a few properties.
-
Chose to make box shadow for only the border-bottom - cause of container class - probably had to rework whole section to add gaps etc
-
Gray on Gray input boxes were not implemented
-
I shifted the 3 picture grid on smaller screens to underneath the paragraph
-
This project refreshed my knowledge of Bootstrap (v5 vs v4).
- Steps to replicate a design with only HTML and CSS
- Bootstrap Creative - replace bootstrap colors
- Codepen - CSS Filter Generator
- MD Bootstrap - bootstrap example image grid
- SO Documentation - clearfix
- Stack Overflow - bootstrap column span 2 rows
- Stack Overflow - box shadow on border-bottom only