Time Tracking Dashboard Using HTML,CSS and Javascript

Community feedback

• 

  Ctrl+FJ•810

  @FlorianJourdePosted over 1 year ago

  Hey @AdnaanH, good job with this challenge !

  My main advice for this work, would be to avoid to use fixed height and width, like that :

  .aside {
      width: 13em;
      height: 25em;
  }
  

  A better option could be to put your elements inside a components, like with bootstrap's container. I personally designed a small simple .wrapper, which avoid me to use Bootstrap, or whatever. You can try to wrap your .aside & .main-bar is this component :

  .wrapper {
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      display: inherit;
      justify-content: inherit;
      align-items: inherit;
      flex-direction: inherit;
      flex-wrap: inherit;
      gap: inherit;
      z-index: inherit;
  }
  

  With this solution, your elements will be automatically set to 100% width & height ! I'm using it since more than a year from now, and i never deceived me ! The purpose in to think "flex" !

  Second thing : font is not loading on my computer, think about inherit fonts like this : font-family: 'Arial', 'Helvetica', sans-serif, in case fonts can't be covered in the current page for any reason.

  Finally, not sure about using section inside a main component, but I may be wrong 🤔

  Keep coding, good luck for next challenges !

  Marked as helpful

  0

  ---

  

  Adnan Hamisi•660

  @AdnaanHPosted over 1 year ago

  @FlorianJourde Thank you I will take into consideration the above adjustments and try working around that in my project. I have been having some bit of difficulty with width and height but I am getting it done as I progress and your feedback has been helpful too.

  0