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

P
Ben πŸŒŒβ€’ 570

@bengera

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


What are you most proud of, and what would you do differently next time?

I'm proud that I persisted in trying to get every section of the website to look relatively smooth and responsive (360px and above). There were times when I could have just left the design as it was but I took significant time to try and make little improvements on spacing and general responsiveness to the website.

What challenges did you encounter, and how did you overcome them?

Getting the download cards to be slightly offset from each other in the desktop design. To accomplish the offset effect, I increased the number of grid rows and adjusted their sizes for precise positioning of the elements mainly through trial and error.

 display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(20, 25px);
      grid-column-gap: 2rem;
      grid-row-gap: 0px;

 .smol-card-component:first-child {
    @include mq(medium) {
      grid-row: 1/15;
     
     }

    
  }

  .smol-card-component:nth-child(2) {
    @include mq(medium) {
      grid-row: 3/17;
     
     }

    
  }

  .smol-card-component:nth-child(3) {
    @include mq(medium) {
      grid-row: 5/19;
      
     }

What specific areas of your project would you like help with?

Questions:

  1. How common is it for developers to cater to users with screen sizes of 320px? I imagine that the majority of users are no longer using devices like the iPhone 5, for example.

  2. How far should you go when it comes to accessibility. I will add alt text and labels to buttons and other interactive parts of the site and test it with a screen reader but I have noticed that there are so many other things to follow when it comes to true accessibility, like focus trapping, form labels etc. For your average website should you be aiming to follow something like "The European Accessibility Act (EAA)"?

Community feedback

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