Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/najahaja/front-end-mentor-solution-10

The Time Tracker Dashboard project is a sophisticated web application designed to help users efficiently manage and track their time. Developed using HTML, CSS, and JavaScript, this project provides a comprehensive solution for monitoring productivity, managing tasks, and generating reports.
https://github.com/najahaja/front-end-mentor-solution-10

css3 css3-styling-techniques html5 javascript javascript-time-tracking productivity-tracking responsive-web-design time-tracker-dashboard

Last synced: 12 days ago
JSON representation

Host: GitHub
URL: https://github.com/najahaja/front-end-mentor-solution-10
Owner: najahaja
Created: 2024-08-26T06:38:00.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-08-26T11:07:15.000Z (5 months ago)
Last Synced: 2024-11-07T19:33:49.399Z (2 months ago)
Topics: css3, css3-styling-techniques, html5, javascript, javascript-time-tracking, productivity-tracking, responsive-web-design, time-tracker-dashboard
Language: CSS
Homepage:
Size: 189 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Frontend Mentor - Time tracking dashboard solution

![Design preview for the Tip calculator app coding challenge](./design/desktop-preview.jpg)

This is a solution to the [Time tracking dashboard challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Frontend Mentor - Time tracking dashboard solution](#frontend-mentor---time-tracking-dashboard-solution)

  - [Table of contents](#table-of-contents)

  - [Overview](#overview)

    - [The challenge](#the-challenge)

    - [Screenshot](#screenshot)

    - [Links](#links)

  - [My process](#my-process)

    - [Built with](#built-with)

    - [What I learned](#what-i-learned)

    - [Continued development](#continued-development)

    - [Useful resources](#useful-resources)

  - [Author](#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

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- Javascript

  

### What I learned

The most I learned from this project is, I think, from the JavaScript side. I struggled a lot with it to figure out how to work with JSON/objects, but in the end, it turns out it's not even that hard, so I'm very happy with this project. I didn't pay as much attention to the CSS this time because I wanted to focus on the JavaScript part. However, I also had struggles with CSS. I had to look up a lot of things, and I still have a lot to learn about it.

There are two main problems that I couldn't solve:

- In this project, I didn't use the mobile-first approach, and I couldn't set the spacing correctly on the phone. If you check the code, there are double gaps between the cards, and I couldn't figure out why.

- There are "bleeds" around the cards. The background color of the card shines through to the front one because they are the same size. I'm not sure how to solve this problem.

Other than these, I'm happy with the result. I know it could be done much better, but I want to move on to the next one.

### Continued development

I dont plan to revisit this project, i think it is finished according to my current knowledge.

### Useful resources

- Kevin Powell's  [blog](https://www.kevinpowell.co/) I highly recommend his channel to anyone who wants to learn web development.

- Josh Comeau's [blog](https://www.joshwcomeau.com/) I also recommend his channel to anyone who wants to learn web development.

- Dave Gray's [blog](https://daveceddia.com/) I also recommend his channel to anyone who wants to learn web development.

- [MDN](https://developer.mozilla.org/en-US/) I think this is the best place to look up things.

Some pages i wish i could find earlier:

- [CSS Tricks](https://css-tricks.com/)

- [CSS Cheat Sheet](https://htmlcheatsheet.com/css/)

- [HTML Cheat Sheet](https://htmlcheatsheet.com/)

- [JS Cheat Sheet](https://htmlcheatsheet.com/js/)

- [CSS Grid Cheat Sheet](https://grid.malven.co/)

- [Flexbox Cheat Sheet](https://flexbox.malven.co/)