Skip to content
Submitted almost 3 years ago

Order Review Web page design using HTML,CSS

Shikhar Vohra•60
@Shikhar0411
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 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
    1
  • Siege•520
    @idesmarPosted almost 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
    1

Please log in to post a comment

Log in with GitHub

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