The master plan
As I mentioned, this is a professional job and it deserves a professional treatment. Now we will have a design guideline to follow. Up next is a screenshot of the dashboard that we have to reproduce by code:
As you can see, the dashboard is composed of a navigation header containing some information, a search bar, and notifications. On the left-hand side is a menu with the sections of the web application. In the center is a set of charts about the page status. It looks good in the screenshot and will look even better in the browser!
The page scaffolding consists of the following:
The Bootstrap navigation component at the header, which is affixed to the top of the page
A fluid container with two columns
The left-hand-side column contains the dashboard menu and is affixed
The right-hand-side column is the main content, which holds a set of cards that display some statistics
First of all, before you create any element, create a new file using the same structure that we pointed out...