Jeroen Leijnse• 1,420
@jrleijnse
Posted
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 yourALTtext, for example: QR code that leads to the website frontendmentor.io
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; } - 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
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 helpful
1
Rama• 70
@ramavats
Posted
@jrleijnse Thank you so much for all your suggestions. I really appreciate your help sir. I was very confused on which unit to choose.
1
