Resonsive QR code component using CSS Box sizing
Design comparison
Solution retrospective
- How long did it take you to complete this challenge?
- Which area did you find helpful?
- What was most challenging for you to do in this project?
Community feedback
- @KirthGersenClonePosted almost 2 years ago
I am a newbie myself, but maybe I can comment on the things I've already learnt:
To center #imagebody on the page using flexbox:
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
round corners
- border-radius: 1.8rem;
background colour of the body
- background-color: hsl(212, 45%, 89%);
- font-size: 15px;
Marked as helpful0@princess-ctrlPosted almost 2 years ago@KirthGersenClone thanks for your comment. I didn’t really use css flexbox. I majorly used pure css like box sizing etc
0 - @jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊
I have some suggestions for your code that might interest you.
HTML 📄:
- Instead of using the
<div>
tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using<div>
you could use the<main>
or<section>
tag. For the element with the classname attribution you could use the<footer>
tag. - If an
<img>
like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in yourALT
text, for example: QR code that leads to frontendmentor.io
CSS 🎨:
- To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example:
html {font-size: 15px;}
.
For more information on this topic, you can read the following article: PX or REM in CSS? 📘
- An easy way to quickly and automatically center your
<main>
element inside the<body>
of your page, is by setting the following properties onto the<body>
element inside your CSS like so:body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
I hope you find my suggestions useful, and above all: the solution you provided is very good!
Keep it up and happy coding! 😃
Marked as helpful0@princess-ctrlPosted almost 2 years ago@jrleijnse your comment was really helpful and trust me I’d improve better in future projects. Thank you
1 - Instead of using 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