Introduction to Web Technologies
Learn what the web really is, how it differs from the internet, and discover the three core technologies - HTML, CSS, and JavaScript - that power every website. This beginner-friendly lesson gives you a clear mental map of web development before you write your first line of code.
What Is the Web?
Have you ever wondered what actually happens when you open a browser and visit a website? You're interacting with something called the World Wide Web - and it's one of the most powerful inventions in human history.
The World Wide Web (WWW), commonly just called "the web," is a massive system of interconnected documents and resources - think web pages, images, videos, and files - that are all linked together through hyperlinks and accessed through a web browser like Chrome, Firefox, or Edge.
It was invented by a British scientist named Sir Tim Berners-Lee in 1989 while he was working at CERN (the European physics research centre). His goal was simple: to help scientists share information more easily. What he created changed the world forever.
Today, the web hosts billions of web pages, from personal blogs and online shops to social media platforms and streaming services like YouTube and Netflix. Every single one of those pages is built using web technologies - and by the end of this course, you'll know exactly how they work.
The Web ≠ The Internet
Many people use "the web" and "the internet" as if they mean the same thing - but they don't! The Internet is the global infrastructure: the massive physical network of cables, servers, and routers that connects computers around the world. The Web is just one service that runs on top of the internet - like an app that uses that network. Other internet services include email, online gaming, and video calls. Think of the internet as the roads and the web as one of the vehicles that travel on them.
The Web Lives Inside the Internet
The Three Pillars of Web Development
Every webpage you've ever visited was built using three core technologies. These are the building blocks of the entire web, and learning them is exactly what this course is about.
1. HTML - HyperText Markup Language
HTML is the structure of a webpage. It defines what content exists on a page: headings, paragraphs, images, links, buttons, and more. Think of HTML as the skeleton of a building - it holds everything together and gives it shape.
2. CSS - Cascading Style Sheets
CSS is the style of a webpage. It controls how the content looks: colours, fonts, spacing, layout, and animations. If HTML is the skeleton, CSS is the paint, furniture, and decoration that makes a building beautiful.
3. JavaScript
JavaScript is the behaviour of a webpage. It makes things interactive - clicking a button, showing a popup, updating content without reloading the page. JavaScript is the electricity that brings the building to life.
These three technologies always work together. A professional web developer must understand all three.
The Three Pillars of Web Development
| Technology | Full Name | Role in a Webpage | Real-World Analogy |
|---|---|---|---|
| HTML | HyperText Markup Language | Structure & Content | Skeleton / Blueprint |
| CSS | Cascading Style Sheets | Styling & Layout | Paint, Décor & Furniture |
| JavaScript | JavaScript | Behaviour & Logic | Electricity & Appliances |
You Don't Need to Memorise This Yet!
Right now, just build a mental picture of how these three technologies relate to each other. You'll dive deep into HTML first - then CSS, then JavaScript. One step at a time. By the end of this course, all three will feel natural to you.
Static vs Dynamic Websites
Not all websites are built the same way. Broadly, websites fall into two categories:
Static Websites
A static website delivers the exact same content to every visitor, every time. The pages are pre-built as plain HTML, CSS, and sometimes JavaScript files. They don't change unless a developer manually edits the code.
- Simple, fast, and cheap to host
- Great for: portfolios, brochures, documentation sites
- Examples: a personal resume site, a small business landing page
Dynamic Websites
A dynamic website generates content on the fly based on who is visiting, what they've searched for, or what's in a database. The content changes automatically.
- Requires a server and often a database
- Great for: social networks, e-commerce stores, blogs with many authors
- Examples: Amazon, Instagram, Wikipedia
In this course, you'll learn to build static websites from scratch using HTML5 - a crucial and valuable skill on its own.
Frontend vs Backend Development
When people talk about "web development," they usually mean one of two sides of the same coin: frontend and backend.
Frontend Development (Client-Side)
The frontend is everything a user sees and interacts with directly in their browser. It includes the layout, text, buttons, colours, animations, and forms.
Frontend developers work with:
- HTML
- CSS
- JavaScript
The browser is responsible for reading and rendering this code into the visual page you see on screen.
Backend Development (Server-Side)
The backend is everything that happens behind the scenes - on the server, not in the browser. It handles business logic, user authentication, database queries, and delivering data to the frontend.
Backend developers work with languages and tools like:
- Python, PHP, Node.js, Ruby
- Databases like MySQL or MongoDB
- Servers like Apache or Nginx
Full-Stack Development
A full-stack developer is someone who works on both the frontend and the backend - they understand the complete picture of how a web application is built.
As a beginner, you'll start with frontend. It's the perfect entry point into the world of web development.
Frontend and Backend - Two Sides of Web Development
The Web Development Ecosystem - A Bird's Eye View
Web development doesn't stop at HTML, CSS, and JavaScript. As you grow as a developer, you'll encounter a broader ecosystem of tools and technologies. Here's a quick overview so you know what's out there (don't worry - you won't need to learn all of this right now):
Code Editors
Tools like Visual Studio Code (VS Code) are where you write your code. Think of it as Microsoft Word, but for developers.
Browsers & Developer Tools
Every modern browser (Chrome, Firefox, Edge, Safari) has built-in Developer Tools that let you inspect, debug, and test your web pages in real time.
Version Control
Git and platforms like GitHub allow developers to track changes in their code, collaborate with others, and safely manage different versions of a project.
Frameworks & Libraries
As projects grow, developers use pre-written code tools like React, Vue, Bootstrap, and Tailwind CSS to speed up development.
Hosting & Deployment
Once a website is built, it needs to be placed on a web server so the world can access it. Services like GitHub Pages, Netlify, and Vercel make this easy.
You will learn the tools above gradually throughout this course and future courses. For now, keep your focus on the fundamentals.
Don't Try to Learn Everything at Once
The web development ecosystem is huge. It's very tempting to jump ahead and start learning React or frameworks before you're ready. Resist that urge! Strong fundamentals in HTML, CSS, and JavaScript will make everything else much easier to pick up later. Slow is smooth. Smooth is fast.
What You'll Learn in This Module
In Lesson - Introduction to the Web - you'll explore how the internet evolved, how data travels between computers, what HTTP and HTTPS mean, how browsers render web pages, and how to set up your own development environment. By the end of this module, you'll have your very first webpage running in a browser - built by you, from scratch.
Explore the Web Like a Developer
Before moving to the next lesson, do this short exploration exercise. You don't need to write any code yet - just observe and think. Use any browser you have (Chrome or Microsoft Edge is recommended).
Show hint
Knowledge Check
5 questions · Pass with 60% or more