Full Stack
Development

Full stack development is about creating every part of a website. This means making the things that people see when they use the website and also the behind the scenes work like the server and the database. A full stack developer can handle the project from the beginning to the end. They do not need to wait for other people to finish their parts.

The term "stack" is used to describe all the technologies that are used together to make a website work. It is like a sandwich. Each layer of the sandwich has a job but when you put them all together you get a complete sandwich. The same thing happens with the layers of technology in a website. They all work together to make the website function properly. Full stack development is, about understanding how all these layers work together to make a website.

How the three layers connect

When a user visits a website, the browser downloads and renders the frontend (HTML, CSS, JavaScript). It gets the HTML and the CSS and the JavaScript. When you do something on the website like log in or buy something the JavaScript sends a message to the backend server. The server then does what it needs to do with the message looks at the database to get the information and sends the information back to your browser so it can show you what you need to see.

For example when you use Netflix the frontend part that you see is made with React.js. This is what you interact with. The backend part, which is made with Node.js is what handles the stuff like who you are and what you like to watch. Then there are databases, like MySQL and Cassandra that store what you have watched and what you like. Every website you use has these three parts: the frontend, the backend and the database. Netflix has these parts. So do other websites. The frontend, the backend and the database all work together to make the website work.

Common technology stacks

Each stack uses different technologies for each layer but follows the same frontend-backend-database pattern. The LAMP stack is particularly common for PHP-based websites, and is what this module focuses on.

HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It is the skeleton of every webpage - it defines what content appears and what type it is (heading, paragraph, list, image, link), but not how it looks visually (that is CSS's job).

HTML uses a system of elements represented by tags. Most elements have an opening tag <p> and a closing tag </p>, with content in between. Tags can also have attributes - like href on a link or src on an image - which provide extra information about the element.

Example 1 - page structure & core elements

The preview below shows the most fundamental HTML elements: headings create a content hierarchy (h1 is the most important, h3 is less important), p wraps paragraphs of text, ul and li create bullet-point lists, and a with a href attribute creates a clickable hyperlink. Together these tags structure almost every page on the web.

<!-- Heading hierarchy -->
<h1>About me</h1>
<h2>My background</h2>
<h3>Current studies</h3>

<!-- Paragraph of text -->
<p>I am a full stack development student at the University of Sunderland.</p>

<!-- Unordered list with list items -->
<ul>
  <li>HTML - structuring web content</li>
  <li>CSS - styling and layouts</li>
  <li>JavaScript - interactivity</li>
</ul>

<!-- Hyperlink — href attribute sets the destination -->
<a href="https://github.com" target="_blank">View my GitHub →</a>

Example 2 - HTML form elements

Forms are essential in web development - they collect data from users and send it to a server. The <form> element wraps all inputs. Each <input> has a type attribute that controls what is accepted: type="text" for plain text, type="email" validates email format, type="password" masks input. The <label> element links descriptive text to an input using matching for and id attributes, which is important for accessibility. The required attribute prevents the form from submitting if a field is empty.

<!-- Form with action (where data goes) and method (how it's sent) -->
<form action="/submit" method="POST">

  <!-- label 'for' matches input 'id' for accessibility -->
  <label for="name">Full name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>

  <label for="msg">Message</label>
  <textarea id="msg" name="message" rows="4"></textarea>

  <button type="submit">Send message</button>

</form>

HTML is really easy to use because it only talks about what's in the content not what it looks like. This means that the way things are organized and the way things look are two things (structure from style). This is an important idea when it comes to making websites. The same HTML page can look totally different depending on the CSS that is used with it. HTML is simple. That is what makes it so useful. The HTML document and the CSS are like two things the HTML document says what is, in it and the CSS says how it should look.

CSS (Cascading Style Sheets) controls the visual presentation of HTML content. Where HTML defines the structure, CSS defines the appearance - colours, typography, spacing, layout, animations, and responsive behaviour. Without CSS, every webpage would look like a plain text document.

CSS works by selecting HTML elements and applying style declarations to them. A CSS rule looks like: selector { property: value; }. The "cascading" in CSS means styles flow downward - parent element styles are inherited by children, and more specific rules override less specific ones.

Example 1 - flexbox layout & profile card

Flexbox is CSS's most powerful layout tool. Setting display: flex on a container turns its children into flexible items that can be aligned, spaced, and ordered with simple properties. align-items: center vertically centres all children, gap adds consistent spacing between them, and flex: 1 on a child makes it grow to fill available space. The border-radius: 50% on the avatar turns a square div into a perfect circle.

.profile-card {
  display: flex;           /* activate flexbox layout */
  align-items: center;    /* vertically centre all children */
  gap: 14px;             /* space between items */
  padding: 16px;
  background: #f7f7f7;
  border-radius: 12px;    /* rounded corners */
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;     /* turns square div into a circle */
  background: #dbeafe;
}

.profile-info {
  flex: 1;               /* grows to fill remaining space */
}

Example 2 - hover transitions & responsive grid

CSS transition creates smooth animations between states automatically - no JavaScript needed. When a user hovers over a card, the browser animates between the normal and :hover state over the specified duration. The transform: translateY(-4px) shifts the card upward, creating a "lift" effect. The @media query changes the layout at screen widths below 600px, making the grid stack into a single column on mobile devices.

.card {
  background: #f7f7f7;
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.2s ease, background 0.2s ease;
}

/* :hover fires when the mouse is over the element */
.card:hover {
  transform: translateY(-4px); /* lifts card upward */
  background: #111;
  color: #fff;
}

/* Media query: applies only below 600px (mobile screens) */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr; /* one column on mobile */
  }
}

CSS gives developers complete control over visual design while keeping it entirely separate from HTML content. This separation means the same HTML can be restyled instantly just by swapping the CSS file - a concept used by themes and design systems.

Bootstrap is the world's most popular open-source CSS framework, originally created by developers at Twitter in 2011. It provides a large library of pre-built, production-ready components - buttons, navbars, cards, forms, modals, alerts and more - that work by simply adding class names to HTML elements. No custom CSS is required.

Bootstrap's defining feature is its 12-column responsive grid system. By applying classes like col-md-6, a layout automatically rearranges itself across different screen sizes (desktop, tablet, mobile) using CSS breakpoints. Bootstrap is included in this page via a CDN link in the <head>, and all examples below use real Bootstrap 5 classes.

Example 1 - Bootstrap responsive grid (real Bootstrap 5)

Bootstrap's grid works on a 12-column system. col-md-4 means "take up 4 of 12 columns on medium screens and above". Three col-md-4 columns together fill all 12 columns. The row class creates the grid row, g-3 adds gutters (gaps) between columns, and the columns automatically stack vertically on screens smaller than the md breakpoint (768px). Resize your browser window to see the grid respond.

Example 2 - Bootstrap buttons, badges & alerts (real Bootstrap 5)

Bootstrap components require no custom CSS at all. The class btn btn-dark produces a styled dark button, btn-outline-danger produces a red outlined button - the colours, padding, border-radius, hover effects, and focus states are all handled by Bootstrap automatically. badge bg-success creates a small green label, and alert alert-info creates a styled notification panel. All of these are responsive and accessible by default.

Example 3 - Bootstrap card components (real Bootstrap 5)

Bootstrap's card component is a versatile content container. It combines a card-header for titles, card-body for content (with card-title and card-text), and optional footers. Cards inside a Bootstrap grid automatically sit side by side on desktop and stack on mobile. The class h-100 makes both cards equal height regardless of their content.

<!-- Step 1: Link Bootstrap CSS in <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet">

<!-- Step 2: Use Bootstrap grid -->
<div class="container">
  <div class="row g-3">
    <div class="col-md-4">Frontend</div>
    <div class="col-md-4">Backend</div>
    <div class="col-md-4">Database</div>
  </div>
</div>

<!-- Bootstrap button -->
<button class="btn btn-dark">Click me</button>

<!-- Bootstrap badge -->
<span class="badge bg-success">Active</span>

<!-- Bootstrap card -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">My project</h5>
    <p class="card-text">Description here.</p>
  </div>
</div>

Bootstrap dramatically speeds up development. A responsive layout that would take hours to build from scratch with custom CSS takes minutes with Bootstrap. It also ensures consistency, accessibility, and cross-browser compatibility across all components.

JavaScript (JS) is the programming language of the web. It is the only language that runs natively in every browser, making it unique. While HTML defines structure and CSS defines appearance, JavaScript adds behaviour and logic - it makes pages dynamic, interactive, and responsive to user actions without requiring a page reload.

JavaScript interacts with the DOM (Document Object Model) - the browser's internal tree-like representation of the HTML page. Functions like document.getElementById() select elements, and properties like .textContent, .innerHTML, and .classList allow those elements to be read or modified in real time.

Example 1 - interactive counter with DOM manipulation

This counter demonstrates four core JavaScript concepts working together. A variable (let count) stores the current number in memory. A function (changeCount) is a reusable named block of code. When a button is clicked, the function runs, updates the variable, and then uses getElementById to find the display element in the DOM and sets its textContent to the new value — updating the page instantly without any reload.

Example 2 - form validation with conditional logic

JavaScript validation checks user input before it is sent to the server, saving bandwidth and giving instant feedback. The .value.trim() chain reads the input's value and removes surrounding whitespace. The .includes('@') method checks whether the email string contains an @ symbol. The if / else if / else chain evaluates the conditions in order and executes the first branch that matches. Finally, the DOM output element's textContent and className are updated to show colour-coded feedback.

Example 3 - dark/light theme toggle with classList

This example shows a pattern used across real websites like Twitter and GitHub. JavaScript's classList.toggle() adds a class if it is absent, or removes it if it is present - with a single line of code. The CSS file defines a .dark class with different colours; JavaScript just switches it on and off. The button text is also updated to reflect the current state. This demonstrates how JavaScript and CSS work together - JavaScript changes state, CSS defines what each state looks like.

// ── Example 1: Counter ─────────────────────────
let count = 0; // variable stored in memory

function changeCount(n) {
  count += n; // update variable
  document.getElementById('counter-val').textContent = count;
  // ↑ find element in DOM, update its text
}

function resetCount() {
  count = 0;
  document.getElementById('counter-val').textContent = 0;
}

// ── Example 2: Form validation ─────────────────
function validateForm() {
  const name  = document.getElementById('val-name').value.trim();
  const email = document.getElementById('val-email').value.trim();
  const out   = document.getElementById('val-output');

  if (!name) {
    out.textContent = 'Please enter your name.';
  } else if (!email.includes('@')) {
    out.textContent = 'Please enter a valid email address.';
  } else {
    out.textContent = 'Success! Hello, ' + name + '.';
  }
}

// ── Example 3: Theme toggle ────────────────────
function toggleTheme() {
  const box    = document.getElementById('theme-box');
  const isDark = box.classList.toggle('dark'); // adds/removes class
  document.getElementById('theme-btn').textContent =
    isDark ? 'Switch to light' : 'Switch to dark';
  document.getElementById('theme-label').textContent =
    isDark ? '☾ Dark mode' : '☼ Light mode';
}

JavaScript is what transforms a static HTML/CSS page into a full application. On the frontend it powers interactivity; on the backend (via Node.js) it can handle server requests and database queries - making it the only language capable of covering the entire full stack on its own.