Checkout summary

Community feedback

• 

  Anton•515

  @antarya

  Posted almost 4 years ago

  Hi Badr,

  Great start. Nice job.

  I have a couple of suggestions, though:

  HTML

  • It is better to separate CSS styles into their own file. For starters, it will be more organized. Later you may switch to scss and/or use tools like postcss which will generate CSS files for you, and you will be working with separate CSS files. Three methods of applying CSS to a document.

  CSS

  • While your class names are pretty good, you might also want to know about another often used format called BEM.

  • It is a bad practice to use id for styling; the reason is that you cannot reuse it later in your code. id is used to identify elements uniquely. In more complex applications, you will have elements that will look the same so that you can apply the same class, e.g. btn.

  • Take a look at the mobile-first approach. The basic idea is first to take care of mobile-related styles and overwrite desktop styles using media queries. Mobile First.

  • Try not to use fixed width and height, instead use alternatives min-width, max-width, min-height, max-height. That way, you do not restrict your element, and it can adapt to content. In a real application, you do not control the size of the text; it will be dynamic. So it would be best if you create styles that can adapt to the content.

    For example, you have height: 90vh on .checkout-card, if you start changing the viewport's height, you will notice that your content will be outside of your container at some point. Give elements to breathe and adapt, and when required, limit visually using max, min versions.

  • I noticed that you are using float and position to position elements of the #changeParent. I think you can do it much easier using flexbox. Here are some resources: Flexbox Game MDN Flexbox CSS tricks can be used as cheatsheet

  • On the solutions page, you have the ability to compare results with the initial design; play with it and check things like font-family, font-color, font-size, line-height, space between elements, padding, border-radius, shadow. Eventually, you will train your eye to notice differences.

  • If you want the background not to repeat itself, you can use the no-repeat value on background-repeat.

  • For more resources, also check frontendmentor resources page.

  I hope this will be helpful.

  Keep up the good work! Cheers!

  10
• 

  Badr•10

  @Badr281

  Posted almost 4 years ago

  Thanks for your feedback, really that is so helpful for me to stick out some concept and improve my codebase thinking in frontend, ill take all the point that you noticed here and wish doing the best on the next challenge. Cheers

  00