8.1: Introduction to AI-Assisted Coding

Overview

Artificial Intelligence has revolutionized software development, making it more accessible and efficient. This lesson introduces you to AI-assisted coding and the tools available to help you build your final exam website project professionally.

What is AI-Assisted Coding?

AI-assisted coding (also called "Vibe Coding") involves using artificial intelligence tools to help you write code, debug issues, generate documentation, and accelerate development. These tools act as intelligent pair programming partners that can:

• Generate code from natural language descriptions
• Debug errors and suggest fixes
• Refactor code for better quality
• Write documentation automatically
• Explain complex code in simple terms
• Suggest improvements and best practices

Think of AI assistants as experienced developers who are always available to help, never get tired, and can work at any pace you need.

Available AI Coding Tools

International Tools

1. Cursor

• Website: cursor.com
• Description: VS Code fork with built-in AI assistance
• Best For: Full project development with context awareness
• Features:
  • Chat with your entire codebase
  • Multi-file editing
  • Command-line interface
  • Claude 3.5 Sonnet integration
• Cost: Free tier available, Pro: $20/month

2. GitHub Copilot

• Website: Integrated in VS Code
• Description: AI pair programmer by GitHub/Microsoft
• Best For: Real-time code suggestions while typing
• Features:
  • Inline code completions
  • Multi-language support
  • Trained on billions of lines of code
• Cost: $10/month (Free for students with GitHub Student Pack)

3. Claude Code

• Website: claude.com/product/claude-code
• Description: Anthropic's Claude AI for coding
• Best For: Complex reasoning and code explanations
• Features:
  • Deep understanding of context
  • Excellent at explanations
  • Can work with large codebases

4. Lovable

• Website: lovable.dev
• Description: Build web apps by chatting
• Best For: Rapid prototyping and full-stack apps
• Features:
  • Generates complete projects
  • Deploys automatically
  • Modern tech stack (React, Node.js)

Chinese/Regional AI Tools

If you're in China or prefer Chinese-language tools, these alternatives work excellently:

1. Baidu AI (文心一言)

• Website: yiyan.baidu.com and baidu.com
• Description: Baidu's ERNIE Bot for coding assistance
• Best For: Frontend development and Chinese documentation
• Features:
  • Excellent for HTML/CSS/JavaScript
  • Integrates with Trae.cn platform
  • Strong understanding of Chinese web development needs
  • Free to use with Baidu account
• Language: Chinese interface with English code support

2. Tencent Copilot (腾讯云 AI 代码助手)

• Website: copilot.tencent.com
• Description: Tencent's coding assistant
• Language: Chinese interface
• Features: Similar to GitHub Copilot, optimized for Chinese developers

3. Trae (特来)

• Website: trae.cn
• Description: Chinese AI coding platform
• Best For: Local developers with Chinese documentation
• Features: Integrates well with Baidu AI for enhanced capabilities

4. Qwen Coder (通义千问)

• Description: Alibaba's coding model
• Best For: Chinese language code generation
• Features: Optimized for Chinese developers and documentation

How AI Tools Work

AI coding assistants use large language models (LLMs) trained on millions of code repositories to:

1. Understand your intent from natural language prompts
2. Generate relevant code based on patterns learned from training data
3. Provide context-aware suggestions by analyzing your existing code
4. Explain concepts by drawing from documentation and tutorials

Key Capabilities

Code Generation

You: "Create a navigation menu with logo and 4 links"
AI: [Generates complete HTML and CSS for a navigation menu]

Debugging

You: "I'm getting 'undefined is not a function' error"
AI: [Analyzes your code, identifies the issue, suggests fix]

Refactoring

You: "Make this code more efficient and add comments"
AI: [Improves code structure, adds documentation]

Learning

You: "Explain how CSS Grid works"
AI: [Provides explanation with examples]

Setting Up Your AI Development Environment

Option 1: Cursor (Recommended for Beginners)

1. Download Cursor from cursor.com
2. Install the application
3. Sign up for a free account
4. Import your existing VS Code settings (optional)
5. Start coding with built-in AI assistance

Advantages:

• All-in-one solution
• No configuration needed
• Works offline (limited features)

Option 2: VS Code + GitHub Copilot

1. Install VS Code if not already installed
2. Sign up for GitHub Copilot ($10/month or free for students)
3. Install the Copilot extension
4. Authenticate with your GitHub account
5. Start coding with inline suggestions

Advantages:

• Works in your familiar VS Code
• Excellent inline completions
• Free for students

Option 3: Baidu AI + Trae.cn (China-based)

1. Register at yiyan.baidu.com
2. Create account at trae.cn
3. Connect Baidu AI to Trae platform
4. Start developing with Chinese-optimized tools

Advantages:

• Optimized for China network
• Free to use
• Chinese language support
• Excellent for frontend development

Your First AI-Assisted Task

Let's try creating a simple webpage with AI assistance:

Step 1: Write a Clear Prompt

Create a simple portfolio homepage with:
- A hero section with my name "Your Name" and title "Web Developer"
- A brief introduction paragraph
- Three project cards in a grid layout
- A footer with social media links
- Use modern CSS with a professional color scheme
- Make it mobile responsive

Step 2: Review the Generated Code

AI will generate HTML and CSS. Read through it and:

• Check if it meets your requirements
• Understand how it works
• Identify any parts you need to modify

Step 3: Ask for Explanations

If you don't understand something:

Can you explain how the CSS Grid layout works in this code?

Step 4: Refine and Iterate

Request improvements:

Make the hero section full-screen height and add a gradient background

Best Practices When Starting

DO:

✅ Start with small, specific requests ✅ Read and understand generated code ✅ Ask for explanations when confused ✅ Test the code in your browser ✅ Iterate and refine based on results

DON'T:

❌ Copy-paste without understanding ❌ Request entire projects at once ❌ Ignore errors or warnings ❌ Accept code you can't explain ❌ Skip testing the results

Understanding AI Limitations

AI tools are powerful but not perfect. They can:

Strengths:

• Generate boilerplate code quickly
• Suggest standard solutions
• Explain concepts clearly
• Debug common errors
• Provide multiple approaches

Limitations:

• May generate outdated code
• Can make mistakes in complex logic
• Don't understand your specific requirements unless told
• Can't test code execution
• May suggest overly complex solutions

Exercise: Create Your First AI-Generated Page

Task: Use an AI tool to create a simple "About Me" page

Requirements:

1. Header with your name
2. Profile photo placeholder
3. Three-paragraph bio
4. Skills list with icons
5. Contact button
6. Responsive design

Steps:

1. Choose an AI tool (Cursor, Copilot, or Baidu AI)
2. Write a detailed prompt describing the page
3. Generate the code
4. Review and understand what was created
5. Test in your browser
6. Ask AI to explain any confusing parts
7. Request at least one improvement

Deliverable: Save your HTML/CSS files and note what you learned about working with AI.

Next Steps

In the next lesson, you'll learn Effective Prompting Techniques to get better results from AI tools. You'll discover how to write prompts that generate exactly what you need.

Key Takeaways

Related Resources:

• Lesson 8.2: Effective Prompting Techniques
• Development Environment Setup
• Course Overview