Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Bookmark landing page

@VincenzoMarcovecchio

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


People, how are you keeping,

I'm submitting this solution knowing that i screwed up on so many levels, i will put it like that, if one of you guys want to have a look at my code and have a better implementation please feel free Thank you so much

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Vincenzo, great to see you post another solution. Where do you feel like you're screwing up? After taking a look at your code I've got some suggestions on potential improvements:

  • First of all, I'd recommend trying to clear the accessibility issues. Read through the errors and Google each one to see if you can try and resolve them.
  • You've put the "A Simple Bookmark Manager" as a h2 whereas I would say this is the main heading on the page and should be a h1. You've then got multiple h1 elements elsewhere. I'd always recommend having a single h1 element and then use multiple h2-h6 elements to create the content hierarchy.
  • Your click listeners for the tabs are on li elements. This makes this content inaccessible to screen reader users, as li elements aren't focusable by default. Whenever you have interactive areas on a page, be sure to use an interactive element to trigger the functionality. A button would have been perfect here.
  • You're currently using <section class="footer"> as the footer, but you could just use <footer>, which would be semantically correct.
  • Theul in the footer currently has the following structure:
<ul>
  <a href="#features"><li>Features</li></a>
  <a href="#Pricing"><li>Pricing</li></a>
  <a href="#Contacts"><li>Contact</li></a>
</ul>

This is invalid HTML as only li elements can be direct children of ul and ol elements. So the anchor tags should be inside the list items.

Keep at it. You'll keep improving with each project! 👍

1

@VincenzoMarcovecchio

Posted

Thanks you for your help Matt!

I appreciate really, these are some good information you are giving me. Mostly it's the Java Script part that is a bit overwhelming over here, but i will go back to this project many times more probably :) and i will try to fix it in the best way possible, i will!

I should avoid html mistakes now...

Thank you again!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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