Website built using Bootstrap components, HTML & CSS.
Demo link: https://jimmylee88.github.io/bootstrap-site/
Our task is to build a website using HTML, CSS, and Bootstrap components. Using what I've learnt from previous weeks to override any baked-in Bootstrap styling. Make use of Bootstrap's utility classes to handle layout, spacing, and responsive sizing across different screen breakpoints.
I decided to rebuild an existing website for a boutique guitar company, who currently use Shopify.
I wanted to improve the UX by:
- Streamlining the userflow. Reducing number of pages with minimal content, and clicks needed to navigate between them.
- Develop a colour palette based on the paint colours used on the guitars themselves. Green, Pink, and Black.
- Use a dark theme to let the product imagery stand out. Design loosely based on big tech company websites for product showcases and launches.
- Big, bold typographic-led design using typefaces available on Google Fonts.
I found the Bootstrap utility classes extremely handy, for handling the responsiveness of sizing across different screens. You can see this with "bento grid" layout I used for the guitar cards and bullet lists of features. It would've taken me a lot longer to figure that out using flexbox and manually picked sizes.
I think I spent way too long trying to wrangle the hero section, and running into problems with layout for that. Ended up having to use media queries and manually picked padding/margin values to get what I wanted. It's more of a design issue.
Having a large variety of components that are ready-to-use is very handy too. I used the navbar, carousel, accordion, cards, and footer components. It was time consuming trying to figure out how to override some of the baked in styling for some of these components however.
Overall, I'm happy with the website I built. Looking forward to using bootstrap components more in the future, and also learning more about it's contemporary successor, Tailwind.