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

First time going mobile-first!

Alex 310

@AlexGanderton

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Matt Studdert 13,611

@mattstuddert

Posted

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

@AlexGanderton

Posted

@mattstuddert Thank you so much!

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@AlexGanderton no problem! 🙂

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