Best paid and practical TS/JS/React resources
I’ve made a similar post for UI Design resources, so I though I would followup with resources for full-stack TypeScript with React. I’ve taught and learned from many courses, workshops, and classes, and these are the resources I found most helpful.
Again, not an affiliate for any of these. Let me know your thoughts! Too expensive? Know of more or better resources? Tell me below.
First of all, there’s a lot to learn. Don’t be afraid! If you’re lost, just checkout these roadmaps to give you an idea of what’s ahead.
HTML
- https://www.internetingishard.com/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- https://frontendchecklist.io/
- https://github.com/joshbuchea/HEAD
- https://docs.emmet.io/abbreviations/
CSS
- $400 https://css-for-js.dev/
- $20 https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/
- https://developer.mozilla.org/en-US/docs/Web/CSS
TailwindCSS
- https://tailwindcss.com/
- https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0
- https://www.youtube.com/watch?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR
- https://scotch.io/tutorials/get-started-with-tailwind-css-in-15-minutes
- https://www.youtube.com/watch?v=UBOj6rqRUME
- https://scrimba.com/learn/tailwind
- https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw
General
Selectors
Specificity
Resets
- https://necolas.github.io/normalize.css/
- https://meyerweb.com/eric/tools/css/reset/
- https://github.com/kennethormandy/normalize-opentype.css
- https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Display
Block, Inline, Inline-block
Flexbox
- https://flexboxfroggy.com/
- https://flexbox.io/
- https://scrimba.com/learn/flexbox
- https://tympanus.net/codrops/css_reference/flexbox/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://mastery.games/post/flexboxzombies2/
Grid
- https://cssgridgarden.com/
- https://cssgrid.io/
- https://scrimba.com/learn/R8PTE
- https://tympanus.net/codrops/css_reference/grid/
- https://css-tricks.com/snippets/css/complete-guide-grid/
- $90 https://gridcritters.com/
Position
Static, Relative, Absolute
- https://alistapart.com/article/css-positioning-101/
- https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/
Z-Index
- https://codeburst.io/z-index-is-not-voodoo-bro-24bbe4d6d997
- https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
- https://www.digitalocean.com/community/tutorials/css-z-index
JS
- $42 https://justjavascript.com/
- $20 https://www.udemy.com/course/understand-javascript/
- $20 https://www.udemy.com/course/understand-nodejs/
- $20 https://www.udemy.com/course/javascript-bootcamp-2016/
- $20 https://www.udemy.com/course/es6-bootcamp-next-generation-javascript/
- $20 https://www.udemy.com/course/writing-clean-code/
- $70 https://es6.io/
- https://eloquentjavascript.net/
- https://github.com/getify/You-Dont-Know-JS
- https://developer.mozilla.org/en-US/docs/Web/JavaScript
- https://javascript.info/
- $332 https://testingjavascript.com/
Introductions to JS
TS
- $150 https://ultimatecourses.com/courses/typescript
- $20 https://www.udemy.com/course/understanding-typescript/
- $20 https://www.udemy.com/course/typescript-the-complete-developers-guide/
React
- $20 https://www.udemy.com/course/react-the-complete-guide-incl-redux/
- $599 https://epicreact.dev/
- https://nextjs.org/learn/
- $100 https://learn.tanstack.com/p/react-query-essentials
- $20 https://www.udemy.com/course/the-complete-guide-to-advanced-react-patterns/
NestJS
KeystoneJS
SEO
Accessibility
- https://developer.mozilla.org/en-US/docs/Glossary/Semantics
- https://www.a11yproject.com/checklist/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- https://www.w3.org/TR/wai-aria-practices-1.1/examples/
- https://www.w3.org/TR/wai-aria-1.1/
- https://headlessui.dev/
- https://react-spectrum.adobe.com/react-aria/
