Design comparison
SolutionDesign
Solution retrospective
Hello guys!! Every feedback is awesome!
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @mauricciorcosta 👋, good job on completing this challenge! 🎉
Here are some suggestions you might consider:
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - Figure elements (
<figure>
) should only be used when captions are required with<figcaption>
, you can directly use the image tag in this solution. - Add an h1 tag to your solution. The
<h1>
element is the main heading on a web page. There should only be one<h1>
tag per page, and always avoid skipping heading levels; Always start from<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)
Solution:
<h1 class="title">Improve your front-end skills by building projects</h1>
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful1 - Instead of using pixels in font size, use relative units of measure like
- @PhoenixDev22Posted about 2 years ago
Hi Mauriccio Costa,
Congratulation on completing another frontend mentor challenge. I have some suggestions regarding your solution if you don't mind:
- Page should contain a level-one heading. You should have used a header for
.title
instead of<p>
. In this challenge, you can use<h1>
.
- Consider using
min-height: 100vh
instead ofheight: 100vh
to the body, that let the body grows taller if the content of the page outgrows the visible page.
- Consider using rem and em units as they are flexible, specially for font size, you should use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
Aside these, great job! Hopefully this feedback helps.
Marked as helpful0 - Page should contain a level-one heading. You should have used a header for
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