How to Design a Dynamic Dashboard Sidebar with ChatGPT – Light & Dark Modes
In this video, I’ll show you how to design a responsive dashboard sidebar with both light and dark modes using ChatGPT! Watch as I walk through creating a dynamic sidebar with notifications, sub-menus, and a user profile card. This tutorial uses AI to help bring your design ideas to life with ease.
Copy and Paste the ChatGPT Prompt from this Video:
Generate high-quality HTML for a sidebar navigation UI, strictly following the provided components and instructions.
Resources for Assets:
Pexels for images: https://pexels.com/
Google Fonts for font faces: https://fonts.google.com/
Iconify for logo and icons: https://iconify.design/
Placeholder.co for placeholders: https://placeholder.co/
Iran Avatar for avatars: https://avatar.iran.liara.run/public/
Output:
Combine HTML, inline CSS, and JavaScript (if needed) into a single code file.
Components:
Includes a logo at the top and the project name with a search bar below.
Features navigation items like Dashboard, Activity, My Tasks, Analytics, Projects (with sub-menu), Settings, and Documentation.
Some items have notifications (Activity and My Tasks) or expandable sub-menus (Projects, Settings).
At the bottom, there is an inbox and a user profile card with a user avatar, name, and email.
#UIDesign #DashboardDesign #ChatGPT #AIDesign #SidebarUI #ResponsiveDesign #LightDarkMode #WebDesign #AIPowered #DesignTutorial #Figma #CSS #HTML
Watch video How to Design a Dynamic Dashboard Sidebar with ChatGPT – Light & Dark Modes online without registration, duration hours minute second in high quality. This video was added by user Raouf Belakhdar 16 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 34 once and liked it 1 people.