Skip to content
Submitted almost 2 years ago

My first solution using CSS

Mjornog•40
@Mjornog
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My first difficulty in this challenge was in the process of deducing the sizes of the elements on the screen and I “wasted” a lot of time with that, so I'd like to know some tips on how I can make this design process a little faster.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Dipesh•430
    @Dipesh-sapkota1

    Hi @Mjornog 👏 Congratulation for completing front-end mentor challenge.🎉

    • To answer your question for how to dynamically change size of an element? I would like to say It is not necessary to add height and width to a div. Naturally, browser tend to make web responsive, everything will fall into its place own its own and make necessary changes when it is required. We make web unresponsive by adding extra properties.
    • You can implement these points to improve your code.

    1. Follow DRY (Don't Repeat Yourself) principle

      • I saw too many repetition of same properties, use CSS variables to define properties at one place and you can use it again for multiple selectors.
      • Learn about inheritance that will save you many lines of code.
      • Start your CSS with a good CSS reset and base CSS for your elements.

    2. Make your website responsive

    • You can start making your website responsive by following mobile first approach. It will make your life a lot easier.
    • Use CSS Grid or flex-box to make precise alignment of layout.

    3 . Organize your file structure

    • For small project like this does not require multiple CSS. If it requires to add multiple CSS then organize your files in separate folders.

    You did great on your project and happy coding! 👏🎉🙂

    Marked as helpful
  • Durga Jaiswal•230
    @Durga-Jaiswal

    Put max-height : 100vh to avoid scrolling the page. It will help in making page do not scroll. Other than this all things are perfect.

    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