Skip to content
Submitted 10 days ago

Basic positioning of elements on a webpage

IsaacKel•70
@IsaacKel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Gwenaël Magnenat•1,290
    @gmagnenatPosted 9 days ago

    Hi, congrats on giving a try to this challenge !

    I noticed a few issues in your solutions so here is a list of points to check out that will help you understand how to build more robust solutions.

    • Use an external stylesheet that you call in the <head> of your html.
    • Add a full modern css reset at the top of your stylesheet in all your projects. Check out Andy Bell and Josh Coeau. They both have a good reset file. Pick the one you like.
    • Organise your stylesheet in a visual order following the design. Try to go top to bottom, it will help you and other developers read your code.
    • Never use pixels for font-sizes. Read this Why you shouldn't use pixels for font-size and this The surprising truth about pixels and accessibility
    • Use a max-width in rem for your card instead of a fixed width in pixel. This is important, similarly to the font-size issue. Some users increase the default font-size of their browsers. If you are using pixels you cannot respect these settings and your sizes will not scale.
    • use a min-height:100svh on your body so the content will not crop if it need to take more places when it's zoomed in.
    • You can remove the width and height on your image as it's contained in the card, you just need a padding on your card. A value of max-width:100% will be included in any modern css for images. You can add a width:100% in addition for when the image needs to take more space then it's original width.
    • A <main> landmark is missing. It's important to indicate the main content of the web page. important, it should not be your card component.

    You'll have something like :

    <body>
   <main>
       <div class="your-card">...</div>
   </main>
</body>

    I hope you find something useful in this list to improve your understanding and help you make better solutions.

    Don't hesitate to reach out on discord if you have any questions.

    Happy coding!

    Marked as helpful
    2
    IsaacKel•70
    @IsaacKelPosted 9 days ago

    @gmagnenat That's amazing! I really appreciate the effort you put into the feedback - I will go back and work on it all! Thank you very much, this is a huge help

    1
    Gwenaël Magnenat•1,290
    @gmagnenatPosted 9 days ago

    @IsaacKel I'm glad it helps :) Don't forget you can always go check feedback on other solutions. You don't need to check the code at first but just reading some good feedback can help you discover new tricks. The ones on discord marked with ✅ usually have good review from the team.

    1
  • pipknight•30
    @pipknightPosted 10 days ago

    For the lower text I used opacity to match the solutions.

    Marked as helpful
    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