I started by figuring out my plan.
and made the file structure.

Stocked/
|
| – index.html
| – inventory.html
| – shopping.html
| – add.html
| – settings.html
|
| – css/
│ – style.css
│ – variables.css
│ – mobile.css
|
| – js/
│ – app.js
│ – inventory.js
│ – shopping.js
│ – database.js
| – dashboard.js
│
| – assets/
│ – icons/
│ – images/
│ – logo.svg
│
–– manifest.json

Once i had this made I did the full html but without any css, execpt for the embed ones from my icons
So this meant i had a “working” dashboard execpt for a database connected.
I checked that the hamburger and navs worked and then I created all the css.
For styling i made sure to make vars with my colors and so if i choose to change themes i dont have to go one by one and change them.

:root {    
--bg-color: #f8f9fB;    --cards-bg: #ffffff;    --accent: #3cb371;    --warning: #f5a623;    --danger: #e74c3c;    --text-main: #1e1e1e;    --text-secondary: #6b7280;    --border: #e5e7eb;    --radius: 16px;    --touch-target: 44px;    --shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.05),                 0px 4px 8px -2px rgba(0, 0, 0, 0.05);    --shadow-hover: 0px 12px 24px -8px rgba(0, 0, 0, 0.12);
}

The rest of the styling is pretty simple just laid out each section how i wanted it to be and once it was done i called it a day.

If you’re curious the mobile preview is just a vscode extension and you link your live preview, so localhost:5500 for me