Introduction to Web Development and CMS

1. How the Web Works

A website is a set of files (HTML, CSS, JavaScript, images, and sometimes server-side code) stored on a computer called a server. When you type a URL, your browser sends a request over HTTP/HTTPS to that server, which sends back the files needed to render the page.

Web development is the process of building and maintaining websites and web applications — from simple static pages to complex dynamic systems. A full web application typically combines front-end technologies (what the user sees and touches) with back-end technologies (how the system works behind the scenes).

Static vs Dynamic: a static website's pages are fixed files — the content is identical for every visitor until a developer manually edits and re-uploads it. A dynamic website pulls content from a database at request time, so pages can change based on user input, time, or stored data. Static sites are simple and fast; dynamic (usually CMS-powered) sites let non-technical staff publish and update content without touching code.

2. HTTP Status Codes Explained

Every single request your browser sends to a server gets a reply carrying a three-digit HTTP status code, telling you exactly what happened. Reading these codes is one of the fastest ways to diagnose a broken page, a misconfigured CMS, or a blocked request — you will use them constantly once you start managing live websites. Codes are grouped into five classes by their first digit:

As a rule of thumb: 2xx means success, 3xx means 'look elsewhere', 4xx means the client (browser/user) made a mistake or lacks permission, and 5xx means the server itself failed. When a client reports 'the site is down,' checking the status code in DevTools' Network tab (Module 1 Practical) is always the first diagnostic step.

3. The Four Core Web Technologies

The Four Core Web Technologies

•     HTML — structures web content.

•     CSS — styles and formats the content.

•     JavaScript — adds interactivity and dynamic behaviour.

•     PHP — handles server-side logic and database interaction.

1.4 HTML (HyperText Markup Language)

Definition: HTML is the standard markup language used to create and organise the content of web pages. It defines the structure of web documents using elements and tags.

•     Defines page structure using tags such as <html>, <head>, <body>, <div>, etc.

•     Supports semantic elements like <article>, <nav>, <footer>, and <section> for improved accessibility and SEO.

•     Enables embedding of multimedia content via <img>, <video>, <audio>, and others.

•     Supports forms using tags like <form>, <input>, <textarea>, and <button>.

Role: HTML is the skeleton of every web page — it provides the framework on which CSS and JavaScript operate.

1.5 CSS (Cascading Style Sheets)

Definition: CSS controls the appearance and layout of web content structured with HTML. It separates content from presentation, allowing consistent styling across multiple pages.

•     Style rules apply to elements via selectors (element, class, ID, etc.).

•     Supports colour, spacing, alignment, fonts, and animations.

•     Enables responsive design through media queries.

•     Can be applied inline, internally (<style>), or externally via .css files.

Applying CSS: <head><link rel="stylesheet" href="style.css"></head>. Role: CSS makes a site visually appealing and consistent, and plays a critical part in user experience (UX) and interface design.

1.6 JavaScript

Definition: JavaScript is a powerful, high-level scripting language used primarily for client-side interactivity and behaviour in websites.

•     Manipulates HTML content through the DOM (Document Object Model).

•     Supports event-driven programming (e.g., click, input).

•     Performs form validation, animations, and API interactions.

•     Works with HTML/CSS to create single-page applications (SPAs).

Advanced features: asynchronous programming with Promises and async/await; fetching external data via AJAX, the Fetch API, or libraries like Axios; and frameworks such as React, Angular, and Vue.js that extend JavaScript's capabilities. Role: JavaScript brings a static page to life through interaction, validation, and asynchronous data loading.

1.7 PHP (Hypertext Preprocessor)

Definition: PHP is an open-source, server-side scripting language used to build dynamic and interactive web applications.

•     Runs on the server and embeds easily within HTML.

•     Interacts with databases (commonly MySQL).

•     Manages forms, sessions, authentication, and file uploads.

•     Powers popular CMS platforms such as WordPress, Drupal, and Joomla.

Role: PHP processes logic and generates HTML content dynamically — it is central to back-end, CMS-driven development.

1.8 Comparison, Interoperability and a Practical Scenario

Use case a blog website: HTML structures the content (posts, headings, links); CSS beautifies the site with colours, spacing and responsiveness; JavaScript validates comment forms and loads new posts without a page reload; and PHP stores and retrieves blog content from a database and manages logins/sessions. Mastering how these four technologies integrate is the foundation for everything that follows in this course, including CMS platforms.

4. 9 What is a Content Management System (CMS)?

A Content Management System (CMS) is a software application that lets users technical or not create, manage, and modify digital content on a website without specialised programming skills. Think of it as a digital office for your website: instead of hand-coding every page and update, a CMS gives you a dashboard and a set of tools to do it efficiently.

1.10 Architecture and Core Components of a CMS

1.11 How a CMS Works (Simplified)

•     Content Creation & Storage — you create content via the CMA; it's stored in a database (e.g., MySQL, PostgreSQL).

•     Templating & Design — themes/templates define the site's visual appearance and layout; pre-built or customised.

•     Dynamic Content Delivery — when a visitor requests a page, the CDA retrieves content from the database, combines it with the chosen template, and generates the page shown in the browser.

•     User Roles & Permissions — different roles (administrator, editor, author) get different access levels, enabling collaborative content management.

5. Classification of CMS (by Deployment Model)

Classification of CMS (by Deployment Model)

Common Features of a CMS

•     WYSIWYG editor (What You See Is What You Get)

•     Drag-and-drop page builders

•     Template and theme support

•     Modular plugin architecture

•     Workflow and approval management

•     Multilingual support

•     Content versioning and history

•     SEO tools

•     Analytics and reporting integration

•     Security controls and user permissions

1.16 Examples of Popular CMS Platforms

6. Importance of a CMS

 Importance of a CMS

•     Ease of use & accessibility — empowers people without coding skills to build and manage professional websites.

•     Simplified content updates — changes can be made quickly by anyone with access, without a developer.

•     Collaboration & workflow — multiple users can contribute with defined roles and approval workflows.

•     Scalability & flexibility — grows with the site's needs; features can be added without starting over.

•     Improved SEO — built-in tools for meta tags, clean URLs, and sitemap generation.

•     Extensibility — vast plugin/extension ecosystems add functionality without writing code.

•     Consistent branding — themes/templates keep the look and feel consistent site-wide.

•     Security & maintenance — reputable CMS platforms ship regular security updates and patches.

•     Community support — large communities provide documentation, forums, and tutorials.

Common Use Cases for a CMS

•     Blogs — publishing articles, comments, and categorisation.

•     Business websites — professional online presences, product/service showcases, portfolios.

•     E-commerce stores — shopping carts, payment gateways, and inventory (e.g., WooCommerce, Magento).

•     News & magazine sites — timely articles, categories, and author contributions.

•     Educational institutions — academic sites, course portals, and online learning platforms.

•     Government websites — public information, services, and citizen engagement.

•     Non-profit organisations — awareness campaigns, donations, and volunteer management.

•     Portfolios — showcasing creative work for artists, designers, and photographers.

7. Tools to Identify the Technology Stack Behind Any Website

17 Tools to Identify the Technology Stack Behind Any Website

Given any live website, you can usually find out exactly which CMS, theme, plugins, server software, and even analytics tools it runs without ever logging in. This is an essential skill for competitor research, security auditing (with permission), and simply understanding how real-world sites are built. Below are the main tools, what each is for, and how to use it.

Ethical note: identifying a site's technology stack from public information (page source, HTTP headers, published lookup tools) is normal, everyday research. Actively probing for vulnerabilities (as WPScan can do) must only be done on sites you own or have explicit written permission to test — doing so on a site without permission is illegal in most jurisdictions.

8. CMS vs Traditional Web Development

CMS vs Traditional Web Development

CMS Use Cases by Sector

Limitations and Challenges of CMS

•     Performance issues — poorly optimised themes/plugins can slow a site down.

•     Security vulnerabilities — requires frequent updates to core and extensions.

•     Customisation limits — deep custom functionality may still require developers.

•     Plugin conflicts — third-party extensions may not work well together.

•     Hosting dependence — performance is often tied to the hosting environment.

Summary: a CMS is a critical tool for modern web development, empowering users to manage content effectively without deep coding skills. Its flexibility, scalability, and user-centric features make it essential across education, e-commerce, media, government, and beyond. Understanding CMS architecture and how it differs from traditional hand-coded development  prepares you to build, manage, and deploy scalable, user-friendly web applications for the rest of this course.