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...