andresmtzf / time-tracking-dashboard

This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Frontend Mentor - Time tracking dashboard solution

This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Switch between viewing Daily, Weekly, and Monthly stats

Screenshot

Desktop Preview

Mobile Preview

The preview of my solution.

Links

• Live Solution URL: Time Tracking

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• JavaScript
• BEM (Block, Element, Modifier)

What I learned

For this solution I reaffirmed my abilities of HTML y CSS. For first time I used the methodology BEM, to write a CSS. With the nomenclature I could have a CSS file easily to read, understand and scalable. In addition, BEM helps to organize CSS classes in independent modules. In this case, even though this is a short exercise, is useful to avoid CSS nest.

I take this solution to put in

To see how you can add code snippets, see below:

<div class="card">
        <div class="card__background">
          <img class="card__image" src="./images/icon-work.svg" alt="work-ico">          
        </div>
</div>        

.card {
  ...
}
.card__background {
  ...
}
.card__image{
  ...
}

Useful resources

• CodingTube - This helped me for understand how could separate in blocks the elements of the dashboard. I really liked his way to explain.

Author

• Frontend Mentor - @AndresMtzF

Happy Coding🤖