This guide is intended for beginners and primarily focused on Frontend (see frontend/backend better explanation and differences here)
→ Important side-notes
There’s no need to pay for coursesYou shouldn't really pay for any courses- You don't need to watch every videos until the end -> Instead whenever you feel confident enough just start building something
- Don't get frustated if you can't understand something at first glance, take your time and ...
- Be patient
- Learn how to identify bugs and plan a solving strategy → This shi*t is quite hard to master, I personally haven't yet
- If you don't know some technology or piece of code explained on the videos, look it up on Google & Any AI stuff that can help
- Please read the documentation websites for any technology or framework you choose to learn, there WILL be most of the important features and quirks, if not ...
- Search if someone had a similar problem to yours, StackOverflow recommended, ChatGPT - (Meh), Medium blogs
→ Requirements - Install Node - Install Visual Studio Code, I may suggest some useful extensions
roadmap.sh -> I guess this is a bit outdated by now, but look for Frotend → Backend
- Theo's T3.gg
- ThePrimeagen
- JoshTriedCoding
- BlueCollarCoder - Jack Herrington
- WebDevSimplified
- nicoalbanese's kirimase scaffolder https://github.com/nicoalbanese/kirimase/
- create-t3-app scaffolder https://create.t3.gg/ - RECOMMENDED FOR BEGINNERS
- TurboRepo, TurboPack
- Check my own projects (maybe not the best but I think it's decent)
Should be done in the order shown
| Tech | Videos |
|---|---|
| HTML & CSS | es / en |
| (You should REALLY do this it's not optional anymore) | Tailwind CSS Framework / docs |
| Git / github- strongly recommended | Learn Git / What's the difference |
| JS (javascript) | es / en |
| React * | es / en again there's no need to watch the entire video, I recommend moving to Nextjs |
| Projects | Start building fck*ing projects → frontendMentor |
| Web-app deployment | Vercel recommended |
| Typescript | en / channel recommendation Jack Herrington → see No BS, TS for an even better tutorial |
| Nextjs | By Lee Rob / alternative-TheNetNinja / JoshTriedCoding course → MOST UP TO DATE |
| More Projects | Yeah do some more FROM SCRATCH, have fun and be creative if there's something you don't know how to do or can't, search about it on youtube, there are literally tons of videos about any tech you want |
| TRPC | This is the best way you can learn Modern Backend & DB, the JoshTriedCoding course video showed above uses this technology at its fullest |
| Drizzle ORM → THE GOAT | https://orm.drizzle.team |
| DB -> Planetscale | I love this product DBaaS https://planetscale.com - Vitess backed, Sharded, Edge - MySQL database |
- Another note here: You should also be familiar with the Edge Runtime featured in nextjs https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes because when next-auth supports it, it will become the new standard (in my opinion at least)
- I recommend authentication & authorization with next-auth, it's easy, reliable and fairly quick, however Lucia Auth is another option, mostly suited for more advanced devs, it however is Edge compatible which means → FUCKING FASTER, I leave this on you personal decision
- For your own sanity please do your research on the technologies I proposed here, and do keep in mind that the Nextjs course I recommended is based on the Pages Router (good ol' way to use next), however since v13 the team introduced new concepts around RSCs (React server components), Streaming, Server Actions (now stable in 13.5) and other nice stuff, so the best move here would be start on the Pages router and move to the App router once you're familiar & understand the differences enough
I personally just learnt the basics of React → functional components, hooks, etc; and quickly moved onto Next.js ❤ (you'll see that routing, SSR and DX (developer experience) is far better here)
Dive into fullstack web development and how to become one, learn other tech stacks such as AWS the edge runtime, RSCs, Next.js App router, serverless development, Rust programming language (I'm currently learning it and seems nice!) and reach out to me → linkedin or github whenever you have completed this guide or if any link is broken or doesn't work. Enjoy your ride 🤖!