Submitted almost 3 years ago

Order Summary Component Challenge

Raitis•190

@RaitisVilums

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I just started and it's my first try of making something. I will be happy to receive feedback on my solution.

Community feedback

Aakash Verma•6,710

@skyv26Posted almost 3 years ago

Hi! Raitis,

To solve accessibility issues:

wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here
Don't let alt attribute empty, always add some meaning text in it, so that user able to understand.
In order to center your background image use background-size: contain;

in your below code

body {
    background-image: url("./images/pattern-background-desktop.svg");
    background-color: hsl(225, 100%, 94%);
    background-repeat: no-repeat;
    background-size: contain; /* HERE I ADDED JUST UPDATE IT IN YOUR MAIN CODE*/
    font-size: 16px;
    font-family: 'Red Hat Display', sans-serif;
}

Change your code

<div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
        Coded by <a href="https://www.frontendmentor.io/profile/RaitisVilums" target="_blank">Raitis Vilums</a>.
    </div>

<footer class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
        Coded by <a href="https://www.frontendmentor.io/profile/RaitisVilums" target="_blank">Raitis Vilums</a>.
    </footer>

There are so many changes are required, as If I enter all then this comment will become so longer. So do what @Madmanden said above. and Rest things I wrote.

I hope you understand.

Good Luck ;)

Marked as helpful

Raitis•190

@RaitisVilumsPosted almost 3 years ago

@skyv26 Hello,

Thank you for your help, I will do some research and fix the bugs that I had ! Trying my best.

Best wishes and happy New Year :)

Christian Holm•500
@MadmandenPosted almost 3 years ago
Hi Raitis! Good effort 😊 On my phone it isn’t centered though. And the box-shadow is too dark.
Marked as helpful
1
Raitis•190
@RaitisVilumsPosted almost 3 years ago
@Madmanden Hello, Thank you, I will try to fix the phone problem, the mistake was, that I didn't check how it will look on mobile phone. Now I will check my projects on every possible device, so I don't do the same mistake again.

Have a nice day and Happy New year :D
1
Christian Holm•500
@MadmandenPosted almost 3 years ago
You too 😊 @RaitisVilums
1
Sam Guliker•540
@Sam-GulikerPosted almost 3 years ago
Hi Raitis,

For your first time you did a great job. There are a couple of things you can pay attention towards to.

Check your headings: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

For images use an alt type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Try to use landmarks like: Header, Main, and Footer. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role

You can remove the border-radius top on the mid section.

I hope this was helpfull,

Happy coding
Marked as helpful
1
Raitis•190
@RaitisVilumsPosted almost 3 years ago
@Sam-Guliker Hello,

Thanks for your comment. Making a mistake and getting a help form other users is very helpful, it keeps me motivated. I will look up more info about the Header Main ect. and how to use them properly.

Happy New Year.
1
Raitis•190
@RaitisVilumsPosted almost 3 years ago
So when I uploaded the solution, it all went wrong, how can I fix this?
1
Christian Holm•500
@MadmandenPosted almost 3 years ago
@RaitisVilums What exactly went wrong? If you use GitHub you can deploy your code by going to the repo settings -> pages -> and choose the main branch. It’ll give you an URL to a live site that’ll work after a few minutes.
Marked as helpful
1

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