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

Order summary card solution with SCSS

P
Ctrl+FJ 750

@FlorianJourde

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Vanza Setia 27,835

@vanzasetia

Posted

👋Hi There!

👍 Good job on completing your first challenge! I would recommend to delete the unnecessary file like the old README file. There's no reason to keep it on your repository.

More feedback:

  • Delete the unused code (commented code). It makes the size of the file bigger with no reason and it may confused yourself and other developers (if you worked with a tem), whether or not this code should be deleted or used.
  • 👍 Good job on leaving the alt="" empty for the music icon (decorative image). You might want to add aria-hidden="true" to prevent the VoiceOver screen reader pronounce the image, when it shouldn't.
  • For the bg-pattern, I would recommend to put that on the body element instead of on the main. After that you can control the position by using background-position.
  • I would recommend to put the font-family property on the body element, since most of the elements like p, headings, will inherit the body font family.
  • I notice that you style the page using the desktop first approach. I would recommend to style the page using mobile first approach, since most of the time in my experience I find out I write less CSS code. So, for the base styling (CSS code outside @media query) you style the mobile layout and then use min-width for the @media query.

That's it! Hopefully this is helpful!

Marked as helpful

2

P
Ctrl+FJ 750

@FlorianJourde

Posted

@vanzasetia For sure, it is ! I'll be more attentive to the points your noted while doing the next challenge, your feedback come at the right time !

Thank you Vanza !

0
P
Ctrl+FJ 750

@FlorianJourde

Posted

@vanzasetia I just completed the next challenge ! Here it is, if you wanna have a look : https://www.frontendmentor.io/solutions/stats-preview-card-component-with-scss-yF--9_glL

I've been careful about your recomandations, thanks again !

0
Vanza Setia 27,835

@vanzasetia

Posted

@FlorianJourde The quality of your code is increasing 📈.

I've just given my feedback on the your stats preview solution.

One thing, I recommend to use Markdown syntax to share your solution link.

[My solution](https://www.frontendmentor.io/solutions/stats-preview-card-component-with-scss-yF--9_glL)

It will render as:

My solution

Hint: You can see all the possible markdown syntax every time you want to write something on FEM input, by clicking the keyboard icon (above the input, right corner).

Marked as helpful

0
P
Ctrl+FJ 750

@FlorianJourde

Posted

@vanzasetia

I would recommend to style the page using mobile first approach, since most of the time in my experience I find out I write less CSS code

Thanks again for that !

0
P
Ctrl+FJ 750

@FlorianJourde

Posted

Hello community !

Here's my first Frontend Mentor challenge's try ! I used HTML & SCSS. Could you let me know what you think is wrong ?

Also, is there's a kind of solution, to see the best way to resolve this challenge ?

Thanks !

0

Vanza Setia 27,835

@vanzasetia

Posted

@FlorianJourde I would recommend to write your questions in Questions for the community, which is the last input on the submit section.

By writing your questions right there, your solution will be showing up on the Feedback Requested tab, which means that your questions will more likely get answered 😉.

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