Design comparison
Solution retrospective
I was most proud of me using flexbox, but next time I would try to get into media queries
What challenges did you encounter, and how did you overcome them?Knowing which element to use flexbox.
What specific areas of your project would you like help with?Any help is welcome
Community feedback
- @AlyferJTPosted 3 months ago
Hi there, nice job! Just a little tip about the
flexbox
, you don't really need to set ajustify-content
oralign-items
everytime you usedisplay: flex;
on a container. The main goal of the flexbox is that you have the control of the elements inside your container, so you make then to behave the way you need.Well, in my view, this would be something i would do in that specific project.
I would change the HTML to:
<div class="container"> <img src="images/image-qr-code.png" alt="image of a qr code"> <div class="container-info"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </div>
Using a
<div>
around<h1> and <p>
, you would have a better control of the element.So you would have 2 elements inside the
.container
So in the CSS you have this:
display:flex; flex-direction: column; justify-content: center; align-items: center;
that's not wrong in all cases, but in that one, you could do this:
display:flex; flex-direction: column; justify-content: space-between; /* i think this would be better */ gap: 2rem; /* or whatever value you want */ padding: 1rem; /* i think that a fixed value would show a better look, but depends*/
The
gap
is a space between the elements inside the flexboxSo doing all that would remove the weird blank spaces around it, and bring it a nice look. I recommend you to search a fun minigame that calls Flexbox Froggy on google, this somehow teachs you the logic behind the flexbox. Overall, i think tha's it, if you didn't understand something, feel free to ask :D
Marked as helpful0 - @MElhatmiPosted 3 months ago
You have done well using semantic html, properly centering the qr container using flexbox. I'm getting the impression that you are too concerned with responsiveness already, from my understanding of the design all we need to do in regards to responsiveness is that we center the container across all screen sizes, and you already to that. what I advice you to do now is to get familiar with figma and how to get all the metrics, and just copy all the values from widths and heights to margins to font sizes to border radius and even the box shadow. until you are close enough to the design after that I advice you to take an optional step to learn about css variables and implement them in your solution, they maybe overkill for a small project like this but i think its a good practice going forward
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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