responsive page

Community feedback

• 

  P

  Kamran Kiani•2,700

  @kaamiikPosted 2 months ago

  Hi. Congrats for doing this challenge. I have some notes which may be helpful and improve your code:

  1. The alt attribute is for the images that have some information for screen readers. But here your image is decorative so It does not need any alt text. It should be empty like alt="".

  ---

  2. You should have only one h1 in your page. This card for sure is part of a page so your h1 should change to h2 for this challenge.

  ---

  3. Inside the design, The h1 in your code has a hover effects. Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. Now you have to choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. In your challenge you have h1 and inside the h1 you have to wrap it into a interactive element too.

  ---

  4. The footer element is completely wrong inside your main element. You should only have one footer inside your body and a sibling with main. change it to a div.

  ---

  5. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

  Marked as helpful

  1

  ---

  

  Jamal Guyo•90

  @JamalGuyoPosted 2 months ago

  @kaamiik Thank you for your invaluable feedback.

  I learnt about leaving alt="" for decorative texts, using <button> or <a> for interactive elements and I've checked out Andy Bell and Josh Comeau and watched a couple of their talks which are eye openers honestly.

  I have however left the <h1> tag in place because the only piece of content I'll ever have is the card as per the challenge.

  I have also left the <footer> tag on the <article> after checking an example on mdn.

  I have also left the reset to only include the elements that I'm currently using on html. using * felt like an overkill since we don't have a lot of content.

  0

  

  P

  Kamran Kiani•2,700

  @kaamiikPosted 2 months ago

  @JamalGuyo

  • In a real-world scenario, this card is part of a page. Keep this in mind.
  • For the CSS reset, make sure to understand each CSS reset method properly and use them according to your project's needs.
  • Regarding the footer, I was mistaken. You can use it inside an article, but it's entirely unnecessary and offers no benefit. I recommend using a div to keep your code as simple as possible.

  Marked as helpful

  1

  

  Jamal Guyo•90

  @JamalGuyoPosted 2 months ago

  @kaamiik Thank you. I look forward to getting more reviews from you.

  0
• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @JamalGuyo,

  Here’s the updated version of the HTML, rewritten with improved semantic structure by incorporating <article> and other meaningful tags:

  Improved HTML:

  <main>
    <article class="card flow-content">
      <figure>
        <img
          src="assets/images/illustration-article.svg"
          alt="Illustration of an article"
        />
      </figure>
      <span class="pill bg-yellow">Learning</span>
      <time class="date" datetime="2023-12-21">Published 21 Dec 2023</time>
      <h1>HTML & CSS Foundations</h1>
      <p class="description">
        These languages are the backbone of every website, defining structure,
        content, and presentation.
      </p>
      <footer class="author split">
        <figure>
          <img
            class="avatar"
            src="assets/images/image-avatar.webp"
            alt="Avatar of Greg Hooper"
          />
        </figure>
        <span>Greg Hooper</span>
      </footer>
    </article>
  </main>
  

  ---

  Key Semantic Enhancements:

  1. <article>:

     • Wrapped the card content inside an <article> tag, as it represents an independent piece of content.

  2. <figure>:

     • Used <figure> to wrap the article's illustration and author avatar images, as they are meaningful visuals tied to the content.

  3. <time>:

     • Added the <time> element with the datetime attribute for the publication date, making the date machine-readable and more accessible.

  4. <footer>:

     • Encased the author's details in <footer> within the article, as it logically concludes the article content.

  5. Accessibility Improvements:

     • Improved alt text for images to be more descriptive, helping screen readers interpret the content better.

  6. Simplified and Organized Structure:

     • Ensured consistent usage of semantic tags to make the HTML more meaningful and structured.

  This approach enhances semantics, improves accessibility, and maintains clarity for both users and developers.

  Marked as helpful

  1

  ---

  

  Jamal Guyo•90

  @JamalGuyoPosted 2 months ago

  @skyv26 this is insightful. I will make those improvements and incorporate your suggestions in further challenges. Thank you.

  1

  

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  @JamalGuyo I am looking forward, best of luck.

  1