https://github.com/protofire/frontend-ui-ux-developer-learning-path
An opinionated learning path for getting into speed with frontend development.
https://github.com/protofire/frontend-ui-ux-developer-learning-path
Last synced: 5 months ago
JSON representation
An opinionated learning path for getting into speed with frontend development.
- Host: GitHub
- URL: https://github.com/protofire/frontend-ui-ux-developer-learning-path
- Owner: protofire
- License: mit
- Created: 2019-07-01T12:38:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-01T15:03:56.000Z (over 6 years ago)
- Last Synced: 2025-07-03T02:07:47.547Z (6 months ago)
- Size: 3.91 KB
- Stars: 2
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend / UX / UI Developer Learning Path:
An opinionated learning path for getting into speed with [frontend development](https://css-tricks.com/the-great-divide/). This is a
work in progress, please open an issue or send a pull request to help improving it.
## Pre requisites:
Here are some things you should be familiar with before you start.
- [HTML](https://www.youtube.com/watch?v=pQN-pnXPaVg).
- [CSS](https://www.youtube.com/watch?v=ieTHC78giGQ) (includes some Flexbox and CSS Grid insight).
- [Javascript](https://bonsaiden.github.io/JavaScript-Garden/).
- Some design / prototyping software would be beneficial (Adobe XD, Sketch, Photoshop, Invision, Balsamiq, etc.)
## Nice to have(s).
You 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.
- [Responsive Web Design](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/)
- [Responsive Design (Tech Talk)](https://vimeo.com/122880890)
- [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- [SASS](https://www.codecademy.com/learn/learn-sass) (or [this one](https://www.youtube.com/watch?v=St5B7hnMLjg&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA) if you prefer to watch a bunch of videos).
- [React.js](https://www.youtube.com/watch?v=DLX62G4lc44).
- [Styled Components](https://www.robinwieruch.de/react-styled-components/)
- [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).
- [Typescript](https://www.youtube.com/watch?v=WBPrJSw7yQA).
- [Typescript + React](https://www.youtube.com/watch?v=0_C2X1yRRac).
# Prototyping
Prototyping is all about having something to show to your co-workers and (even more importantly) your customers or potential customers.
**And you better make it fast.**
- Beginner's guide to rapid [prototyping](https://www.freecodecamp.org/news/a-beginners-guide-to-rapid-prototyping-71e8722c17df/).
- Guide to rapid [prototyping](https://www.freecodecamp.org/news/a-guide-to-rapid-prototyping/).
### Prototyping tools
There are plenty of tools for prototyping, use whatever you feel more comfortable with:
- [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)
- [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.
- [Figma](https://help.figma.com/article/116-getting-started) is a good, modern tool. There's a free version.
- [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.
- [Sketch](https://www.sketch.com/) is somewhat of an industry standard now. Not free, Mac only.
- [Photoshop for web designers](https://blog.yipl.com.np/photoshop-for-web-designers-8d76c73a2ba0).
## UX / UI
### General UX / UI design
- [Getting started with UX / UI apps design](https://medium.com/drill/getting-started-with-ux-ui-apps-design-356fb94de7cc)
- [Saving Your Web Workflows with Prototyping](https://matthiasott.com/articles/saving-your-web-workflows-with-prototyping)
- [Building a UI Component Design System](https://blog.bitsrc.io/building-a-consistent-ui-design-system-4481fb37470f)
- [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)
- [UX Design (course)](https://www.udacity.com/course/ux-design-for-mobile-developers--ud849)
- [UX Design](https://uxdesign.cc/).
- [UX Planet](https://uxplanet.org/).
### dApp specific UX / UI design
- [Building Confidence, Not dApps](https://medium.com/mycrypto/building-confidence-not-dapps-d8a3bc1f29d1).
- [dApp User Experience Audit](https://medium.com/design-for-crypto/ðapp-user-experience-audit-afc11e4384c3).
## dApp and Crypto related terminology.
Protofire 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)).
If 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.
- [Ever wonder how Bitcoin actually works?](https://www.youtube.com/watch?v=bBC-nXj3Ng4).
- [How does Ethereum work, anyway?](https://medium.com/@preethikasireddy/how-does-ethereum-work-anyway-22d1df506369).
- [Gas](https://ethgas.io/).
- [Blockchain Oracles, Explained](https://cointelegraph.com/explained/blockchain-oracles-explained).
- [Velocity of Tokens](https://medium.com/newtown-partners/velocity-of-tokens-26b313303b77).
- [Weth](https://weth.io/)
- [Crypto vocabulary](https://medium.com/datadriveninvestor/crypto-vocabulary-expanded-76131d26537b).