2 November 2025

How to Learn Web Development in 2025

Introduction

Learning web development in 2025 can feel like a maze there’s so much noise online about which framework or stack you should use and AI has changed how people approach learning entirely this guide is for people who want to build real things that other people can actually use not just follow tutorials or copy snippets off the internet it’s written from the point of a product engineer who cares about the craft of building and wants to share the processes tools and skills that actually matter

Preface

This guide is written from the point of a product engineer and will cover the processes and tools I use to build full stack web apps and the skills that I believe matter and how to learn them. This will not focus on web design/marketing sites like landing pages or company websites in which case I would recommend looking at something like framer or squarespace.

AI and Software Engineering

If we’re going to talk about the current landscape of engineering, we’ll first have to address the elephant in the room; AI. Previously I wrote a post about being intentional with your use of AI where it really boils down to what you’re trying to achieve and how much you should rely on it, the TLDR; is, if you really want to learn a new skill, you have to face the struggles and overcome barriers.

Personally I see AI as an incredibly powerful tool and often the people that I see make the best use of it for building things often aren’t engineers but people that work across product or design and aren’t bound to the constraints of having to know about all of the code under the hood. This is usually only for prototypes or smaller side projects rather than high quality production code (no offence).

What are the skills that matter?

Unfortunately, you’re still going to have to learn the fundamentals of web development which will be HTML, CSS and JavaScript, this is what all sites are built on and regardless of what frameworks and tools you’re using, it all boils down into those fundamentals. Past this you should also learn the fundamentals of how a web page works, for this it will be the Document Object Model (DOM), events and accessibility. Just with that knowledge would allow you to build a simple, interactive website.

Building web apps is one thing, building usable and intuitive ones is another. I highly recommend gaining the foundations of User Experience (UX) which is understanding the psychology of how users behave and interact with digital interfaces. For this I’d look into The Design of Everyday Things and Laws of UX.

Understanding how to go about building out your product is also a huge part to make sure that you can actually finish it. Traditionally, the approach to a project would be to spend ages scoping out absolutely everything you need to know and then build it out it one massive chunk, then we moved into a much more iterative process where you just figure out the smallest thing you can build that provides some value and then build out from the core. From the product side, I would recommend Getting Real which is free, you can also see my top 10 takeaways from the book. The Lean Product Playbook is also good.

Outside of having the fundamental engineer, design and product knowledge, you will need to have the right mindset. The traits of people that do really well in this space are:

Comfort with ambiguity - There will be a lot of gaps and unknowns, this is your chance to learn and get creative.
Craft and curiosity - Being curious about how things work, tinkering and exploring.
Continuous learning and adaptability - A drive to constantly be better each day.

The modern tech stack

With the adoption of AI and vibe coding, LLMs have somewhat dictated the direction of tooling used in modern development as they train on and are better with some tools than others, this stack is as follows:

Next.js

A full stack framework based on React which allows you to keep your frontend and backend in the same place, there is a bit of a learning curve to understanding all of the different rendering patterns and quirks of Next.js but it has such a big community around it and great documentation.

Tailwind

One of the most contentious points of frontend development in recent years, Tailwind is a utility first CSS framework which allows you to define your theme and stick to consistent naming and patterns. This largely won as the CSS flavour of choice with LLMs because it is essentially compression, you can write all your styles directly in your markup with less code.

shadcn/ui

shadcn/ui is a library of well designed and accessible components based mostly on Radix UI that you can copy into your codebase and update as you see fit.

Everything else

The base of Next.js Tailwind and shadcn/ui will suffice for most projects and you can get started in just a couple of commands which I’ll go over later. For some applications you might need to go a bit deeper with storing data and allowing people to create accounts, for a database I would recommend Supabase or PlanetScale and for authentication I would look at Better Auth or Clerk.

The tools you need

There are going to be a few essential tools that you’ll need to be able to create, build and deploy your app.

Terminal

There are going to be a few places where you need to run some commands for creating and managing your project, you can just use the built in terminal that comes with your operating system but I’d recommend using Ghostty.

Git

I’d argue that git is essential regardless of your level or whether you work with a team or by yourself, especially if you’re going to be doing a lot of vibe coding, git will allow you to create a history of your work and go back in time for when AI inevitable causes some catastrophic damage. Learn the basics of git and commit your changes regularly. Publish your work to GitHub which will be a prerequisite to deploying your app.

Integrated Development Environment (IDE)

I’m going to use the term IDE very loosely here and mean this as anyway to write some code wether that is you doing it by hand or AI doing it for you. My recommendation would be Cursor which gives you the best of being able to access your code in a file viewer and great support for AI agents to write code via prompting. You could also look at Claude Code which lets you do everything through prompting in the terminal, making the development lifecycle purely output focused; perfect for vibe coding.

Hosting

If you’re using Next.js and GitHub, this should be one of the easiest steps. Through Vercel, you can link your project in GitHub and then every time you push your changes, it will deploy your application.

The process

This section will actually focus on the step by step of starting a project, building it out, deploying it and then iterating on it.

Coming up with an idea of what to build can often be the blocker for people, I recommend to start by solving your own problems, I keep a list of project ideas based on problems I have at the time, if it is something small I can probably just knock it out in under an hour.

Creating the project

This assumes that you’ve got your terminal up and running and have node/npm installed and are setup with git. I also recommend having a dedicated space for your projects, you can call this projects or git.

mkdir ~/git && cd ~/git

This will create the folder and then change into that directory.

To create the project you can run

npx create-next-app@latest

and follow the wizard, the recommended defaults will be good.

Running the following will initialise shadcn/ui and add all of the components.

npx shadcn@latest add --all

If you run npm run dev in the terminal whilst in the project directory, you should be able to open up http://localhost:3000 in the browser to see your project.

From here this is where the real development can start. If you’re going to be relying on AI for building out your project, give Just Talk To It a read, some of the topics are fairly advanced but should give you a good insight into how proficient engineers approach agentic engineering.

Open up the coding interface of your choice and start prompting and/or building. If you can keep changes and features fairly focused and atomic, you should have an easy time keeping track of changes with git, a typical flow will be to add a feature, stage and commit the changes and then push them to GitHub when you’re ready to deploy. If you are using GitHub you’ll first have to create a project. Then you’ll be able to have a flow similar to this:

git add .
git commit -m "add search bar"
git push

Wrapping up

At this point you’ve got everything you need to start and that’s really the hardest part the rest comes from showing up and building things that you care about.

Don’t worry about doing everything perfectly or learning every new framework that comes out the people who make the biggest progress are the ones who keep iterating they build something small learn from it and move on to the next thing.

Every project teaches you something new how people use what you build how the browser actually works how to make things a little smoother next time.

If you remember one thing from all of this it’s that you learn web development by building web apps the more you build the better you get so just get started.

If you start building something from this guide or get stuck along the way reach out on X @dbillson I’m always happy to help or see what people are creating.