Skip to content
Submitted over 2 years ago

Order Summary Challenge using CSS advanced Properties and selectors.

accessibility
JAILBREAK•60
@JAILBREAK-101
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my first FrontEnd Challenge Project that was submitted, please review and get back to me, on what needs to be changed, updated, or deleted. Thank you as you do so. I didn't have any areas of difficulty in this project, instead i learnt new Advanced CSS properties such as the :is() selector, and also making use of the nth-of-type() and nth-child selectors for my CSS. I was also able to write Semantic HTML that makes meaning, not only to me, but to screen readers, for accessibility purposes.

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hi there 👋:

    • We gladly welcome you to the Front end mentor community
    • You just completed a solution as per the design Congratulations..🙌
    • But, There's an report in accessibility which causes accessibility error

    RESOLVING THE ERROR

    • The div with class attribution is meant to be a footer element
    • Because using semantical elements to structure the HTML improves the accessibility for screen readers
    • So change the div into footer element

    MESSAGE:

    • If my answer helps you then providing an upvote will be very helpfull
    • And don't forget to mark this comment as helpfull. If it helps to resolve your issues
    • I hope you learned a lot of stuffs during this project, Congrats JAILBREAK

    GREETINGS:

    • Happy coding..🙌
    • Peace be upon you with god's mercy & blessings..✨

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