Blog preview card

Community feedback

• 

  raya•2,870

  @rayaattaPosted 11 months ago

  👋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🤩

  Marked as helpful

  1

  ---

  

  Danny Poit•20

  @dannypoitPosted 11 months ago

  @rayaatta Thank you for your help!

  I took your advice on <main> and <footer> and left out <header>, as it seems there is not one in this project.

  As for text directly inside divs, I changed those to <p> tags, so text is not directly inside divs, but I can still target them with CSS.

  I see what you mean about height: 100vh; on mobile (using responsive mode in the browser) and changed that to min-height.

  I understand what you're saying about using min-width on the card to make it more responsive, and I see how you did it with different % widths at different breakpoints. I like the fixed-width for this project, as I'm imagining the client wanting it that way, but I will keep that in mind!

  0
• 

  P

  Øystein Håberg•10,650

  @Islandstone89Posted 11 months ago

  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.

  Marked as helpful

  1

  ---

  

  Danny Poit•20

  @dannypoitPosted 11 months ago

  @Islandstone89 Thank you!

  I have made these changes, and some were also suggested by the other responder as well.

  I did not see the font-size in px and normally always use rem (I had attribution set to display: none, but I changed my mind).

  I did not know about the CSS Reset, so thank you for that.

  Question: Both you and the other responder said not to use text directly in divs, and you also said to wrap the text in the <footer> in a <p> tag. Which other tags should text NOT be placed directly into?

  2