Build your first page

Let’s do this

1. 1
   In your AI helper

   Approve the small plan

   Use the message below once the plan matches your idea. Tell the AI to build in the existing folder. It can install the chosen free packages. For a new Vite project, the dot in the example command means “right here”; you do not need to run it yourself if the helper is doing setup.

   npm create vite@latest . -- --template react-ts
   npm install

2. 2
   In your AI helper

   Use content you can judge

   For Little Garden, ask for a title, a short explanation, a plant-name input, an Add plant button and an empty-list message. For a business site, use the actual service name and a working email link. Do not accept a row of impressive-looking buttons with no job.

3. 3
   In Finder

   Understand the few files you will see

   Ask the AI to point them out in Finder: src holds the screen code, public holds files such as pictures, and package.json lists the tools and commands. node_modules is a downloaded tools folder. You rarely need to touch it. The folder may contain other setup files; have the AI explain them when needed.

4. 4
   In your AI helper

   Have the AI start the preview

   Ask it to run the development command from your project and give you the full local address it prints. Keep the task or terminal running. The next lesson walks through opening the preview and checking changes.