Build A Chat App UI

We offer free trials - learn Front End Web Design with us! https://trhou.se/3TnzT4N
In this live demonstration, Dustin builds a chat app UI (user interface) using HTML, CSS, and JavaScript. The slick design includes a toggle button for dark mode.

The GitHub link includes both the starter files and the completed code. You can follow along and build the project yourself, as well as study Dustin's version.
Note that he builds only the UI, not the chat app itself.
Start your free trial to learn more! https://trhou.se/3TnzT4N

GitHub Repo:
https://github.com/treehouse/thlive-chatapp

Related courses:
HTML basics https://trhou.se/3DRGbUv
CSS basics https://trhou.se/3Eg8GMY
CSS layout https://trhou.se/3TkdvJB
JS basics https://trhou.se/3fJ96Co

Looking for a more immersive program? Start your free trial of our Front End Web Development Techdegree, our online coding boot camp. https://trhou.se/3UBuPuE

Chapters:
0:00 Intro to project
0:45 Finished project sneak peek
1:03 Starter code overview
2:29 Converting CSS to SCSS
4:15 Build HTML structure from mockup
7:05 Adding SVG icons in HTML
12:25 Getting started styling with CSS/SCSS
14:25 Utilities styles
21:05 Styling the toggle-switch
29:13 Styling the 'Send' CTA
30:55 JavaScript to toggle dark-mode
33:38 Adding transitions in CSS
34:45 Pushing finished code to GitHub
36:22 Final thoughts & questions

#javascript #html #css #frontend

Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.