Link to my project: https://dominion-energy-mock-site.netlify.app/
This project is a mockup created using static images of a website at different viewpoints (mobile, tablet, and desktop)
- Design Comps from UX Designer
- Font Awesome
- Pexels
- Google Font Lora
- Bootstrap 4
- jQuery
- HTML, CSS, and JavaScript
After forking my project, and running it locally, you may not see the Font Awesome icons due to Font Awesome requiring users to create personal kits. Create your kit here and replace the link in the head with your personal link.
##Approach After examining the design comps I was given, I decided that I would use Bootstrap for this project. I needed to make sure that the page was dynamic and responsive, and I find that Bootstrap is a great way to organize the content into responsive blocks.
I also decided to tackle this project with a "Mobile First Approach". I find that this approach works well because I could start with a design that was responsive on both mobile and tablet views, and work up from there.
This first big challenge I faced was the fact that the desktop navbar was very different from the mobile/tablet version. I opted to create two different navbars that hide at certain breakpoints and display in others. This allowed for a seamless transition between the two states.
I also faced the same challenge with the footer. Here, I was able to implement two versions as well as write some JavaScript to hide links on the mobile version until the user chooses to display them.