Thinking on ways to solve SETTINGS

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:

#GUIchallenges #CSS #ChromeDeveloper

[ChromeDevs]

What other dynamic features have you seen that you want to code into your own app?

[alystair]

It'd be cool if there was a similar series for JS best practices

[YunisRajab]

The sliders being cutouts that change based on the background gradient was absolutely beautiful

[TheNewton]

6:28 that's a great fun way to present screen reader testing as part of the process

[TonyS]

This is such a good series, I'm very motivated to try that for myself.

[MilanRegec]

Lovely that the accessibility is so seamlessly integrated without interfering with anything, great job! Also, great demo!

[wakematta]

Cool! I'm so happy that we moved from IE era :D

[omgmyworld]

What font does he use? Is beautiful!. Great content btw

[superchillho]

I find that cartoon character extremely creepy

[ldalves]

Amazing! 👏🎉 I wonder what the editor’s theme is that... 🤔

[emberchord]

I think using minmax(min(..., ...), ...) breaks my brain.

[sneaky-Jay]

What are you using to get all those breakpoints and devices previews? Imma Frontend Dev and something like this would be awesome if there would be available for Linux or something similar

[foljs]

Isn't it a bit too much to get advice on "solving settings" from the Chrome devs team, an app who has neglected it's horrible settings experience since forever (not to mention the horrible bookmark manager)