Getting to d3.js: Bootstrap
Back to my goal of learning d3, and next in this series is learning Bootstrap. Once again, I’m using the Udemy Web Dev Course found here.
Bootstrap is a CSS framework that was created in 2010. It is a popular framework choice because it contains premade CSS files and a 12-column layout system built on top of Flexbox.
You can learn more about Bootstrap and access the premade files by visiting getbootstrap.com.
Challenge #1
This first challenge was to create a card with an image and link by leveraging the prebuilt components from Bootstrap. This challenge helped me understand how to add Bootstrap to an HTML file and familiarize me with what Bootstrap has to offer. See below for my code and output!
Challenge #2
This next challenge was made to learn more about what Bootstrap offers in terms of custom components and examples. The goal for this challenge was to create a website for a fake moving company called Move It, that includes a navbar, a hero, a feature, and a gallery carousel.
Final Project
For my final project with Bootstrap, I was tasked with creating a start-up website for a service called TinDog, Tinder for dogs. You can see the example site from the Web Dev Bootcamp here.
All the images that were used to create the example site were provided. Still, I thought, I have two perfect dogs, so I had to change things up and design my cellphone with the namesake of this blog, my Lilah Bell (and don’t miss the testimonial cameo from her little brother, Gus!).
This was a great exploration of what Bootstrap offers and how easy it is to customize. Some things that I used to change up the base Bootstrap offerings were changing the header and footer to be an animated gradient background and playing around with light and dark modes in places like the Pricing buttons.
See below for a quick video overview of this finished project, or visit here to check it out yourself!
Up Next: Web Design School
