Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component

@jaycgreenwald

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'd like to know if my CSS is organized well and as simplified as possible.

Thank you in advance for the feedback!

Jason

Community feedback

@Kamasah-Dickson

Posted

Your solution looks great and responsive. Another to simplify a challenge like this is the use of the CSS BEM methodology.

To help fix your accessibility issue. Always reduce your htags by one level don't mix them up. Like jumping from h1 to h5

  • Change your** h5 to h1**. Besides good job there👍 Have a nice day and a happy coding👍💻

Marked as helpful

1

@jaycgreenwald

Posted

@Kamasah-Dickson Thank you for the specific and helpful feedback. I researched BEM and started using it on my next project. I also appreciate the h1/h5 info. Cheers!

0

@Kamasah-Dickson

Posted

@jaycgreenwald cheers 🍻 you are always welcome

0

@Kamasah-Dickson

Posted

@jaycgreenwald cheers 🍻 you are always welcome

0
Danilo Blas 6,300

@Sdann26

Posted

Hi Jason!

The h5 is giving you an accessibility problem the reason is that you can't put subtitles as h5 without putting h4 and so on. Also keep in mind that they work as titles and subtitles, so always have only one h1, and then different subtitles as if it were a report. Solucionalo cambiandolo a <span> o alguna etiqueta como <strong> <em> o <p> según veas necesario.

By the way if you want to know how to organize your CSS search on CSS architectures although this is a somewhat advanced topic because it requires you to know CSS methodologies (BEM, CubeCSS, etc) as this is when you get the most out of it, but so far your project looks pretty good. I would recommend you to start learning BEM methodology to name and reuse your classes per project.

Good Luck!

Marked as helpful

1

@jaycgreenwald

Posted

@Sdann26 Thank you for the feedback - both about the h1/h5 issues and the BEM methodology. I've incorporated it into my next project. Cheers!

1
Danilo Blas 6,300

@Sdann26

Posted

@jaycgreenwald You're welcome, keep improving :D.

0

@ghostpogram

Posted

Better than mine

You did well stranger : )

0

@jaycgreenwald

Posted

@ghostpogram Thank you for the positive feedback! Cheers.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord