Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @mattdavis06, Congratulations on completing this challenge!
Great code and great solution! Iβve few suggestions for you that you can consider adding to your code:
You made your html structure entirely with
div blocks
but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use<article>
instead of the<div>
.βοΈ I hope this helps you and happy coding!
Marked as helpful0 - @VCaramesPosted about 2 years ago
Hey @mattdavis06, some suggestions to improve you code:
-
The car images/icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=βtrueβ to hides it from assistive technology.
-
The headings are being use incorrectly. The <h1> Heading can only be used ONCE per page. For this challenge, each heading is equally as important. So best option, is to use <h2> Heading, because it will give each card the same level of importance and it's reusable.
Happy Coding!
0@mattdavis06Posted about 2 years ago@vcarames thanks for your reply, I do always forget about the 'aria-hidden' states, so thanks for pointing it out.
However this challenge is to build a component, not a page. We build components to be reusable throughout our entire site, passing data and styles to them, without repeating code.
This app is built in React and as you can see I have one <Card /> component, which then maps through the data that's being passed to it, therefore it renders 3 <Card />.
src/components/Card.jsx
<div className={`card card-${card_id}`}> <div className='card-header-icon'> <img src={img} alt='sedans-icon' /> </div> <div className='card-heading'> <h1>{card_heading}</h1> </div> <div className='card-body'> <p>{card_text}</p> </div> <div className='card-cta'> <div className={`btn btn-${btn_id}`}> <a href='/#'>{btn_text}</a> </div> </div> </div> {cardData.map((item) => { return ( <Card card_id={item.id} img={item.cardIcon} card_heading={item.cardHeading} card_text={item.cardText} btn_id={item.id} btn_text={item.cardBtnText} /> ) })}
This is the reason it'll show three <h1>, but like I said these are within the component, which is totally fine. If the <Card /> had another heading, then you'd absolutely then use a <h2>. Check out the github code.
Just something to be aware of, depending on what you're building and the stack you're doing it in. πππ»
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