Submitted 6 months ago

Challenge #1 - First Submission to Frontend Mentor | QR Code Component

kr0ma-git•40

@kr0ma-git

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

Although the replica itself is not perfect, I'm kind of proud that I was able to pull it off having barely any actual experience on HTML and CSS without relying too much on external sources. What I think I'd probably do differently next time is to organize my time by finishing other aspects first that are way simpler to implement as opposed to those that will take me more time.

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

I felt I didn't have to struggle with the image resizing bit, but I did. It was really annoying at first since it kind of destroyed the other parts of the layout. Managed to know what the problem was though and pulled through with it (realizing that transform: scale() does resize the image but just changes how it is supposed to look /fp).

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

I would most definitely need help in formatting the page in a way that accustoms the entire page accordingly based on the window's size and dimensions. Still need to learn that part of styling I guess.

Code

Please log in to post a comment

Community feedback

Domagoj Babic•250
@DomCroatia
Posted 4 months ago
Hey, congrats on completed challenge. It looks very good. I'm new at web dev so I might be wrong on some of suggestions but I believe you can improve it more.

For example, you can add justify-content: center; and align-items: center; to body. That way you can remove margin: auto auto; from main HTML element. Also, I think it improves readability if you add text-align: center on body element rather than having it on main.

Regarding html and body styling, body by default takes 100% width, so you don't have to declare it (also you are doing it 2 times). For height, I saw a lot of people adding min-height:100vh; to body element.
Eniola•240
@Enilolade
Posted 6 months ago
Well done, the site looks close to the original but you didn't have to style the height of the body multiple times, styling it once with the HTML was fine
```
html, body {
    width: 100%;
    height: 100%
}
```
Why give a transparent border for your container? (curious)
Stash443•120
@Stash443
Posted 6 months ago
I find the code well structured and the design is close the solution. Nice use of the position property.

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