Skip to content
Submitted 23 days ago

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

kr0ma-git•20
@kr0ma-git
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Eniola•90
    @EniloladePosted 22 days 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)

    1
    kr0ma-git•20
    @kr0ma-gitPosted 22 days ago

    @Enilolade Thanks for the insights and for the comment! I initially placed the transparent border in the code because I thought that it was needed in order for the border-radius property to work. Turns out it wasn't so that's a mistake on my part.

    0
  • P
    Stash443•120
    @Stash443Posted 23 days ago

    I find the code well structured and the design is close the solution. Nice use of the position property.

    0

Please log in to post a comment

Log in with GitHub

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