Skip to content
Submitted almost 2 years ago

Responsive web component using HTML and CSS

Jorge Adalbertoβ€’100
@yorchAdalbert
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any feedback would be welcome!

Community feedback

  • Vanza Setiaβ€’27,775
    @vanzasetiaPosted almost 2 years ago

    Hello, Jorge! πŸ‘‹

    Good job on this challenge! πŸ‘

    I have some suggestions to improve this solution.

    • Replace all the <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> mean many titles which can confuse the users, especially the screen reader users.
    • Learn more β€” How-to: Accessible heading structure - The A11Y Project
    • The car icons are decorative images. So, leave the alternative text empty β€” alt="".
    • For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.
    • The website only needs one media query to be responsive. Five media queries for this challenge are overkilled. Try to simplify the styling.
    • Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Instead, set the page's font size on the <body>.
    • Avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

    For your information, it is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the README.

    Responsive 3 Column Card Component (No Media Queries) coding challenge solution

    I hope this helps. Happy coding!

    P.S. Remove the #backbone tag since the website doesn't use Backbone.js.

    Marked as helpful
    0
    Jorge Adalbertoβ€’100
    @yorchAdalbertPosted almost 2 years ago

    @vanzasetia Thanks so much man! you helped me a lot. Your implementation is pretty awesome, and I really appreciate your tips, for now on, I'm gonna implement this new technique.

    0
    Vanza Setiaβ€’27,775
    @vanzasetiaPosted almost 2 years ago

    @yorchAdalbert You're welcome! I'm glad I could help.

    0
  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesPosted almost 2 years ago

    Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

    • Move all of these properties to the body element and delete the width and change the height to min-height:
    .car-component {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}
    • Do not use percentages for you component's width since it will cause more problems than fix.
    • The β€œcar images/icons” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=β€œtrue” to hide them from assistive technology.
    • The headings in your component are being used incorrectly. Since the h1 heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading since it is reusable and it will give each heading the same level of importance.
    • 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.

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

    Happy Coding!πŸŽ„πŸŽ

    Marked as helpful
    0

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