Submitted over 3 years ago

Order Review Web page design using HTML,CSS

@Shikhar0411

A solution to the Order summary component challenge

Solution retrospective

Hi, this is my solution to the Order Review webpage challenge, please take a look. Any general feedback would be appreciated. The following are the main problems I faced, 1 - How to lighten a colour given its hsl, other than just directly using VS code features 2 - Should the main font size also be changed when going from web to mobile, as I have done it, and it did make things slightly better. Answers to these would be highly appreciated Thanks

Code

Please log in to post a comment

Community feedback

darryncodes•6,350
@darryncodes
Posted over 3 years ago
Hi Shikhar,

You can adjust the 'L' in HSL.

This is a really useful HSL calculator and a thorough guide.

This is a helpful guide on font-size and a best practice for which units to use.

I hope that helps!
Marked as helpful
Siege•520
@idesmar
Posted over 3 years ago
Hi Shikhar! I hope you had fun with your first challenge on Frontend Mentor.

Regarding your questions:
1. How to lighten colors using HSL? The easiest would be to adjust the third value which pertains to lightness. HSL stands for Hue, Saturation and Lightness. There are other ways like filter: brightness() but the first option would be enough in most cases.
2. Font-size change when on mobile? In almost all cases, yes, unless specified by the design. You don't want to have large fonts on mobile where the user has to scroll more just to read a few lines of text. You did great in adjusting the font.
Regarding accessibility issues, you may want to look into using container tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.
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