Time Tracking Dashboard with JS function

Community feedback

• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted almost 3 years ago

  on body there should be a min-height:100vh; display:grid; place-content:center;

  you can view my solution here - https://www.frontendmentor.io/solutions/responsive-timetrackingdashboard-using-css-grid-vVT_x3iJ7

  It has been updated I cant generate no more screenshots this month but you can refer to my code.

  Marked as helpful

  1
• 

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  Hey! Here are some fixes I would suggest you apply on your project.

  • Media query on mobile; You should add a media query for smaller screen sizes, maybe you can change the width or the spacing of the elements in the container element.

  • Centering; To perfectly center your container over the body you can use positon absolute, like so -

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
     }
    

  • Background; Css backgrounds are super powerful! You can set background-repeat to no-repeat

  • Semantic html; Semtantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.

    <article>
     <h2> Title </h2>
     <p> Blah blah </p>
     </article>
    

  is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.

  1

  ---

  

  Júlia Nunes•30

  @CuriouslyHappyPosted almost 3 years ago

  Hey, @Aadv1k thanks a lot for the feedback and tips.

  I'm studying media query right now, thanks for suggesting it, seems really useful.

  I already centralize the content, I used the main tag for that instead of adding another div, is that a bad way of doing it?

  Why would I use background no-repeat since I don't have a background, just a background-color?

  My code is full of sections some divs and one nav, should I still add articles and get rid of some divs? Where would I put it?

  0

  

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  @CuriouslyHappy Hey! I took a look at your code. Some tips ->

  • Applying height on the body is not a good idea, if you want to use flex on the body, apply min-height: 100vh and min-width: 100vw on a container element. If you want to center within the body use the absolute positioning trick. I noticed you have used grid.

  • Header should always be outside your body,

  Other than that, your html looks good.

  EDIT - You should also consider using a mobile first approach. You can check out my project for reference

  Marked as helpful

  0