Order summary component solution | Mobile-first using flex-box

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Illyaas! 👋

  For the HTML, you have done some good job on it like by using the landmark elements correctly and adding type attribute to the button element. 😉

  But, I have some suggestions on the HTML.

  • I don't think the middle-bottom should be a list. If you try to see the site without any CSS or try to use a screenreader on it then I don't think it makes sense to it as a list. What do you think about it?
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make screen readers ignore the image. In this case, all images are purely decorative.
  • One useful tip about image. The image is probably decorative if it does not add further meaning to the content.
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". This is a security essential for external links. I suggest reading the web.dev article to learn more about this.

  Now, regarding the media queries, I don't think you need to change the styling of the card on the desktop layout. I believe that both on mobile and desktop layouts the card is having the same amount of whitespace. But, when I did the challenge I added some media queries because I thought the desktop and the mobile design had different styling. 😅

  So, I recommend if the site can be responsive without media queries then remove the media queries.

  I hope this helps! Happy coding! 😁

  Marked as helpful

  1

  ---

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @vanzasetia Thank you very much for the feedback! It is much appreciated.

  • I have almost built a habit of styling small information sections as lists due to a video I watched for a different challenge. Thank you for letting me know.

  • About the images, would you class the music icon as useful as it gives information about that section? or is it not really important?

  • I actually forgot to put (target = "blank") on the links 😅

  • Also I have this problem with trying to make the solution perfectly identical to the challenge images which I know its not good practice but it really gives me peace of mind when it is pixel perfect lol.

  • Thinking about it, I think I should really learn mark-down for my comments. Is that what you use and is that even possible or am I making that up?

  Thank you!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Illyaas4Show You're welcome! 👍

  So for the images, if you try to disable all the img tags, do you still be able to understand the page content, or is there any missing information if those images don't exist? For me, I don't think there's missing information if the illustrations and the music icons don't exist. But, the site would not look as good as when the images exist. 😅

  I would recommend focusing on the code quality and the accessibility of the site instead of trying to make the solution to be pixel-perfect. Those things are more important than making your solution to be pixel-perfect. So, making your solution as close as possible to the original design then it is good enough. 😉

  There's a good blog post by Josh Comeau about "Chasing the Pixel-Perfect Dream". I recommend reading it to understand that it's impossible to make the site to be truly "pixel-perfect".

  For the comment, you are right. I use Markdown. You can see all the possible syntax by clicking the keyboard icon (above the textarea, on the top right).

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @vanzasetia ok thank you very much. Sorry I have another question, I thought of learning sass/scss and when I try to download the package through npm, my Mac doesn't support it because it believes that I am not administrator even tho I am. So would it be fine if I just use the extension from vs code only?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Illyaas4Show I don't know anything about installing the NPM package with Mac. So, I can't help you. 😅

  But, @grace-snow uses Mac. So, I guess she can try to help you.

  For the Sass, I would recommend installing it from the NPM package because the Live Sass compiler extension (hopefully you are talking about this extension) is not supporting the latest feature of Sass (like @use, etc) as far as I know.

  I recommend copy-pasting the terminal output. It might help Grace to help you with what's going on.

  Then, I suggest wrapping the terminal output with Markdown block code (triple backticks).

  The output would be like this.
  

  Marked as helpful

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @vanzasetia Thank you! I will try to ask her, hopefully she can help me

  1