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

Solution for QR Code Component

@reteov

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?

My primary point of pride was simply getting this made, submitted to GitLab, and then deployed to my own website subdomain.

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

Not really much of a challenge coding-wise, but the largest part of the challenge was setting up the CI/CD using my GitLab repository to upload via FTPS to my shared hosting provider. I had to do some learning on docker, GitLab's CI/CD system, as well as the lftp program, which is what allowed me to make the deployment automatic.

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

I've covered all the parts I can think of, but now it's just a matter of practice, practice, practice!

Community feedback

@fedefioretti

Posted

It looks great! just a little bit small maybe, comparing with the original, but it looks really great... just one thing to ask, is necesary to achieve (or at least to try) the same result? or we can explore our taste and give it a little more color and shapes?

0

@reteov

Posted

@RedFive-StandingBy I'm just starting; I'm assuming that, for the exercise, we will want to duplicate the desired screenshots. Additionally, I've already updated it, so they are approximately the same size, although there is a slight offset.

0

@fedefioretti

Posted

@reteov Maybe if you try to change you padding top you can move it down!

0

@reteov

Posted

@fedefioretti I think it's more to do with the page width and height; in order for it to be located in the same place as the image, I'd have to get the width and height of the body correct (I'm currently using 100vw and 100vh).

EDIT: I've just updated the CSS, and now the pages are almost perfect. I am not sure if they're looking for perfection, or "just enough," but I'll assume the latter until I hear otherwise.

0

@fedefioretti

Posted

@reteov ok now it seems pretty much close (almost perfect like you said), just put the footer outside the box and its done! that will fix your content position properly... Regarding viewport width and height I normaly use only 100vw in the stylesheet.

0

@reteov

Posted

@fedefioretti Okay, I got it as close as I could while keeping the footer outside the box.

As for 100vw, I've found that if I do not set the body's height, then there doesn't seem to be a way to vertically center the box on the page. And unless we're looking at a perfectly square screen, I'm not sure 100vw is the same value as 100vh.

0

@fedefioretti

Posted

@reteov you got it this time! i'm not sure about vh, but i think it depends on the size of the html or main element and its contents... maybe the right way to do it is to set de vh in 'auto', so that way it fits to the content. I will run a research on 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