Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/argyleink/gui-challenges

Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.
https://github.com/argyleink/gui-challenges

accessibility creativity css educational html interfaces javascript webdev

Last synced: 3 days ago
JSON representation

Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.

Host: GitHub
URL: https://github.com/argyleink/gui-challenges
Owner: argyleink
License: apache-2.0
Created: 2020-04-16T21:22:34.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2024-12-02T18:44:32.000Z (20 days ago)
Last Synced: 2024-12-16T20:52:29.407Z (6 days ago)
Topics: accessibility, creativity, css, educational, html, interfaces, javascript, webdev
Language: HTML
Homepage: https://youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
Size: 9.6 MB
Stars: 2,853
Watchers: 48
Forks: 399
Open Issues: 25
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        

# GUI Challenges

> I build interfaces my way, then 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.**

1. Stories 

  [`Demo`](https://gui-challenges.web.app/stories/dist/)

  [`YouTube`](https://www.youtube.com/watch?v=PzvdREGR0Xw) 

  [`Article`](https://web.dev/building-a-stories-component/)

2. Centering 

  [`Demo`](https://gui-challenges.web.app/centering/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=ncYzTvEMCyE) 

  [`Article`](https://web.dev/centering-in-css/)

3. Sidenav 

  [`Demo`](https://gui-challenges.web.app/sidenav/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=uiZqDLqjGRY) 

  [`Article`](https://web.dev/building-a-sidenav-component/)

4. Tabs 

  [`Demo`](https://gui-challenges.web.app/tabs/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=mMBcHcvxuuA) 

  [`Article`](https://web.dev/building-a-tabs-component/)

5. Settings 

  [`Demo`](https://gui-challenges.web.app/settings/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=dm7gnp6eh3Q) 

  [`Article`](https://web.dev/building-a-settings-component/)

6. Split Text 

  [`Demo`](https://gui-challenges.web.app/split-text/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=3hvN7bkjZBk) 

  [`Article`](https://web.dev/building-split-text-animations/)

7. Media Scroller 

  [`Demo`](https://gui-challenges.web.app/media-scroller/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=jmLdZY_Lo1k) 

  [`Article`](https://web.dev/building-a-media-scroller-component/)

8. Color Schemes 

  [`Demo`](https://gui-challenges.web.app/color-schemes/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=oHcTn83M1ls) 

  [`Article`](https://web.dev/building-a-color-scheme/)

9. Breadcrumbs 

  [`Demo`](https://gui-challenges.web.app/breadcrumbs/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=kHL3gxAlvK8) 

  [`Article`](https://web.dev/building-a-breadcrumbs-component/)

10. Switch 

  [`Demo`](https://gui-challenges.web.app/switch/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=_KqccADghcA) 

  [`Article`](https://web.dev/building-a-switch-component/)

11. Split Buttons 

  [`Demo`](https://gui-challenges.web.app/split-buttons/dist/)

  [`YouTube`](https://www.youtube.com/watch?v=Qcpru-fIgwk) 

  [`Article`](https://web.dev/building-a-split-button-component/) 

12. Multi-Select 

  [`Demo`](https://gui-challenges.web.app/multi-select/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=x0aCdLDZ8BM) 

  [`Article`](https://web.dev/building-a-multi-select-component/)  

13. Game Menu 

  [`Demo`](https://gui-challenges.web.app/game-menu/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=HCsV8u-KYUw)

  [`Article`](https://web.dev/building-a-3d-game-menu-component/)

14. Toast

  [`Demo`](https://gui-challenges.web.app/toast/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=R75ZVW4LW5o) 

  [`Article`](https://web.dev/building-a-toast-component/)  

15. Theme Switch

  [`Demo`](https://gui-challenges.web.app/theme-switch/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=kZiS1QStIWc) 

  [`Article`](https://web.dev/building-a-theme-switch-component/)  

16. SVG Favicon

  [`Demo`](https://gui-challenges.web.app/svg-favicon/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=4pJahmCR8kQ) 

  [`Article`](https://web.dev/building-an-adaptive-favicon/) 

17. Loading Bar

  [`Demo`](https://gui-challenges.web.app/progress/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=TD1QxlGgIPk) 

  [`Article`](https://web.dev/building-a-loading-bar-component/) 

18. Dialog

  [`Demo`](https://gui-challenges.web.app/dialog/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=GDzzIlRhEzM) 

  [`Article`](https://web.dev/building-a-dialog-component/)

19. Buttons

  [`Demo`](https://gui-challenges.web.app/buttons/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=aJNq-b1zlog) 

  [`Article`](https://web.dev/building-a-button-component/)

20. FABs

  [`Demo`](https://gui-challenges.web.app/FAB/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=RXopH5t2Kww) 

  [`Article`](https://web.dev/building-a-fab-component/)

21. Carousels

  [`Demo`](https://gui-challenges.web.app/carousel/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=CXJv6zM003M) 

22. Crooked Grid Illusion

  [`Demo`](https://gui-challenges.web.app/crooked-illusion/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=71jpjr7syc4) 

  [`Article`](https://web.dev/building-a-crooked-grid-illusion/)

23. Tooltips

  [`Demo`](https://gui-challenges.web.app/tooltips/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=Y5EIC_UyPME) 

  [`Article`](https://web.dev/building-a-tooltip-component/)

24. Transitions

  [`Demo`](https://gui-challenges.web.app/transitions/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=jjtiIIjEsTw) 

25. Card Stack

  [`Demo`](https://gui-challenges.web.app/card-stack/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=m4DKhRJeYx4) 

26. Spring Physics

  [`Demo`](https://gui-challenges.web.app/spring-physics/dist/) 

  [`YouTube`](https://youtu.be/eamAHF71ZN4)

27. Glitch

  [`Demo`](https://gui-challenges.web.app/glitch/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=MR7dClW6iBg)

28. Switch Group

  [`Demo`](https://gui-challenges.web.app/switch-group/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=l7kmBCRqfLw)

29. SciFi Scroll Text

  [`Demo`](https://gui-challenges.web.app/scifi-scroll/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=JeI_TsADXQA)

30. okLCH Color Palettes

  [`Demo`](https://gui-challenges.web.app/color-palettes/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=6aCsAMgwnjE)

31. Morphing Button

  [`Demo`](https://gui-challenges.web.app/morphing-button/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=N2BKAKwGP6M)

32. Adaptive Typography

  [`Demo`](https://gui-challenges.web.app/adaptive-typography/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=8B7xOgp5Aow) 

  [`Article`](https://web.dev/articles/adapting-typography-to-user-preferences-with-css)

33. Relative Colors

  [`Demo`](https://gui-challenges.web.app/relative-colors/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=1z_ViBjdnSw)

  [`Article`](https://developer.chrome.com/blog/css-relative-color-syntax/)

34. Halloween Projection

  [`Demo`](https://gui-challenges.web.app/halloween-projection/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=3OlHDnPvKKg)

34. Picklists

  [`Demo`](https://gui-challenges.web.app/picklists/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=d2O-8n-UnrI)

35. Compare

  [`Demo`](https://gui-challenges.web.app/compare/dist/) 

  [`YouTube`](https://www.youtube.com/watch?v=hCbSRNE4WUI)