Design comparison
Solution retrospective
I will be happy to hear any feedback and suggestion
Community feedback
- @NaveenGumastePosted almost 3 years ago
Hay ! AditNovadianto Good Job on challenge
These below mentioned tricks will help you remove any Accessibility Issues
-> Add Main tag after body
<main class="container"></main>
-> 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@AditNovadiantoPosted almost 3 years ago@Crazimonk thankyou so much for your advice!!!
1 - @zeerobitPosted almost 3 years ago
Good work tackling this challenge and completing it, here are a few pointers:
- you should wrap the ".container" class in a main tag and not div, this would also eliminate the accessibility issues
- The illustration-hero image should be added as a background and not in the html
- Try to use more meaningful name for your classes, example: "lower-main-one" could be named "pay-button" and "lower-main-two" could be named "cancel-button" . Check this link to read about BEM which will help you structure your class names BEM
- Annual Plan should be wrapped in h2 since you can only have one h1 tag on a website. Check this link to read more about it h1 tag.
- Proceed to Payment and cancel order are buttons thus they should be wrapped in an anchor tag , you could also remove the div tags around them since they're not really needed
- you missed to add the background-color in your "main-content" class
- The position property is not needed in your "main-content" class, use flexbox instead
- be careful where you use
max-width: max-content;
i noticed you used it a lot instead of defining the width size - You missed to add the hover effect for the buttons.. check this link to read more about hover hover effect
Hope these help, happy coding 😎
Marked as helpful1@AditNovadiantoPosted almost 3 years ago@zeerobit Wow!!! thankyou so much for your advice, your comments really really help me, thankyouuu!!!!
0 - @boedegoatPosted almost 3 years ago
Great work AditNovadianto. You've done fantastic job
In order to fix your accessibility issue, you can add <main> tag to be the wrapper of your entire app.
Other than that, stay code and happy coding
Marked as helpful1@AditNovadiantoPosted almost 3 years ago@boedegoat thankyou for your advice, next i will fix the issues
0 - @EmmanuelHexerPosted almost 3 years ago
Nice work. Keep it up
1
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