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 Code Page

@parisdorcas

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


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

To be honest, I'm proud I was able to complete this task. It's the first thing I've ever made after being self-taught by reading a couple of tutorial websites. It was overwhelming to have an open-ended problem to solve without structure, but I completed it.

I think next time, I'd try to plan a bit more carefully about what needs to be done before jumping in.

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

I don't think I completed the task in a very logical way. I tried to start adding the necessary HTML and add the CSS after but I think my understanding of what needed to be done was not sufficient to plan clearly enough this way and trying to solve problems meant adding/nesting div elements to get the alignment correct. I'm worried this has made the code messy or unoptimised.

I didn't have any prior knowledge of rounding corners - so I found border-radius by googling what I wanted.

I also struggled trying to find a way to centralise the box vertically - I initially knew that I could use margin:auto to centralise horizontally, but couldn't solve the problem vertically. I ended up copying a solution from google that tackled it differently, but that I need to further read up on to understand.

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

Feedback on how to optimise or make less messy - whether there was a better solution than nesting divs to fix the alignment of all elements for example.

Any guidance or signposting to good resources about the alignment code used.

Community feedback

@SvitlanaSuslenkova

Posted

Hi. It looks good. Your whitecontainer <div> should become <main> and first <p> should be <h1>. Consider to read a little about sematic elements in html. Hope you found this comment helpful :)

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