Design comparison
Solution retrospective
#Hi All
Just got done with my first project, please if there's any improvement for me to make let me know. Thank you!
Community feedback
- @danielmrz-devPosted 10 months ago
Hello @Chenxi96!
Your solution looks great!
I have a couple of suggestions for improvement:
- In order to make your HTML code more semantic, and since that is the main title of the screen, you can replace the
<h2>
with<h1>
. Unlike what most people think, it's not just about the size and weight of the text.
The
<h1>
to<h6>
tags are used to define HTML headings.<h1>
defines the most important heading.<h6>
defines the least important heading. Only use one<h1>
per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with<h1>
, then use<h2>
, and so on.- Also, still about semantic HTML, you can replace your
div.container
withmain.container
. All these changes may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
Marked as helpful1@Chenxi96Posted 10 months agoHi @danielmrz-dev,
Thank you for the feedback, I have updated this on my code!
1 - In order to make your HTML code more semantic, and since that is the main title of the screen, you can replace the
- @MelvinAguilarPosted 10 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- The result is identical to the design, there are many hours behind achieving this impeccable result.
- When you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the name of the "HTML & CSS foundations" text in an
<a href="#">
tag. This way, users can click on it, expecting some action, like navigating to a page with more information about the fundamentals
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
- 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.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1@Chenxi96Posted 10 months agoHi @MelvinAguilar,
Thank you for the feedback! These were all very helpful information that I either did not think of at the moment or didn't not know of. I have applied the changes to it now. Thanks again!
0
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