LLM Quick Start for Developers

Essential AI-Assisted Development Skills

Emmanuel BRUNO

emmanuel.bruno@univ-tln.fr

Université de Toulon

LIS UMR CNRS 7020

2025-10-12

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

Install the extension

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

Sign in
- You’ll need a GitHub account
- Students get Copilot free with GitHub Student Developer Pack
- Apply at: https://education.github.com/pack
Verify it’s working
- create a test.html file
- Type a comment: 
- 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>

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 ✅

Start with clear requirements
- Write down what you need before prompting
- Include examples of desired output
Iterate in small steps
- Generate one component at a time
- Test each piece before moving on
Learn from the outputs
- Don’t just copy-paste
- Read and understand the generated code
- Ask “Why did it do it this way?”
Keep conversation context
- Reference previous exchanges
- Build on working solutions
Document your process
- Comment why you chose this approach
- Note any AI-suggested changes
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 ❌

Blindly trust AI outputs
- Always verify functionality
- Test edge cases
Use code you don’t understand
- If it’s unclear, ask AI to explain
- Simplify if too complex
Skip testing
- AI can’t test in your browser
- You must verify it works
Ignore errors
- Console errors = broken code
- Fix issues before moving on
Forget about security
- AI doesn’t know your security requirements
- Review for vulnerabilities
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:

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

Deliverable: Working HTML file that you understand !

Key Takeaways 🎯

LLMs are tools, not replacements for your brain
Verification is mandatory — always test and review
Good prompts = specific, detailed, with context
Iterate quickly — generate, test, refine, repeat
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:

🚀 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).

LLM Quick Start for Developers

Welcome to AI-Assisted Development

Learning Objectives

What Are LLMs (Large Language Models)?

Key Terms You Need to Know

The Critical Rule

The AI-Assisted Development Workflow

GitHub Copilot in VS Code

Installation Steps

Copilot Basics

Using Copilot Chat - workspace-aware AI

Copilot Chat Modes

Choosing the Right Model

Alternative Tools

Anatomy of a Good Prompt

The CRISP Framework for Prompts

Example Task : Generating HTML with AI

Development Patterns for Prompts (1/2)

Development Patterns for Prompts (2/2)

The Verification Checklist

How to Verify: Browser DevTools

Red Flags: When AI Gets It Wrong

Licensing / Provenance

Best Practices: Working with AI

Practice Exercise

Key Takeaways 🎯

Quick Reference