Design comparison
Solution retrospective
Landing page exercise using HTML and CSS.
Community feedback
- @DouooPosted 12 months ago
Hi Tuminha, congratulations on finishing the challenge. You have done a decent job on making the landing page look as the design but I see a small technical mistake (in terms of semantics) and room for improvement in your code. For example, you used a <p> tag for a button in the hero section which is not semantically correct. Plus, the hover state of each button is not working. Additional to this, the column for the card list is 2 while on the design is 3 (for the larger screen) and there is a bit of margin to the body. Not sure what is causing this but its recommended that you use a reset css before you start styling. Here is a reset link in case you are interested in learning more about it - https://piccalil.li/blog/a-modern-css-reset/ - what it does is it basically reset the default browser style so that you build every style per your wish (I find this to be very helpful). Although, I'm giving you suggestions on improvement I still think you have done a pretty solid job finishing this challenge and I think you are just starting out. I wish you a good journey of building up yourself 💪🏽
Marked as helpful0@TuminhaPosted 12 months agoWow, @Douoo, this is amazing feedback, and I've learned more with your feedback than with some one hour YouTube videos on the topic!
Regarding the <p>, you are absolutely right. I'll change it ASAP.
True! The hover is not working. I only worked on the activation. I'll fix it, too.
First time I've heard of reset CSS, and I'm jaw-dropping. This is an amazing tip!
Once again, I don't know how to give you a big THANK YOU!
Hugs from Switzerland.
0@TuminhaPosted 12 months ago@Douoo I did the changes and I used the CSS Reset (what an amazing tip).
Changed flex-start to center, and in my browser and in the GitHub page link, it has the 3 features per row, but somehow the screenshot returns 2 boxes per row.
Ill check what else I can do!
Once again thank you for the feedback and support.
0
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