What a website is made of
Lesson 3 of 26 in the course “Vibe coding”. Free, with animations and a quiz.
Frontend: what you see
Frontend is everything that loads in the browser, meaning what you see and tap. It's built with three languages. HTML: structure, meaning headings, buttons, images. CSS: looks, meaning colors, fonts, layout. JavaScript (JS): behaviour, meaning what happens when you tap a button. In short: HTML is the skeleton, CSS the outfit, JS the moves.
Backend: checks and keys
Backend, or server, is code that runs not in your browser but on a computer in the cloud, meaning in a data center, a big building full of servers. Visitors can't see this code. That's why the important stuff happens there: checking your password at login, calculating an order total, talking to paid services with secret keys. The frontend asks, the backend checks and answers.
Database: the project's memory
A database is where data is stored, like a giant spreadsheet. Users, orders, high scores in a game, your streak in a tracker. Close the tab and the frontend forgets everything, but the database remembers. Usually the backend talks to it: it decides who may read or change what. In the picture it's the cylinder on the right, the traditional way to draw a database.
Hosting, domain and DNS
Hosting is a computer that serves your site around the clock to anyone who opens it. A domain is a human name like mysite.com, so nobody has to remember the server's number address. DNS links them, the internet's phone book: the browser asks “where does mysite.com live?” and gets the hosting's address. You buy your own domain from a registrar and renew it, usually once a year.
Site or app
A static site is frontend only: everyone gets the same pages. A landing page, a portfolio, a calculator: they need no server and no database. An app is frontend plus backend and a database. Example: a habit tracker. The “done” buttons and the stats screen: frontend. Logging in with a password: backend. Your saved streak of days: database. A static site is simpler to build and to host.
Why this matters
Once you know the parts, it's clear which service you need and what to ask the AI for. Code is stored on GitHub. Hosts like Cloudflare or Vercel publish the site. Services like Supabase give you a database. More on that in later levels. Many have a free plan; check the limits on the service's site. And tell the AI up front: “this is a static site” or “I need login and a database”.
Check yourself
- Where should a user's password be checked?
Correct answer: On the backend, meaning the server. Any visitor can read the frontend code. Checks and secrets live on the server, which nobody can see. - What does DNS do?
Correct answer: Finds the hosting's address by domain name. DNS works like a phone book: from the name mysite.com the browser learns which computer holds the site. - A three-page portfolio of your work. What does it need?
Correct answer: Just a frontend and hosting. Everyone sees the same thing and nothing is saved: it's a static site. A server and a database are overkill here.