Order summary card solution with SCSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋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

  ---

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @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

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @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,775

  @vanzasetiaPosted about 3 years ago

  @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

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @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
• 

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  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,775

  @vanzasetiaPosted about 3 years ago

  @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