This is a solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: GitHub
- Live Site URL: GitHub Pages
- HTML
- CSS
- Bootstrap 5
- Semantic HTML5 markup
Note: These are just examples. Delete this note and replace the list above with your own choices
The main learning points for me was the use of CSS and Bootstrap, and mobile-responsiveness development.
As someone who finds flexbox more intuitive, trying to learn the grid system as a "hacky" way of creating a mobile-friendly page was a challenge. Not to mention the fact that I am still relatively new to Bootstrap, I found myself frustrated at times over seemingly easy tasks.
A major learning point for me was the use of padding. Rather than relying on setting height: 100%, I realized the use of padding allows me to centralize elements equally well. In fact, when I used the attribute height, I encountered many problems getting my elements' height to stay consistent across multiple viewport widths. Specifically, I had issues sitting the image nicely in the card. These issues were ultimately solved with the use of padding and removing height attributes.
As this project is of newbie difficulty, and I struggled even with simple centering and managing Bootstrap grid system, I definitely have a long way to go with becoming more proficient with making mobile-friendly websites and using Bootstrap effectively. Thus, these are the 2 areas I will continue to focus on.
- Frontend Mentor - @junwei-tj