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-master-with-html-css-js

elasri21 1,280

@elasri21

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


i got some advice from you guys and i applied them to my code and the challenge now looks good than before thank you guys for your help

Community feedback

Shahin NJ 1,190

@SJ-Nosrat

Posted

Hi, Cool solution! Looks good!

I've noticed that on the desktop design; the page looks left-aligned try and add the below rules to your CSS to fix that issue, as follows:

 html {
   height: 100%;
}

  body {
   min-height: 100vh;
   display: grid;
   place-content: center;
}
  • Also, the <h1> tag should be used once per page; as this is a top-level heading and has special meaning for accessibility purposes.

  • Add the aria-hidden="true" attribute to your <img src="images/logo-chrome.svg" alt=""> since there's no alt="" description.

  • Add the type="button" to your <button>More Info</button>.

  • All the accessibility issues is coming from using <div> tags too much; try and use <article> for the cards.

  • When clicking on the accordian it expands nicely; however, the arrow still points downwards when open; try and use: transform: rotate(180deg).

I hope the above helps!

Best of luck on your coding journey!

0

elasri21 1,280

@elasri21

Posted

@shahin1987 man! this is awesome. thank you so much you are great man because it is not easy to spend time giving such advice with examples again thanks a lot

0

@T3sultan

Posted

a simple bookmark manager right site background color not using all over it's done

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