Design comparison
Solution retrospective
I have completed this as my 6th challenge on Frontend Mentors. I am glad to accept any feedback and suggestions regarding the accessibility and the techniques that I have used to develop the webpage.
If anybody my way of using the flexbox as wrong I am open to any suggestion about changing it. Can anyone check whether the BEM notation that I am using is a correct approach?
I have learnt about and used the :first-child and :last-child pesudo selector in CSS for making the border-radius for the first and last card. If there is any other simpler approaches of doing this please tell about it.
I am also thinking about developing this page in React by making use of card as a component. Please comment out any resources that I can go through to do it.
Advance thanks for any comments 🫡.
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @madhavan-ts!
Your solution looks great!
I have a suggestion:
- For semantic reasons, don't use more than one
<h1>. It should represent the main heading/subject for the whole page.
The
<h1>to<h6>tags are used to define HTML headings.<h1>defines the most important heading.<h6>defines the least important heading. And don't skip heading levels - start with<h1>, then use<h2>, and so on.I hope it helps!
Other than that, great job!
1 - For semantic reasons, don't use more than one
- @MelvinAguilarPosted 10 months ago
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- The use of BEM is impeccable; it looks very well done!
- The images can have an empty alt attribute since they are decorative icons and don't add context to the page. However, if the images were decorative, they wouldn't need hyphens or redundant words like "picture," "image," or "photo" because the
<img>tag already provides that information
- You should use only one
<h1>tag per page. The<h1>tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires thatSedans,SUVsandLuxuryare headings, but you can use the<h2>tag instead of the<h1>tag. You can read more about this here 📘.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
1
Please log in to post a comment
Log in with GitHub
Join 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