blog preview card

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 a p. Even if learning was a heading it wouldn't have been an h2

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 ✌️