Build a blog page using semantic HTML, CSS, Flexbox and Aria labels

Community feedback

• 

  AlejandroIMP•190

  @AlejandroIMP

  Posted 4 months ago

  Well done!

  I have some feedback, I hope you find them useful

  Areas for Improvement:

  Heading Hierarchy:

  • The <h2> tag is used for the date, which might not be semantically correct. Consider using a <p> tag or a <time> element instead.
  • Example:

    <p class="blog-article-date">Published <time datetime="2023-12-21">21 Dec 2023</time></p>
    

  Unnecessary <div> for Tag:

  • The <div> used for the tag (<div class="blog-article-tag">Learning</div>) could be replaced with a more semantic element like <span> or <p>.
  • Example:

    <span class="blog-article-tag">Learning</span>
    

  Footer Link:

  • The link in the footer for "Coded by" is missing a proper URL. Consider adding a valid URL or removing the link if it’s not needed.
  • Example:

    <span>Coded by <a href="https://github.com/yourusername" target="_blank">Mark O'Brien</a></span>
    

  Overall, the code is well-structured, Bravo!

  01

  Marked as helpful
• 

  Abdulrahmon Ogunwale•100

  @moyinoluwa001

  Posted 4 months ago

  ✅ Strengths: Clean Structure: The code is clean and easy to read. The use of flexbox for centering the card and managing layout works well and ensures a balanced design.

  Responsive Design: The solution includes responsive breakpoints (@media queries) that adjust the layout for tablets and smaller screens effectively. The scaling of text sizes, padding, and image adjustments are thoughtful and improve usability on different devices.

  Consistent Styling: The consistent color scheme and use of shadows give the card a polished look. The hover effects on the links (if added) would enhance interactivity. Accessibility (A11y): Missing alt Attributes: The SVG illustration and author image should have descriptive alt text for screen readers. For decorative images, use alt="" to allow screen readers to skip them. Improved Text Contrast: The gray text (#555) might not provide sufficient contrast on certain screens. Consider using a darker shade to enhance readability. Keyboard Navigation: Ensure interactive elements (like the title or links) are focusable using the tab key, improving navigation for keyboard users.

  Consistency: The card container padding is quite large (40px), which reduces usable space on small screens. Reducing padding slightly can optimize space without compromising aesthetics. The author’s name is wrapped in <sanp> instead of <span>, which is likely a typo. This should be corrected for proper HTML validation. SVG Optimization:

  The current SVG code is quite large. Consider simplifying or compressing the SVG using tools like SVGOMG to reduce file size and improve load times. 📱 Responsive Design Notes: The card scales down well, but on very small screens (under 320px), the text may feel cramped. Adjusting the font sizes slightly smaller in the last media query can improve the layout. Consider adding some margin around the card container on small screens to prevent the content from touching the edges of the viewport.

  02