Thinking on ways to solve TABS

Thinking on ways to solve TABS

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


Category:
Tutorial
Duration: 15:12
25,846 views
928

In today’s GUI challenge, we’re building a tabs component with some really cool features that you may not have thought about. Our tabs component is responsive, supports multiple device inputs, works across browsers, and let’s you mimic some of the buttery features you love on apps.

@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:42 - Features overview
3:03 - HTML
4:14 - Scrolling
5:04 - Inspect Layouts
7:35 - Layout Styles
12:10 - prefers-reduced-motion
13:10 - JavaScript & Animation
14:37 - Conclusion

Resources:
Read along → https://goo.gle/37jHOen
Try a demo → http://goo.gle/3prCpb2
Get the source → http://goo.gle/2NsK7EK
@ScrollTimeline Polyfill → http://goo.gle/2NfUhZs

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-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
2021-02-03Submission shoutouts for SIDENAV
2021-01-26Dithering - HTTP 203
2021-01-21Thinking on ways to solve a SIDENAV
2021-01-19New in Chrome 88: Manifest v3, aspect-ratio, digital goods API, and more!
2021-01-14Chrome 88 - What’s New in DevTools
2021-01-13Submission shoutout for CENTERING
2020-12-24The best of Chrome games | Chrome Developer Summit 2020
2020-12-233x3 SEO tips for JavaScript web apps
2020-12-23Patterns for privacy


Tags:
GDS: Yes
Snap-tabs
snap tabs
chrome canary
responsive tabs
web tabs
how to build tabs on chrome
chrome tab tutorial
tab tutorial
tabs tutorial
tab features
swipe tab
tab example
CSS tab
HTML tab
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