{"id":13575615,"url":"https://github.com/argyleink/gui-challenges","last_synced_at":"2025-05-14T00:08:50.691Z","repository":{"id":37557524,"uuid":"256332800","full_name":"argyleink/gui-challenges","owner":"argyleink","description":"Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.","archived":false,"fork":false,"pushed_at":"2025-02-19T18:50:50.000Z","size":10069,"stargazers_count":2910,"open_issues_count":26,"forks_count":400,"subscribers_count":48,"default_branch":"main","last_synced_at":"2025-05-07T11:53:15.009Z","etag":null,"topics":["accessibility","creativity","css","educational","html","interfaces","javascript","webdev"],"latest_commit_sha":null,"homepage":"https://youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/argyleink.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-16T21:22:34.000Z","updated_at":"2025-05-07T09:05:42.000Z","dependencies_parsed_at":"2023-09-26T02:18:22.443Z","dependency_job_id":"919977a3-1d4f-4caa-9322-98b1846ab757","html_url":"https://github.com/argyleink/gui-challenges","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"argyleink/shortstack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fgui-challenges","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fgui-challenges/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fgui-challenges/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fgui-challenges/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/argyleink","download_url":"https://codeload.github.com/argyleink/gui-challenges/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254044031,"owners_count":22005063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","creativity","css","educational","html","interfaces","javascript","webdev"],"created_at":"2024-08-01T15:01:02.593Z","updated_at":"2025-05-14T00:08:45.682Z","avatar_url":"https://github.com/argyleink.png","language":"HTML","funding_links":[],"categories":["HTML","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"\u003cimg src=\"https://user-images.githubusercontent.com/1134620/151587110-6924b0bf-f43b-41d0-85b5-98711266f791.png\" width=\"350\" /\u003e\n\n\n# GUI Challenges\n\u003e I build interfaces my way, then challenge you to do it your way. \nWith our creative minds combined, \n**we'll find multiple ways to solve these interfaces \nand expand the diversity of our skills.**\n\n1. Stories \n  [`Demo`](https://gui-challenges.web.app/stories/dist/)\n  [`YouTube`](https://www.youtube.com/watch?v=PzvdREGR0Xw) \n  [`Article`](https://web.dev/building-a-stories-component/)\n2. Centering \n  [`Demo`](https://gui-challenges.web.app/centering/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=ncYzTvEMCyE) \n  [`Article`](https://web.dev/centering-in-css/)\n3. Sidenav \n  [`Demo`](https://gui-challenges.web.app/sidenav/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=uiZqDLqjGRY) \n  [`Article`](https://web.dev/building-a-sidenav-component/)\n4. Tabs \n  [`Demo`](https://gui-challenges.web.app/tabs/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=mMBcHcvxuuA) \n  [`Article`](https://web.dev/building-a-tabs-component/)\n5. Settings \n  [`Demo`](https://gui-challenges.web.app/settings/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=dm7gnp6eh3Q) \n  [`Article`](https://web.dev/building-a-settings-component/)\n6. Split Text \n  [`Demo`](https://gui-challenges.web.app/split-text/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=3hvN7bkjZBk) \n  [`Article`](https://web.dev/building-split-text-animations/)\n7. Media Scroller \n  [`Demo`](https://gui-challenges.web.app/media-scroller/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=jmLdZY_Lo1k) \n  [`Article`](https://web.dev/building-a-media-scroller-component/)\n8. Color Schemes \n  [`Demo`](https://gui-challenges.web.app/color-schemes/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=oHcTn83M1ls) \n  [`Article`](https://web.dev/building-a-color-scheme/)\n9. Breadcrumbs \n  [`Demo`](https://gui-challenges.web.app/breadcrumbs/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=kHL3gxAlvK8) \n  [`Article`](https://web.dev/building-a-breadcrumbs-component/)\n10. Switch \n  [`Demo`](https://gui-challenges.web.app/switch/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=_KqccADghcA) \n  [`Article`](https://web.dev/building-a-switch-component/)\n11. Split Buttons \n  [`Demo`](https://gui-challenges.web.app/split-buttons/dist/)\n  [`YouTube`](https://www.youtube.com/watch?v=Qcpru-fIgwk) \n  [`Article`](https://web.dev/building-a-split-button-component/) \n12. Multi-Select \n  [`Demo`](https://gui-challenges.web.app/multi-select/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=x0aCdLDZ8BM) \n  [`Article`](https://web.dev/building-a-multi-select-component/)  \n13. Game Menu \n  [`Demo`](https://gui-challenges.web.app/game-menu/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=HCsV8u-KYUw)\n  [`Article`](https://web.dev/building-a-3d-game-menu-component/)\n14. Toast\n  [`Demo`](https://gui-challenges.web.app/toast/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=R75ZVW4LW5o) \n  [`Article`](https://web.dev/building-a-toast-component/)  \n15. Theme Switch\n  [`Demo`](https://gui-challenges.web.app/theme-switch/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=kZiS1QStIWc) \n  [`Article`](https://web.dev/building-a-theme-switch-component/)  \n16. SVG Favicon\n  [`Demo`](https://gui-challenges.web.app/svg-favicon/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=4pJahmCR8kQ) \n  [`Article`](https://web.dev/building-an-adaptive-favicon/) \n17. Loading Bar\n  [`Demo`](https://gui-challenges.web.app/progress/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=TD1QxlGgIPk) \n  [`Article`](https://web.dev/building-a-loading-bar-component/) \n18. Dialog\n  [`Demo`](https://gui-challenges.web.app/dialog/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=GDzzIlRhEzM) \n  [`Article`](https://web.dev/building-a-dialog-component/)\n19. Buttons\n  [`Demo`](https://gui-challenges.web.app/buttons/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=aJNq-b1zlog) \n  [`Article`](https://web.dev/building-a-button-component/)\n20. FABs\n  [`Demo`](https://gui-challenges.web.app/FAB/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=RXopH5t2Kww) \n  [`Article`](https://web.dev/building-a-fab-component/)\n21. Carousels\n  [`Demo`](https://gui-challenges.web.app/carousel/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=CXJv6zM003M) \n22. Crooked Grid Illusion\n  [`Demo`](https://gui-challenges.web.app/crooked-illusion/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=71jpjr7syc4) \n  [`Article`](https://web.dev/building-a-crooked-grid-illusion/)\n23. Tooltips\n  [`Demo`](https://gui-challenges.web.app/tooltips/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=Y5EIC_UyPME) \n  [`Article`](https://web.dev/building-a-tooltip-component/)\n24. Transitions\n  [`Demo`](https://gui-challenges.web.app/transitions/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=jjtiIIjEsTw) \n25. Card Stack\n  [`Demo`](https://gui-challenges.web.app/card-stack/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=m4DKhRJeYx4) \n26. Spring Physics\n  [`Demo`](https://gui-challenges.web.app/spring-physics/dist/) \n  [`YouTube`](https://youtu.be/eamAHF71ZN4)\n27. Glitch\n  [`Demo`](https://gui-challenges.web.app/glitch/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=MR7dClW6iBg)\n28. Switch Group\n  [`Demo`](https://gui-challenges.web.app/switch-group/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=l7kmBCRqfLw)\n29. SciFi Scroll Text\n  [`Demo`](https://gui-challenges.web.app/scifi-scroll/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=JeI_TsADXQA)\n30. okLCH Color Palettes\n  [`Demo`](https://gui-challenges.web.app/color-palettes/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=6aCsAMgwnjE)\n31. Morphing Button\n  [`Demo`](https://gui-challenges.web.app/morphing-button/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=N2BKAKwGP6M)\n32. Adaptive Typography\n  [`Demo`](https://gui-challenges.web.app/adaptive-typography/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=8B7xOgp5Aow) \n  [`Article`](https://web.dev/articles/adapting-typography-to-user-preferences-with-css)\n33. Relative Colors\n  [`Demo`](https://gui-challenges.web.app/relative-colors/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=1z_ViBjdnSw)\n  [`Article`](https://developer.chrome.com/blog/css-relative-color-syntax/)\n34. Halloween Projection\n  [`Demo`](https://gui-challenges.web.app/halloween-projection/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=3OlHDnPvKKg)\n34. Picklists\n  [`Demo`](https://gui-challenges.web.app/picklists/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=d2O-8n-UnrI)\n35. Compare\n  [`Demo`](https://gui-challenges.web.app/compare/dist/) \n  [`YouTube`](https://www.youtube.com/watch?v=hCbSRNE4WUI)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fgui-challenges","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fargyleink%2Fgui-challenges","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fgui-challenges/lists"}