Submitted 6 months ago

Solution for QR Code Component

Lampros Liontos•100

@reteov

Preview site View code

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?

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

Federico Fioretti•50
@fedefiorettiPosted 6 months ago
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
Lampros Liontos•100
@reteovPosted 6 months ago
@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
Federico Fioretti•50
@fedefiorettiPosted 6 months ago
@reteov Maybe if you try to change you padding top you can move it down!
0
Lampros Liontos•100
@reteovPosted 6 months ago
@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
Federico Fioretti•50
@fedefiorettiPosted 6 months ago
@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
Lampros Liontos•100
@reteovPosted 6 months ago
@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
Federico Fioretti•50
@fedefiorettiPosted 6 months ago
@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

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