Blog Preview Card (Boostrap cards, Flexbox, Javascript)
Design comparison
Solution retrospective
I initially tried to create this completely with Flexbox, to test my older knowledge, but it ended up being easier to manipulate using Bootstrap. I created a Bootstrap card and centered it vertically on the page, using container-fluid to sort the width to match the screen size.
I struggled with centering it vertically but ended up finding an effective solution. With hindsight, I could have fixed this much quicker.
I used Javascript to create a working button using an EventListener.
What challenges did you encounter, and how did you overcome them?Struggled with centering vertically. Eventually found solution online. Also used 'container' instead of 'container-fluid' initially and this fixed an issue that I was having with the width of the main element on different screen sizes.
What specific areas of your project would you like help with?Making sure the main element takes up a similar amount of screen size on different screens.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord