Design comparison
Solution retrospective
Thank's to those who gave me some feedback. I was able to make it better and now it work as intended
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello ๐. Congratulation on successfully completing your first challenge ๐ ! !
I have other recommendations regarding your code that I believe will be of great interest to you.
Metadata ๐๏ธ:
- Add a title of the page. The
<title>
tag is used to specify the title of a web page, which is displayed in the browser's title bar or tab, and is also used by search engines as the title of a page in search results.
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
alt
attribute, you can read this article. ๐.
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 helpful0@MMattossPosted almost 2 years ago@MelvinAguilar thank you so much
1 - Add a title of the page. The
- @HassiaiPosted almost 2 years ago
Replace <div class="center"> with the main tag and <h2> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html
Add a tittle tag <tittle> within the head tag to fix the error issue. the content of the titttle tag is the tittle of the file.
The body has a wrong background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.
To center .center on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
To center .center on the page using flexbox: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
To center .center on the page using grid: body{ min-height: 100vh; display: grid; place-items: center; }
Replace the height in .center with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement.
padding: 15px
Give h1 and p the same font-size of 15px, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0
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