Design comparison
Solution retrospective
I completed this Challenge with a few challenges of my own. One thing that threw me off was the Challenge by and Coded by texts at the bottom of the screen. I wasn't sure how to keep these in the page and to the bottom of the screen. At first I've included it in the main tag, but thought the best course of action would be to add it outside of main and set main to a height of 95vh just enough to make space for the text. However this also added a top margin which I had to correct with the background property.
Please advise on which would be the best way to get everything centered. Grid vs Flex?
Community feedback
- @jrleijnsePosted over 1 year ago
Hey there! Great job completing this 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 yourALTtext, for example: QR code that leads to the website 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?
- To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example:
@media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.
For more information on this topic, you can read the following article: Media queries
- 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 - Instead of using the
Please log in to post a comment
Log in with GitHub
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