What is Full Stack Development?
Full stack development means working on both the frontend and backend of a web application. The frontend is the part users see and interact with in the browser. The backend handles server-side logic, databases, authentication, APIs and data processing.
A full stack developer understands how these layers connect together. For example, a user may submit a form on a webpage, JavaScript can validate it, the backend can process the request, and the database can store the information permanently.
Evidence of Understanding
This portfolio itself is a frontend web application. It uses HTML for structure, CSS for styling, Bootstrap for responsive components and JavaScript for interactivity. In a complete full stack project, the same page could connect to a backend API and database to save form submissions or load portfolio content dynamically.
HTML
HTML stands for HyperText Markup Language. It provides the structure of a webpage using elements and tags. HTML is responsible for organising headings, paragraphs, links, images, lists, tables, forms and semantic page sections.
Semantic HTML is important because it gives meaning to the page structure. Tags such as <header>, <nav>, <main>, <section> and <footer> help browsers, search engines and screen readers understand the page.
HTML Demonstration
This demo shows common HTML elements used to create structured content.
Main Heading Example
Subheading Example
This paragraph is created using the <p> tag.
List Example
- HTML creates page structure.
- CSS controls the design.
- JavaScript adds behaviour.
Link and Image Example
The link below uses the <a> tag and the image uses the <img> tag with an accessible alt description.
Table Example
| Technology | Purpose |
|---|---|
| HTML | Structures webpage content |
| CSS | Styles and lays out webpage content |
| JavaScript | Adds interaction and dynamic behaviour |
Form Example
This form demonstrates labels, inputs and a button. Labels improve accessibility because they describe what each input is for.
CSS
CSS stands for Cascading Style Sheets. It controls how HTML elements look on the page, including colours, fonts, spacing, borders, shadows, layout, hover effects, animations and responsive design.
CSS separates presentation from structure. This makes the website easier to maintain because the same HTML content can be styled in different ways without changing the page structure.
Gradient, Spacing, Shadow and Border Radius
This box demonstrates CSS properties such as background, padding, border-radius, color and box-shadow.
Flexbox Layout Demonstration
Flexbox is a CSS layout system that aligns and distributes elements inside a container. The cards below use display: flex, gap and flex-wrap so they adjust neatly on different screen sizes.
Hover Effect Demonstration
CSS pseudo-classes such as :hover allow the design to respond when the user points at an element. Hover over the box below to see the colour, spacing and position change.
CSS Transition and Transform Demonstration
The button below uses CSS transitions and transforms. JavaScript changes its position, while CSS makes the movement smooth.
Responsive Design Demonstration
Responsive design allows a website to adapt to different screen sizes. This page uses media queries so navigation, layout and demo cards work better on mobile screens.
Bootstrap Framework
Bootstrap is a frontend framework that provides ready-made responsive classes and components. It helps developers build professional layouts faster using a consistent grid system, buttons, cards, navbars, modals and utility classes.
In this section, Bootstrap is loaded using a CDN link. The examples below demonstrate Bootstrap's grid system, cards, buttons and modal component.
Bootstrap Grid System
Bootstrap uses a 12-column responsive grid. The example below uses container-fluid, row and col-md-4. On medium and larger screens, the three columns sit next to each other. On smaller screens, Bootstrap stacks them automatically.
Bootstrap Cards and Buttons
Bootstrap cards organise related content into clean containers. Utility classes such as shadow-lg, border-0, h-100, p-4 and g-4 add spacing, sizing and visual styling without writing custom CSS for every detail.
Responsive Card
This card demonstrates Bootstrap's card structure and responsive image behaviour.
Utility Classes
Bootstrap utilities control spacing, colours, alignment and sizing quickly.
Interactive Modal
Bootstrap includes JavaScript components such as modals for interactive interfaces.
JavaScript
JavaScript is a programming language used to make webpages interactive and dynamic. It can change HTML content, respond to events, validate forms, create animations and communicate with APIs.
JavaScript works with the DOM, which stands for Document Object Model. The DOM represents the webpage as objects that JavaScript can select, read and update.
DOM Manipulation and Event Handling Demonstration
When the button is clicked, JavaScript selects the paragraph using getElementById() and changes its textContent. This demonstrates event handling and DOM manipulation.
This text will change when the button is clicked.
Counter Demonstration
This counter demonstrates variables, functions and updating the page dynamically. The number is stored in a JavaScript variable and displayed again each time the user clicks a button.
Counter value: 0
Form Validation Demonstration
Form validation checks user input before submission. This example ensures that the name field is not empty and the email contains an @ symbol.
JavaScript Evidence Summary
This section demonstrates JavaScript functions, variables, DOM selection, DOM updates, click events, form submit events, conditional logic and input validation.