Design comparison
Solution retrospective
It works!
What challenges did you encounter, and how did you overcome them?A bit struggle with hover state of image but well, thanks to prefessor ;)
What specific areas of your project would you like help with?Nope, don't think so but if possible, please give me any advices you want!
Community feedback
- @R3ygoskiPosted 7 months ago
Hello again James,
Once again, congratulations on completing your challenge! It turned out really well.
If it appeared that I liked multiple times, it's Frontend Mentor's fault; it wasn't updating my likes (X_X).
I'll add to the comment above; I just want to expand on what was said about
<main>. Using<main>is extremely important; you need to define what the main content of your page is. Usually, when you start a project, within the<body>tag, always begin by adding<main>.Regarding your
<div class="image">, you can use a<figure>because it contains the main image of your page, directly related to the content.Expanding on the comment above again, it's about
<footer>. It's always used when you want to mark the end of content or the end of a page. So, suppose you have a page with various distinct contents, like a news blog. Each article in this blog will be an<article>and will end with a<footer>, because the<footer>marks the end of that content.Once again, congratulations on another completed project. Keep practicing and improving, and I honestly think it's very cool to include a small animation on the card, the way you did it. If anything I said is confusing, just ask below.
Marked as helpful1@JamesWallison1Posted 7 months ago@R3ygoski Can you give me more details, it is very helpful. Right now, I still can not figure out where to change that. If possible, it is very nice of you to do so! Again thanks a lot
1@R3ygoskiPosted 7 months agoHello @JamesWallison1, of course.
Regarding giving more detail and where to make changes, I believe you are referring to the
<main>, correct? So, it would be this part here:<body> <div class="container">to
<body> <main class="container">And then you just need to change the others, if it's not clear, don't worry, I will also open an Issue on Github and send you the HTML already in the correct form.
Marked as helpful1 - @danielmrz-devPosted 7 months ago
Hello @JamesWallison1!
Your solution looks great!
I have a suggestion for improvement:
📌 Think about using
<main>to wrap your main content instead of<div>.Imagine
<div>and<span>in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
1 - @0xabdulkhaliqPosted 7 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>or<span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers
- For example:
- The
<main>element should include all content directly related to the page's main idea, so there should only be one per page - The
<footer>typically contains information about the author of the section, copyright data or links to related documents.
- The
- So resolve the issue by replacing the
<div class="container">element with the proper semantic element<main>in yourindex.htmlfile to improve accessibility and organization of your page
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
1@JamesWallison1Posted 7 months ago@0xabdulkhalid Thanks a lot for taking time to look around! Yes, I will consider fixing my code based on your advice, it's just that I still can't figure out how to do it but well, time will help me! Again thanks a lot for taking time t look around!
0@0xabdulkhaliqPosted 7 months ago@JamesWallison1 I'm glad you found it helpful ! 🤠
1
Please log in to post a comment
Log in with GitHub
Join 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