Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

Clipboard landing page

#sass/scss#lighthouse
Cody Kellyβ€’ 60

@CodyKelly

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


For this project, I used SCSS with CUBE CSS methodology in mind. My goal was to build out the larger composition of the site first, then style any parts that needed special attention after.

My questions:

Is the SCSS code easy to follow?

Are there any glitches on your browser?

Does my site respond well when you resize your browser?

Any other tips that come to mind will be appreciated as well :)

Community feedback

Anna Leighβ€’ 5,135

@brasspetals

Posted

Hi, Cody. Congrats on submitting another solution. πŸŽ‰ Overall, good job on this one. I don’t see any glitches, and it responds great - even on large screens (1920+), which sometimes gets overlooked. πŸ‘

A few suggestions:

  • .content could be changed to a main element rather than a div for improved semantics.
  • Speaking of semantics, the links ul in the footer could be wrapped in a nav.
  • One last thing - I’m unsure why you used empty divs between sections to add space when you could just put margins on the sections themselves. πŸ€”

Marked as helpful

1

Cody Kellyβ€’ 60

@CodyKelly

Posted

@brasspetals Thanks so much! Had a lot of fun building this one as it was nice to really dive into using SCSS and see what that had to offer.

Excellent suggestions all around. I need to print out a cheat sheet for semantic HTML cause I always forget there's probably a tag out there that's a better fit for what I'm doing.

As for the empty divs... yes.. that's a bit of an ugly spot in the code, I have to go back in there and change that! I treat these projects as constant works in progress and am constantly going back and tweaking things, so thanks so much for the suggestions.

1
Anna Leighβ€’ 5,135

@brasspetals

Posted

@CodyKelly Semantic HTML and accessibility in general are constant learning processes for me. Here's an article on how to section HTML that I have referred back to many, many times. Constant improvement is the name of the game. πŸ‘

Glad my suggestions could be of help! Looking forward to your next solution. πŸ˜„

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