Submitted 6 months ago

First solution using basic HTML and CSS

Soledad Fernández• 10

@SoleFernandez

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@cintiavic

Posted 6 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

Soledad Fernández• 10

@SoleFernandez

Posted 6 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!!

Please log in to post a comment

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