As a front-end engineer, you’re often taking a design and turning into code. You’re essentially taking a concept and turning it into reality.
I thought I’d give this some practice!
Check out the demo here (and the code here).
What is it and what does it do?
It’s an admin dashboard for a theoretical eCommerce platform.
The goal was to find a dashboard design on Dribbble and build it with code, focusing mainly on practicing vanilla CSS. I settled on this one, primarily from an aesthetic point of view but also because it provided the font and colour codes used in the design. It didn’t provide specific font sizes or spacing, unfortunately, so this was estimated.
It doesn’t do an awful lot (at the moment, at least) because of the focus on CSS, though I aim to add some further interactivity to it to help bring it to life a little more.
How was it built?
It was built with plain HTML, CSS and JS. No React. No SASS. Nothing like that. This was on purpose as I wanted to practice the raw skills needed to put something like this together.
I did rely on external resources in specific cases:
- Uses the free version of FontAwesome for the icons.
- Uses the Google Font ‘Inter‘.
- Uses Chart.js for the line chart.
To date, I’ve spent about 9 hours on it.
What did I learn?
This was less about learning new things and more about putting into practice what I had learned already, however unsurprisingly I found myself Googling a few things over the course of building it. These were things like:
- BEM (I’m still not 100% confident with this)
- Adding a border to my table row (spoiler alert: it’s
border-collapse: collapse) - A refresh of CSS Grid – love it!
- Making the header row in a table sticky (hint:
top: 0) - Creating a custom scrollbar
- Preventing a Chart.js chart from extending beyond its container (
maintainAspectRatio: false)
What’s next?
To be fair, this isn’t 100% complete – there’s plenty more I could do here – but I’m looking to maximise my time learning. That’s especially the case because this project doesn’t involve React, which is a key focus at the moment.
Regardless, the next things I’d look at working on in this project are:
- Sidebar dropdown
- Make icon sizes consistent in small boxes (main area)
- JS – header dropdown
- JS – sidebar menu minimise
- JS – sidebar menu expand / collapse tree
- Responsive
- JS – datepicker
- JS – adding new product
- Accessibility
- Build workflow (convert to SASS, minify, browser compatibility, etc)