Thinking on ways to solve COMPARE components

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


Duration: 17:32
4,868 views
274

In today's GUI Challenge, @AdamArgyleInk uses grid, masks and an input type range to create a comparison component.

Chapters:
0:00 - Introduction
0:41 - Debugging Corner
1:30 - HTML
2:22 - CSS layout
4:50 - CSS range
7:57 - CSS mask
9:58 - Javascript
12:55 - Adding content
14:57 - Recap
17:10 - Outro

Resources:
Demo → https://goo.gle/3Ruy07n

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

#GUIchallenges #ChromeForDevelopers



Other Videos By Chrome for Developers


2024-01-04Building multiple Progressive Web Apps on the same domain
2024-01-03What are Private State Tokens?
2024-01-02Permission policy violation reports #shorts
2023-12-29What is the Protected Audience API?
2023-12-28Privacy Sandbox: Preparing for the end of 3rd-party cookies
2023-12-27What is the Attribution Reporting API?
2023-12-22What are Related Website Sets?
2023-12-21Relative color syntax #CSSWrapped2023
2023-12-21Debugging Fetch Priority #DevToolsTips
2023-12-20What is Storage Access API?
2023-12-20Thinking on ways to solve COMPARE components
2023-12-19CloseWatcher API #shorts
2023-12-19View Transitions #CSSWrapped
2023-12-18What is CHIPS?
2023-12-14Container queries #CSSWrapped
2023-12-13Test your site without third-party cookies
2023-12-12gradient.style #CSSpodcast
2023-12-12Unity brings WebGPU to its web player
2023-12-12text-wrap: balance & pretty #CSSWrapped2023
2023-12-08Audit your site for third-party cookies
2023-12-07What is the Topics API?


Tags:
Chrome
Developers
Google
Web
gui challenges
css
css tutorial
how to use css
what is css
intro to css
introduction to css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
chrome latest
chrome updates
chrome for developers
Adam Argyle