Submitted over 1 year ago

Colin's Order-Summary-Component

@ucolinmee

A solution to the Order summary component challenge

Solution retrospective

After struggling slightly with the previous NFT challenge, I decided to take the feedback I got from my peers, as well as some of their good coding practices to quickly tackle another HTML & CSS challenge. Not sure if it's due to the new tips I picked up or if this challenge is easier, but I felt good doing this challenge. One of the biggest places that I struggled with was aligning the "Annual Plan" and the "$59.99/yr" on top of one another, but that was where I learned about nesting flexbox items in different orientations to achieve the layout you want.

Also, a quick shoutout to @MachadoA for the tips on working on the mobile display first and adding 'cursor: pointer' to make the hover effect look better.

Code

Please log in to post a comment

Community feedback

Fluffy Kas•7,655
@FluffyKas
Posted over 1 year ago
Hey,

First of all, it looks great. I'm glad to hear you got some useful feedback and was able to tackle this challenge more easily! Some general tips - for this challenge and for the future ones:

There is a very easy way to place everything in the center - even vertically:
```
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
```
Or you can do the same with grid and place-items center, as you prefer. Giving the body a min-height will make sure your card is centered vertically. This way you won't need to rely on %-s for margins. Defining margins with % isn't super reliable anyway, you'd do better with em, rem.

Getting units right: so apart from margins, generally it's best to use rem when you're uncertain what units you should use - like your card width (where you now use px). Px values shouldn't be used widely, apart from setting smaller things, like a border-radius or box-shadow.

Alt texts: really nice to see you paid attention to this. Just a note: for decorative images, you can leave alts blank - like the music icon here.

Semantic stuff: make sure to wrap everything in a main tag. Of course you can have other landmark elements, like header, footer, etc in your websites, but there very least you should use a main.

All in all, really well done!
Marked as helpful

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