Single Price Grid Component with Grid & Flexbox
Design comparison
Solution retrospective
What I have learned:
I've used BEM for naming my CSS classes to get everything in professional order. Read more about BEM.
I am very happy about any advice!
Best regards Thomas
Community feedback
- @VCaramesPosted over 1 year ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The
section
element is being used incorrectly ⚠️ and not needed for this challenge. Instead use adiv
for each card.
- The button was created with the incorrect element ❌. When users click on the button they should directed to a different part of your site; the
anchor
element will allow this to happen.
More Info:📚
- The “Why Us” list needs to be created using an
unordered list ⚠️
element along with thelist item
element.
- NEVER ❌⚠️⚠️ do this as it creates accessibility issues for users and it is outdated, instead download a
px
torem
/em
converter in your code editor.
html { font-size: 62.5%; }
More Info:📚
Should I change the default HTML font-size to 62.5%?
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 👾
Marked as helpful1@thomaserdmengerPosted over 1 year agoHey @vcarames Thank you so much for your feedback. It helps me a lot.
- Section element: Could it be that you are mistaken. The section element "represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions." What do you think. Am I wrong?
There is an example on MDN
<section> <h2>Heading</h2> <p>Bunch of awesome content</p> </section>
-
Anchor element. You are right. Now I know the different usescases for the button element and the anchor element. I found this. What do you think?
-
If I stay on the section element, I don't need the unordered list element. Right?
-
Font-size to 62.5%. Thanks for your advice. I will not do it this way in the future. Do you have a recommendation for a converter for VS Code?
Best regards Thomas
1@VCaramesPosted over 1 year ago@thomaserdmenger
- Unfortunately, this a single component and not a section. For example, this is a single section, since it has a heading and some content https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA while this one has multiple sections (three of them) https://www.frontendmentor.io/challenges/fylo-landing-page-with-two-column-layout-5ca5ef041e82137ec91a50f5.
In this challenge your are using it for each individual card, which make no sense semantically since it does fit the rule "represents a generic standalone section of a document". They keyword to look out for is "document"
- For it to be accessible, it needs to be a list. While we can see that it looks like a list, visually-impaired users can't and a screen reader can only communicate that it is a list if the correct element is used.
- https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem
0 - The
- @Kamlesh0007Posted over 1 year ago
Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. you can add the cursor:pointerto a button element to change the cursor to a pointer when hovering over the button. This is important to provide visual feedback to users and indicate that the button is clickable or interactive.
.card__button:hover { cursor:pointer; }
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