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

TYPESCRIPT + FLEXBOX + HIGHLY RESPONSIVE (3 media query breakpoints)

@imparassharma

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


This task was looking like a piece of cake but it was challenging. Good amont of css is required to complete the task [my style.css was about 1000lines :) ] . My main objective was to follow a good approach and make it as responsive as possible. I know there are more things to learn but I followed %,rem units. Any suggestions about how can I improve further are welcome.

Community feedback

P

@ThabisoMagwaza

Posted

This is very nice solution. I love how you got some of the complicated styling correct.

I especially found your treatment of the images very impressive. But like you said, there's certainly room for improvement.

These are some of the areas I've identified where you strayed from the design:

  1. Some polish on the fonts. It looks too bit and too bold on some screen sizes
  2. You might wanna look add the correct metadata i.e favicon and title
  3. Your decorative blob doesn't seem to respond too well as I resize the page

I'm sure you can find a lot more. I suggest that you look throught the design again while paying close attention to the whitespace, hover and active stetes.

You have an impressive grasp of CSS and I'm sure you'll benefit from the challenge!

Marked as helpful

0

@imparassharma

Posted

Thanks for taking out your time. I will definitely look onto the points you shared with me :) @ThabisoMagwaza

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