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

result summary

ubay 330

@0drad3kk

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


this is not responsive and my code isn't clean nor dry any advice would help thanks :)

Community feedback

P

@lorenzoaniel

Posted

Hey meursualt88 its okay as long as you are learning, a few pointers:

for DRY code, and I am basing this off of your tech stack of html and css:

  • take a look at importing in css, this way you can have one 'main' css file and have several other smaller css files that you import into the main file (you can then just have this main file in your header element), this could also help if you have commonly used styling like center-ing an element.
  • you can also have a seperate css file for css variables

For responsive css you already have a basic grasp of grid and flexbox, a good way to go about developing designs is to start with the mobile version first, this will be your base css style then work your way up the bigger resolutions, as you go up in resolution you will be using media-queries (I urge you to look into container-queries) and you can add the styling for that specific resolution (keep in mind this will be easier to do if you have seperate css files for each component/section), this way it is easy to keep track of different break point styling.

Good luck with your front-end journey

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