Thinking on ways to solve STORIES | GUI Challenges

Thinking on ways to solve STORIES | GUI Challenges

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


Category:
Tutorial
Duration: 15:12
16,576 views
736

Welcome to GUI Challenges where I create interfaces my way and challenge you to do it your way. With our creative minds combined, we’ll find multiple ways to solve these interfaces, and expand the diversity of our skills.

In today’s challenge we’re building “stories”, a mobile fullscreen, tap centric user experience for quickly or casually navigating through a multi-dimensional array of content.

Code along → https://goo.gle/3fy8fjf
Read along → https://goo.gle/3kZuZK8
Try a demo → https://goo.gle/3mjGldz
View source → https://goo.gle/365kXTt
Overscroll-behavior on MDN → https://goo.gle/39fOID5
Perceptual color on the CSS Podcast → https://goo.gle/3l6hdoX

See how others are building stories (GUI Submissions) → https://goo.gle/34mjiru

Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#GUIchallenges



Other Videos By Chrome for Developers


2020-12-11Fixing common Web Vitals issues
2020-12-11State of speed tooling
2020-12-11Extensions patterns for Manifest V3
2020-12-10Partner spotlight: Experience Adobe Spark on Chromebooks
2020-12-10Design, UX & Advanced PWAs highlights (CDS 2020)
2020-12-09Chrome and the web in 2020
2020-12-09Keynote, Performance & Privacy highlights (CDS 2020)
2020-12-07Validating your Trusted Web Activity’s Digital Asset Links
2020-12-07Port forwarding on Chrome OS
2020-11-30Chrome 84 - What’s New in DevTools
2020-11-25Thinking on ways to solve STORIES | GUI Challenges
2020-11-17New in Chrome 87: Camera PTZ, SW Range Requests, and more!
2020-11-12Chrome 87 - What’s New in DevTools
2020-11-10Web animation gotchas - HTTP 203
2020-10-27WebAssembly Threads - HTTP 203
2020-10-14Chrome Dev Summit 2020 - Save the date
2020-10-13Slashing layout cost with content-visibility - HTTP 203
2020-10-08Chrome 83 - What’s New in DevTools
2020-10-06New in Chrome 86: File System Access, WebHID, new CSS features, and more!
2020-10-01Chrome 86 - What’s New in DevTools
2020-09-28Accessible Animation - Designing in the Browser


Tags:
GDS: Yes
stories
grid
grid layering
gap
scroll snap points
js
Building stories
how to build stories
building a stories component
stories component
stories tutorial
web stories
build web stories
web stories tutorial
creating interfaces
solve interfaces
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