Order Summary Component - HTML, SASS & BOOTSTRAP 5

Community feedback

• 

  Suraj Raju Hadage•670

  @SurajHadagePosted over 2 years ago

  Using semantic elements overwhelmed us in our very first time. So use "role" attribute to solve issue. <div role="main"></div><div role="article"></div><div role="figure"></div>

  <div role="banner"></div> etc. But don't use role attribute in child's child's element.

  Marked as helpful

  0
• 

  CharlieeLuna•260

  @CharlieeLuna23Posted over 2 years ago

  Hi! A newbie here so take my advice with a grain of salt :)

  You did pretty good for your first challenge, congrats!!

  Little tip that I can provide for structure is to not repeat your classes unnecesary. e.g. In your styles sheet you have your hero image as ".card .card-image img" when you could have used only ".card-image" which is the class you assigned to the img.

  This repeats several times and I feel it makes it hard to read as there's a lot of repetition.

  Also, what is it that you found difficult for the responsive design?

  Again, pretty good job!!

  Marked as helpful

  0

  ---

  

  Marina Aix•60

  @aixmarinaPosted over 2 years ago

  @CharlieeLuna23 Hey! Thank you for your words, I appreciate. You're right, I didn't realize it at first. It's sometimes redundant so I will check that out and I'll try to be more specific. About the responsive design, I tried to change the font-size of the headings and the paragraph in the @media (max-width: 375px) but I couldn't do it. I would have liked to make the card smaller in the mobile design.

  1

  

  Manoj Kumar Singh•970

  @dev-mksinghPosted over 2 years ago

  @aixmarina regarding responsive it'll be better option if you chose mobile-first approach. This will help you a lot(it does to me), in this approach you to first create or structure the approach for the mobile version, and then use media queries for the bigger screen size or for desktop version.

  1

  

  CharlieeLuna•260

  @CharlieeLuna23Posted over 2 years ago

  @aixmarina As mentioned by Manoj, it's better to start working with a Mobile First approach, for me it is easier to fit the small content into the bigger screen than to fit the big content into the smaller screen. That will help a lot with responsiveness.

  0
• 

  Manoj Kumar Singh•970

  @dev-mksinghPosted over 2 years ago

  Hey there!! Good work, appreciate the structure you made. Well everything is good, a minor improvement you might would like to work on(its totally upto you): Use Semantic HTML elements rather using <div></div> everywhere. Semantic Elements are better for understanding even when in future you will return to your code. And its much expressive in terms of structuring. Hope this will be helpful.

  Marked as helpful

  0

  ---

  

  Marina Aix•60

  @aixmarinaPosted over 2 years ago

  @dev-mksingh Hey! Thank you. I will study how to use more semantic HTML elements instead of div. Sometimes I don't know which one to use so I end up using div for everything. Again, thank you for your advice :)

  0