Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-component-main simple

@arudu

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
  • Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

More Info: 📚

MDN Main Element

  • The “car icons” in this component are purely decorative. ⚠️ Their alt tag should be left blank to remove them from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • Do not capitalize❌ "sedans", "suvs" and "luxury" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
  • The "sedans", "suvs" and "luxury" are headings ⚠️ so they need be wrapped in a heading element. Since each heading in this card has the same level of importance an h2 heading ✅ will be the best choice.
  • Your "buttons" were created with the incorrect element ❌. When the user clicks on the button they should be directed to a different part of you site. The anchor tag }will achieve this.

More Info:📚

MDN The Anchor element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

0

@VCarames

Posted

  • The web development process can be made easier and expedite the process 🚀 by implementing a CSS Reset. Here are some examples that you can freely use 😁: Josh Comeau Reset, Eric Meyer Reset
  • To properly center ✅ your content to your page, you will want to add the following to your body (this method uses CSS Grid):
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

More Info: 📚

Centering in CSS

  • Implement a "Mobile First" approach 📱 > 🖥

Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect 💯 on all mobile devices.

More Info: 📚

Mobile First

0

Please log in to post a comment

Log in with GitHub
Discord logo

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