AI-Assisted Coding Guide - Build Your Website Project Faster

Overview

Artificial Intelligence has revolutionized software development, making it more accessible and efficient. This guide will help you leverage AI coding assistants to build your final exam website project professionally and efficiently.

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: VS Code extension
• 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 Alternatives

If you're in China or prefer Chinese-language tools:

1. Tencent Copilot

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

2. Trae

• Website: trae.cn
• Description: Chinese AI coding platform
• Best For: Local developers with Chinese documentation

3. Qwen Coder

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

Best Practices for AI-Assisted Development

1. Organize Your Documentation

Create a dedicated folder for AI-generated documentation:

your-project/
├── index.html
├── css/
├── js/
├── images/
└── docs/           # AI-generated documentation
    ├── project-plan.md
    ├── audit-report.md
    └── implementation-notes.md

Why? This keeps AI-generated insights organized and helps you track your project's evolution.

2. Start with Clear Prompts

The quality of AI output depends heavily on your prompts. Be specific, provide context, and state your goals clearly.

Poor Prompt: "Make a website"

Good Prompt: "Create a portfolio website with a homepage, about page, projects gallery, and contact form. Use modern CSS with a dark theme and make it responsive for mobile devices."

3. Iterative Development

Don't expect perfection on the first try. Use AI to:

1. Generate initial code
2. Review and understand it
3. Ask for improvements
4. Refine iteratively

4. Review and Understand the Code

Never copy-paste code you don't understand. Always:

• Read the generated code
• Ask the AI to explain unclear parts
• Test the functionality
• Modify as needed

AI Workflow for Your Exam Project

Follow this proven workflow to build your website project using AI assistance:

Phase 1: Concept Stage

When: You have an idea but no code yet

Prompt Template:

I'm building a [type of website] for my web development course exam. 
The website should have:
- [Feature 1]
- [Feature 2]
- [Feature 3]

Please analyze this concept and deliver a comprehensive project plan 
as a markdown file. Include:
- Recommended file structure
- Required HTML pages
- CSS architecture
- JavaScript requirements
- Potential challenges
- Development timeline

Don't hold back with critique and suggestions for improvement.

Expected Output:

• Project structure recommendations
• Technical requirements
• Potential issues to avoid
• Suggested features and improvements

Phase 2: Prototype Stage

When: You want to create initial HTML/CSS files

Prompt Template:

Create a prototype for this website project using static HTML files:

Project: [Your project description]
Pages needed: [List pages]
Style: [Describe visual style: modern, minimalist, colorful, dark theme, etc.]
Features: [List interactive features]

Please create:
1. Basic HTML structure for each page
2. CSS stylesheet with modern styling
3. Responsive design for mobile devices
4. Navigation menu linking all pages

Expected Output:

• Complete HTML files
• CSS stylesheets
• Basic responsive design
• Working navigation

Phase 3: Development Stage

When: You have code but need improvements

Prompt Template:

Analyze this web project and deliver a comprehensive audit report 
as a markdown file in the docs folder.

Please evaluate:
- HTML structure and semantics
- CSS organization and best practices
- JavaScript code quality
- Responsive design implementation
- Accessibility issues
- Performance optimization opportunities
- Browser compatibility
- Security considerations

Don't hold back with critique. I want to improve this project.

Expected Output:

• Detailed audit report
• Specific issues identified
• Actionable recommendations
• Priority list for fixes

Phase 4: Enhancement Stage

When: You want to improve existing code

Prompt Template:

Help me enhance this [specific feature/page] in my web project:

Current issue: [Describe problem]
Goal: [What you want to achieve]

Please provide:
1. Improved code with explanations
2. Best practices applied
3. Comments explaining key concepts
4. Responsive design considerations

Expected Output:

• Improved code
• Clear explanations
• Best practices implemented

Phase 5: Advanced Development (Optional)

When: You want to build a modern web application with Vue.js

Prompt Template:

Help me implement this web project using Vue.js:

Current project: [Description]
Current tech: Static HTML/CSS/JS
Goal: Convert to modern Vue.js application

Please help with:
1. Vue.js project setup with Vite
2. Component architecture
3. Migration strategy from static HTML
4. State management if needed
5. Routing between pages

Expected Output:

• Vue.js project structure
• Component-based architecture
• Modern development workflow
• Enhanced functionality

Effective Prompting Strategies

The "Persona" Technique

Ask the AI to assume a specific role:

Act as a senior web developer reviewing a junior developer's project.
Analyze my website code and provide constructive feedback focusing on:
- Code organization
- Best practices
- Accessibility
- Performance

The "Step-by-Step" Technique

Break complex tasks into steps:

I need to create a contact form. Please help me step by step:

Step 1: Create the HTML form structure
Step 2: Style it with modern CSS
Step 3: Add form validation with JavaScript
Step 4: Make it responsive for mobile

Let's start with Step 1.

The "Explain Like I'm Five" Technique

When you don't understand something:

I don't understand how CSS Grid works. Can you explain it like I'm five,
then show me a simple example I can use in my project?

The "Audit and Fix" Technique

Get comprehensive improvements:

Please audit this code and suggest improvements:

[paste your code]

Focus on:
1. Code quality and organization
2. Best practices
3. Potential bugs
4. Performance optimizations
5. Accessibility improvements

Then help me implement the top 3 most important fixes.

Project-Specific Prompt Examples

For a Portfolio Website

Create a modern portfolio website for a web developer with:

Pages:
- Home: Hero section, brief intro, featured projects
- About: Bio, skills, experience timeline
- Projects: Grid of project cards with filtering
- Contact: Contact form and social links

Style: 
- Clean, minimalist design
- Dark mode with accent color
- Smooth animations
- Mobile-first responsive

Technical requirements:
- Semantic HTML5
- CSS Grid and Flexbox
- Vanilla JavaScript (no frameworks)
- Form validation
- Smooth scrolling navigation

For a Blog Website

Create a blog website with:

Pages:
- Home: Latest posts preview
- Blog: All posts with categories
- Single post: Full article view with comments section
- About: Author bio

Features:
- Reading time estimates
- Category filtering
- Search functionality
- Responsive image galleries
- Social sharing buttons

Style: Modern, readable typography with good contrast

For an E-commerce Shop

Create a simple e-commerce website with:

Pages:
- Home: Featured products, categories
- Shop: Product grid with filters
- Product detail: Images, description, add to cart
- Cart: Shopping cart with checkout form

Features:
- Product filtering and sorting
- Add to cart functionality (localStorage)
- Cart total calculation
- Responsive product grid
- Image gallery on product pages

Note: No real payment processing needed (exam project)

For a Browser Game

Create a browser-based [type of game] with:

Features:
- Game start screen
- Interactive gameplay area
- Score tracking
- High scores (localStorage)
- Game over screen with restart
- Responsive controls

Technical:
- HTML5 Canvas or DOM elements
- JavaScript game loop
- Keyboard/touch controls
- Simple animations

Style: Fun, colorful, engaging UI

Taking AI Audits Seriously

When an AI audits your code, it often identifies real issues. Here's how to handle audit feedback:

1. Prioritize Issues

Not all issues are equal. Focus on:

Critical (Fix immediately):

• Broken functionality
• Accessibility violations
• Security vulnerabilities
• Non-responsive design

Important (Fix before submission):

• Code organization
• Best practices violations
• Performance issues
• Browser compatibility

Nice to Have (If time permits):

• Minor optimizations
• Advanced features
• Polish and refinements

2. Learn from Critiques

Each audit is a learning opportunity:

[After receiving audit feedback]

"Thank you for the audit. I see you mentioned [specific issue].
Can you explain why this is a problem and teach me the correct approach?
Then help me implement the fix with explanations."

3. Implement Fixes Systematically

Work through issues methodically:

I want to fix all the issues from your audit. Let's work through them
one by one, starting with the most critical. 

First issue: [describe issue]
Please provide:
1. Explanation of why it's a problem
2. The fix with code
3. How to prevent this in the future

Recommended Development Workflow

Here's a proven workflow for your exam project:

Week 1: Planning and Setup

1. Brainstorm and choose your project idea
2. Submit proposal to instructor
3. Generate project plan using AI
4. Create file structure based on recommendations
5. Set up development environment

Key Prompt:

Create a detailed project plan for my [type] website including
file structure, pages needed, features, and a week-by-week timeline.

Week 2-3: Core Development

1. Generate initial HTML pages
2. Create CSS styling
3. Add basic JavaScript functionality
4. Test on different devices/browsers
5. Request AI audit and fix critical issues

Key Prompt:

Generate the complete HTML and CSS for [specific page] with
[describe features and style]. Make it responsive and accessible.

Week 4: Enhancement and Polish

1. Add advanced features
2. Optimize performance
3. Improve accessibility
4. Add documentation
5. Final testing

Key Prompt:

Help me enhance my project with:
1. Smooth animations
2. Better UX
3. Performance optimizations
4. Final polish

Analyze what would make it stand out.

Week 5: Finalization

1. Final AI audit
2. Fix remaining issues
3. Test presentation (2 minutes)
4. Create ZIP for submission
5. (Optional) Deploy to web hosting

Key Prompt:

Perform a final comprehensive review of my website project.
Check everything: functionality, design, code quality, accessibility.
Help me make final improvements before submission.

Debugging with AI

When you encounter errors:

1. Share the Error Message

I'm getting this error in my browser console:

[paste error message]

This is the code causing the issue:

[paste relevant code]

What's wrong and how do I fix it?

2. Describe the Problem

My [feature] isn't working correctly. Here's what happens:

Expected behavior: [describe]
Actual behavior: [describe]
Browser: [Chrome/Firefox/Safari]

Here's my code:
[paste code]

3. Ask for Explanations

Can you explain why this error occurs and what the fix does?
I want to understand so I can avoid this in the future.

Ethical Considerations

Using AI Responsibly

✅ DO:

• Use AI to learn and understand concepts
• Ask AI to explain code it generates
• Use AI to debug and improve your code
• Leverage AI for documentation and planning
• Use AI as a learning tool and teacher

❌ DON'T:

• Copy-paste without understanding
• Submit code you can't explain
• Rely solely on AI without learning
• Use AI to circumvent learning objectives
• Plagiarize or claim AI work as entirely your own

Preparing for Your Presentation

You must present your project for ~2 minutes. Be ready to:

1. Explain your design choices
   • Why did you choose this layout?
   • What inspired the color scheme?
2. Discuss technical decisions
   • Why did you structure the code this way?
   • What challenges did you face?
3. Demonstrate features
   • Show the key functionality
   • Explain how it works
4. Answer questions
   • Be prepared to discuss any part of your code
   • Explain concepts you used

Common Pitfalls and How to Avoid Them

Pitfall 1: Over-Reliance on AI

Problem: Accepting everything AI generates without review

Solution:

• Always test generated code
• Ask "why" and "how" questions
• Modify code to fit your needs
• Learn from each generation

Pitfall 2: Vague Prompts

Problem: "Make my website better"

Solution: Be specific

Improve the navigation menu by:
1. Making it sticky on scroll
2. Adding smooth transitions
3. Highlighting the current page
4. Making it responsive with a hamburger menu on mobile

Pitfall 3: Ignoring Context

Problem: Asking for features that don't fit your project

Solution: Always provide context

My project is a [type] website currently using vanilla JavaScript.
I need to add [feature] that fits with my existing code structure.
Here's my current code: [paste relevant parts]

Pitfall 4: Not Testing

Problem: Assuming AI-generated code works perfectly

Solution:

• Test every feature in multiple browsers
• Test on different screen sizes
• Validate HTML and CSS
• Check console for errors

Pitfall 5: Skipping Documentation

Problem: Not documenting AI sessions and decisions

Solution: Keep a development log

docs/
├── development-log.md      # Daily progress notes
├── ai-sessions.md          # Important AI conversations
├── decisions.md            # Why you made certain choices
└── audit-reports.md        # AI audit findings and fixes

Advanced Tips for Success

1. Iterative Refinement

Don't accept the first generation. Iterate:

Round 1: "Create a hero section for my homepage"
Round 2: "Make the hero section more modern with a gradient background"
Round 3: "Add an animated call-to-action button"
Round 4: "Make it fully responsive with different layouts for mobile"

2. Combine Multiple Tools

Different AI tools have different strengths:

• Cursor: Full project development and refactoring
• Copilot: Quick inline completions while coding
• ChatGPT/Claude: Planning, explanations, debugging

3. Learn Keyboard Shortcuts

In Cursor:

• Cmd/Ctrl + K: Generate code
• Cmd/Ctrl + L: Chat with AI
• Cmd/Ctrl + I: Inline edit

4. Version Control

Use Git to track changes:

git init
git add .
git commit -m "Initial version"

# After major changes
git commit -m "Added contact form with AI assistance"

This lets you:

• Revert if AI generates bad code
• Track your progress
• Show your development process

5. Build a Prompt Library

Save your best prompts for reuse:

# My Prompt Library

## Code Review
[Your best audit prompt]

## Feature Generation
[Your best feature request prompt]

## Debugging
[Your best debugging prompt template]

Tools and Resources

Browser Extensions

• Web Developer Toolbar: Inspect and debug
• ColorZilla: Pick colors from websites
• Lighthouse: Audit performance and accessibility
• Responsive Viewer: Test multiple screen sizes

Online Tools

• CodePen: Quick prototyping and testing
• Can I Use: Check browser compatibility
• W3C Validator: Validate HTML/CSS
• Google PageSpeed Insights: Performance testing

AI Playgrounds

• chat.openai.com: ChatGPT for planning and debugging
• claude.ai: Claude for detailed explanations
• cursor.com: Download for full IDE experience

Example: Complete Project Development

Let's walk through building a portfolio website:

Session 1: Initial Planning

Prompt:

I need to create a portfolio website for my web development exam.

Requirements:
- Homepage with hero section and featured projects
- About page with bio and skills
- Projects page with filtering
- Contact page with form
- Mobile responsive
- Modern, professional design

Please create:
1. A detailed project plan
2. File structure
3. Technology recommendations
4. Timeline for 4 weeks of development

Session 2: Generate Homepage

Prompt:

Create the homepage HTML and CSS for my portfolio website:

Features:
- Full-height hero section with my name and title "Web Developer"
- Animated gradient background
- Smooth scroll-down arrow
- Featured projects section (3 project cards)
- Modern, minimalist design
- Mobile responsive
- Dark theme with accent color #00ff88

Make it semantic HTML5 with clean, commented CSS.

Session 3: Add Interactivity

Prompt:

Add JavaScript to my portfolio homepage:

Features needed:
1. Smooth scrolling for navigation
2. Fade-in animations on scroll
3. Project card hover effects
4. Mobile menu toggle
5. Active navigation highlighting

Please provide vanilla JavaScript with comments explaining each function.

Session 4: Audit and Improve

Prompt:

Audit my portfolio website code and provide improvement suggestions:

[paste your code]

Please evaluate:
- HTML semantics and accessibility
- CSS organization and efficiency
- JavaScript performance
- Responsive design
- Browser compatibility
- Overall code quality

Provide specific fixes for the top 5 issues.

Final Checklist

Before submitting your exam project, verify:

Functionality

• All pages load correctly
• Navigation works on all pages
• All interactive features function properly
• Forms validate correctly (if applicable)
• No console errors in browser

Design

• Consistent styling across all pages
• Responsive on mobile, tablet, and desktop
• Images load and are optimized
• Color contrast is good (accessibility)
• Typography is readable

Code Quality

• HTML is semantic and valid
• CSS is organized and commented
• JavaScript is clean and efficient
• No broken links or missing files
• Code is properly indented

Documentation

• README file explains the project
• Comments in complex code sections
• You understand all the code
• You can explain your design decisions

Submission

• All files in correct folder structure
• Compressed as ZIP file
• Presentation rehearsed (~2 minutes)
• Ready to answer questions about code

Getting Help

If you encounter issues with AI tools or your project:

1. During Class: Ask the instructor for guidance
2. Email: landrock@salon.io with specific questions
3. AI Debugging: Provide detailed error messages and context
4. Peer Review: Ask classmates for feedback (but submit individual work)

Summary

AI-assisted coding is a skill that will benefit you throughout your career. Use this opportunity to learn both web development AND how to effectively collaborate with AI tools.

Good luck with your exam project! 🚀

Quick Reference: Essential Prompts

Save these for quick access:

PROJECT AUDIT:
"Analyze this project and deliver a comprehensive report in English 
as a markdown file in docs folder. Don't hold back with critique."

PROTOTYPE CREATION:
"Create a prototype for this website project using static HTML files: 
[describe project]"

BUG FIXING:
"I'm getting this error: [error message]. Here's my code: [code]. 
What's wrong and how do I fix it with explanation?"

CODE EXPLANATION:
"Explain this code like I'm a beginner learning web development: [code]"

FEATURE IMPLEMENTATION:
"Add [feature] to my project. Here's my current code: [code]. 
Make it fit with my existing structure and explain what you changed."

VUE.JS UPGRADE:
"Help me implement this web project using Vue.js. Current tech: 
Static HTML/CSS/JS. Guide me step-by-step."

Related Resources:

• Node.js Setup Guide - Required for Vue.js development
• Phase 7: Vue.js - Advanced framework lessons
• Course Overview - Full curriculum and lessons