Treehouse Live: Build an Interactive Settings Panel
1.2K views · 2023-01-28
UI Design
We offer free trials - learn HTML, CSS, and JavaScript with us! http://bit.ly/3YMKlWo
Want to code out a real-world project with Dustin? Follow along with our Treehouse Live replay as he builds a settings panel UI from scratch with just HTML and CSS. Then, he refactors the app with JavaScript to render parts of the UI dynamically. Stick around to the end to find out how he implements a dark mode toggle for the settings panel itself with an event listener! Start your free trial to learn more!
http://bit.ly/3YMKlWo
GitHub Repo
https://github.com/treehouse/settings-panel
Related Courses
JavaScript Basics: http://bit.ly/3LfUasI
JavaScript Array Methods: forEach(): http://bit.ly/3ZF8TBA
CSS-Only Toggle Switch: http://bit.ly/3ZGajfa
Dark Mode in CSS: http://bit.ly/3J71mEU
Chapters
0:00 Intro
0:21 Downloading GitHub Repo
0:55 Clone Repo
1:39 Starter Files
3:05 Mockup
3:43 Writing the HTML
6:14 Adding Content to the HTML
8:48 Styling the UI
17:43 CSS-Only Toggle Switches
23:18 Render UI Dynamically With JavaScript
28:22 Adding the Dark Mode Toggle
31:25 Smoothing the UI Transitions
#html #CSS #javascript
---
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.
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/
Want to code out a real-world project with Dustin? Follow along with our Treehouse Live replay as he builds a settings panel UI from scratch with just HTML and CSS. Then, he refactors the app with JavaScript to render parts of the UI dynamically. Stick around to the end to find out how he implements a dark mode toggle for the settings panel itself with an event listener! Start your free trial to learn more!
http://bit.ly/3YMKlWo
GitHub Repo
https://github.com/treehouse/settings-panel
Related Courses
JavaScript Basics: http://bit.ly/3LfUasI
JavaScript Array Methods: forEach(): http://bit.ly/3ZF8TBA
CSS-Only Toggle Switch: http://bit.ly/3ZGajfa
Dark Mode in CSS: http://bit.ly/3J71mEU
Chapters
0:00 Intro
0:21 Downloading GitHub Repo
0:55 Clone Repo
1:39 Starter Files
3:05 Mockup
3:43 Writing the HTML
6:14 Adding Content to the HTML
8:48 Styling the UI
17:43 CSS-Only Toggle Switches
23:18 Render UI Dynamically With JavaScript
28:22 Adding the Dark Mode Toggle
31:25 Smoothing the UI Transitions
#html #CSS #javascript
---
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.
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/