Design comparison
Solution retrospective
Please, any kind of feedback is welcom.
Community feedback
- @SamadeenPosted over 2 years ago
Hey!! Cheers 🥂 on completing this challenge.. . Here are my suggestions 1.You should use <main class="container"> instead of <div class="container">. 2. Go down orderly when you are using the headings h1 down to h2 down to h3 and so on. 3. You can wrap the attribution div in a footer tag..it improve accessibility
. Regardless you did amazing.. Happy coding!!!
1 - @Akhlak-Hossain-JimPosted over 2 years ago
Hey Matt, I just reviewed your code and preview, great work so far, and here are some of my suggestions:
- try to add some padding in the
.main-space
class. - instead of
div
in<div class="main-space">
try usingmain
tag here. - instead of
<div class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.Coded by <a href="#">Your Name Here</a>.</div>
use<footer class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.Coded by <a href="#">Your Name Here</a>.</footer>
. - try using CSS variables.
Happy coding :)
1@Akhlak-Hossain-JimPosted over 2 years ago@mv805 always, mark my comment as helpful if it was :)
0 - try to add some padding in the
- @denieldenPosted over 2 years ago
Hi Matt, great work on this challenge! 😉
Here are a few tips for improve your code:
- add
main
tag and wrap the card for improve the Accessibility - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - to make it look as close to the design as possible add
background-size: cover
tohtml
element and fixbackground: url(images/pattern-background-desktop.svg) top center no-repeat
with no-repeat - use
button
element insteaddiv
tag for the Proceed to Payment button
Overall you did well! Hope this help 😁
1 - add
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