Skip to content
Submitted over 2 years ago

Responsive card using flexbox

Lucas Gabriell•50
@LucasGabriell97
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I am willing to receive feedback for suggestions and improvements to my code.

Community feedback

  • Account deleted

    Hello there! 👋

    Congratulations on finishing your challenge! 🎉

    I have some feedback on this solution:

    • Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info

    • heading should increase by one use h1 first then h2 etc..

    i hope this is helpful and goodluck

    2
    Lucas Gabriell•50
    @LucasGabriell97Posted over 2 years ago

    @Old1337 Thank you so much for the feedback! I think I've managed to fix this problems you mentioned. 😀👍

    1
  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Hey there LucasGabriell97 good job on finishing this challenge. Keep up the good work.

    Your design looks good however I think the card needs to be scaled up a little. You can do this using the css transform property transform: scale().

    In terms of your accessibility issues

    • Heading levels should only increase by one

    • Wrap all your content within <main> tags

    • Change <div class=`attribution`> to <footer class=`attribution`>

    I hope this helps

    Cheers, Happy coding 👍

    1
    Lucas Gabriell•50
    @LucasGabriell97Posted over 2 years ago

    @TheCoderGuru I made the correction changes, thank you very much. 😀👍

    0
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hello Lucas Gabriell ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • Always use h1 first and then h2, h3 and so on

    • Warp your card content around the main tag Ex: 👇

    <body>
<main class="container">
*all you content here*
</main>
</body>

    happy Coding😀

    1
    Lucas Gabriell•50
    @LucasGabriell97Posted over 2 years ago

    @Crazimonk I managed to solve this problem, thank you for the feedback. 😀👍

    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