Scoreboard Page Using HTML and CSS

Community feedback

• 

  P

  doublem•620

  @MarioMinchevskiPosted over 1 year ago

  Hey kishore613!

  Congratulations on your first solution and here's to many more! Here are a couple of tips that could improve your solution:

  • Make a habit of having a separate .css file for your styles. It could save you a lot of scrolling, make the code more readable, safer in terms of specificity and will allow you to add your styles on multiple pages if necessary

  • There are two ways of centering your design in the middle of the screen in both X and Y axis, those are : body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } or body { min-height: 100vh; display: grid; place-content:center; }

  • At the moment you are having an equal amount of empty space between <div class="reaction">, <div class="Memory">, <div class="Verbal">, <div class="Visual"> and the button beneath them.

  To get closer to the design of that section, you can make the following structure:

  • section container div with a display flex
  • h2 tag for the title
  • summary scores container div, with the four scores inside in separate tags
  • a tag for the button

  this Way when you assign a certain "gap" value in the section container div, you will have an equal amount of space between the h2, summary scores container and button. Summary scores container can have a different gap value for the scores inside.

  Hope you will find this helpful!

  P.S. to insure browser support you can use "margin" instead of "gap", happy coding!

  0