Thinking on ways to solve SETTINGS

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=dm7gnp6eh3Q


Category:
Tutorial
Duration: 8:43
16,629 views
714

In today’s GUI challenge, we build and demo a dynamic settings page with sliders and checkboxes. Our settings page is responsive, supports multiple device inputs, and works across browsers. How would you create a settings page?

@AdamArgyleInk will be responding to your comments for the first 30 minutes after the episode releases. Connect with us here, ask questions, or submit your own code!

Chapters:
0:00 - Introduction
0:37 - Cross Platform
1:39 - Spacing
3:02 - Layouts
4:55 - Color
6:19 - User Input
7:18 - Javascript
8:20 - Outro

Resources:
Read along → https://goo.gle/3bCerGK
Try a demo → http://goo.gle/3qysEbW
Get the source → http://goo.gle/2OdXlWO

Install VisBug → http://goo.gle/3l286HF

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2021-04-15Building for modern browsers: Progressively enhancing like it’s 2003 (German with English subtitles)
2021-04-13New in Chrome 90: Overflow Clip, Permissions Policy, the Declarative Shadow DOM, and more!
2021-04-09[华语] Chrome 90 - DevTools 的最新功能
2021-04-09Chrome 90 - What’s New in DevTools
2021-04-08Build your first WebAuthn app (Japanese with English subtitles)
2021-04-06AssemblyScript - HTTP 203
2021-04-01Core Web Vitals: Essential metrics for a healthy site (Tamil with English subtitles)
2021-03-25Web in Play with Bubblewrap (Brazilian (Port) with English subtitles)
2021-03-23The big back button quiz - HTTP 203
2021-03-22Core Web Vitals - Measure what matters (Serbian with English subtitles)
2021-03-18Thinking on ways to solve SETTINGS
2021-03-11Simulating color vision deficiencies in the Blink Renderer (available in Flemish and English)
2021-03-04Supercharged Microtip: Workers (German with English subtitles)
2021-03-02New in Chrome 89: Web Serial, HID, NFC, PWA installability changes, and more!
2021-03-02Writing Good Alt Text - HTTP 203
2021-02-25[粤语] Chrome 89 - DevTools 的最新功能
2021-02-25Chrome 89 - What’s New in DevTools
2021-02-23Scheduling Tasks - HTTP 203
2021-02-21Celebrating International Mother Language Day
2021-02-17Thinking on ways to solve TABS
2021-02-09JavaScript counters the hard way - HTTP 203


Tags:
GDS: Yes
CSS settings
settings page tutorial
how to code a settings page
app coding
app developer
app development tutorial
dynamic settings
responsive settings page
App Settings page Design
settings page demo
Google Chrome
GUI Challenges
Google Chrome Developers
Chrome developers
developers
chrome
Chrome developer tools tutorial
developer tutorial
Chrome developer tutorial
chrome dev tools
web development