Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

My first solution using CSS

Mjornogβ€’ 40

@Mjornog

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Dipeshβ€’ 430

@Dipesh-sapkota1

Posted

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

1
Durga Jaiswalβ€’ 230

@Durga-Jaiswal

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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