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

SASS and Responsiveness

Matthew 295

@CodingDatum

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was my very first time using a pre-processor, so I intentionally didn't do anything too flashy with it. Just wanted to make sure I could get it up and running utilizing it's basic features without the entire page collapsing on itself! I used SASS with SCSS, while implementing basic variables, and modules. Creating partial files was a huge help with my organization (not one of my strengths), and I thought it was incredibly visually appealing to have styling components nested inside their parent element. The fact that it stylistically mimics the html it is written for was very satisfying.

This was also the first project I really tried to nail the responsiveness, I wanted this site to be accessible on ANYTHING. For help with this I went through Kevin Powell's Responsiveness Tutorial online (he also provides great YouTube videos!).

Let me know what you think, what you like, what you dislike, any resources you might recommend, anything and everything, thanks!

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