Cloning ChatGPT UI 1:1 with HTML, CSS and JavaScript | Part 1: The Sidebar

In this video I start creating a ChatGPT Clone using HTML, CSS and JavaScript. This video is meant for educational purposes and you obviously shouldn't copy other peoples websites unless it's for learning how they're made.

GitHub: https://github.com/unconv/chatgpt-clone

Support: https://buymeacoffee.com/unconv
Consultations: https://www.buymeacoffee.com/unconv/e/146735
Memberships: https://www.buymeacoffee.com/unconv/membership

Part 1: [this video]
Part 2: https://www.youtube.com/watch?v=4fC38pPcn24
Part 3: https://www.youtube.com/watch?v=7BEbgc7wwck

00:00:00 Intro
00:00:33 Background
00:02:02 Sidebar
00:03:52 New chat button
00:09:59 Conversation list
00:22:43 User menu
00:27:41 Fading out long conversation titles
00:31:35 Custom scrollbar
00:40:45 …

chatgpt cloning css educational html intro javascript part sidebar video websites