Frontend, backend, and the space between
Frontend development is everything the user sees and touches in the browser; the backend is the warehouse working behind it.
- HTML is the structure — what is on the page
- CSS is the style — how it looks
- JavaScript is the behavior — how it responds
- The backend manages databases, business logic, and authentication
- Click "View Profile" and the frontend requests data, the backend queries the database, and the answer flows back to be painted on screen
- UI is how it looks; UX is how it feels to use
Getting your tools ready
The industry-standard editor is VS Code — free, cross-platform, and extensible.
- Install it, add it to PATH, and enable "Open with Code" in the context menu
- Live Server is the one must-have extension — it reloads the browser every time you save
- Also worth adding: Prettier, HTML CSS Support, Auto Rename Tag, Indent-Rainbow
HTML fundamentals
HTML — Hyper Text Markup Language — builds pages out of tags: an opening tag, some content, and a closing tag.
- Every page starts with
<!DOCTYPE html>and nests everything inside<html> <head>holds invisible metadata:charset,viewport,description,title<body>holds everything the visitor actually sees- Headings run from
<h1>(one per page) down to<h6> - Text tags:
<p>,<br>,<strong>,<em>,<u>,<hr> <!-- comments -->document your code without showing in the browser
Practice and pitfalls
The session ends with an About Me page that puts all of this together. Watch for the classic beginner mistakes:
- Forgetting closing tags
- Nesting tags in the wrong order
- Writing tags in uppercase
- Saving as
.txtinstead of.html - Putting visible content inside
<head> - When something breaks, lean on syntax highlighting, the browser console, and
validator.w3.org— then save, refresh, repeat