Skip to content
Submitted about 2 months ago

time-tracking-dashboard-main

zbuli-t•190
@zbuli-t
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm happy to manage how to get data from JSON file and display them dynamically. it took me a while searching related stuff and try it out

What challenges did you encounter, and how did you overcome them?

the responsive layout is not easy....finally i can't change the position of "lastweek -hours" from left to the right when in bigger screen size....i finally need to use a trick of absolute positioning , i am thinking what is the perfect way to make it

What specific areas of your project would you like help with?

the responsive layout is not easy....finally i can't change the position of "lastweek -hours" from left to the right when in bigger screen size....i finally need to use a trick of absolute positioning , i am thinking what is the perfect way to make it

Community feedback

  • Nikita Vologdin•470
    @NikitaVologdinPosted about 2 months ago

    Hi @zbuli-t! I think your solution includes semantic HTML, but you can improve a few. I suggest you to add main and footer tags in body. According accessibility i believe you may add more details in alt attribute. Here you can find how good alt can be written – https://rockcontent.com/blog/how-to-write-good-alt-text/ I think your layout looks great beside you need to sort out how to center it. What i suggest: HTML:

      <body>
    <main>
      <div class="big-container"></div>
    </main>
    <footer>
      <div class="attribution"></div>
    </footer>

    For HTML we add two elements – main and footer, they help us improve semantic and we can style them for center layout.

    CSS:

    html,
body {
    height: 100%;
}
/* We say take the whole height of document to position  children using flexbox*/

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
/* Here we are saying that main axis is Y, also that main and footer elements should be distanced from each other */

main {
    flex-grow: 1;
    display: flex;
    align-items: center;
}
/* Here we say that main should grow as much is possible align it children in center*/

    Short video explaining flexbox https://www.youtube.com/watch?v=phWxA89Dy94 Article https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Deep-dive https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

    Best, Nikita.

    Marked as helpful
    0
  • zbuli-t•190
    @zbuli-tPosted about 2 months ago

    thank you Nikita! really thanks thank you for giving me detail suggestion and the video link also... i'm happy to have you in my coding journey

    0

Please log in to post a comment

Log in with GitHub

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