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

Simple HTML and CSS QR-code component.

Ewa 190

@zalewskaewa7

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


Hello, It's my first challenge on Frontend Mentor. I will be grateful for your feedback. Ewa

Community feedback

Christian 970

@FLCHRIS

Posted

Hi there! ✌️, congrats on completing this challenge 🎉🎉🥳🥳

Here some tips to improve your solution. 💯🚀

  • HTML:

  • Your main content should be conteined in the main tag. More info HERE

  • Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info HERE

  • CSS

  • I didn't see a reset in your css file, I recommend you use it, using it will save you future headaches when designing your page. Here some resets:

  • Normalize.css

  • Reset.css

  • My Custom CSS Reset of Josh Comeau

  • To make your page responsive, do the following:

.content {
width: 90%; /* <- add this rule */
display: flex;
flex-flow: column wrap;
/* flex: 0 14%;  <- delete this rule */
justify-content: center;
align-items: center;
background-color: hsl(0, 0%, 100%);
padding: 10px;
border-radius: 10px;
max-width: 300px; /* <- add this rule */
}

Your solution is very good, keep it up!

Happy coding 🙃

Marked as helpful

0

Ewa 190

@zalewskaewa7

Posted

@FLCHRIS

Thank you for feedback. I just improved my challenge.

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