To work as a web developer you need HTML, CSS and JavaScript first, then Git, one back-end language with a database, basic testing and security, and a way to deploy what you build. Frameworks, cloud services and AI tools matter, but they sit on top of those fundamentals. This page lists the skills in the order to learn them, with what “good enough” looks like at each step.
Skill lists go stale quickly, so this one avoids naming a year. The core has been stable for a long time; what changes is the tooling around it. Where a specific tool is named below, treat it as a common example, not the only choice (as of October 2026).
The skills, in learning order
| Step | Skill | You are ready to move on when you can |
|---|---|---|
| 1 | HTML and CSS | Build a responsive page from a design using semantic tags, Flexbox and Grid, without a framework |
| 2 | JavaScript | Manipulate the DOM, handle events, fetch JSON from an API and show it on the page |
| 3 | Git and GitHub | Branch, commit, resolve a merge conflict and open a pull request |
| 4 | One front-end framework | Build a small app with components, state and routing |
| 5 | One back-end stack and a database | Build an API with authentication that stores data |
| 6 | Testing, debugging, security | Write tests, use browser DevTools, and name the common attacks and their fixes |
| 7 | Deployment | Put the app on the internet with an automated pipeline |
1. HTML and CSS
HTML gives a page its structure and meaning; CSS controls how it looks. Employers still test this, and weak fundamentals show up as inaccessible, fragile pages no matter which framework sits on top.
- Semantic HTML: use
header,nav,main,button,labeland proper heading levels instead ofdiveverywhere. Screen readers and search engines rely on them. - Layout: Flexbox for one-dimensional rows and columns, Grid for two-dimensional layouts, media queries for responsive behavior. Design for a phone-sized screen first.
- Accessibility: keyboard navigation, visible focus, alt text, sufficient color contrast.
MDN’s free Learn web development curriculum is a reliable path through this: its core modules cover HTML, CSS styling and layout, JavaScript, frameworks, accessibility and version control. You can find it at developer.mozilla.org. For an overview of how the pieces fit, see Introduction to web development basics.
2. JavaScript
JavaScript is the one language every browser runs, so it is the skill with the highest payoff. Get comfortable with:
- Variables, functions, arrays and objects, and array methods such as
map,filterandreduce. - The DOM and events.
- Asynchronous code: promises,
async/awaitandfetch. - Modules (
import/export) and howthisand closures behave.
TypeScript, which adds static types to JavaScript, is common in professional codebases. Learn it after plain JavaScript feels natural, not before.
3. Git and GitHub
Almost every team uses Git. The habits that matter: small commits with messages that say why, a branch per change, pull requests with a short description, and reading other people’s diffs. A public GitHub profile with a few finished projects also works as a portfolio. See how to use GitHub to showcase your coding projects and the best Git tutorials for beginners.
4. A front-end framework
React, Vue and Angular are the usual choices. Pick one and learn it properly rather than sampling all three; the ideas (components, state, props, routing, data fetching) transfer. React is the most common starting point, and its documentation at react.dev now recommends starting a new project with a framework or a build tool such as Vite, Parcel or Rsbuild, not the old Create React App.
Before you add a framework, check that you can build the same small feature in plain JavaScript. It makes the framework’s purpose obvious.
5. Back end and databases
You do not need to know every server language. Choose one (Node.js with Express, Python with Django or Flask, Java, C#, PHP and Ruby are all in use) and learn what is common to all of them:
- HTTP: methods, status codes, headers, cookies.
- APIs: designing REST endpoints; GraphQL is worth knowing exists, but REST comes first.
- Authentication and authorization: sessions or tokens, password hashing, who is allowed to see what.
- Databases: SQL with a relational database such as PostgreSQL or MySQL first. A document database such as MongoDB is a useful second.
Here is the smallest useful example of the client-server loop: a Node server returning JSON, and a client reading it with fetch and checking the status. Run as an ES module (.mjs) on Node 18 or newer:
import { createServer } from 'node:http';
const server = createServer((req, res) => {
if (req.url === '/api/hello') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ message: 'Hello from the server' }));
} else {
res.writeHead(404).end();
}
});
server.listen(3111, async () => {
const res = await fetch('http://localhost:3111/api/hello');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
console.log(await res.json());
server.close();
});
// Output: { message: 'Hello from the server' }
Everything else in web development, from frameworks to cloud services, is a more convenient way of doing this.
6. Testing, debugging and security
Testing
Know the three levels: unit tests for functions, integration tests for modules working together, and end-to-end tests that drive a real browser. Vitest and Jest are common for unit tests; Playwright and Cypress for end-to-end. Start by testing the logic that would hurt most if it broke.
Debugging
The most useful debugging tool for a web developer is the one already in the browser. Learn the Console, the Network panel (is the request failing, and with what status?) and breakpoints in the Sources panel. An editor such as Visual Studio Code covers the rest.
Security
Be able to explain these and how to prevent them: SQL injection (use parameterized queries), cross-site scripting (escape output, avoid inserting untrusted HTML), cross-site request forgery (anti-CSRF tokens, SameSite cookies), and broken access control. The OWASP Top 10 at owasp.org is the standard checklist. Always serve over HTTPS and never store passwords in plain text.
7. Deployment and CI/CD
A project that only runs on your laptop is hard to show. Learn to deploy to a host such as Vercel, Netlify, Render or a plain VPS, and to set environment variables and a domain. Then automate the checks: a CI pipeline (GitHub Actions is the most common starting point) that runs your tests and linter on every pull request, and deploys when they pass. Docker is worth learning once you have something to containerize.
Skills that apply everywhere
- Performance: images sized correctly, less JavaScript, and measuring with Lighthouse in Chrome DevTools before guessing.
- Reading documentation and errors. Most of the job is understanding code you did not write.
- Communication: clear pull request descriptions, asking precise questions, estimating honestly.
- Data structures and algorithms: many companies still test them in interviews, even for web roles. If that is your target, practice on a platform such as AlgoCademy, which has step-by-step lessons in Python, JavaScript, Java and C++.
AI coding tools
AI assistants can write boilerplate, explain errors and suggest tests, and many teams use them daily. They do not replace the fundamentals above: you still have to read the generated code, spot the wrong assumption, and debug it when it fails. Beginners who skip the basics and rely on generated code usually get stuck the first time something breaks. Use the tools to go faster at things you understand, and to ask “why does this work?” about things you do not.
Common mistakes
- Learning frameworks before JavaScript. You end up memorizing framework syntax without knowing what it does.
- Tutorial hopping. Finishing five tutorials teaches less than building one project of your own and getting it live.
- Ignoring accessibility and mobile. Both are cheap to do from the start and expensive to retrofit.
- Collecting tools. One editor, one framework, one back-end stack, one database is enough to get hired or to ship a product.
A project to prove the skills
Build one full application: a sign-up and login flow, a database with at least two related tables or collections, a front end that talks to your own API, tests for the key logic, and a live URL. A task manager, a bookmarking tool or a small booking app all work. It touches every item in the table above, and it gives you something concrete to discuss in an interview.
