LLM Quick Start for Developers

Essential AI-Assisted Development Skills

Auteur

Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Résumé

Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.

Welcome to AI-Assisted Development

Important

2025 Reality: Every professional developer uses AI tools.

This session teaches you how to use them effectively and safely.

Learning Objectives

By the end of this quick start, you will be able to:

• ✅ Understand what LLMs can and cannot do
• ✅ Set up GitHub Copilot in VS Code
• ✅ Write effective prompts for HTML/CSS/JavaScript generation
• ✅ Verify AI-generated code for correctness and security
• ✅ Apply the AI-assisted development workflow

What Are LLMs (Large Language Models)?

Large Language Models are AI systems that:

• Predict the next likely text/code based on patterns learned from massive datasets
• Generate code, explanations, and solutions from natural language prompts
• Work probabilistically — not always correct, but often helpful

Used in tools like: chatbots (ChatGPT, Claude), code assistants (GitHub Copilot), and more.

Key Terms You Need to Know

Term	Definition	Why It Matters
Prompt	Your input to the AI	Better prompts = better outputs
Hallucination	AI confidently generating false information	Always verify outputs!
Context	Information the AI “remembers” in conversation	Earlier messages affect later responses
Temperature	Randomness setting (0.0-1.0)	Lower = more deterministic

The Critical Rule

LLMs Are Junior Developers

They generate code fast but need supervision.

• ✅ Good at: Boilerplate, syntax, common patterns
• ❌ Bad at: Security, edge cases, business logic
• 🔍 Your job: Supervise, verify, understand

The AI-Assisted Development Workflow

flowchart LR
   %% Compact workflow with explicit checks
   G[Goal]
   P[Prompt]
   A[AI generates<br/>code]
   R[Review &<br/>Read]
   S[Security<br/>check]
   X[Accessibility<br/>check]
   T[Test / Run]
   D{Pass?}
   C[Commit &<br/>Doc]

   G --> P --> A --> R --> S --> X --> T --> D
   D -->|Yes| C
   D -->|No| P

   %% smaller font for slide compactness
   classDef smallfont font-size:12px;
   class G,P,A,R,S,X,T,D,C smallfont

Action: After accepting AI code: Read it → Security check → Accessibility check → Test — then Commit & Doc.

GitHub Copilot in VS Code

• AI-powered code completion tool
• Integrates directly into VS Code
• Supports inline suggestions and chat interface
• Learns from your codebase to provide context-aware suggestions

Installation Steps

1. Install the extension

   VS Code → Extensions → Search "GitHub Copilot" → Install

2. Sign in

   • You’ll need a GitHub account
   • Students get Copilot free with GitHub Student Developer Pack
   • Apply at: https://education.github.com/pack

3. Verify it’s working

   • create a test.html file
   • Type a comment: <!-- button that says "Click Me" and alerts "Hello" when clicked -->
   • Copilot should suggest code in gray text
   • Press Tab to accept

Copilot Basics

Action	Windows / Linux	macOS	Use Case
Accept suggestion	Tab	Tab	Take the AI’s suggestion
Reject suggestion	Esc	Esc	Ignore and keep typing
Next suggestion	Alt+]	Option+]	See alternative suggestions
Previous suggestion	Alt+[	Option+[	Go back to previous option
Open Copilot Chat (inline)	Ctrl+I	⌘I (Command+I)	Open inline chat in editor
Open Copilot Chat (panel)	Ctrl+Shift+I	⌘⇧I (Command+Shift+I)	Open the Copilot Chat panel

Note: Keybindings may differ by VS Code version or personal configuration. To check or remap keys: Windows/Linux: File → Preferences → Keyboard Shortcuts. macOS: Code → Preferences → Keyboard Shortcuts. Also mention to learners that some extensions or OS settings can change shortcuts (e.g., Option/Alt behavior on macOS).

Using Copilot Chat - workspace-aware AI

Open the Copilot Chat panel (Ctrl+Shift+I) or right‑click any file → “Open Copilot Chat”. The panel shows the active model, history, and a prompt box.

• Workspace-aware prompts

  • Include the filename or paste the code snippet so the assistant can use local context.
  • Signal context with a short tag: #filename.js then the snippet.
  • Tip: keep snippets focused and short.

Copilot Chat Modes

• agent

  • Multi-step workspace-aware tasks (create files, refactor, scaffold).
  • Use for feature work that spans the repo.
  • Example: agent “Create a React ProductCard in src/components with Tailwind, props for image/title/price, and accessible markup”

• edit

  • Targeted edits to an existing file or selection.
  • Use for bug fixes, style tweaks, accessibility fixes.
  • Example: edit “In src/pages/index.html change body background to #f0f9ff and add aria-labels to the newsletter form”

• ask

  • Questions, explanations, and small snippets.
  • Use for debugging help, regexes, or short examples.
  • Example: ask “What’s wrong with this function? [paste function]”

Choosing the Right Model

• Models list depends on your Copilot plan.
• Small/cheaper model: fast drafts and iterations.
• Larger model: deeper reviews, security analysis, architecture advice.
• Exact model names and availability depend on your Copilot plan.

Avertissement

Copilot can edit the workspace — always inspect, test, and verify before committing.

Alternative Tools

If you don’t have Copilot access:

• ChatGPT (free tier): https://chat.openai.com
• Claude (free tier): https://claude.ai

Anatomy of a Good Prompt

❌ Bad Prompt

"Make a form"

Why bad? Too vague, no context, no requirements.

✅ Good Prompt

Create an HTML form with the following:
- Email input (required, with validation)
- Password input (minimum 8 characters)
- "Remember me" checkbox
- Submit button with blue background
- Use semantic HTML and accessible labels
- Style with Tailwind CSS classes

Why good? Specific, detailed, includes constraints and requirements.

The CRISP Framework for Prompts

Use this checklist for every prompt:

• Context — What are you building?

"I'm building a product review page for an e-commerce site."

• Requirements — What must it do?

"Display product name, rating (1-5 stars), review text, and author."

• Input/Output — What data format?

"Input: JSON array of review objects. Output: Styled HTML cards."

• Style/Standards — How should it look/work?

"Use Tailwind CSS, mobile-first responsive design, semantic HTML5."

• Pitfalls — What to avoid?

"Don't use inline styles. Ensure accessibility with ARIA labels."

Example Task : Generating HTML with AI

Goal: Create a product card component

Step 1: Write the prompt

Create an HTML product card with:
- Product image (placeholder from unsplash)
- Product title in h3
- Price in bold
- 5-star rating display
- "Add to Cart" button
- Use Tailwind CSS for styling
- Responsive (stack on mobile, horizontal on desktop)
- Accessible (proper alt text, ARIA labels)

Step 2: Generate code (Instructor demonstrates using Copilot or ChatGPT)

---

Step 3: Verify the output

<!-- AI might generate something like this -->
<div class="flex flex-col md:flex-row border rounded-lg p-4">
  <img src="https://source.unsplash.com/300x300/?product" 
       alt="Product name" 
       class="w-full md:w-48 h-48 object-cover">
  <div class="flex-1 p-4">
    <h3 class="text-xl font-bold">Product Name</h3>
    <div class="flex items-center mb-2">
      <span class="text-yellow-400">★★★★★</span>
      <span class="ml-2 text-gray-600">(4.5)</span>
    </div>
    <p class="text-2xl font-bold text-green-600 mb-4">$49.99</p>
    <button class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
      Add to Cart
    </button>
  </div>
</div>

---

Step 4: Check for issues

• ✅ Semantic HTML? Yes (h3, proper structure)
• ✅ Accessible? Yes (alt text present)
• ✅ Responsive? Yes (flex-col on mobile, flex-row on desktop)
• ⚠️ Stars are text, not actual rating component (note for improvement)
• ✅ Tailwind classes look correct

Step 5: Test in browser (Instructor opens in browser, tests mobile view)

Step 6: Iterate if needed

"The star rating should use actual star icons. 
Update to use Font Awesome icons or Unicode stars."

Development Patterns for Prompts (1/2)

Pattern 1: Component Generation

"Create a [component type] with [features] using [technology].
Include [requirements]. Avoid [pitfalls]."

Example:

Create a navigation bar with logo, menu links, and search box using HTML5 and Tailwind.
Include mobile hamburger menu. Avoid JavaScript for now.

Pattern 2: Code Explanation

"Explain this code: [paste code or reference in vscode chat].
What does each part do? Are there any issues?"

Example:

Explain this code:
document.querySelector('.btn').addEventListener('click', function() {
  alert('Clicked!');
});

Development Patterns for Prompts (2/2)

Pattern 3: Debugging

"This code [describe what it should do] but [describe the problem].
Here's the code: [paste code]
What's wrong and how do I fix it?"

Example:

This code should display a list of products when the page loads,
but nothing appears. Here's the code:
[paste your code]

Development Pattern 4: Refactoring

"Improve this code for [criteria]:
[paste code]"

Example:

Improve this code for accessibility and semantic HTML:
<div class="title">Product Name</div>
<div class="price">$49.99</div>

The Verification Checklist

Never commit AI-generated code without checking:

• ✅ Functionality
• Does it actually work when you test it?
• Does it handle edge cases (empty data, long text, etc.)?
• Are there console errors?
• ✅ Accessibility
• Can you navigate with keyboard only (Tab, Enter)?
• Do images have alt text?
• Are form inputs properly labeled?
• Is color contrast sufficient?
• ✅ Security
• Are user inputs validated?
• Is there SQL injection risk (backend)?
• Are external links using rel="noopener"?
• ✅ Performance
• Are images optimized/lazy-loaded?
• Is JavaScript blocking the page?
• Are there unnecessary network requests?
• ✅ Code Quality
• Is the code readable and maintainable?
• Are variable names meaningful?
• Is there unnecessary complexity?
• Does it follow project conventions?

How to Verify: Browser DevTools

Console (F12 → Console tab)

// Check for errors (red messages)
// Test code snippets
console.log('Testing variables:', myVariable);

Elements Inspector (F12 → Elements tab)

• Hover over HTML to see layout
• Edit CSS live to test changes
• Check computed styles

Network Tab (F12 → Network)

• See all requests (images, APIs, etc.)
• Check for 404 errors
• Verify response data

Lighthouse Audit (F12 → Lighthouse)

• Install :
  • Chrome : F12 → Lighthouse tab
  • Firefox : Use the Lighthouse extension
    
• Run performance audit
• Check accessibility score
• See specific issues to fix

Red Flags: When AI Gets It Wrong

Watch out for these common issues:

🚩 Security Vulnerabilities

// ❌ DANGEROUS - AI might generate this
eval(userInput); // Never use eval with user input!

// ❌ DANGEROUS - SQL injection risk
db.query(`SELECT * FROM users WHERE id = ${userId}`);

🚩 Accessibility Issues

<!-- ❌ Missing alt text -->
<img src="product.jpg">

<!-- ❌ Non-semantic HTML -->
<div class="button" onclick="submit()">Click me</div>

<!-- ✅ CORRECT -->
<button type="button" onclick="submit()">Click me</button>

🚩 Performance Problems

// ❌ Loading huge libraries for simple tasks
<script src="https://cdn.jquery.com/jquery-3.6.0.min.js"></script>
// (Just to change one div's text!)

// ❌ Blocking the entire page
<script src="app.js"></script> <!-- Should be at end of body -->

🚩 Outdated Patterns

// ❌ Old callback style
function getData(callback) {
  // ...
  callback(result);
}

// ✅ Modern async/await
async function getData() {
  const result = await fetch('/api/data');
  return result.json();
}

Licensing / Provenance

AI-generated code may unintentionally reproduce snippets that resemble licensed or copyrighted code from its training data. Before copying generated code into your project:

• Check license compatibility with your project (MIT, GPL, Apache, etc.).
• Prefer small, original snippets or re-implementations rather than long verbatim blocks returned by the model.
• Ask the assistant for sources and to “explain any external code or libraries used” — and verify those sources independently.
• For Copilot-specific guidance, consult GitHub’s Copilot licensing and policy pages in your organization.

If you work in a codebase with strict license or IP requirements, route AI suggestions through your standard review process and legal checks before merging. :::

Best Practices: Working with AI

• DO ✅

1. Start with clear requirements
   • Write down what you need before prompting
   • Include examples of desired output
2. Iterate in small steps
   • Generate one component at a time
   • Test each piece before moving on
3. Learn from the outputs
   • Don’t just copy-paste
   • Read and understand the generated code
   • Ask “Why did it do it this way?”
4. Keep conversation context
   • Reference previous exchanges
   • Build on working solutions
5. Document your process
   • Comment why you chose this approach
   • Note any AI-suggested changes
6. Sanitise before sharing
   • Remove secrets, API keys, passwords, and private PII before pasting into any AI chat or prompt
   • Use mock or redacted data when testing prompts that include user data

• DON’T ❌

1. Blindly trust AI outputs
   • Always verify functionality
   • Test edge cases
2. Use code you don’t understand
   • If it’s unclear, ask AI to explain
   • Simplify if too complex
3. Skip testing
   • AI can’t test in your browser
   • You must verify it works
4. Ignore errors
   • Console errors = broken code
   • Fix issues before moving on
5. Forget about security
   • AI doesn’t know your security requirements
   • Review for vulnerabilities
6. Paste secrets or private data
   • Don’t paste API keys, passwords, or real user data into public or third-party AI tools
   • If you must use sensitive data, do it only in approved secure environments

Practice Exercise

Your turn! Try this simple exercise

Use AI to generate a review card component with:

• Reviewer name
• 5-star rating display
• Review text
• Review date
• Helpful/Not helpful buttons

Steps:

1. Write a detailed prompt using the CRISP framework
2. Generate the code (Copilot or ChatGPT)
3. Open in browser and test
4. Use DevTools to inspect and verify
5. Identify at least one improvement to make

Deliverable: Working HTML file that you understand !

Key Takeaways 🎯

1. LLMs are tools, not replacements for your brain
2. Verification is mandatory — always test and review
3. Good prompts = specific, detailed, with context
4. Iterate quickly — generate, test, refine, repeat
5. Learn actively — understand what AI generates

Quick Reference

CRISP Prompt Template:

Context: [What are you building?]
Requirements: [What must it do?]
Input/Output: [Data formats?]
Style/Standards: [How should it look?]
Pitfalls: [What to avoid?]

Verification Checklist:

• Functionality tested
• Accessibility checked
• Security reviewed
• Performance acceptable
• Code understood

---

🚀 Advanced Topics

Want to dive deeper? Check out webdev_01_L_02B_LLMAdvanced for:

• How LLMs actually work (tokens, embeddings, transformers)
• Advanced prompt engineering techniques
• RAG (Retrieval-Augmented Generation)
• Fine-tuning and model selection
• Ethics and limitations

When to read it: After you’re comfortable with basic AI-assisted development (after Practice 1-2).