Design comparison
Solution retrospective
I am most proud that I successfully completed this challenge using only HTML and CSS. It helped me improve my understanding of structuring a webpage and styling it to match the given design. Next time, I would focus on making my code more efficient by using CSS flexbox/grid more effectively and ensuring better responsiveness for different screen sizes.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was aligning the elements perfectly according to the design. Initially, some sections were not positioned correctly, but I resolved this by carefully adjusting margins, paddings, and using flexbox. Another challenge was ensuring that the text and images were responsive. I overcame this by using relative units like percentages and rem instead of fixed pixel values.
What specific areas of your project would you like help with?This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.
Community feedback
- @dilanrojasPosted about 1 month ago
Hi! I've been taking a look at your code and solution. It's great, but you can improve it with some adjustments...
When writing HTML we should avoid using <div> too much and replace it with tags that makes more sense to the browser. For example, instead of using a div for wrapping the buttons as you were using, you can use a <ul> since all those buttons together are like list. Instead of using the <p> tag for everything that's not a title or a big text, you can use <h2>, <h3>, and so on for smaller text on the header.
I'd also suggest to avoid using a fixed width on your card for purposes of responsiveness. Instead, use "width: min({width}, 100% - {padding})". This will give you responsiveness without any media query. I also recommend you to check padding and gaps, this will make your design look cleaner.
Other than that, you did a great job!
Marked as helpful0 - @gautam-32b7Posted about 1 month ago
Hi there!
Your solution looks amazing. However, I would suggest you work on spacing and use an external CSS file instead of an internal CSS file.
Happy coding!
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