@Douoo
Posted
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 helpful
Wow, @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.
@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.