I used HTML and CSS (flex)

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Marko!

  👍 Good job on completing your first challenge on Frontend Mentor. I hope that you learn a lot when you built this project 😉. To be honest, the result still needs a lot of improvement.

  So, I will give you some feedback:

  • It's great that you wrapped all contents inside the landmark (main, and footer tag). 👍 Well done on this one.
  • In this case the illustration and the music icon is decorative images. Remember, all decorative images, you should leave the alt="" empty and add aria-hidden="true" or role="presentation". That way the screen reader will ignore those images.
  • You don't need to wrap the Change with p tag, an anchor tag itself is enough.
  • Heading tags must go in order. You need to use h2 before you can use h3.
  • The Proceed Payment and Cancel Order should be a button or anchor link (choose one).
  • You should not defined the width on the main element. It should be a max-width so it doesn't become so large on every screen size.
  • Use rem or sometimes em, don't use px. Pixel unit will not allow the user to control the size of your page.

  Tip on writing HTML is that, imagine that you write it as a document (without any CSS), that way you can make a better decision on using the correct HTML tags.

  That's it! Hopefully this is helpful and good luck with your coding journey!

  Marked as helpful

  2

  ---

  

  Marko•65

  @ElioskasPosted over 3 years ago

  @vanzasetia Thank you very much for such a detailed feedback. It's very helpful. I realize that I have overlooked few things in the code, so thank you again for taking the time to look over it. I wish you all the best. :)

  0
• 

  Sohail Jafri•350

  @thesohailjafriPosted over 3 years ago

  Great Work On Your First Challenge Marko,

  1. I would sugguest you use Figma/adobe XD for mapping the size of elements so that you would get the exact result as of design, your design is quite big compared to the og design.

  2. Mobile responsiveness is missing.

  3. Increase the spread and blur of box-shadow and reduce the alpha of RGBA, something like this: box-shadow: 10px 10px 51px 14px rgba(0,0,0,0.24);

  you can use the tool like these to get your box-shadow right:

  https://cssgenerator.org/box-shadow-css-generator.html

  https://getcssscan.com/css-box-shadow-examples

  I Hope These Feedback Helps You :]

  Marked as helpful

  2

  ---

  

  Marko•65

  @ElioskasPosted over 3 years ago

  @thesohailjafri Thank you very much. I'll look into the tools you suggested. Making things line up is still a struggle for me.

  0
• 

  Pramath T Singh•90

  @Halo-lastPosted over 3 years ago

  For learning only 1 week of html and css really good. I'm learing from 3 months still not good enough. Here if you can remove the box -shadow and also see the colors provided by front-end-mentor style.md i belive, but overall really nice.

  0

  ---

  

  Marko•65

  @ElioskasPosted over 3 years ago

  @Pramath-Singh Thank you! Just keep practicing, you'll get there! Ah, I'm too tired so I forgot to soften the shadow on the button and remove the other one. I took some creative license with fonts and colors since layout gave me the most trouble.

  1