Submitted about 2 years ago

Order-summary-component

Youssef• 20

@youzh00

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Your feedbacks are highly appreciated :)

Community feedback

Éric Férole• 420

@Eric-Ferole

Posted about 2 years ago

Great work. I would add, try to give meaningful name to your classes instead of partone, parttwo etc... And use semantic HTML element when possible <header> <footer> <main> etc. Here's a good article to start with.

Keep up !

Marked as helpful

Youssef• 20

@youzh00

Posted about 2 years ago

@Eric-Ferole Hi Eric,Isincerely appreciate your positive feedback, thank you a lot.

darryncodes• 6,430

@darryncodes

Posted about 2 years ago

Hi Youssef,

Solid solution all round - nice one!

i'd recommend updating your body styling background-size: 100% auto; and removing background-position: 0 -280px; to closer match the design
you could clear your accessibility/html report if you added alt-text to your images, swapped <div class="background"> with <main class="background"> and swapped your h4 with a h2. Semantic html is really important and headings shouldn't skip levels

Hope that helps!

Marked as helpful

Youssef• 20

@youzh00

Posted about 2 years ago

@darryncodes Hello Darry, I appreciate the time you took to share your feedback, thanks for the help .

Lasha Kajaia• 550

@Kajaia

Posted about 2 years ago

Try to add hover effects for your button and links. And always try to add alt attributes for images. Anything else looks good.

Youssef• 20

@youzh00

Posted about 2 years ago

@Kajaia Hi lasha, i really appreciat your valuable feedbacks, thanks a lot .

Please log in to post a comment

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