Accessible and Responsive Product Preview Card (SCSS, JS & Webpack)
Design comparison
Solution retrospective
One small step for the Frontend community 🦶, one giant leap for a self-taught web developer 🏃♀️
Hi, everyone! 😊
A month ago, I knew absolutely nothing about Sass, Webpack, PostCSS, Markdown, Font Loading Strategies nor Web Optimization , and I had never built a responsive or accessible page on my own 😬, so this challenge was a great opportunity to learn about all that and more 😃!
I summarized what I learned in the ReadMe for the repository of this project and I even wrote a guide on how to set up Webpack 5 🤓, in case you want to check them. Maybe you can learn a thing or two from them 😉!
I gave my best on this project 💪, and I'm very excited to share it with you 😄, as well as everything I learned 🙌🤲.
However, I know there are chances for improvement 📈 and one of them has to do with the attribution section: I tried to incorporate it into the layout, while also trying to keep the result as close to the original design, and that led to some tricky media queries 😣. Has anyone found a better/simpler way to do this? 🤔
If you can help me answer that question or if you can give me any other feedback, it'd be very grateful 😊. I appreciate that you take some time to review my job and share your thoughts and experience with me. 💗
— Ayxa 🌻
Community feedback
- @je-joPosted about 2 years ago
Hi, your solution is just mind-blowing :O
Regarding your question about the footer, I find that the simplest solution is to use the flex-grow property on <main> element (which has a class of .container in your solution).
.container { flex-grow: 1; }You have a body element displayed as flex with height of 100vh and with two children, main and footer. Setting flex-grow of 1 to <main> will make it fill entire viewport, so the footer will stick to the bottom. You would have to adjust your height settings on the card, I suppose you could just set it at 100%.
Alternatively, if you don't want your footer at the bottom of the page, but want it directly beneath the card, as in your current solution, add the flex-grow of 1 to footer instead, and play around with the sizes until you get it right.
Keep the Footer at the Bottom: Flexbox vs. Grid - Here's a great article by Stephanie Eckless that deals specifically with footers, but helped me understand page layout in general.
You keep going strong! Thank you for sharing your process, I'll try to incorporate some of your workflow in my next challenge.
0
Please log in to post a comment
Log in with GitHub
Join 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