Time tracking dashboard solution

Hello everyone 👋, I'm Mohammed and this is my solution to this nice challenge.

Starting from this challenge, I decided to stop using Flexbox for the general layout of all future challenges. Instead, I will use CSS grid as I need to practice and do more exercises on CSS grid to improve.

I will briefly talk about my current process of solving FEM challenges and I hope it will help and inspire other beginners(like me 😊). To make this process actionable so others can follow, I will list the steps I take to solve the challenge:-

1- I download the challenge resource file and extract it in a special folder 📁 so I can use it in the future if needed without having to re-download it again.

2- After the files were extracted, I read 📖 about the requirements to solve 🤔 the challenge.

3- After reading the requirements, I open the design folder to see the final product both for mobile and desktop screens. I also note down the number of active state elements so I don't forget to do it while solving the main challenge.

4- After I see both photos for screen designs, I take some notes 📝on how best to do the HTML markup and how to structure the elements in the page. This is very very important ⚠ issue and help in later steps. I pick up best semantic tags which serve the purpose of the content.

5- I then create a css styling and javascript files , link them to the html file then I initialize a new git repo and make initial commit on the master branch.

6- Then I do the actual markup of all texts in challenge file for mobile screens. for example , if a text is best displayed as H1 tag , I wrap the text in h1 tag using a shortcut in vscode,etc.. I also add images and icons at this stage. then I create a new git branch for mobile-design before I start styling.

Note : I always do mobile-first solution and I don't combine mobile and desktop styling at same stage.

7- After I finish the markup stage , I go to styling stage targeting mobile screens. I use live server on vscode , I go live and open the page in my chrome , then use Pixel perfect extension to load the design file for mobile screen as overlay on top of my actual page. I make sure the overlay image is exactly 100% on top of my html page. I make sure I choose the right screen resolution which is 375px.

8- At this stage, I use Responsively app to see how the page will look like on different screen sizes. I usually have the following screen sizes opened at the same time:

• Iphone SE 375px Fem design size for mobile
• Iphone Pro Max 428px
• Ipad mini 768px
• Ipad Air 820px
• Ipad Pro 1024px
• My own screen size 1366px
• MacBook Pro 1440px Fem design size for desktop

9- After I finished mobile screen design , I commit all changes, checkout to master branch , then merge mobile-design branch with master created before.

10- I then create a new branch for desktop design , load the design image as overlay on chrome using the extension and I start coding on custom screen size of 1440px I created for this purpose.

11- I repeat step 9 with desktop branch.

Note : I will add a new git branch in future for accessibility,SEO and performance so I improve this area also.

12- I move to Javascript part of the challenge after I create a new git branch for it.

13- After I solve the javascript part , I commit and merge into master branch and my solution is ready for deployment.

14- I do final checks to make sure all things are working as it should , then I deploy to netlify.

15- I then upload my solution to FEM website

This is a brief process overview I developed over time. I'm know its not perfect for sure but its good start for a beginner like me with big room for improvement in future.

This process does not take into account frameworks or libraries I might use in my solution. In case I did use such frameworks (like tailwindcss for example), I install them at initial stage.

Built with 🛠

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow 🔄
• PixelPerfect chrome extension
• Animate.css
• Reponsively

What I learned 🧐

• CSS grid for general layout of the project
• working with json files to import data and update the DOM

Continued development

• Working with CSS grid
• Fetch, JSON in Javascript
• Pass arguments for callback functions with addEventlistner

Useful resources

• CSS grid free course
• JSON file import

Acknowledgments

This work was inspired by the solution of Melvin