
Design comparison
Community feedback
- P@kaamiikPosted 2 months ago
Hi. Congrats for doing this challenge. I have some notes which may be helpful and improve your code:
- 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 likealt=""
.
- You should have only one
h1
in your page. This card for sure is part of a page so yourh1
should change toh2
for this challenge.
- 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 yourh1
then It needs to bea
orbutton
. Now you have to choose betweena
andbutton
. If the element take you to a new page It should be ana
tag and If do an action like submit a form or add to cart then It should be abutton
. In your challenge you haveh1
and inside theh1
you have to wrap it into a interactive element too.
- The
footer
element is completely wrong inside yourmain
element. You should only have onefooter
inside yourbody
and a sibling withmain
. change it to adiv
.
- 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 helpful1@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.
0P@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 helpful1@JamalGuyoPosted 2 months ago@kaamiik Thank you. I look forward to getting more reviews from you.
0 - The
- @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:
-
<article>
:- Wrapped the card content inside an
<article>
tag, as it represents an independent piece of content.
- Wrapped the card content inside an
-
<figure>
:- Used
<figure>
to wrap the article's illustration and author avatar images, as they are meaningful visuals tied to the content.
- Used
-
<time>
:- Added the
<time>
element with thedatetime
attribute for the publication date, making the date machine-readable and more accessible.
- Added the
-
<footer>
:- Encased the author's details in
<footer>
within the article, as it logically concludes the article content.
- Encased the author's details in
-
Accessibility Improvements:
- Improved alt text for images to be more descriptive, helping screen readers interpret the content better.
-
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 helpful1@JamalGuyoPosted 2 months ago@skyv26 this is insightful. I will make those improvements and incorporate your suggestions in further challenges. Thank you.
1 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord