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

Mobile-first Clipboard landing page using HTML & CSS (some Flexbox)

P

@loosenthedark

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey, guys. This was built using straight-up semantic HTML and CSS, with some Flexbox incorporated for desktop. I haven't learned Sass or any other way of compiling/pre-processing my CSS yet, and amn't familiar enough with Grid to have full confidence in using it. Maybe next time!

Coding the footer was the trickiest part of this for me, on account of the uneven distribution of some of the elements on larger screens... Is there a better way I could have gone about this?

I also haven't fully optimised this build for tablet, but I still think it looks pretty okay.

Anyway, I'd really appreciate any and all feedback from the FM community, so thanks in advance :-)

Community feedback

Shashi Lo 1,345

@shashilo

Posted

Hey Paul. You did a good job implementing this challenge. Does look like you struggled with the footer and where are my suggestions:

  • The design calls for the desktop to have a max-width of 1440px. If you add that container, you won't need to add the additional padding and margin to the left and right of the footer. This should help ease the size of the columns.
  • Never duplicate header or footer links. That's like double dipping. It's bad for web accessibility and you have to maintain the links in two places. There's a way to remove Flexbox and make the links stacked on the mobile view with media queries.
  • Remove the fixed heights in the #footer-wrapper. There seems to be a few in here. That will mess up with the box model.
  • Instead of creating 3 separate <ul> elements for the 3 columns, make 1. Semantically, 1 makes a lot more sense because it's a group of links not separate groups. Either with Flexbox or Grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
1

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