Design comparison
Solution retrospective
This is my second challenge here on Frontend Mentor... I did my best but I feel there could be room for improvement. I would really appreciate your feedback.
My biggest issue is with the media queries, there is a lag on the border-radius everytime it changes from desktop view to mobile view.
And any advice on how to clean up the CSS would be welcomed
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HEADINGS ⚠️:
- This solution has generated accessibility error report due to skipping heading levels
- We want to avoid skipping heading levels, make sure to start with
<h1>
and working your way down the heading levels (<h2>
,<h3>
, etc.) helps ensure that our document has a clear and consistent hierarchy. Read more 📚
- Because skipping heading levels is a poor practice from the perspective of information design, whether we are talking about web pages, books, journal articles, or about anything else. You can not only confuse screen readers but all readers when you don't follow a consistent, logical pattern with your heading structure.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @0xabdulPosted over 1 year ago
Hey there first congratulations on successfully completed the Single price grid component
- Some recommendation for improve your code
- IN HTML 📃
- your headings is not level by level increase by one
- The Html documents should be have level of headings Ex : <h1> <h2> <h3> <h4> line by line
- Don't Do !
- Ex :
<h2> Join our community </h2> <p> 30-day, hassle-free money back guarantee </p> <h2> why Is </h2> <p> Tutorials by industry experts Peer & expert code review Coding exercises Access to our GitHub repos Community forum Flashcard decks New videos every week </p>
- We Do✓
- Ex :
<h1> Join our community </h1> <p> 30-day, hassle-free money back guarantee </p> <h2> why Is </h2> <p> Tutorials by industry experts Peer & expert code review Coding exercises Access to our GitHub repos Community forum Flashcard decks New videos every week </p>
- We use the headings line by line or Order way
- Now you clear the Accessibility reports
- I Hope it's useful for
- Happy Coding
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