8.4: Building with AI Assistance

Overview

Now that you have a solid project plan, it's time to start building. This lesson teaches you how to effectively generate code with AI, understand what's created, test it properly, and integrate it into your project.

The AI-Assisted Build Workflow

Step 1: Generate Initial Code

Start with clear, specific prompts based on your project plan.

Prompt Template for Pages:

Create the [page name] for my [project type] website.

Purpose: [What this page does]

Content and Structure:
- [Element 1]
- [Element 2]
- [Element 3]

Design Requirements:
- Style: [Modern/Minimalist/Bold/etc.]
- Color scheme: [Primary: #xxx, Accent: #xxx]
- Layout: [Grid/Flexbox/etc.]
- Typography: [Font preferences]

Technical Requirements:
- Semantic HTML5
- Mobile-responsive
- Accessible (ARIA labels where needed)
- Comments explaining key sections

Please provide:
1. Complete HTML with semantic structure
2. CSS organized by sections
3. Explanation of key design decisions
4. Mobile responsiveness approach

Example - Homepage:

Create the homepage for my portfolio website.

Purpose: Introduce visitors to my web development skills and showcase featured projects

Content and Structure:
- Navigation bar with logo and links (Home, Projects, About, Contact)
- Hero section with my name "Alex Chen", title "Frontend Developer", and brief tagline
- Featured Projects section with 3 project cards
- Skills section showing HTML, CSS, JavaScript, Vue.js
- Call-to-action button linking to contact page
- Footer with social media links

Design Requirements:
- Style: Modern, minimalist with professional feel
- Color scheme: Primary: #1a1a2e, Accent: #00ff88, Background: #ffffff
- Layout: Grid-based, centered content max-width 1200px
- Typography: Sans-serif, clean headings

Technical Requirements:
- Semantic HTML5 (header, nav, main, section, footer)
- Mobile-responsive (breakpoints at 768px, 480px)
- Accessible (proper heading hierarchy, alt text)
- Smooth scroll behavior
- Comments explaining key sections

Please provide:
1. Complete HTML with semantic structure
2. CSS organized by sections (reset, variables, layout, components, responsive)
3. Explanation of key design decisions
4. Mobile responsiveness approach

Step 2: Review Generated Code

Never copy-paste blindly. Always review:

HTML Review Checklist:

• Proper DOCTYPE and document structure
• Semantic elements used correctly
• Heading hierarchy makes sense (h1 → h2 → h3)
• Alt text on all images
• Meaningful class names
• Valid HTML (no unclosed tags)

CSS Review Checklist:

• Organized and commented sections
• Consistent naming conventions
• No hardcoded values (uses CSS variables)
• Responsive units (rem, %, vw, vh)
• Media queries for mobile
• No unnecessary !important

JavaScript Review Checklist:

• Clear function names
• Comments explaining logic
• Error handling included
• No console.logs in production code
• Event listeners properly attached
• Works without errors

Step 3: Ask for Explanations

If anything is unclear, ask immediately:

Understanding Prompts:

I don't understand this part of the CSS you generated:

[paste confusing code section]

Can you explain:
1. What does this code do?
2. Why is it structured this way?
3. What would happen if I removed it?
4. Are there simpler alternatives?

Example:

I don't understand this CSS code you generated:

```css
.project-card {
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.project-card:hover::before {
  left: 100%;
}

Can you explain:

1. What does this pseudo-element ::before do?
2. Why is it positioned at left: -100%?
3. How does the hover effect work?
4. What's the purpose of the gradient?

---

### Step 4: Test Thoroughly

Testing is crucial. Create a testing checklist:

**Testing Workflow**:

1. **Visual Testing**

• Open in browser
• Check all sections appear
• Verify spacing and alignment
• Test all colors and fonts
• Check images load

2. **Responsive Testing**

• Desktop (1920px, 1440px, 1280px)
• Tablet (768px, 834px)
• Mobile (375px, 414px, 390px)
• Test in Chrome DevTools device mode

3. **Interactive Testing**

• Click all links
• Test all buttons
• Try form inputs
• Check hover effects
• Test keyboard navigation

4. **Browser Testing**

• Chrome/Edge (Chromium)
• Firefox
• Safari (if available)
• Check console for errors

**Debugging Prompt When Issues Found**:

I'm testing the feature and found this problem:

Expected behavior: What should happen Actual behavior: What actually happens Browser: Chrome/Firefox/Safari Device: Desktop/Mobile Screenshot: Describe what you see

Here's the relevant code: paste HTML/CSS/JS

Please:

1. Identify what's causing this issue
2. Explain why it happens
3. Provide the fix with explanation
4. Suggest how to prevent similar issues

---

### Step 5: Iterate and Refine

First generation is rarely perfect. Iterate:

**Refinement Prompt Template**:

I've tested the feature/page you created. It's good, but I need these improvements:

Changes needed:

1. Specific change 1
2. Specific change 2
3. Specific change 3

Keep everything else the same. Please provide:

• Updated code
• Explanation of changes
• What to look for when testing

**Example**:

I've tested the hero section you created. It's good, but I need these improvements:

Changes needed:

1. Make the hero section full-screen height (100vh)
2. Center the text both vertically and horizontally
3. Add a subtle background gradient from #1a1a2e to #16213e
4. Make the heading text larger on desktop (3rem) but smaller on mobile (2rem)
5. Add a smooth fade-in animation when the page loads

Keep the existing content and structure. Please provide:

• Updated HTML (if needed)
• Updated CSS with changes highlighted in comments
• Explanation of how the centering and animation work

---

## Building Interactive Features

### Adding JavaScript Functionality

**Feature Implementation Prompt**:

Add feature name to my website.

Current code: paste relevant HTML/CSS

Feature requirements:

• Requirement 1
• Requirement 2
• Requirement 3

Technical constraints:

• Use vanilla JavaScript (no libraries)
• Must work on all modern browsers
• Should be accessible (keyboard support)
• Code should be well-commented

Please provide:

1. JavaScript code with clear comments
2. Any needed HTML changes
3. Any needed CSS changes
4. Step-by-step integration instructions
5. Testing checklist

**Example - Mobile Menu**:

Add a mobile hamburger menu to my website navigation.

Current code: paste navigation HTML/CSS

Feature requirements:

• Hamburger icon (three lines) appears on mobile (< 768px)
• Click/tap to open/close menu
• Menu slides in from right side
• Smooth animation (0.3s)
• Close when clicking outside menu
• Works with keyboard (Tab, Enter, Escape)

Technical constraints:

• Use vanilla JavaScript (no jQuery)
• Must work on all modern browsers (Chrome, Firefox, Safari)
• Should be accessible (ARIA labels, keyboard support)
• Code should be well-commented

Please provide:

1. JavaScript code with clear comments explaining each function
2. HTML changes needed (hamburger button, menu structure)
3. CSS changes for mobile menu styling and animations
4. Step-by-step integration instructions
5. Testing checklist including accessibility

---

## Integrating AI Code into Your Project

### Best Practices for Integration

**Integration Workflow**:

1. **Create a backup** before adding new code
   ```bash
   # Save current version
   git add .
   git commit -m "Before adding [feature]"

2. Add code section by section, not all at once
   • Add HTML first, test
   • Add CSS next, test
   • Add JavaScript last, test
3. Check for conflicts with existing code
   • Class name conflicts
   • CSS specificity issues
   • JavaScript variable name collisions
4. Test after each addition
   • Verify new feature works
   • Ensure old features still work
   • Check console for errors

Integration Prompt When Issues Arise:

I'm trying to integrate the [feature] code you provided, but it's conflicting with my existing code.

Issue: [Describe the problem]

Existing code that might conflict:
[paste relevant existing code]

New code causing issues:
[paste new code]

Please:
1. Identify the conflict
2. Provide updated code that integrates cleanly
3. Explain how to prevent conflicts
4. Suggest naming conventions to avoid future issues

Building Complete Pages

Page-by-Page Development

Work on one page at a time, following this sequence:

Week 1: Homepage

1. Create HTML structure
2. Add basic CSS styling
3. Make responsive
4. Add JavaScript interactions
5. Test thoroughly
6. Request AI audit

Week 2: Second Page

1. Create page based on homepage styles
2. Add page-specific content
3. Ensure consistent navigation
4. Test cross-page navigation
5. Refine and optimize

Week 3: Remaining Pages

1. Build remaining pages
2. Ensure consistency across all pages
3. Add special features (forms, galleries)
4. Test entire site navigation

Week 4: Polish and Deploy

1. Final AI audit
2. Fix all issues
3. Optimize images
4. Prepare for submission

Common Build Issues

Issue 1: Code Doesn't Display as Expected

Debugging Steps:

1. Check browser console for errors
2. Verify file paths are correct
3. Check CSS specificity
4. Inspect element in DevTools

AI Debug Prompt:

My [element] doesn't display correctly.

Expected: [What should happen]
Actual: [What you see]

HTML:
[paste code]

CSS:
[paste code]

Console errors: [paste any errors]

What's wrong?

Issue 2: Responsive Design Broken

Check:

• Media query syntax
• Viewport meta tag in HTML
• Units (use rem/% instead of px)
• Flexbox/Grid behavior

AI Fix Prompt:

My responsive layout breaks on mobile.

Desktop (works): [Describe]
Mobile (broken): [Describe]

Code:
[paste HTML/CSS]

Please fix the responsive design and explain what was wrong.

Issue 3: JavaScript Not Working

Check:

• Console for errors
• Script tag placement (before )
• Element IDs/classes match
• Event listeners attached correctly

AI Debug Prompt:

My JavaScript doesn't work.

Expected behavior: [Describe]
Actual behavior: [Nothing happens / Error]

Console error: [paste error message]

JavaScript:
[paste code]

HTML (relevant parts):
[paste relevant HTML]

Help me fix this and explain what went wrong.

Practical Exercise: Build Your First Page

Task: Use AI to build your homepage

Requirements:

1. Use the homepage prompt template
2. Generate initial code
3. Review all code thoroughly
4. Ask for explanations of unclear parts
5. Test on desktop and mobile
6. Iterate to fix any issues
7. Document what you learned

Deliverables:

• index.html - Working homepage
• css/main.css - Stylesheet
• docs/build-log.md - What you learned
• Screenshot of final result

Success Criteria:

• You understand every line of code
• Page displays correctly on all devices
• No console errors
• You can explain how it works

Tips for Successful Building

DO:

✅ Test frequently - after every change ✅ Ask for explanations - understand the code ✅ Save versions - commit progress regularly ✅ Review before integrating - check for conflicts ✅ Start simple - add complexity gradually ✅ Document issues - track what you learned

DON'T:

❌ Copy entire projects - build piece by piece ❌ Skip testing - catch issues early ❌ Ignore warnings - they prevent future problems ❌ Add code you don't understand - always ask ❌ Rush integration - take time to do it right

Next Lesson Preview

In Lesson 8.5: Debugging and Optimization, you'll learn how to:

• Debug errors with AI assistance
• Optimize code for performance
• Improve accessibility
• Conduct code quality audits
• Prepare for final submission

Key Takeaways

Related Resources:

• Lesson 8.3: AI-Powered Project Planning
• Lesson 8.5: Debugging and Optimization
• JavaScript Fundamentals