@serenanassozi
Submitted
how to center the summary component
@talissoncosta
@saranguiz92
Submitted
The most difficult for me was the positioning because I am still learning how to use it. Also, the code is a bit disorganized. I would like to know how to group the classes in a better way to apply the attributes.
@talissoncosta
Posted
Hey @saranguiz92, congrats for your solution.
I've got some tips to you..
Try to apply css to each class individually... even if you are duplicating some props it is gonna be better because it is gonna be explicit to you and later on you can figure out how to handle it.. now you are grouping too much and many of styles are being overwritten.
As you are already using flexbox
you can use gap here instead of a <br>
Anyway, that is a great start, soon you are getting used to flexbox
and you will see how helpful it is.
I hope it helps... Happy coding
Marked as helpful
@CriKno
Submitted
Please tell me how I can improve, whatever it is fine!
@talissoncosta
Posted
Yep.. let's see :D
I see that you applied a gap on qr-container
<div class="qr-container">
<img src="./images/image-qr-code.png" alt="QR code" class="qr-image">
<--- It will generate a gap here, between `image` and `text-container`, which is pretty good, you don't need margins between the itens, and also if you need to add a new item inside `qr-container` it will get the same space, making it consistent --->
<div class="text-container">
<h1 class="title">Improve your front-end skills by building projects</h1>
<p class="subtitle">Scan the QR code to visit Frontend Mentor and take your
coding skills to the next level</p>
</div>
</div>
So the that is a great start using gap
congrats!! :D
Let's check your css...
.title,
.subtitle{
margin:0;
padding-inline:28px; // what if instead of setting a padding here, you set the same width as you've set on the img ? on `text-container` => `width: 90%` and apply `text-align: center`
text-align: center; // so it could also be removed
}
.title{
margin-bottom: 20px; // you could remove this margin, just applying gap on `text-container`
font-size: var(--title);
font-weight: 700;
color:var(--dark-blue)
}
.subtitle{
margin-bottom: 40px; // instead of margin, try to explore padding. In order to achieve this, you could just add a `padding: 40px` on `text-container`
font-size: var(--pharagraph);
font-weight: 400;
color:var(--grayish-blue);
}
I hope it helps!! ping me if you need extra help :D Happy coding!
Marked as helpful
Do you have any questions about best practices?
@talissoncosta
Posted
Hello @NourElDinEmad
First of all, congrats for your solution. I've got some tips for your:
main
to wrap up your solution.h1
instead of a h3
. It will help screen readers to understand where is the title.tag
name on your styles. Although it works, it is not a good practice. Use classes
or ids
instead.10px
for the img and the card. Nevertheless, on the designs the border radius for the image seems to be less than it is on the card.flexbox
in your next projects. As soon as you get used to it you will see how it is helpful, you will write a better code, more concise and easier to manage.I hope it helps Happy coding! :D
Marked as helpful
@Trianon27
Submitted
after a long time I come back with these challenges which gives me the inspiration to continue with my learning. I would like to continue with this challenge is right to resume this habit.
@talissoncosta
Posted
Hey @Trianon27
Congrats for your implementation... If you are open to some suggestions I've a few for you..
tag
name as a reference on your styles. Although it works fine, it is not a good practice and you shouldn't use it on real projects.flex
but still have a lot of margins.. try to explore gap
, It is gonna make your code more concise and easier to manage.I hope it helps Happy coding! :D
Marked as helpful
@Tr1ckSy
Submitted
@talissoncosta
Posted
Hey @Saint-dev
I've got some tips to you..
grid
or flexbox
instead of setting your elements as absolute
.paddings
instead of setting your elements as absolute
.I hope it helps :D
@Ataize
Submitted
This is my first project. What you think?
@talissoncosta
Posted
Hello @Ataize Congrats for your first project. I just have small tips for now..
tags
(h1, body, p) to refer in your styles. Although it works, it is really dangerous to use it on real projects. So, try to use classes
or even ids
to refer your elements in the css
file.I hope it helps.
Happy coding! :D
Marked as helpful
@MatheusVSN
Submitted
This challenge is the hardest one so far for me, it took me hours to finish, but was worth in the end as I'm not familiarized with both libraries/tools. Any feedback is welcome 😁
@talissoncosta
Posted
Hey @MatheusVSN Congrats for the solution. I just have some small tips.
flex
in some components. My opinion is that you should use more, and also explore the usage of flex
+ gaps
it will help you to level up and you won't need to use margins
in everywhere. It will make your projects more consistents and easy to manage.Marked as helpful
@thicha0
Submitted
I always end up tweaking pixels during frontend development, is it a good thing ? Should I use percentages sometimes ? Is there a rule about border-radius for example ? Here I have 20px for the container card and 15px for the image inside. I try different combinations of pixels and I leave the ones that "feel" to fit.
@talissoncosta
Posted
Hello @thicha0 Congrats for the solution. It seems to be great. About your questions...
Feedback
qr-code-title
to be a h1
instead of a p
it is the main text on the screen and using an h1
here will improve accessibility, helping the screen readers understand where is the title in your component.flexbox
in your projects it will help you lot and take you to another level. (Most of places you don't need margins, you can use gap
to make your layout more consistent and easy to manage).main
to wrap up your main implementation and the tag footer
on the footer.<body>
<main>
<div class="qr-code-card">
<img class="qr-code-img" src="./images/image-qr-code.png" alt="QR code">
<div class="qr-code-text">
<h1 class="qr-code-title">Improve your front-end skills by building projects</h1>
<p class="qr-code-subtitle">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</main>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://github.com/thicha0">Thicha</a>.
</footer>
</body>
Marked as helpful
@CriKno
Submitted
Please tell me how I can improve, whatever it is fine!
@talissoncosta
Posted
Hello, the solution seems to be nice. I just have some tips:
main
to wrap up your solution.flex
try to use gap
instead of margins
border-radius
seems to be different from the container on the designs and on your implementation it seems to be the same. It seems to be a bit off to me.
3.2 Text seems to be wider than the image. Try to set the text same width
as the image and use padding
to adjust the spacing around.Congrats for the solution and for great use of css variables. I hope it helps.
Marked as helpful