Thanks for checking out this front-end coding challenge.
Frontend Mentor challenges help you improve your coding skills by building realistic projects.
To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.
Your challenge is to build out this dashboard and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
If you would like to practice working with JSON data, we provide a local data.json file for the activities. This means you'll be able to pull the data from there instead of using the content in the .html file.
Your 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
Want some support on the challenge? Join our Slack community and ask questions in the #help channel.
- The text for the previous period's time should change based on the active timeframe. For Daily, it should read "Yesterday" e.g "Yesterday - 2hrs". For Weekly, it should read "Last Week" e.g. "Last Week - 32hrs". For monthly, it should read "Last Month" e.g. "Last Month - 19hrs".
- Source Code URL: Source Github
- Live Site URL: Demo Live
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Grid CSS
- SCSS
- CSS5 Animation
what I learned in making this challenge is:
- using grid css for layouting content
- i user media Query to build responsive for mobile combinating with grid css
- using animation
- get data using fetch
- manipulate dom
- remove dom element
- using postion and background-image position
- In the future I will make a good css class naming name
- add transition and animation on content when appears
- semantic tag
- Frontend Mentor - @Lenez
- Twitter - @prak_tech
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent