Software Engineering roadmap

When you type a web address into your browser, a quiet conversation begins behind the scenes. Your computer asks the Domain Name System to translate the friendly address into a server's numerical IP address. The browser then sends an HTTP request to that server, which replies with the files needed to draw the page.

Imagine posting a letter to a friend; the address is the URL, the postal service is DNS, and the letter inside is the web page content. Knowing this journey helps you trace where errors happen when something fails to load on your screen.

• URLs point your browser to a specific server
• DNS translates web addresses into IP numbers
• HTTP is the language browsers and servers use
• Servers send back files for your browser to display

HTML provides the bare skeleton of every web page you visit. It uses tags to label different pieces of content, telling the browser whether a bit of text is a main heading, a clickable link, or a submission form.

Think of it like writing an outline for a report before worrying about the font or paper colour. Choosing the correct tag matters because it gives your page meaning, helping search engines and accessibility tools understand what your content actually is.

• Tags wrap around content to define its meaning
• Use headings in order from main to subheadings
• Forms let users type information and click submit
• Semantic tags describe the content inside them clearly

Cascading Style Sheets add colour, spacing, and layout to the raw structure of your HTML. While HTML builds the skeleton, CSS gives the page its clothing and style, turning a plain list into a polished card layout.

Modern tools like Flexbox and Grid let you arrange items easily so they look neat whether someone opens your site on a tiny phone or a wide desktop monitor. This styling layer is crucial for creating welcoming, readable interfaces.

• CSS controls colours, fonts, and spacing
• Flexbox aligns items in rows or columns easily
• Grid builds two dimensional layouts for entire pages
• Media queries help your design adapt to screen sizes

JavaScript is the programming language that breathes life into web pages, allowing you to add logic and movement. Instead of just showing static text, you can calculate totals, respond to user choices, and change data behind the scenes.

Think of it as the wiring and plumbing of a house, making sure switches turn on the right lights when pressed. Learning these basic building blocks is the most important step towards becoming a confident software engineer.

• Variables store pieces of data for later use
• Conditions let your code make decisions based on rules
• Loops repeat tasks efficiently without copying code
• Functions group reusable blocks of logic together

The Document Object Model is a live tree representation of your HTML that JavaScript can read and change. When a user clicks a button, JavaScript can find that element in the DOM and swap its text or toggle a CSS class instantly.

Imagine a puppet master pulling strings to make the stage props move without rebuilding the whole stage. This direct control turns static documents into dynamic web applications that feel responsive and alive.

• The DOM represents your HTML page as a tree
• JavaScript can select and modify any page element
• Event listeners wait for clicks, typing, or scrolling
• Updates happen instantly without a full page reload

Coding is less about memorising syntax and more about breaking big puzzles into tiny, manageable steps. Before writing any code, sketch out what needs to happen first, second, and third in plain English.

Think of it like following a recipe, where rushing ahead leads to burnt toast. Practising this step-by-step thinking every week builds your confidence so you never stare at a blank screen wondering what to type next.

• Write out your plan in plain English first
• Break huge tasks into tiny, testable chunks
• Check your assumptions when your code fails
• Practise small coding challenges regularly

The terminal is a text-based interface for interacting with your operating system, bypassing menus and mouse clicks. Instead of opening folders with a mouse, you type short commands to move around directories and run programs.

Think of it as talking directly to your computer's engine room rather than using the dashboard buttons. Mastering a few basic commands makes managing your development tools much faster and easier.

• Navigate folders using simple text commands
• Run project scripts and development tools quickly
• Create, copy, and delete files without a mouse
• Essential skill for working with code servers

Git is a version control system that tracks every change you make to your code files over time. It lets you take snapshots called commits, meaning you can always roll back your project if an experiment breaks things.

Think of it as the ultimate undo button combined with save states in a video game. It keeps your work safe and allows you to branch off to try new features without risking your main code.

• Commits save a permanent snapshot of your files
• Branches let you work on new features safely
• Merging combines your branch back into the main code
• Roll back mistakes whenever an experiment goes wrong

GitHub is an online platform that stores your git repositories in the cloud so they are safely backed up. It acts as your professional showcase where other developers and future employers can see what you have built.

Think of it like cloud storage for your code, but with built-in tools for tracking issues and sharing your projects with the world. Using it turns your local hobby into a collaborative portfolio.

• Uploads your local repositories to the cloud
• Provides a public portfolio of your programming work
• Backs up your projects against hardware failure
• Makes sharing code with team members simple

Pull requests are proposals to merge your feature branch code into the main project branch. They give your team a chance to review your changes, leave comments, and suggest improvements before anything goes live.

Think of it like an editor reviewing a draft chapter before a book goes to print. This review process catches bugs early and helps everyone on the team learn from each other.

• Proposes your branch changes for team review
• Allows colleagues to leave feedback on your code
• Keeps the main branch stable and bug-free
• Documents why changes were made for the future

React lets you break a massive user interface into small, independent pieces called components. Each component handles its own markup and logic, and accepts data inputs called props to display dynamic information.

Think of a webpage like a car dashboard where the speedometer, fuel gauge, and radio display are separate modules built once and reused. This modular approach keeps your code organised as applications grow large.

• Components split big screens into small reusable pieces
• JSX lets you write HTML-like code inside JavaScript
• Props pass data down from parent to child components
• Makes large web applications much easier to maintain

State is data inside your component that changes over time based on what the user does. When a user clicks a button or types in a field, updating the state tells React to redraw the screen.

Think of it like the score counter on a video game screen that updates the moment you score points. Managing state properly ensures your app always matches what the user expects to see.

• useState remembers data that changes over time
• Updating state automatically re-renders the component
• useEffect runs code when components load or update
• Keep state as simple and close to usage as possible

Client-side routing allows a single-page application to look like multiple different pages without reloading from the server. When users click navigation links, the URL updates and React swaps out the displayed view instantly.

Think of it like tabs in a digital filing cabinet where pulling a tab reveals a new folder without walking to a different room. This makes your web app feel fast and smooth.

• Simulates multiple pages in a single app
• Updates browser URLs without server reloads
• Lets users share and bookmark specific views
• Keeps navigation fast and seamless

Most modern apps need to load data from external servers, which is done using the fetch function. Because network requests take time, your code must handle loading spinners and error messages gracefully while waiting.

Think of ordering food at a restaurant where you place the order, wait while it is cooked, and handle the case if the kitchen runs out of ingredients. Good error handling prevents your app from crashing when the network drops.

• fetch gets data from remote web servers
• Asynchronous code waits for server responses
• Show loading indicators while requests are pending
• Handle error states when network calls fail

TypeScript is a layer on top of JavaScript that adds strict data types to your code. Instead of discovering a typo when a user clicks a button, TypeScript warns you inside your editor before you even run the app.

Think of it like spelling check for your variables and function inputs, ensuring you never try to multiply text like a number. It makes refactoring large codebases much safer and more reliable.

• Adds optional static types to JavaScript code
• Catches common typos and errors inside your editor
• Improves autocomplete suggestions in modern tools
• Compiles down to plain JavaScript for browsers

Web accessibility ensures everyone, including people with visual impairments or motor difficulties, can use your application comfortably. This involves writing semantic HTML and ensuring keyboard navigation works smoothly.

Think of building a physical shop with ramps and wide automatic doors alongside stairs. Designing with accessibility in mind creates better, clearer software for every single user.

• Use semantic tags for screen reader users
• Ensure every interactive element works with keyboards
• Provide alt text for all informative images
• Maintain high colour contrast for readable text

Node.js allows you to run JavaScript on a server instead of inside a web browser. This means you can use the same language across your entire stack while building server-side logic and connecting to databases.

Think of JavaScript moving from being an entertainer on stage to working behind the scenes in the management office. It opens up access to thousands of open-source packages via npm to speed up development.

• Runs JavaScript code on a web server
• Accesses npm for thousands of helpful packages
• Reads environment settings securely from files
• Powers backend APIs and server scripts

REST is a set of design rules for building predictable web APIs using standard HTTP methods. You use GET to read data, POST to create it, PUT to update it, and DELETE to remove it, alongside clear status codes.

Think of it like a restaurant menu where each dish has a clear name and a specific action attached to ordering it. Consistent API design makes it easy for front-end apps to communicate with your server.

• Uses standard HTTP methods for actions
• Organises endpoints around clear URL resources
• Returns standard status codes for success or failure
• Exchanges data consistently using JSON format

Express is a lightweight framework for Node.js that simplifies building web servers and APIs. It provides clean tools for defining routes, handling incoming requests, and passing data through middleware functions.

Think of it like the scaffolding on a building site, giving you sturdy walls and floors so you do not have to build them from scratch. It speeds up backend development considerably.

• Sets up server routes with minimal boilerplate
• Middleware processes requests before hitting handlers
• Handles errors cleanly without crashing the server
• Parses incoming JSON payloads automatically

Authentication verifies who a user is and keeps their account secure across requests. Passwords must be hashed securely before saving, and successful logins issue tokens or sessions so the user stays signed in.

Think of checking an ID card at a club door and giving the visitor a wristband for entry. Proper security practices protect your users' private data from leaks.

• Never store plain text passwords; always hash them
• Verify user credentials during login attempts
• Use tokens or sessions to maintain login states
• Protect private routes from unauthenticated users

Backend security means protecting your server from malicious users trying to inject harmful code or steal data. You must sanitize inputs, restrict request rates, and set proper headers to block common attacks.

Think of security guards checking bags at a venue entrance to stop prohibited items getting inside. Staying vigilant keeps your server and user data safe from harm.

• Validate and sanitize all incoming user input
• Protect against common injection vulnerabilities
• Limit request rates to stop automated spam
• Keep dependencies updated to patch known bugs

Structured Query Language lets you talk to relational databases to store and retrieve records. You can select specific rows, filter by conditions, sort results, and update information using clear commands.

Think of it like searching a massive, well-organised filing cabinet where every piece of paper has a neat label. Knowing SQL is essential for managing persistent data in business applications.

• SELECT retrieves and filters rows from tables
• INSERT adds new records into your database
• UPDATE modifies existing information safely
• WHERE clauses filter data based on conditions

Data modelling is the process of planning how tables relate to one another in your database. Good design ensures data is stored efficiently without messy duplicates as your application grows.

Think of designing a blueprint for an office building, deciding where rooms go and how hallways connect them. Clear models make writing complex queries much easier later.

• Define tables with primary keys for unique rows
• Use foreign keys to link related tables together
• Avoid data duplication by splitting tables logically
• Plan relationships like one-to-many carefully

Joins let you combine rows from two or more database tables based on a related column between them. Aggregation functions then let you summarize that data, such as counting total orders or calculating averages.

Think of matching a customer's receipt with their delivery details to see their full order history in one view. This unlocks powerful insights from your relational data.

• INNER JOIN combines rows matching in both tables
• LEFT JOIN includes all rows from the primary table
• GROUP BY summarises rows into calculated groups
• Aggregation functions count or average data values

Object-Relational Mapping tools let you interact with your database using programming language code instead of raw SQL queries. Migrations act as version control for your database schema, letting you apply changes safely across environments.

Think of an ORM as a translator helping your JavaScript code speak fluent database language. Migrations ensure your production database updates match your code changes smoothly.

• ORMs let you query databases using code objects
• Migrations track and apply database schema updates
• Keeps database changes synchronised across team members
• Prevents manual edits on live production databases

NoSQL databases store data as flexible documents rather than rigid rows and columns in relational tables. They shine when your data structure changes frequently or when items do not share a uniform schema.

Think of storing folders filled with paperwork where every form has different sections, unlike a strict spreadsheet. Choosing NoSQL depends on whether your app needs flexible documents or strict relations.

• Stores data as flexible JSON-like documents
• Great for data with unpredictable or changing shapes
• Scales easily across multiple server clusters
• Differs from rigid tables in relational SQL systems

Automated testing writes small scripts that check your code works correctly so you don't have to test everything by hand. Unit tests check individual functions, while integration tests verify that multiple parts work together.

Think of quality control inspectors running automated checks on factory products before they leave the warehouse. Testing catches regressions early before your users encounter bugs.

• Unit tests check single functions in isolation
• Integration tests check how modules work together
• Catches bugs automatically before users find them
• Gives confidence when refactoring old code

Continuous Integration is a practice where every code push automatically triggers your test suite in the cloud. If any test fails, the build is flagged so developers know a bug was introduced.

Think of an automated security gate checking every parcel before it enters the main sorting office. CI ensures broken code never accidentally reaches your production environment.

• Runs tests automatically on every code push
• Uses cloud pipelines like GitHub Actions
• Blocks merges if test suites fail
• Keeps the main branch healthy and deployable

Deployment is the process of uploading your application to a live server so anyone on the internet can access it. This involves configuring environment variables, setting up custom domain names, and securing traffic with HTTPS.

Think of opening a physical shop's doors to the public for the very first time. Proper deployment turns your local hobby project into a professional web service.

• Puts your application online for public access
• Manages secure environment variables on servers
• Connects custom domain names to your app
• Secures traffic using valid HTTPS certificates

A capstone project brings everything you have learned together by building and shipping a complete full-stack application from scratch. You plan the features, write the code, set up the database, test it, and deploy it live.

Think of building a house from your own architectural drawings to prove your building skills. Writing up what you built makes this your ultimate portfolio piece for employers.

• Combines frontend, backend, and database skills
• Builds a complete, working app of your own
• Demonstrates real engineering problem solving
• Serves as your strongest portfolio piece for jobs