• ✅ Install VS Code
• ✅ Install Google Chrome
• ✅ Create GitHub Account
• ✅ Create or Login to ChatGPT Account
• ✅ Install Node.js (LTS Version)
• ✅ Install Git
• ✅ Create Vercel Account
• ✅ Install GitHub Copilot in VS Code
• ✅ Have a stable internet connection

"Thank you everyone for joining IntelliTalent AI Web Academy.

Today we begin learning how AI can help us build amazing modern websites."

Artificial Intelligence (AI) is technology that helps computers assist humans with tasks like:

• generating ideas
• creating content
• writing code
• building websites
• designing graphics
• answering questions

• Businesses use AI
• Designers use AI
• Developers use AI
• AI helps speed up creativity
• AI is becoming a major future skill

"AI is helping people build faster, smarter, and more creatively."

Today's most exciting websites span a wide range of industries:

• Gaming websites
• Sports websites
• Startup websites
• Fashion websites
• Modern AI websites

Key design elements that make modern websites stand out:

• animations
• modern layouts
• glowing effects
• hero sections
• cards
• responsive mobile design

Students will:

• create their own website
• submit after Session 3
• present during Session 4
• compete for prizes

Potential prizes:

🥇 $100 Gift Card

🥈 $50 Gift Card

🥉 $25 Gift Card

"Your creativity matters most."

Visual Studio Code (VS Code) is the main software we use to build websites.

Key areas to know inside VS Code:

• Editor area — where you write your code
• File Explorer — navigate and manage project files
• Extensions panel — install powerful tools and plugins
• Integrated terminal — run commands directly inside VS Code

Website: https://code.visualstudio.com/

GitHub stores projects online and connects with AI tools.

Website: https://github.com/

"Developers all over the world use GitHub."

GitHub Copilot is an AI coding assistant. It helps:

• generate website sections
• create layouts
• build buttons
• create animations
• generate ideas

Install these two extensions in VS Code:

• GitHub Copilot
• GitHub Copilot Chat

"AI helps speed up website creation."

What Is GitHub Copilot Agent Used For?

GitHub Copilot Agent is a powerful AI coding assistant built directly into VS Code. Here is what it can help you do as a student and developer:

• 🌐 Build websites and apps faster — Generate entire sections, pages, and components in seconds using simple descriptions
• ⚡ Generate code automatically — Write HTML, CSS, JavaScript, TypeScript, and React code based on what you ask for
• 🐛 Debug and fix errors — Identify bugs, understand what went wrong, and get smart suggested fixes instantly
• 🎨 Create UI components and layouts — Build navbars, hero sections, buttons, cards, forms, and fully responsive designs
• 📖 Explain code and concepts — Ask Copilot to explain any line of code in plain English so you actually understand it
• 🔁 Automate repetitive tasks — Quickly refactor, rename, reformat, and update code patterns across your project
• 🚀 Boost productivity and learning — Work like a real professional developer and learn faster through hands-on AI-assisted building
• 🔍 Assist with SEO, metadata, forms, APIs, and responsive design — Build production-quality, real-world web projects from day one
• 📁 Work across multiple files and project structures — Copilot Agent understands your full project and can help across multiple files at once
• ✨ Support modern technologies — Works seamlessly with Next.js, React, TypeScript, Tailwind CSS, and Vercel deployments

ChatGPT helps generate:

• ideas
• prompts
• content
• website concepts
• troubleshooting help

Website: https://chatgpt.com/

"We communicate with AI using prompts."

Vercel publishes websites LIVE online — no server setup required.

Website: https://vercel.com/

"You will publish your real website to the internet during this academy."

Definition: The large top section of a website — the first thing visitors see.

A hero section typically contains:

• title
• subtitle
• buttons
• background image or video

A real example: "Welcome to IntelliTalent AI Web Academy"

Definition: Clickable actions users interact with.

• Join Now
• Learn More
• Submit Project

Definition: Modern content boxes used to organize content.

• prize cards
• showcase cards
• service cards

Definition: Moving visual effects.

• floating effects
• fade-in animations
• glow hover effects
• motion animations

Definition: Content assisted or created using AI.

• headlines
• layouts
• design ideas
• code
• images

Website: https://code.visualstudio.com/

• Open browser and go to VS Code website
• Click "Download"
• Select: Windows / Mac / Linux
• Install using default settings
• Open VS Code

"Help me download and install Visual Studio Code on my computer."

In VS Code, click the 🧩 Extensions icon on the left sidebar.

• Search: GitHub Copilot
• Click ✅ Install
• VS Code will show a prompt — click Sign in to GitHub and complete the browser login to activate Copilot

"GitHub Copilot is your AI coding assistant — it writes, explains, and fixes code as you type."

Still in VS Code Extensions (🧩):

• Search: GitHub Copilot Chat
• Click ✅ Install
• A chat icon will appear in the left sidebar
• Click it to open the Copilot Chat panel
• Type any question or prompt and press Enter

"GitHub Copilot Chat lets you ask AI questions, get explanations, and build features using natural language — directly inside VS Code."

Website: https://www.google.com/chrome/

• Download and install Chrome
• Open Chrome and set as default browser (recommended)

Website: https://nodejs.org/

• Download ✅ LTS Version
• Install using default settings
• ⚠️ Restart your computer after installation — required so Node.js is added to PATH and detected by VS Code

"Node.js helps modern website projects run locally."

"Help me download and install the LTS version of Node.js from nodejs.org."

Verify Node.js Installation

Ask GitHub Copilot to verify Node.js is installed correctly:

"Verify that Node.js and npm are installed on my computer and show me the version numbers."

Website: https://git-scm.com/downloads

• Download Git for: Windows / Mac / Linux
• Install using default settings
• ⚠️ Restart VS Code after installation — required for Git to be detected in the terminal

"Git is used for version control, saving project changes, and publishing websites."

"Help me download and install Git from git-scm.com on my computer."

Verify Git Installation

Ask GitHub Copilot to verify Git is installed correctly:

"Verify that Git is installed on my computer and show me the version number."

⚙️ Configure Git Identity

This is a required one-time setup step. Git needs your name and email to label your commits correctly. Without this, git commit will fail with an error.

Ask GitHub Copilot to configure Git for you:

"Help me configure my Git username and email address for the first time."

Copilot will run two commands for you — they will look like this:

• git config --global user.name "Your Name"
• git config --global user.email "your@email.com"

Use the same email address you used to create your GitHub account.

Website: https://github.com/signup

• Click "Sign Up"
• Enter email, password, username
• Verify email address

• Open VS Code
• Click the Accounts icon (bottom-left)
• Click "Sign in with GitHub"
• Browser opens — login to GitHub
• Click "Authorize"

"This connects VS Code with GitHub and unlocks GitHub Copilot AI tools."

Website: https://vercel.com/signup

• Click "Continue with GitHub" OR "Continue with Google"
• Create account

Website: https://chatgpt.com/

• Create free account OR login
• Verify email if required

"ChatGPT helps generate ideas, website content, animations, and creative inspiration using AI."

"We communicate with AI using prompts."

Introduction to VS Code Terminal

"The terminal is where developers run commands for modern website projects."

Ask GitHub Copilot to open and explain the VS Code terminal:

"How do I open the terminal in VS Code and what is it used for?"

Enable Auto Save

"Auto Save ensures your work is saved automatically as you type — no manual saving needed."

Ask GitHub Copilot to enable it for you:

"How do I enable Auto Save in VS Code?"

Create Project Folder

Students should create an organized folder structure:

• Create a folder named: IntelliTalentProjects
• Inside it, create: Session1Project

"This helps organize projects cleanly and professionally."

📂 Open Your Project Folder in VS Code

After creating the folder, you need to open it inside VS Code so you can start working:

• In VS Code, click File in the top menu
• Click Open Folder...
• Navigate to your IntelliTalentProjects / Session1Project folder
• Click Select Folder (Windows) or Open (Mac)
• The File Explorer on the left sidebar will now show your project folder

"How do I open a project folder in VS Code?"

Optional — Install VS Code Themes

Students can personalize their coding environment with modern themes.

Suggested themes:

• GitHub Dark
• Tokyo Night
• One Dark Pro

Instructions: Click 🧩 Extensions → search theme name → Install → Set Color Theme.

🌐 Website Building

• "Help me create a modern website homepage"
• "Create a modern animated hero section"
• "Help me create a responsive mobile layout"

⚙️ Project Setup

• "Install all required project dependencies"
• "Help me organize my project folders"

🐙 GitHub & Deployment

• "Help me connect this project to GitHub"
• "Commit all changes and push to my GitHub repository"
• "Help me deploy this project to Vercel"
• "Help me fix deployment errors"

🔧 Troubleshooting

• "Help me troubleshoot my website"

Live AI Demo

Watch a live AI-powered website build in real time, including:

• AI-generated hero section
• buttons, cards, layouts, and animations
• a fully styled modern website design

Example AI Prompt

"Create a futuristic AI gaming website hero section with glowing buttons and animated background."

After running this prompt, GitHub Copilot generates:

• complete website code
• a live preview in the browser
• a fully styled modern website section

Open your browser and go to: https://github.com

If you already created a GitHub account during setup, sign in. If not, click Sign Up and follow the steps to create a free account.

Once logged in, look for the + icon near the top-right corner of the page and click it.

From the dropdown menu, click New Repository. This creates a new home for your website project.

Give your repository a clear, professional name. Examples:

• my-ai-website
• intellitalent-project
• session1-website

Keep it lowercase with dashes — no spaces allowed in repository names.

Public — anyone on the internet can view your project.

Private — only you and people you invite can see it.

For this academy, Public is recommended so Vercel can deploy it easily.

Check the box that says Add a README file. This creates a starting file in your repository so it is not empty.

Scroll down and click the green Create Repository button. Your GitHub repository is now ready!

Open VS Code and navigate to your project folder using the File Explorer on the left sidebar.

Click the GitHub Copilot Chat icon in the left sidebar of VS Code. This opens the AI assistant chat window.

In the Copilot Chat box, type this prompt:

"Help me connect this project to my GitHub repository."

Copilot will walk you through the connection steps.

"Prepare this project so it can be pushed to GitHub."

Copilot will help initialize the project for GitHub if it is not already connected.

"Commit all changes with a clear message."

Committing means saving a snapshot of your current project with a short description of what changed.

"Push my latest project changes to GitHub."

Pushing sends your saved project files up to GitHub where they are stored online.

Open GitHub in your browser, go to your repository, and refresh the page. Your project files should now appear!

"Check if my project is connected to the correct GitHub repository."

💡 Copilot Prompts — Pushing to GitHub

Use these prompts in Copilot Chat whenever you need help:

• "Help me connect this project to my GitHub repository."
• "Prepare this project so it can be pushed to GitHub."
• "Commit all changes with a clear message."
• "Push my latest project changes to GitHub."
• "Check if my project is connected to the correct GitHub repository."

Open your browser and go to: https://vercel.com

Click Continue with GitHub. This links your Vercel account to your GitHub account so they can work together.

After logging in, click the Add New button on the Vercel dashboard.

From the dropdown, click Project to import a project from GitHub.

Vercel will show a list of your GitHub repositories. Find the repository you created and click Import next to it.

Confirm the import. Vercel will load your project settings automatically.

Vercel will auto-detect the type of project. For Next.js projects, it will already show Next.js as the framework. Keep the settings as they are unless your instructor says otherwise.

Click the big Deploy button. Vercel will start building your live website!

Vercel will usually auto-detect Next.js. If it does not, select it from the framework dropdown menu.

Leave all settings at their defaults unless your instructor specifically tells you to change something.

If your project uses special private keys (like Stripe or email), you will need to add them here. If not, skip this step for now — you can always add them later.

Click the Deploy button to start the build process.

Vercel will take a minute or two to build your website. You will see a progress log on screen. When it is done, you will receive a live website link you can share!

Open: https://vercel.com/dashboard

Click on your project name to open the project details page.

Click the Settings tab at the top of the project page.

In the left sidebar, click Environment Variables.

For each key your instructor provides, enter the Name and Value exactly as given. Examples of common environment variable types:

• API keys — for connecting to external services
• Stripe keys — for payment processing
• Resend email keys — for sending automated emails
• OpenAI keys — for AI-powered features

Click Save after entering each key.

After adding environment variables, go to the Deployments tab, click the three dots next to the latest deployment, and select Redeploy. This applies the new variables to your live website.

🚨 Security Reminder

• ❌ Never upload .env files to GitHub
• ❌ Never share API keys, Stripe keys, or secret keys publicly
• ❌ Never paste passwords or secrets directly into your code
• ✅ Always add private keys in the Vercel dashboard only
• ✅ Always add .env.local to your .gitignore file

🔄 Your Modern Developer Workflow

Make your changes — update content, improve designs, add new sections.

"Review my latest website changes."

"Commit all changes and push to GitHub."

Copilot will commit and push your latest changes to GitHub in one step.

Within 1–2 minutes, Vercel detects the new GitHub push and rebuilds your live website. No extra steps needed!

💡 Copilot Prompts — Future Updates

• "Review my latest website changes."
• "Commit all changes and push to GitHub."
• "Check why my Vercel deployment failed."
• "Fix any build errors before deployment."
• "Make sure this project is ready for Vercel."

• ✅ Create GitHub account (if not done yet)
• ✅ Create Vercel account (if not done yet)
• ✅ Create one GitHub repository
• ✅ Connect GitHub to Vercel
• ✅ Deploy one test website
• ✅ Save the live website link
• ✅ Bring any questions to Session 2

Competition Timeline

Homework Assignment

Students should:

• ✅ Think about website idea
• ✅ Choose theme/colors
• ✅ Find inspiration websites
• ✅ Write simple AI prompts

Possible ideas:

• gaming website
• sports website
• fashion website
• startup website
• anime website
• personal portfolio

🌐 intellitalentacademy.com

💡 Explore with GitHub Copilot

Students can use these Copilot prompts to learn more about any section:

• "Explain how a Hero Section is built in Next.js."
• "Show me how to create a Navbar component in React."
• "Build a Pricing Section with two plan cards."
• "Create a FAQ accordion section using React."
• "Show me how to build a Footer with navigation links."