Design comparison
Solution retrospective
This is my proposal of solution to the QR code component challenge from Frontend Mentor website and my very first non-tutorial project in front-end carrer. The challenge consists of creating a simple static page using the jpg design file as reference and using only HTML5 and CSS3. As I said, this was my first non-tutorial Front-end project, so everything was a great learning experience, however, I emphasize that the alignment techniques both with Flexbox and with display block and also relative and absolute positions were great learnings in this challenge.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @charbavito, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.You can use
<main>
to replace the<div>
containing the whole content,<div>
is a block element without meaning and<main>
is a tag the shows which is the most important block of content in this page.2.Fix the component responsiveness, its not working yet and this is due the
fixed width
you've applied to the container. The difference betweenwidth
andmax-width
is that the first(width) is fixed and the second(max-width) isflexible
and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never usewidth
choose ormin-width
ormax-width
.3.For future projects, think about using relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices.4.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
✌️ I hope this helps you and happy coding!
Marked as helpful1@charbavitoPosted about 2 years ago@correlucas Hello man!
Thanks a lot for the tips, I'll tweak the ASAP code and make these corrections. I confess that I noticed these responsiveness issues, but I decided to go ahead with the project because I still haven't learned these responsiveness issues well and I didn't want to stay stuck this project any longer.
But I loved your tips and they will certainly help me in future projects. Thanks a million.
Cheers!
0 - @MrBlackvantaPosted about 2 years ago
Hey @charbavito congratulation on solving your first challenge you did a great job, I loved you're code very much.
A couple of hints tho to really complete this challenge:-
- Change the
font-weight
of the heading to 700 - Add a
box-shadow
to the card.
You're more than welcome to contact me if you ever get stuck in you're upcoming challenges at [email protected]
Marked as helpful1@charbavitoPosted about 2 years ago@MrBlackvanta Hello bro!
Thanks a lot for the recognition man, I tried to write the best way possible, within my beginner's reality. Thank you very much for your observation about my code. I must be heading in the right direction then...
I'll work on the code ASAP and take into account your suggestions for improvements man, I really appreciate it.
Cheers!
0 - Change the
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