/ 8 min read
How I'd learn WebDev if I was starting out today
“Sheng Rui, how should I get started in WebDev?”
I’ve been asked this question multiple times before, so I thought I’d sit down and write out exactly how I would learn WebDev, knowing what I know today. Here it goes.
Start with Why
This may sound super cliche, but I mean it in all seriousness. WebDev can get pretty challenging, especially once you begin building more complex applications with authentication, billing and user logic. If you know why you’re building in WebDev, you will have what it takes to persevere through the seemingly undefeatable bugs that keep you stuck for hours.
For me, my “why” is simple: I love building things that make people’s lives better, and WebDev offers one of the easiest ways to get started creating real products.
Begin with the basics (HTML, CSS, JavaScript)
The web is built on three core technologies: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript.
HTML defines the structure of a webpage - think of it as the skeleton that organizes content and elements.
CSS handles the style, controlling how everything looks, from colors and fonts to layout and spacing.
JavaScript adds interactivity, enabling dynamic features like responding to button clicks, updating content without reloading the page, and much more.
To learn these 3 technologies, take a course on Udemy, or use online resources like W3Schools, WebDev and The Odin Project.
Build a static site with HTML, CSS and JavaScript
Now it’s time to put your knowledge into practice. Building a static site will help you understand how HTML, CSS, and JavaScript work together in a real project.
Start with something simple - maybe a personal portfolio, a restaurant menu, or a blog. The key is to build something you’re actually interested in, not just another tutorial project. This keeps you motivated and helps you think through real design and functionality challenges.
Focus on making it responsive (works on mobile and desktop), accessible (screen readers can navigate it), and fast. These are fundamentals that will serve you well throughout your WebDev journey.
Learn a frontend framework (React, Svelte)
Once you’re comfortable with vanilla HTML, CSS, and JavaScript, it’s time to level up with a frontend framework. These frameworks help you build more complex applications by providing structure and useful abstractions.
I’d recommend starting with either React or Svelte. React has a massive ecosystem and job market, while Svelte offers a more intuitive learning curve and excellent performance. Both are excellent choices.
The key insight here is to understand that all of these frameworks ultimately compile to HTML, CSS and JavaScript. They’re just tools that make it easier to build complex applications. Don’t get overwhelmed by the framework itself - focus on the concepts it’s trying to solve.
Depending on how you learn best, explore the official documentation, follow tutorials and examples on the frameworks’ main sites, or take a course on platforms like Udemy or YouTube.
Understand HTTP requests and build a simple Express backend
Up until now, you’ve been building static sites that don’t interact with servers. But most real applications need to store data, handle user accounts, and process information. This is where backend development comes in.
Start by understanding HTTP requests - GET, POST, PUT, DELETE. These are the ways your frontend communicates with your backend. Then learn Express.js, a minimal Node.js framework that makes it easy to build APIs.
Build simple endpoints that return JSON data. Maybe create an API for a todo list or a simple blog. The goal here is to understand the request-response cycle and how data flows between frontend and backend.
Learn a backend meta-framework (NextJS, SvelteKit)
Meta-frameworks are the next evolution - they combine frontend and backend into a single, cohesive development experience. They handle routing, server-side rendering, API routes, and deployment all in one package.
NextJS (React-based) and SvelteKit (Svelte-based) are all excellent choices. They abstract away a lot of the complexity of setting up a full-stack application, letting you focus on building features instead of configuration.
The beauty of these frameworks is that you can choose to build your backend logic right alongside your frontend, or connect to a separate backend server. This flexibility lets you start simple and scale as needed.
Build a dynamic site
Now you have all the pieces - frontend framework, backend knowledge, and a meta-framework to tie it all together. It’s time to build something that actually does something useful.
I’d recommend building a todo app or a simple blog with user accounts. These projects teach you about state management, user authentication, database operations, and real-world application architecture.
Choose whether to build your backend logic within the meta-framework (easier to start) or as a separate Express server (more scalable). Both approaches are valid - the meta-framework approach is great for getting started quickly, while a separate backend gives you more control and scalability options.
Learn TypeScript
JavaScript is great for getting started, but as your applications grow, you’ll start running into bugs that could have been caught earlier. TypeScript adds static typing to JavaScript, helping you catch errors before they reach your users.
Start by gradually adding types to your existing JavaScript projects. You don’t need to rewrite everything at once - TypeScript is designed to work alongside JavaScript. Focus on understanding interfaces, types, and how they help you write more reliable code.
The typing system will catch a lot of bugs that would otherwise slip through, especially when working with APIs and complex data structures.
Learn Git
Version control is essential for any serious development work. Git helps you track changes, collaborate with others, and maintain a history of your project’s evolution.
Start with the basics: initializing a repository, making commits, and pushing to GitHub. You don’t need to master every Git command right away - focus on the workflow that works for you.
Keep it simple and work directly on the main branch for small projects. As your projects grow, you can explore branching strategies and more advanced Git workflows.
Build with authentication
Most real applications need user accounts. Start by trying to build your own simple authentication system - this will teach you about sessions, tokens, password hashing, and security best practices.
Once you understand the concepts, move to auth providers like Clerk, Supabase Auth, or Auth0. These services handle the complex security aspects while giving you a simple API to work with.
The key is to understand what’s happening under the hood before relying on third-party services. This knowledge will help you make better decisions about when to build custom auth vs. using a provider.
Deploy your project
Your applications need to live somewhere on the internet. Start with simple deployment platforms that integrate well with your meta-frameworks.
Use Vercel for frontend deployment - it’s incredibly simple and works seamlessly with NextJS, SvelteKit, and other frameworks. For backend deployment, AWS or Google Cloud Platform offer more control and scalability.
The goal is to get your application online quickly so you can share it with others. Don’t overthink the initial deployment - you can always optimize and scale later.
Build a backend with other languages (Go, Python)
JavaScript/Node.js is great for getting started, but other languages offer different strengths. Go is awesome for building high-performance APIs and microservices. FastAPI (Python) provides excellent developer experience and automatic API documentation.
Learning multiple backend languages helps you understand different programming paradigms and choose the right tool for each project. Each language has its own ecosystem and best practices.
Implement CI/CD
Continuous Integration and Continuous Deployment automate your testing and deployment processes. This becomes essential as your applications grow and you need to ensure code quality and reliable deployments.
Understand that there is no one-size-fits-all CI/CD solution. Your CI/CD should be as complex as your project requires. Start simple with basic testing and deployment using Github Actions, then add complexity as needed.
Keep it simple and use trunk-based development for small teams. The goal is to catch bugs early and deploy frequently with confidence.
Integrate Stripe
Time to monetize! Stripe makes it relatively straightforward to accept payments in your applications. Start with simple one-time payments, then explore subscriptions, payment links, and more complex billing scenarios.
This is where your application becomes a real business. You’ll learn about webhooks, payment processing, and the legal considerations of handling money. I can’t tell you how excited I was to receive my first payment in Stripe from my automated notes shop StudyLouis.
Remember to start with Stripe’s test mode and thoroughly test your payment flows before going live. Payment processing is one area where bugs can be expensive.
Someone once told me, “If you know your why, you’ll figure out the how”. I hope you find your why.
A quick note: what I have suggested above is not a sequential roadmap. You can jump into the sections that interest you most and fill in the gaps later. WebDev is vast, and everyone’s journey looks different.
The most important insight I’ve learned is to NEVER get stuck in the learning phase. Learn just enough to feel 50% confident, then start building. The other 50% will come naturally as you solve real problems and encounter actual challenges.
The best way to learn WebDev is to do WebDev. Start small, build things that matter to you, and don’t be afraid to break things along the way. There is no other way.