Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Card created using CSS Flexbox

Jordanโ€ข 20

@jofb

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm not sure how well I've laid out my css, I'm still learning how flexboxes work. It might be a bit of a mess and I'd like advice on that. And of course any extra advice on my html is appreciated! Thanks

Community feedback

Aadvikโ€ข 1,250

@Aadv1k

Posted

I say this to a lot of developers, but add a media query. challenges like these MIGHT seem to work fine on mobile, in practice they don't. So my tip to you will be to add a media query on smaller screens (say 400px) and change up the padding and/or the width. also you should look into semantic html.

Also look into semantic html; semantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.

<article>
 <h2> Title </h2>
 <p> Blah blah </p>
 </article>
  ```

is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.

Marked as helpful

1
Naveen Gumasteโ€ข 10,480

@NaveenGumaste

Posted

Hello Jordan ! 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

happy Coding๐Ÿ˜€

0

Please log in to post a comment

Log in with GitHub
Discord logo

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