📦 Create the SvelteKit Project

What is SvelteKit?

Remember in Module 1 when you wrote an HTML file, a CSS section, and a JavaScript section all by hand? That works — you proved it. But real websites have dozens or hundreds of pages, shared navigation, reusable pieces, and a lot of wiring to hold it all together.

A framework handles that wiring for you. SvelteKit is one of the best modern frameworks. It gives you:

• A way to organize your pages
• Reusable building blocks (called components)
• A built-in development server so you can see changes instantly
• Tools to build and deploy your site

Think of it this way: in Module 1 you carved a block of wood into a race car. Now you're opening a model rocket kit. The fins, the body tube, the nose cone — they're pre-shaped. Your job is to assemble them, customize them, and launch.

Create the project

npx sv create web

When prompted:

• Select SvelteKit minimal
• Select TypeScript
• You can skip or decline any other options (eslint, prettier, etc. — we'll keep it simple)

This creates a folder called web with your entire project inside it.

What is npx? It runs a package directly without installing it permanently. Think of it as "use this tool once to set things up."

What is npm? It's the Node Package Manager — a massive library of pre-built code that anyone can use. When you npm install something, you're pulling in code that other developers wrote and shared. This is normal and good. Professional developers use hundreds of packages.

Install and start

cd web
npm install
npm run dev

npm install downloads all the packages your project needs. npm run dev starts a local development server.

Open your browser and go to: http://localhost:5173

You should see a simple welcome page.

What does localhost:5173 mean? localhost means "this computer" — you're running a tiny web server right here on your machine. 5173 is the port number — think of it like a door number in an apartment building. Your computer has thousands of ports, and Svelte picked door 5173.