There are several interesting paths into web development. This roadmap covers front-end, back-end, and full-stack work, with a focus on core knowledge and technologies for web programmers at different stages.
The Path to Becoming a Web Developer
A roadmap helps you see the technologies and skills involved in web development, from getting started to building expertise. It can guide beginners and experienced developers in learning systematically.
Who This Roadmap Is For
This roadmap is aimed at web programmers at different levels and groups them as 3 learner tracks: beginners, front-end or back-end developers, and full-stack developers.
Front End, Back End, and Full Stack
The front end is the part of a website people see and interact with. The back end handles data and application logic. Full-stack development combines work across both areas.
Front-End Developer
A front-end developer builds user interfaces that should be attractive, easy to use, and responsive. The role requires understanding technologies used to create the part of a website users interact with.
Back-End Developer
A back-end developer works on data and website logic, including databases, APIs, and servers.
Full-Stack Developer
A full-stack developer works across both front-end and back-end development and can build a website across its main layers.
Beginner Track
Beginners with little or no web-development experience should start with web-development fundamentals and the core technologies involved.
Front-End and Back-End Tracks
People with basic web-development knowledge can focus more deeply on either front-end or back-end technologies and tools.
Full-Stack Track
Full-stack learners need to understand technologies and tools used in both front-end and back-end work.
Web Development 101
Every web programmer benefits from understanding the fundamentals, regardless of whether they focus on front-end, back-end, or full-stack development.
HTML
HTML (HyperText Markup Language) provides the structure of a web page, including headings, paragraphs, images, and links.
CSS
CSS (Cascading Style Sheets) controls how page elements look, including their color, size, and layout.
JavaScript
JavaScript adds logic and interactivity to web pages, handles data, and supports more complex behavior.
APIs
An API (Application Programming Interface) defines how a front end can send requests to a server and how the back end returns information.
Node.js
Node.js lets JavaScript run on the server, allowing developers to use JavaScript for back-end development.
MySQL
MySQL is a database-management system used to store and manage website data.
Front End
The front end is the part users see and interact with. Front-end developers build interfaces that are attractive, usable, and responsive.
Back End
The back end manages website data and logic, including databases, APIs, and servers.
Roadmap Overview
A roadmap gives beginners and experienced developers a structured view of the knowledge and technologies they can learn as they progress.
Front-End Development
Focus on the user interface and the technologies that make it attractive, easy to use, and responsive.
Back-End Development
Focus on databases, APIs, servers, and the logic that powers a website.
Full-Stack Development
Combine front-end and back-end skills to build across the full website.
The Internet
Understanding the internet is important for web programmers. Websites exchange information over a global network of connected computers.
HTML Basics
Learn HTML structure and tags, and how to use them to create page content.
CSS Basics
Learn selectors, styling, and layout as the foundations of CSS.
Building Layouts
Use CSS to arrange page elements, including layout tools such as Flexbox and Grid.
Responsive Design
Design pages to work across desktops, tablets, and phones. CSS media queries can adapt presentation to screen size.
DOM Manipulation
Learn how JavaScript accesses and changes elements in a page’s Document Object Model (DOM).
Fetch API
The Fetch API lets JavaScript make HTTP requests, for example to retrieve data from a server.
Ajax
Ajax (Asynchronous JavaScript and XML) is a technique for retrieving data from a server without reloading the entire page.
Git
Git is a version-control system for tracking code changes, returning to earlier versions, and collaborating with others.
Package Managers
Package managers help manage packages and libraries used in web development. The article names npm and Yarn as examples.
Frameworks
Frameworks provide tools and libraries that can make web development faster. Examples in the source include React, Angular, and Vue.js.
Component Design
Component design treats a website as reusable parts, helping keep code organized and easier to maintain.
Tailwind
Tailwind is a CSS framework based on utility-first CSS, which lets developers compose styles using utility classes.
BEM
BEM (Block, Element, Modifier) is a CSS class-naming method intended to make stylesheets more organized and readable.
CSS Processors
A CSS processor can add features such as variables, functions, and mixins before CSS is used by a browser.
Build Tools
Build tools help manage tasks such as combining files, reducing file size, and running other steps in a website build.
Vite
Vite is described in the source as a fast, modern tool for building front-end projects.
Module Bundlers
A module bundler combines JavaScript modules so they can be used together in an application.
Task Runners
Task runners can automate development tasks such as running tests, minimizing files, and deploying a website.
Linters
A linter checks code for issues and helps developers follow a consistent standard.
Formatters
A formatter applies consistent code formatting to make the code easier to read.
Test Your App
Testing checks whether code behaves as expected and helps verify that a website works correctly.
Authentication
Authentication verifies a user’s identity and helps control access to website data and features.
Web Security
Web security protects user information and helps prevent attacks.
Web Components
Web components are reusable parts that can help keep a website organized and maintainable.
APIs
APIs define how a front end requests information from a server and how the back end responds.
Node.js
Node.js allows JavaScript to run on the server and can be used for back-end development.
MySQL
MySQL is a database-management system for storing and managing a website’s data.
Front End
The front end is the user-facing part of the website and should be usable and responsive.
Back End
The back end handles website data, logic, databases, APIs, and servers.
Choose a Learning Track
The source groups learners into 3 tracks: beginners, front-end or back-end specialists, and full-stack developers.
Web-Development Fundamentals
All web programmers need a working understanding of the fundamentals.
Front-End Skills
Learn technologies used to build the interface people see and interact with.
Back-End Skills
Learn the technologies used to manage data and application logic, including databases, APIs, and servers.
Full-Stack Skills
Combine knowledge of front-end and back-end tools to work across a website.
Want to discuss your finances? Add us on LINE for a free consultation, or scan the QR code to add us.
