Design comparison
Solution retrospective
I had difficulties resizing the image and setting the body dimensions I will appreciate it if I can get help with that
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
Metadata 🗃️:
-
The
viewportmeta tag is missing. theviewportmeta tag is used to control the layout of the page on mobile devices. Add theviewportmeta tag to the<head>tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️
HTML 📄:
- Wrap the page's whole main content in the
<main>tag.
- The text
Improve Your Front-End Skills by Building Projectsis considered a heading element (h1).
- Use more descriptive class names to improve readability of front-end code. You can learn BEM naming convention to improve your class names.
Alt text 📷:
-
To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Instead, try to make the description as human-readable and understandable as possible.
The alt attribute should explain the purpose of the image, for example, in the case of a QR code, a description like "qr code to frontendmentor.io" would be more appropriate.
If you want to learn more about the
altattribute, you can read this article. 📘.
CSS 🎨:
-
For a responsive component, consider using
max-widthfor the width of the component instead ofwidth: min-content;. Also, setwidth: 100%for the image to fit the size of the component."Tip: The width of the component is around 320px wide.
CSS Reset 🔄:
-
You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1 -
- @vanzasetiaPosted almost 2 years ago
Hi, 0la-lekan! 👋
About the image, I recommend making the
<img>as a block element and settingmax-width: 100%. Doing this will prevent the image from overflowing.About the
<body>element, you don't need to set a specific dimension. You already do a good thing by setting amin-heighton it instead ofheight. Specific width and height on it will make the page not responsive.As @MelvinAguilar has already said, the website should have the viewport meta tag to be responsive. Put it below the
<meta charset="UTF-8">.You should use the code snippet that is given by the Google Fonts website to import the font family. Doing
<link rel="stylesheet" href="https://fonts.google.com/specimen/Outfit">will not import the Outfit font family. Now, the website is using thesans-seriffont family.I hope this helps. Happy coding! 😄
1@0la-lekanPosted almost 2 years ago@vanzasetia For the font, can I get the actual code to input it
0@vanzasetiaPosted almost 2 years ago@0la-lekan
Yes, you can.
You can get the code snippet to import the font family by visiting the URL — https://fonts.google.com/specimen/Outfit. Then, select the font weight that is needed for the website. After that, you can copy-paste the
<link>tags to your website.0
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