Skip to content
Submitted over 4 years ago

Mobile first landing page, vanilla JS

Alex•2,010
@AlexKMarshall
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I built this with mobile design first using CSS grid, and I'm fairly happy. But it needed a lot of CSS to get it done, and it doesn't feel very organised.

Do people have better suggestions on how best to organise the CSS? I've used variables where possible, but it's still quite a jumble of layout properties, colours, animations etc, and I'm sure on a real site, that would get unmanageable very quickly.

Community feedback

  • Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    I always struggle with keeping my CSS organized. Things that help me are working from less specific to more specific CSS and also adding these kind of headers as a comment in my CSS to split it up in sections.

    Check out my code for an example! https://www.frontendmentor.io/solutions/coming-soon-page-first-time-using-grid-J1aeXMT9R

    3
  • Erik André Jakobsen•90
    @jakobsenPosted over 4 years ago

    In addiction to the comment by Gerben, I would also suggest you take a look at stylesheet languages like Sass, Less or Stylus. The allow you to use nesting in your CSS (in addition to a lot of other cool features), and this really helps (me at least) with keeping your CSS tidy :)

    2
  • Alex•2,010
    @AlexKMarshallPosted over 4 years ago

    Thank you both, that's very helpful, I'll give that a try on the next challenge.

    0

Please log in to post a comment

Log in with GitHub

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