8.7: Ethical AI Usage & Best Practices

Overview

Using AI to build your project is encouraged, but you must do so responsibly and ethically. This lesson covers best practices, presentation preparation, and professional development habits for AI-assisted coding.

Ethical AI Usage Guidelines

Using AI Responsibly

✅ DO:

1. Use AI as a Learning Tool

Good: "Explain how this CSS Grid layout works and why you chose this approach"
Good: "Help me understand async/await by building a simple example"
Good: "Show me three ways to solve this problem and explain pros/cons"

2. Ask for Explanations

Good: "I don't understand line 23 of this code. Can you explain it?"
Good: "Why did you use map() instead of forEach() here?"
Good: "Explain this code like I'm a beginner"

3. Review and Understand Code

• Read every line before using it
• Ask questions about unclear parts
• Test to verify it works
• Modify it to fit your needs

4. Use AI for Debugging

Good: "I'm getting error X. Here's my code: [paste]. What's wrong?"
Good: "This feature doesn't work on mobile. Help me debug."

5. Leverage AI for Documentation

Good: "Create a README explaining my project"
Good: "Generate documentation for this component"
Good: "Help me write comments for this complex function"

❌ DON'T:

1. Copy-Paste Without Understanding

Bad: Pasting entire generated code without reading it
Bad: Using code with parts you can't explain
Bad: Submitting code you didn't review

2. Use AI to Circumvent Learning

Bad: "Just build the entire project for me"
Bad: Skipping lessons and only using AI
Bad: Avoiding documentation/tutorials

3. Submit Code You Can't Explain

• If you can't explain how it works, don't use it
• If you can't debug it when it breaks, you don't understand it
• If you can't modify it, you haven't learned it

4. Plagiarize

Bad: Claiming AI-generated work as 100% your own without disclosure
Bad: Copying from AI without attribution in academic contexts
Bad: Not acknowledging AI assistance when asked

5. Ignore Learning Objectives

• The goal is to LEARN web development, not just get code
• AI should enhance understanding, not replace it
• You're being graded on understanding, not just output

Preparing for Your Presentation

Your exam includes a ~2 minute presentation where you must explain your project. Here's how to prepare:

What to Practice

1. Project Overview (30 seconds)

"I built a portfolio website to showcase my web development skills.
It includes a homepage, projects gallery, about page, and contact form.
I chose a modern, minimalist design with a dark theme and accent color."

2. Technical Decisions (45 seconds)

"I used semantic HTML5 for better accessibility and SEO.
For layout, I chose CSS Grid for the project gallery because it provides
better control over responsive layouts compared to Flexbox.
I implemented form validation with vanilla JavaScript to practice
DOM manipulation and event handling without relying on libraries."

3. Challenges Overcome (30 seconds)

"The biggest challenge was making the navigation menu responsive.
Initially, the mobile menu didn't close when clicking outside.
I solved this by adding an event listener to the document and checking
if clicks were outside the menu element. I learned about event bubbling
and stopPropagation() in the process."

4. What You Learned (15 seconds)

"This project taught me the importance of mobile-first design and
semantic HTML. I also learned how to effectively use AI tools while
ensuring I understand every aspect of my code."

Presentation Preparation Prompt

Help me prepare a 2-minute presentation for my web development project.

Project details:
- Type: [Portfolio/Blog/Game/Shop/etc.]
- Key features: [List 3-4 main features]
- Technologies: [HTML, CSS, JavaScript, Vue.js, etc.]
- Biggest challenge: [What was difficult]
- What I learned: [Key takeaways]

Please create:

1. Presentation Outline
   - Opening (10 seconds)
   - Project overview (30 seconds)
   - Technical highlights (45 seconds)
   - Challenges and solutions (30 seconds)
   - Learning outcomes (15 seconds)

2. Key Talking Points
   - 3-4 main points to emphasize
   - Technical terms to explain clearly
   - Demos to show (if applicable)

3. Anticipated Questions
   - 5 likely questions I might be asked
   - How to answer each one

4. Practice Script
   - Word-for-word script to practice
   - Time estimates for each section

Make it sound natural and conversational, not overly technical.

Questions You Should Be Ready to Answer

Technical Questions:

• "Why did you choose technology/approach?"
• "How does specific feature work?"
• "What's happening in this code section?"
• "How did you make it responsive?"
• "How did you ensure accessibility?"

Process Questions:

• "What was your biggest challenge?"
• "How did AI help you build this?"
• "What would you do differently next time?"
• "How did you test your project?"
• "What did you learn from this project?"

AI Usage Questions:

• "How much of this did AI generate?"
• "Can you explain this code section?"
• "How did you use AI tools?"
• "Do you understand all the code?"

Preparation Checklist

Before your presentation:

• Can explain every major feature
• Can walk through the code
• Know why you made design choices
• Practiced the presentation 3+ times
• Timed presentation (under 2 minutes)
• Ready to demo the site
• Tested site works on presentation day
• Have backup plan if internet fails

Professional Development Practices

Building Good Habits

1. Document Your Journey

Create a development log:

# Development Log

## Day 1 - Project Planning
- Used AI to generate project plan
- Decided on portfolio website concept
- Created file structure
- Learning: Planning saves time later

## Day 2 - Homepage Development
- Built hero section with AI assistance
- Asked AI to explain CSS Grid implementation
- Modified colors to match my preferences
- Challenge: Centering content vertically
- Solution: Used Flexbox on parent container
- Learning: Flexbox vs Grid use cases

[Continue daily...]

2. Maintain a Decision Log

# Decision Log

## Why I chose CSS Grid over Flexbox for project gallery
- Grid provides better 2D control
- Easier responsive breakpoints
- More intuitive for card layouts
- Source: MDN Grid guide + AI explanation

## Why vanilla JavaScript instead of Vue.js
- Project scope doesn't require component architecture
- Want to practice DOM manipulation fundamentals
- Shorter learning curve for deadline
- Source: Course requirements + instructor feedback

3. Build a Prompt Library

Save your most effective prompts:

# My Best Prompts

## Code Review Prompt
[Your refined audit prompt that works well]

## Bug Fixing Prompt
[Your debug prompt template]

## Feature Implementation Prompt
[Your feature request template]

Common Pitfalls and How to Avoid Them

Pitfall 1: Over-Reliance on AI

Problem: Accepting everything AI generates without critical thinking

Solution:

• Always ask "why" and "how"
• Test generated code thoroughly
• Modify code to fit your needs
• Learn from each generation

Pitfall 2: Analysis Paralysis

Problem: Spending too much time planning, not enough building

Solution:

• Set time limits for planning (1-2 days max)
• Start building after basic plan is done
• Iterate and improve as you go
• "Done is better than perfect"

Pitfall 3: Not Testing Enough

Problem: Assuming AI code works perfectly

Solution:

• Test every feature immediately
• Test on multiple browsers
• Test on mobile devices
• Have friends/classmates test

Pitfall 4: Ignoring Fundamentals

Problem: Skipping to advanced features without understanding basics

Solution:

• Master HTML/CSS/JS before frameworks
• Don't use libraries you don't understand
• Read documentation alongside AI help
• Practice without AI sometimes

Pitfall 5: Last-Minute Rush

Problem: Starting project too close to deadline

Solution:

• Start Week 1: Planning
• Week 2-3: Core development
• Week 4: Testing and polish
• Week 5: Final review and submission

Final Project Checklist

Before submission, verify:

Functionality

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

Code Quality

• HTML is semantic and valid
• CSS is organized with comments
• JavaScript is clean and efficient
• Consistent code style
• Proper indentation

Design & UX

• Responsive on mobile, tablet, desktop
• Images optimized and load fast
• Good color contrast (accessibility)
• Smooth animations (not distracting)
• Professional appearance

Documentation

• README explains project
• Comments in complex code sections
• You understand ALL code
• Can explain design decisions

Presentation Ready

• Practiced presentation (under 2 min)
• Can demo key features
• Ready for technical questions
• Know what AI helped with

Learning Beyond the Exam

Continue Improving

After submission:

1. Get Feedback

Share your project with AI for a final audit:
"Give me a comprehensive review of this project focusing on what I could improve for a professional portfolio piece."

2. Build More Projects

• Apply what you learned
• Try different types of sites
• Experiment with new features
• Challenge yourself

3. Contribute to Open Source

• Find beginner-friendly projects
• Use AI to understand codebases
• Submit small improvements
• Learn from code reviews

4. Keep Learning

• Follow web dev blogs
• Watch tutorial videos
• Practice daily
• Build your portfolio

Summary of Best Practices

Final Thoughts

AI-assisted coding is a powerful skill that will benefit your entire career. The key is to:

1. Learn actively - Don't passively accept code
2. Practice deliberately - Build understanding, not just projects
3. Develop professionally - Build good habits now
4. Stay curious - Always ask why and how
5. Help others - Teaching reinforces learning

Good luck with your project and your web development journey! 🚀

Quick Reference: Best Practices Summary

✅ Always Do:

• Understand all code before using
• Test every feature thoroughly
• Ask AI to explain unclear concepts
• Document your decisions
• Practice your presentation
• Start early, iterate often

❌ Never Do:

• Submit code you can't explain
• Copy-paste without understanding
• Skip testing
• Ignore accessibility
• Start project last minute
• Rely only on AI without learning fundamentals

Related Resources:

• Lesson 8.6: Advanced AI Development Workflows
• Lesson 8.1: Introduction to AI-Assisted Coding
• Course Exam Information
• Web Development Resources