HTML and CSS (use any YouTube videos for this and keep referring docs whenever you need it; don’t spend more than 2-3 days on this).Practice it by making Simple UI. You can take help from Frontend Practice.
Then, the most important thing: JAVASCRIPT.
Resources for JavaScript
> Either you are being interviewed for frontend or backend the interviewer will ask this fs.
- Videos: Namaste JavaScript by Hitesh Choudhary
- Docs: The Modern JavaScript Tutorial
Go in-depth with JavaScript. Focus heavily on concepts like Promises, Event Loop, Closures, the Single-threaded Nature of JS, etc. Keep referring to this time to time whenever you need it.
Now after you’ve done JS, I would suggest going with React, as you may get an internship for a frontend role after doing react.
Resources for React
The best resource for React is https://react.dev/learn.
Try to learn it from here if you can; read the docs and try to implement it step by step.
Go in-depth with React: how React works under the hood, why we are using React, different types of routing in React, hooks, how to create custom hooks, controlled vs. uncontrolled components, lazy loading, SWC, hot reloading, how Vite makes things faster, etc.
Use the
React Context API in a small project, then shift to Redux for state management in bigger projects.If you want videos, you can refer here:
- Videos: Namaste React by Hitesh Choudhary
But make sure to go through the docs.
Do Tailwind CSS
This will help a lot with React. You can refer to docs anytime whenever you need it. If you’ve done CSS nicely, this should not take time. But once you go for Tailwind, there’s no going back.
- Docs: Tailwind CSS Docs
- Videos:
- Tutorial: Tailwind CSS in One Shot (College Wallah)
- Advanced Tailwind: Advanced Tailwind (Tom Is Loading)
Make some cool UI using
React + Tailwind and post it on LinkedIn/Twitter.- Resource to help in UI: UI/UX Primitives
> Focus on UI, it impacts a lot. Take a lot of inspiration from websites like Dribbble, Pinterest, etc., before making your UI.
After this point, you may start applying for Frontend roles if you want. Although competition is high, so you may not get one, but if you’re highly skilled (and lucky) you’ll get one.
You can do React Native after this if you really want to try it (optional).
I personally did it from here:
- Playlist: React Native Tutorial for Beginners (Codevolution)
---
Now comes the Backend :)
Resources for backend:
> I’ve seen many people doing Express/Django and thinking they know backend. They do, but just the surface. You can dive as deep as you want into this, making more optimized, cost-effective, scalable servers, and this will take time and all Computer Science basics, like Computer Networking, DBMS, OOPs (mainly if you are using Spring Boot), Data Structures, etc.
So, first thing first:
Do computer networking basics. It’ll help you understand many things, like how the internet works, Client-Server architecture, how they connect, what are different protocols, what are TCP/UDP, and how all these things work.
I feel it’s a must-do.
- Notes: Here are my notes for Computer Networking which you can refer:
Computer Networking Full Course - OSI Model Deep Dive with Real Life Examples.pdf- Video: Computer Networking Full Course (Kunal Kushwaha)
Now comes making a Server:
You can choose any tech stack you want (such as
Spring Boot, Django, or Rust), but I will provide resources in Node.js.You can do a mix of these playlists or whatever you like:
- Backend Development with Chai aur Code
- Node.js Tutorial for Beginners by Codevolution
After this, make a full-stack project by yourself, using
React for the frontend and Express and MongoDB for the backend and database.After making one or two projects, learn a SQL database like
PostgreSQL (very widely used in the industry). You can do MySQL too; if you’ll do one, it’ll be very easy to shift to the other.Now if you’ve done till here, you can make one project with PERN (
PostgreSQL, Express, React, Node).Now the time has come to shift to TypeScript:
> If you really want to build your server scalable, you’ll have to shift to TypeScript. Also, most of the good open-source projects are in TypeScript, so if you want to contribute to them then TypeScript is a must.
Learn things like how it compiles, the
TSConfig file, Types, Generics, etc.- Video Tutorial: TypeScript Tutorial (Hitesh Choudhary)
After this, make an HTTP backend using
TypeScript. It’ll be annoying at first, but don't worry, you’ll be used to it with time.At this point, you can make another full-stack project using PERN/MERN but this time using both Frontend and Backend in
TypeScript. (You’ll learn a lot here, like how to use TypeScript with React and with an Express server).Learn Web-Sockets:
Now, since you’re done with HTTP servers, learn how to build a
Web-Socket server.- Video Tutorial: WebSockets Crash Course (Traversy Media)
Go in-depth: how the Web-Socket protocol works, why it’s used, and all.
You can make another project with everything you’ve learned till now.
> After this point, you are good to go for applying to Internships and contributing to open source. Get into interviews and learn from them; keep applying and keep learning until you get what you want.
Exploration begins:
After this, there is no limit. Dive deeper as much as you want. Learn why React is not SEO-optimized and what is used in the industry to overcome it.
You can learn Next.js here:
Learn how it is SEO-optimized, what is SSR/CSR/SSG in
Next.js, different types of routing in Next.js, what are client-side components and server-side components, what is a hydration error, why we should not use JWT+LocalStorage in Next.js, NextAuth, Middleware in Next.js, etc.You can learn it from wherever you want:
- Programming with Mosh is good.
- Or you can start from this playlist (Codevolution),
- then you can shift to: this playlist (Chai aur Code),
- and keep exploring and reading the docs: https://nextjs.org/docs/app/building-your-application.
- Make sure you are using the App Router.
Some more resources:
- Reddit: What are the best open source projects to learn?
> To be honest, you’ll have to do it in-depth yourself, by reading docs and researching. There’s not a single playlist which will make you understand everything in Next.js, neither should there be.
Learn about
Prisma ORM, learn why we need an ORM, what are the features Prisma provides, contribute/read code of repos using Prisma. Currently, I have this in mind; you can explore a more simple repo: https://github.com/dubinc/dub/tree/main/apps/web (This is a monorepo).Learn it by yourself and contribute to open-source repos.
Also, keep applying for internships.
Note: Make sure you’re using
TypeScript everywhere now.After this, I would say build a product.
Build something open-source, or build your own products and ship it.
In that process, you’ll learn everything that will be required for scaling, like load balancers, pub/sub, Kafka, etc.
---
Key Points to note:
- Make projects by yourself; don’t watch tutorials for projects. Get stuck, use AI to learn (don’t just copy-paste).
- The Development Journey Never ends. Keep exploring and learning things by time.
- Build in Public. This will get you more opportunities.
- Participate in Hackathons; build and get inspiration from what others are building.
> I’ve written this without AI so please ignore if I fucked up in spelling/grammar anywhere.
---