Design comparison
Solution retrospective
New to html/css. Greatly appreciate any feedback!
Community feedback
- @RioCantrePosted over 2 years ago
Hello there! Good job in completing this project! Viewing at your solution, I would recommend the following for you...
- Wrap the whole content of
container
with specific tag likemain
andattribution
withfooter
tag. For HTML structures, refer it with this one Semantics - Instead of wrapping the
button
withfooter
, usediv
or use it as it is. Refactor this part into...
<div> <button class="payment-button">Proceed to Payment</button> <button class="cancel-button">Cancel Order</button> </div> <footer class="attribution"> .... </footer>
- Include description with the
alt
inimg
tags - Switch the background svg in the
container
, use the mobile version in the media query. Alternative is to add it on thebody
rule set - Simplify
margin: 1rem 1rem;
intomargin: 1rem;
in.pricing-info
rule set - Import the
attribution
style in CSS file and removestyle
tag
Above all, you did good! Hope this helps and Keep it up!
Marked as helpful2@AnaesthCodePosted over 2 years ago@RioCantre Thank you for taking your time and providing me with very useful feedback! It is very much appreciated! 🙏
1 - Wrap the whole content of
- @NaveenGumastePosted over 2 years ago
Hay ! AnaesthCode Good Job on challenge
These below mentioned tricks will help you remove any Accessibility Issues
-> Add Main tag after body
<main class="container"></main>
->The
main
element must not appear as a descendant of thesection
element.-> Learn more on accessibility issues
If this comment helps you then pls mark it as helpful!
Have a good day and keep coding 👍!
Marked as helpful1 - Account deleted
Hi there 👋
Congratulate on finishing your project 🎉. You did a great job 🔨
I give some suggestions that I hope help you take your project design to the next level 📈.
- Let's add some box-shadow to the .card in CSS 👍
- Your hover effect of a button is already working great 🚀. You can add also a transition to it. For more information check out MDN docs 🔗
Happy coding ☕
Maqsud
Marked as helpful1
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