{"id":29219894,"url":"https://github.com/protofire/frontend-ui-ux-developer-learning-path","last_synced_at":"2026-02-07T07:04:12.544Z","repository":{"id":66220300,"uuid":"194669970","full_name":"protofire/frontend-ui-ux-developer-learning-path","owner":"protofire","description":"An opinionated learning path for getting into speed with frontend development.","archived":false,"fork":false,"pushed_at":"2019-07-01T15:03:56.000Z","size":4,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-17T04:33:40.898Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/protofire.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,"zenodo":null}},"created_at":"2019-07-01T12:38:32.000Z","updated_at":"2021-07-19T18:39:20.000Z","dependencies_parsed_at":"2023-05-05T02:22:16.752Z","dependency_job_id":null,"html_url":"https://github.com/protofire/frontend-ui-ux-developer-learning-path","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/protofire/frontend-ui-ux-developer-learning-path","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Ffrontend-ui-ux-developer-learning-path","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Ffrontend-ui-ux-developer-learning-path/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Ffrontend-ui-ux-developer-learning-path/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Ffrontend-ui-ux-developer-learning-path/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/protofire","download_url":"https://codeload.github.com/protofire/frontend-ui-ux-developer-learning-path/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Ffrontend-ui-ux-developer-learning-path/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29188319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T05:07:31.176Z","status":"ssl_error","status_checked_at":"2026-02-07T05:06:15.227Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-07-03T02:07:47.182Z","updated_at":"2026-02-07T07:04:12.530Z","avatar_url":"https://github.com/protofire.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend / UX / UI Developer Learning Path:\n\nAn opinionated learning path for getting into speed with [frontend development](https://css-tricks.com/the-great-divide/). This is a\nwork in progress, please open an issue or send a pull request to help improving it.\n\n## Pre requisites:\n\nHere are some things you should be familiar with before you start.\n\n- [HTML](https://www.youtube.com/watch?v=pQN-pnXPaVg).\n- [CSS](https://www.youtube.com/watch?v=ieTHC78giGQ) (includes some Flexbox and CSS Grid insight).\n- [Javascript](https://bonsaiden.github.io/JavaScript-Garden/).\n- Some design / prototyping software would be beneficial (Adobe XD, Sketch, Photoshop, Invision, Balsamiq, etc.)\n\n## Nice to have(s).\n\nYou probably know and use some (or all!) of these technologies. And if you don't, you'll probably end up needing and using them along the way, so you better get up to speed. The more the merrier.\n\n- [Responsive Web Design](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/)\n- [Responsive Design (Tech Talk)](https://vimeo.com/122880890)\n- [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).\n- [SASS](https://www.codecademy.com/learn/learn-sass) (or [this one](https://www.youtube.com/watch?v=St5B7hnMLjg\u0026list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA) if you prefer to watch a bunch of videos).\n- [React.js](https://www.youtube.com/watch?v=DLX62G4lc44).\n- [Styled Components](https://www.robinwieruch.de/react-styled-components/)\n- [Redux](https://learn.freecodecamp.org/front-end-libraries/redux/) (or [this one](https://www.youtube.com/watch?v=OSSpVLpuVWA) if you prefer to watch a video).\n- [Typescript](https://www.youtube.com/watch?v=WBPrJSw7yQA).\n- [Typescript + React](https://www.youtube.com/watch?v=0_C2X1yRRac).\n\n# Prototyping\n\nPrototyping is all about having something to show to your co-workers and (even more importantly) your customers or potential customers.\n\n**And you better make it fast.**\n\n- Beginner's guide to rapid [prototyping](https://www.freecodecamp.org/news/a-beginners-guide-to-rapid-prototyping-71e8722c17df/).\n- Guide to rapid [prototyping](https://www.freecodecamp.org/news/a-guide-to-rapid-prototyping/).\n\n### Prototyping tools\n\nThere are plenty of tools for prototyping, use whatever you feel more comfortable with:\n\n- [Adobe XD](https://webdesign.tutsplus.com/tutorials/how-to-start-wireframing-with-adobe-experience-design-xd--cms-31185?_ga=2.113836871.1903972375.1545961452-1545998993.1537366312). [I mean, it's neat](https://webdesign.tutsplus.com/tutorials/how-to-prototype-and-share-your-first-mobile-app-with-adobe-experience-design-xd--cms-32464). [And also free!](https://helpx.adobe.com/xd/tutorials.html)\n- [InVision](https://www.youtube.com/watch?v=aOp97n6JhIg) is good if you don't have much experience with design tools. You can also use it for free.\n- [Figma](https://help.figma.com/article/116-getting-started) is a good, modern tool. There's a free version.\n- [Framer X](https://www.framer.com/tutorials/) has some cool [interfacing with React](https://www.framer.com/development/), which might be for you if your brain is more of the coding oriented type (or if you want to simply export your design to [React components](https://designcode.io/framer-playground)). Not free, Mac only, but there's a trial version.\n- [Sketch](https://www.sketch.com/) is somewhat of an industry standard now. Not free, Mac only.\n- [Photoshop for web designers](https://blog.yipl.com.np/photoshop-for-web-designers-8d76c73a2ba0).\n\n\n## UX / UI\n\n### General UX / UI design\n\n- [Getting started with UX / UI apps design](https://medium.com/drill/getting-started-with-ux-ui-apps-design-356fb94de7cc)\n- [Saving Your Web Workflows with Prototyping](https://matthiasott.com/articles/saving-your-web-workflows-with-prototyping)\n- [Building a UI Component Design System](https://blog.bitsrc.io/building-a-consistent-ui-design-system-4481fb37470f)\n- [Why the most popular apps are starting to look the same?](https://uxdesign.cc/ever-wonder-why-the-most-popular-apps-are-starting-to-look-the-same-it-might-be-a-good-thing-e54aadd50fd5)\n- [UX Design (course)](https://www.udacity.com/course/ux-design-for-mobile-developers--ud849)\n- [UX Design](https://uxdesign.cc/).\n- [UX Planet](https://uxplanet.org/).\n\n### dApp specific UX / UI design\n\n- [Building Confidence, Not dApps](https://medium.com/mycrypto/building-confidence-not-dapps-d8a3bc1f29d1).\n- [dApp User Experience Audit](https://medium.com/design-for-crypto/ðapp-user-experience-audit-afc11e4384c3).\n\n## dApp and Crypto related terminology.\n\nProtofire works on the complete **dApp development life cycle**: from the basic idea to prototyping, creating a MVP, deployment, and maintenance. So you better know and get some understanding about these technologies (taken from [Protofire's Blockchain Learning Path](https://github.com/protofire/blockchain-learning-path)).\n\nIf you are new to these concepts you'll probably end up reading these articles a few times and using them as a reference when something you don't remember shows up.\n\n- [Ever wonder how Bitcoin actually works?](https://www.youtube.com/watch?v=bBC-nXj3Ng4).\n- [How does Ethereum work, anyway?](https://medium.com/@preethikasireddy/how-does-ethereum-work-anyway-22d1df506369).\n- [Gas](https://ethgas.io/).\n- [Blockchain Oracles, Explained](https://cointelegraph.com/explained/blockchain-oracles-explained).\n- [Velocity of Tokens](https://medium.com/newtown-partners/velocity-of-tokens-26b313303b77).\n- [Weth](https://weth.io/)\n- [Crypto vocabulary](https://medium.com/datadriveninvestor/crypto-vocabulary-expanded-76131d26537b).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotofire%2Ffrontend-ui-ux-developer-learning-path","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprotofire%2Ffrontend-ui-ux-developer-learning-path","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotofire%2Ffrontend-ui-ux-developer-learning-path/lists"}