Design comparison
Community feedback
- @rayaattaPosted 10 months ago
Hello 👋Magdy Ali, congratulations on completing this challenge 🎉
I have some tips that you might find interesting.
1 I noticed that you used
<h4 class="learn">Learning</h4>
. "Learning" is not a heading, it's more like a link- it could be a<a>
or just ap
. Even if learning was a heading it wouldn't have been anh2
The actual heading is
HTML & CSS foundations
Here's a quick guide on how to headings:
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. You can then style them in you css.Unlike what most people think, it's not just about the size and weight of the text It is about maintaining a clear and consistent hierarchy through out the document
2 Since the footer is a sectioning element it should not have text directly written into it but rather it should be wrapped inside a text wrapping element like <a>,<span>,<p> In this case the best element to enclose the text would be a <p>
3 I noticed that you imported your fonts in css. Linking to fonts in HTML can be better for performance because it allows the browser to begin downloading the font files immediately when parsing the HTML, rather than waiting for the CSS file to be parsed and then initiating the download. This approach can help reduce the page load time and improve overall performance.
On the other hand, importing fonts in CSS using the @import rule can create a render-blocking situation, where the browser has to wait for the CSS file to be downloaded before it can properly render the web page. This can potentially slow down the page load time.
Therefore, if performance is a priority, it is generally recommended to link to fonts in HTML rather than importing them in CSS.
I hope this helps 🙃
Your solution looks awesome
Happy coding ✌️
Marked as helpful1
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