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

html, css, flex

DInosMpo 210

@DinosMpo

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


If there is any mistake that i made or if there is a better way, please feel free to leave a comment.Thank you

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello DInosMpo, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

1.You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

2.Every page needs a main heading, the <h1> to show which is the most important heading. You need to increase the headings by one level, like h1, h2, h3 to show the titles hierarchy. Remember that you cannot have more than one h1 heading.

3.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

4.Your solution is great and the code is working, but the html structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

Here’s a minimal html structure for this challenge:

<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

✌️ I hope this helps you and happy coding!

Marked as helpful

0

DInosMpo 210

@DinosMpo

Posted

@correlucas thanks for your time my friend i will look at it

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