No history yet

Introduction to Web Development

How Websites Get to Your Screen

When you type a website address into your browser and hit Enter, you kick off a rapid-fire conversation across the internet. Your computer, known as the client, sends a request for the website. This request travels to a powerful, specialized computer called a server, which stores all the files that make up the website.

The server finds the right files and sends them back to your browser. Your browser then reads these files and displays the website on your screen. This whole exchange, called the client-server model, usually happens in just a couple of seconds.

The files the server sends are mainly written in three languages: HTML, CSS, and JavaScript. Each one has a specific job in building what you see and interact with.

The Two Sides of a Website

Every website or web application is built in two parts: the front-end and the back-end. They work together, but they handle very different tasks.

Front-End Development This is everything your browser downloads and displays. It's also called "client-side" development because it happens on the client's (your) computer. The front-end is built with three core technologies:

  • HTML (HyperText Markup Language): This provides the basic structure and content of a page—the text, images, and links. It's the skeleton.
  • CSS (Cascading Style Sheets): This language styles the HTML content. It controls colors, fonts, and the layout of the page. It's the paint and furniture.
  • JavaScript (JS): This makes the website interactive. Animations, pop-up menus, and form validations are all handled by JavaScript. It's the electricity and plumbing.

Think of a house. HTML is the frame and walls. CSS is the paint, wallpaper, and decorations. JavaScript is what makes the light switches and faucets work.

Lesson image

Back-End Development This is the "server-side" of the website—the machinery you don't see. When you log in to an account, save a post, or buy something online, the back-end goes to work.

  • Web Server: This is the software that receives requests from the front-end. It runs the application's logic. For example, when you try to log in, the server gets your username and password and runs code to check if they are correct.
  • Database: This is where the application's data is stored in an organized way. User accounts, product information, comments, and posts all live in a database. The web server talks to the database to store, retrieve, and update information.

Putting It All Together

Let's trace a simple action, like posting a comment on a blog.

  1. You type your comment into a text box on the blog post. This box is an HTML element, styled with CSS.
  2. You click the "Submit" button. JavaScript grabs the text you wrote and sends it as a request to the server.
  3. The back-end server receives the request. It might run a quick check to make sure you didn't post something inappropriate.
  4. The server then tells the database to save your comment, along with the date and time.
  5. Finally, the server sends a response back to your browser, often including the new comment. Your page updates to show what you just posted, sometimes without even needing to reload.

Every time you interact with a modern website, from liking a photo to searching for a product, this front-end and back-end conversation is happening behind the scenes.

Ready to check your understanding? Let's see what you've learned.

Quiz Questions 1/5

In the client-server model, what is the role of the 'client'?

Quiz Questions 2/5

Which technology is primarily responsible for a website's structure and content, like text, images, and links?

Understanding these core pieces is the first step in learning web development. Everything builds on the relationship between the client and the server, and the distinct roles of the front-end and back-end.