Blog preview card

👋hello congratulations on completing this challenge 🎉 What could I have done better or even just differently? For your first question , 1.i appreciate the fact that you tried to make your html Semantic but <main>,<footer>,<header> are all landmark tags therefore none should be inside the other basically this is their order in the body.

<main></main>
<footer></footer>

2.divs are used for sectioning therefore you should not put text directly into them Consider <div class="date"> Published <time datetime="2023-12-21 12:00">21 Dec 2023</time> </div> Would have been much more informative as

Published <time datetime="2023-12-21 12:00">21 Dec 2023</time>
</p>

This enables screen readers to recognize the importance of the text because the div doesn't provide any semantic value. **What could I improve on? ** For your second question, 1.

<div class="attribution">

Should be changed to

<footer class="attribution">

2.setting height:100vh; on the body causes overflow problems on mobile devices therefore you should instead use min-height:100vh; 3.instead of using a fixed width on the .card you can use min-width instead in order to make it more responsive. You can also check out my submission . That aside your solution is epic🤩

Hi, and congratulations on completing your first Frontend Mentor project!

Here is some feedback - hope it helps :)

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Since the card is the only "main" content on the page, you can change .card into a <main>.

• Remove the <header> - it is used for content that would be on top of every page of a website, like a logo and a navigation bar.

• All images must have alt text. The illustration is purely decorative, meaning the alt text should be empty: alt="". The author image has meaning, and must have a short description, something along the lines of: "Headshot of Gary Hooper".

• Never have text in divs alone. "Learning" and "Published" can both be <p>.

• .author should be a <div>, not a <footer>.

• .attribution should be a <footer>, and its text mjust be wrapped in a <p>.

• NB: If you don't want to include the .attribution, remove it from the HTML altogether.

CSS:

• It's good practice to include a CSS Reset at the top.

• height: 100vh should be min-height: 100vh - this way, the content will not get cut off if it grows beneath the viewport.

• Font size must never be in px - use rem.

• Change width on .card to max-width.