A simple, beginner-friendly setup that lets you create web pages and see your changes instantly in the browser.

This is a development environment that makes it easy to build web pages. When you save changes to your files, the browser automatically updates without needing to refresh the page manually. It's like magic!

1. Install Node.js (if you haven't already)

   • Go to nodejs.org
   • Download and install the LTS version
   • This gives you the tools needed to run the project

2. Install Project Dependencies

   • Open your terminal or command prompt
   • Navigate to this folder
   • Run this command:

     npm install
     

   • This installs everything needed to run the project (you only need to do this once)

1. Start the Development Server

   • In your terminal, run:

     npm run dev
     

   • Your browser will automatically open to show your web page
   • The terminal will show you the local address (like http://localhost:5174/)

2. Make Changes

   • Open index.html in any text editor (VS Code, Sublime, Notepad++, etc.)
   • Edit the HTML or CSS
   • Save the file
   • Watch your browser update automatically!

3. Stop the Server

   • When you're done, press Ctrl+C in the terminal to stop the server

This is your main web page. You can edit:

• The HTML structure (headings, paragraphs, buttons, etc.)
• The CSS styles inside the <style> tags
• Any text content

This is where your JavaScript/TypeScript code lives. Edit this file if you want to:

• Add interactive features
• Respond to button clicks
• Manipulate the page content
• Add animations or dynamic behavior

Note: TypeScript is just JavaScript with extra features for catching errors. If you know JavaScript, you can write regular JavaScript here and it will work fine!

Simply edit index.html and save. You'll see changes instantly!

Edit main.ts to add JavaScript functionality. The file is already set up with a simple counter example.

Delete everything in index.html and main.ts and start with your own code!

• Keep the terminal open while you work - it needs to be running for the auto-reload to work
• Save your files after making changes to see them update
• Check the browser console (F12 in most browsers) if something isn't working
• The server must be running (npm run dev) for your page to work

When you're ready to share your project or put it online:

npm run build

This creates an optimized version in a dist folder that you can upload to any web hosting service.

• If you see errors in the terminal, try stopping the server (Ctrl+C) and running npm run dev again
• If things aren't updating, make sure you saved your files
• Clear your browser cache if old content is showing
• Make sure Node.js is installed correctly by running node --version in your terminal

• Vite - A fast development server with hot reload
• TypeScript - Optional type-safe JavaScript
• ES6+ Support - Modern JavaScript features
• Instant Updates - See changes without refreshing

Happy coding!