Skip to content
Submitted 8 months ago

First solution using basic HTML and CSS

Soledad Fernández•10
@SoleFernandez
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

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of finishing my first challenge.

What challenges did you encounter, and how did you overcome them?

It was very difficult to me to get the width fixed for desktop layout. I fixed it in 375px.

What specific areas of your project would you like help with?

I'd like some help with the top and the bottom margin in the desktop layout. I'm not happy with my solution when the width grows more than 1500px.

Community feedback

  • Cintia Vicente•80
    @cintiavicPosted 8 months ago

    Hi Sole, I noticed a couple things:

    • The typography is not correct, I think you forgot to import the font in the css file. @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');

    • You didn't import your normalize.css from styles.css

    • I highly recommend using Flexbox for the layout, it helps you a lot in terms of responsiveness. You can check my solution if you'd like to.

    • As regards to the width, I chose not to fix the width. Instead, I made the width a proportion of the screen size (using vw units).

    I think this will help https://www.w3schools.com/css/css_rwd_intro.asp

    Anyway, your solution looks good!!

    Marked as helpful
    1
    Soledad Fernández•10
    @SoleFernandezPosted 8 months ago

    Hi @cintiavic!! I really apreciate your comment. I'll try harder the next time. I'm going to the page suggested and I'll correct my code. Thank you very much!!

    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