Skip to content
Submitted almost 4 years ago

First time going mobile-first!

Alex•310
@AlexGanderton
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

So in the last few challenges I have struggled to get the desktop version going to mobile. So I did some research and lots of people said that designing mobile-first is the way to go. It made my life so much easier!!! I am going to stick to mobile-first as much as I possibly can in the rest of the challenges and see how it goes.

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted almost 4 years ago

    Great to hear that you tried out a mobile-first workflow and found it easier, Alex! Many people find that it takes a few projects to get used to it, so it's awesome that you've noticed the benefits immediately.

    You've done an awesome job. Here are a couple of pointers after taking a look at your code:

    • You've currently got 2 h1 headings. I'd recommend only ever having one as having multiple can cause accessibility issues with the content hierarchy. In this project, I'd actually say that it's a single heading. So you could make the whole thing a single h1 and then separate the lines using a span element for the different styles.
    • It's great to see you using Sass. As you start building more complex projects, be careful not to nest selectors unnecessarily. For example, in your generated CSS file you've got this selector .container > .card-1 when it could simply be this .card-1. Also, I'd try giving elements more meaningful class names than .card-1, .card-2, etc. As this is such a small project, it's not a big deal, but it's something to be aware of in future.

    I hope this helps. Let me know if you've got any questions! 🙂

    1
    Alex•310
    @AlexGandertonPosted almost 4 years ago

    @mattstuddert Thank you so much!

    0
    Matt Studdert•13,611
    @mattstuddertPosted almost 4 years ago

    @AlexGanderton no problem! 🙂

    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