Order Summary Component - HTML, CSS, Google Fonts

Community feedback

• 

  Mohamed ELIDRISSI•455

  @elidrissidevPosted over 3 years ago

  As mentioned already by fellow members there are some issues with the semantics. You also should always consider having one h1 on every page that describes its content. For example this page can have the "Order summary" text be inside an h1 as it perfectly describes the main purpose of this page, you can then style it differently to match the design. I'll also advice to check the report of your solutions as it helps you find issues like these. Good luck!

  Marked as helpful

  2

  ---

  

  Heather Smith•220

  @sorengreyPosted over 3 years ago

  @elidrissidev Changed it! Thanks for the feedback. :)

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

  Sections with no headings do not appear in the document outline. If you did want force the inclusion of such an HTML block inside the document outline but not affect the visual output in any way, you could include a heading but hide it: Source - MDN

  • in your code there is several blocks of code with no other content in it, I am of the opinion that there are other elements that could have been used, a heading element and a paragraph for example.

  Marked as helpful

  1

  ---

  

  Heather Smith•220

  @sorengreyPosted over 3 years ago

  @ChamuMutezva Gotcha. I will make adjustments to my sections. I have replaced a few so far, and changed the empty hero image section to just an image. I was having trouble styling it before as a plain img, but I have fixed that.

  1
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 3 years ago

  Hey, it's not just the image, the whole card seems to be off on smaller screen sizes :)

  Few things you could do:

  1. Add your readme to the project.
  2. Using ids are discouraged, unless you have a good reason to do so. In this case, simple classes would do the job perfectly.
  3. You're using sections instead of choosing the semantically correct elements, like divs, paragraphs and titles.
  4. Instead of width and height, you could use min- and max-height, min- and max-width to make your solution more responsive. Using % is useful sometimes but can backfire, as it does in your code.
  5. For your hero image, you could add it to your html so it's easier to style.

  Marked as helpful

  0

  ---

  

  Heather Smith•220

  @sorengreyPosted over 3 years ago

  @FluffyKas Could you elaborate on why using IDs are discouraged? Each of these elements need their own styling that won't be used a second time. I was taught that IDs are what to use in that situation.

  0

  

  Heather Smith•220

  @sorengreyPosted over 3 years ago

  @sorengrey Also, the tip about max-height and max-width was very helpful. :)

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 3 years ago

  @sorengrey Sure, you could still use ids in this challenge if that's what you wish, but probably it's better practice to get used to using classes as they're reusable. You're rarely going to build a small standalone component like this in real life projects though. And the bigger the project is, the more frequently it happens that you'll need to reuse a piece of code (same styling for buttons, same padding to keep consistency all over your page, etc). As you refactor your code to make it shorter and easier to read, you'll notice that you keep repeating the same CSS properties with the same values and you'll want to get rid of that repetition. Which you can do with classes but not with ids.

  To sum it up, I'd keep using classes to avoid unnecessary problems that can come from id's uniqueness and for refactoring purposes. I usually keep ids for javascript, for scroll-links and when i want to emphasize that uniqueness.

  I hope this makes sense, but then again, it's just an opinion. If you want to keep your ids, there's no rule against it!

  Marked as helpful

  3
• 

  Davide•1,725

  @Da-vi-dePosted over 3 years ago

  Fluffy Kas has made a great point on ids, also i'd like you to be aware of specificity especially for bigger projects. This is an article that might help you understand what i mean. Keep coding :-)

  1

  ---

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 3 years ago

  @Da-vi-de That's an important point I missed thanks! ^^

  1