NFT site using basic HTML and CSS

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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @R3ygoski
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 helpful - P@danielmrz-dev
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!
- @0xabdulkhaliq
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.html
file to improve accessibility and organization of your page
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
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