Formation · IA & Développement Web

Comprendre l'IA, le Web, et décrocher un travail

16 notions illustrées, les mots-clés qui enrichissent vos prompts, un guide carrière complet, et un quiz final noté sur 20.

16notions
10prompts
6étapes carrière

🧠 Intelligence artificielle

Comprendre l'IA, puis les mots-clés qui transforment un prompt vague en prompt précis — avec les outils et une bibliothèque prête à l'emploi.

🌍 Intelligence artificielle 🧩 Machine Learning 🧠 Deep Learning 💬 IA générative (LLM)

01 Poupées russes de l'IA

Chaque niveau est inclus dans le précédent. Le Deep Learning est un ML à réseaux de neurones ; l'IA générative est un Deep Learning qui produit du texte ou des images.

🎭Rôle
🧾Contexte
📌Tâche
📋Format
🔍Exemples
✅Vérif.
🎯Public
📏Longueur

02 Les 8 mots-clés universels

Un prompt pauvre devient riche en ajoutant ces briques. C'est la méthode PRECISE. Voici un exemple concret pour chaque mot-clé :

  • 🎭 Rôle : « Agis comme un expert SEO spécialisé en e-commerce. »
  • 🧾 Contexte : « Je lance une boutique de cosmétiques bio ciblant les 25-35 ans. »
  • 📌 Tâche : « Rédige une description produit pour une crème hydratante. »
  • 📋 Format : « Réponds sous la forme d'une liste à puces avec un titre accrocheur. »
  • 🔍 Exemples : « Voici le ton attendu : [insérer un ancien texte] »
  • ✅ Vérif. : « Vérifie que tu n'utilises pas de jargon médical. »
  • 🎯 Public : « Le texte s'adresse à des débutants en jardinage. »
  • 📏 Longueur : « Maximum 150 mots par paragraphe. »

03 Les mots-clés essentiels pour un prompt efficace

Chaque mot-clé est une "commande" qui indique à l'IA comment se comporter. Voici le vocabulaire de base (toujours en anglais) avec un exemple concret d'utilisation.

Keyword Signification / Utilité Exemple d'utilisation (dans un prompt)
Act as Demander à l'IA d'adopter un rôle "Act as a senior PHP developer. Explain how to fix this bug."
Expert in Définir un domaine d'expertise "You are an expert in cybersecurity and Laravel security."
Context Donner le contexte du projet "Context: I am building an e-commerce website with Laravel and MySQL."
Objective / Goal Préciser l'objectif "My goal is to reduce the loading time of my homepage."
Task Décrire la tâche à réaliser "Task: Write the SQL query to select all users who bought more than 3 items."
Step-by-step Obtenir des étapes détaillées "Explain step-by-step how to deploy a Laravel app on Render."
Detailed Demander une réponse approfondie "Give me a detailed explanation of how the MVC pattern works."
Constraints Définir les contraintes "Constraints: The function must run in less than 50ms."
Requirements Préciser les exigences "Requirements: The code must be compatible with PHP 8.2."
Examples Demander des exemples concrets "Show me 3 examples of clean and secure PHP code."
Analyze Analyser une situation ou un code "Analyze this code and tell me if there is an XSS vulnerability."
Compare Comparer plusieurs solutions "Compare Bootstrap and Tailwind CSS for a beginner project."
Optimize Améliorer les performances ou la qualité "Optimize this SQL query because it takes 5 seconds to load."
Debug Identifier et corriger des erreurs "Debug this PHP script, it throws a 500 error on line 42."
Validate Vérifier la cohérence ou la conformité "Validate this HTML form according to W3C standards."
Output format Définir le format de la réponse "Output format: Reply with a valid JSON object only."
Do not assume Éviter les suppositions non vérifiées "Do not assume my database structure, ask me if needed."
Ask clarifying questions Demander des précisions si nécessaire "Ask clarifying questions before writing the final code."
Edge cases Examiner les cas particuliers "Handle the edge cases where the user inputs 0 or null."
Production-ready Viser une solution prête pour la production "Give me a production-ready code with error handling."
❌ Avant

« Écris un article sur le SEO »

→
✅ Après

« Tu es expert SEO. Écris un article de 800 mots pour débutants qui veulent lancer un blog. Structure : intro + 5 conseils concrets + conclusion. Format : markdown. Ton : simple, direct. »

04 Avant / Après : un prompt enrichi

Un prompt vague (« écris un article sur X ») donne une réponse vague. Ajouter rôle, public, longueur, structure, format transforme la sortie. C'est la même idée que la méthode PRECISE, illustrée en 1 exemple.

📄 Doc 🔢 Vec 🔍 Rech. 🧠 LLM ✅ Le LLM reçoit la question + les passages retrouvés → il rédige sans inventer. Retrieval (recherche) + Generation (rédaction) = RAG.

05 Pipeline RAG

On retrouve les passages utiles dans vos documents, puis un LLM rédige la réponse à partir d'eux. Pas d'invention : le modèle s'appuie sur vos sources.

🌫️Hallucinations ⚖️Biais 🔒Confidentialité Règle : l'humain vérifie toujours les faits importants.

06 Limites de l'IA

Un modèle peut inventer avec assurance (hallucination), reproduire des biais, ou exposer des données. La règle : l'IA assiste, l'humain valide.

⚖️ Outils IA — avantages, inconvénients, mots-clés

Pour chaque outil : ce qu'il fait bien, ses limites, et les mots-clés qui donnent les meilleurs résultats.

💬 ChatGPT

OpenAI · États-Unis
  • Très polyvalent : texte, code, images, voix
  • Écosystème riche (extensions, API, GPT)
  • Version gratuite aux fonctions limitées
  • Peut affirmer des erreurs avec assurance
Mots-clés : step by step act as format as
Idéal pour : l'usage polyvalent au quotidien.

🧠 Claude

Anthropic · États-Unis
  • Rédaction nuancée, code et longs documents
  • Bon suivi de consignes détaillées
  • Pas de génération d'images native
  • Limites d'usage sur l'offre gratuite
Mots-clés : think deeply reasoning cite sources
Idéal pour : rédaction, code, analyse de longs textes.

🔷 Gemini

Google · États-Unis
  • Intégré à Google Workspace et Android
  • Fort en multimodal (texte, image, audio)
  • Dépendance à l'écosystème Google
  • Confidentialité à vérifier (compte Google)
Mots-clés : with sources explain why compare
Idéal pour : les utilisateurs de Google Workspace.

📚 Perplexity

Perplexity AI · États-Unis
  • Réponses avec sources citées
  • Recherche web en temps réel
  • Dépend de sources web de qualité inégale
  • Moins adapté à la création longue
Mots-clés : cite sources recent news with links
Idéal pour : la recherche documentaire et la veille.

👨‍💻 GitHub Copilot / Cursor

Code · États-Unis
  • Complétion et refactorisation dans l'éditeur
  • Gain de temps sur le code répétitif
  • Le code généré doit être relu
  • Risque de dépendance
Mots-clés : refactor add types in the style of
Idéal pour : les développeurs au quotidien.

🎨 Midjourney / DALL·E

Images · États-Unis
  • Images artistiques de très haute qualité
  • Styles variés et cohérents
  • Contrôle précis limité (texte, détails)
  • Questions de droits sur les images générées
Mots-clés : cinematic photorealistic --ar 16:9
Idéal pour : illustration, direction artistique, concepts.

📝 Bibliothèque de prompts utiles

Cliquez sur une carte pour copier le prompt. Remplacez les [CROCHETS] par votre contexte.

🌐 Développement web

PHP, HTML, Laravel, Bootstrap — 5 schémas pour voir comment une page prend vie.

Sans e() — dangereux <script>alert(1)</script> Avec e() — sûr &lt;script&gt;… 🚫✅ e($texte) → htmlspecialchars() → échappe &lt; &gt; " → faille XSS neutralisée

07 PHP : échapper avant d'afficher

e() (ou htmlspecialchars) transforme les caractères dangereux en texte inoffensif. Toute donnée utilisateur doit passer par là avant affichage.

<header> — bannière <nav> — menu de navigation <main> + <article> contenu autonome (blog, produit) réutilisable hors contexte → meilleur SEO + accessibilité <aside> contenu latéral <footer> — pied de page

08 HTML sémantique

Des balises qui décrivent le sens (pas juste <div>) : meilleur SEO, meilleure accessibilité. Un <article> est un contenu autonome, réutilisable hors contexte.

🛣️ Route URL → action 🎮 Contrôleur logique métier 🗄️ Modèle Eloquent 🎨 Vue Blade La route désigne le contrôleur, qui interroge le modèle, puis rend une vue. Les clés API vivent dans le fichier .env côté serveur.

09 Laravel — MVC

La route désigne le contrôleur, qui interroge le modèle (Eloquent), puis rend une vue Blade. Structure claire, sécurité intégrée, code maintenable.

Grille Bootstrap — 12 colonnes col-3 col-3 col-3 col-3 4 × col-3 = 12 → une ligne pleine col-md-6 col-md-6 Sur mobile (avant md) → chaque colonne prend 100 %. col-12 (empilé)

10 Bootstrap — grille responsive

12 colonnes par ligne. col-md-6 = moitié à partir de 768 px, pleine largeur en dessous. Mobile-first avec des classes utilitaires prêtes à l'emploi.

Anatomie d'un bon prompt — méthode PRECISE 🎭 Rôle — "Tu es un rédacteur SEO expert…" 🧾 Contexte — public, offre, contraintes 📌 Tâche — ce que je veux obtenir 📋 Format — liste, tableau, JSON… ✅ Évaluation — demande une auto-critique Chaque brique améliore la précision de la réponse.

11 Anatomie d'un prompt

Un bon prompt n'est pas une phrase vague. C'est une mini-spécification : rôle, contexte, tâche, format, évaluation. La méthode PRECISE.

🛠️ Outils & déploiement

Git, GitHub, Render — le trajet de vos fichiers jusqu'au navigateur du visiteur.

git add . → git commit -m "…" → git push init add nav style fix bug Chaque commit est un point de sauvegarde nommé → on peut revenir en arrière.

12 Git — historique de commits

Chaque commit est un point de sauvegarde nommé. On peut revenir en arrière, comparer, travailler en branches et fusionner.

main feature-contact merge ✓ Revue par les pairs, discussion, puis fusion contrôlée dans main.

13 GitHub — Pull Request

Une Pull Request propose des modifications, permet la revue par les pairs et la discussion, avant la fusion contrôlée dans main. C'est le cœur du travail collaboratif.

🐙 GitHub git push main ☁️ Render webhook ~30 s 🌍 URL publique .onrender.com Chaque git push → Render redéploie automatiquement. HTTPS inclus.

14 Render — déploiement auto

Render lit votre dépôt GitHub, publie le site en ~30 s et le redéploie à chaque git push. HTTPS automatique, URL publique accessible à tous.

📣 Marketing digital

Comprendre le SEO et l'entonnoir inbound en un coup d'œil.

🔎 chaussures randonnée Annonce · payant (SEA) ✅ 1er résultat naturel (SEO) 2e résultat naturel 3e résultat naturel

15 SEO — apparaître dans Google

SEO = être dans les résultats naturels (gratuits) grâce à un contenu de qualité. SEA = payer pour apparaître en « Annonce ». Le SEO construit une visibilité durable.

📣 Attirer 👀 Convertir 🛒 Conclure

16 Entonnoir inbound

On attire par du contenu utile, on convertit en collectant des contacts, on conclut la vente, on fidélise pour faire revenir.

🔁 Le pipeline RAG, en une ligne

📄Documents
→
🔢Embeddings
→
🔍Recherche
→
🧠LLM
→
✅Réponse

🚀 Votre plan d'action interactif

Lancez la vidéo pour découvrir la roadmap vers l'emploi. Vous pouvez cliquer sur les chapitres pour accéder directement au conseil qui vous intéresse.

Étape 1 🧠

La Théorie & Les Bases

IA, PHP, Git, HTML... Vous avez maintenant le socle technique. C'est l'heure de pratiquer.

Étape 2 🛠️

Construisez vos preuves

Un recruteur veut voir du code. Créez 3 projets concrets et publiez-les sur GitHub. Pas de clones de tutoriels !

Étape 3 ☁️

Déployez sur Render

Mettez votre portfolio en ligne. Avoir une URL cliquable (ex: prenom.onrender.com) change tout aux yeux des recruteurs.

Étape 4 📨

L'attaque du Marché

CV ATS-friendly, LinkedIn optimisé avec vos projets. Visez la qualité : 3 candidatures sur-mesure par jour.

Objectif 🎯

L'Entretien & L'Embauche

Préparez-vous à expliquer vos choix techniques. L'humain valide toujours l'IA. Montrez votre capacité à apprendre !

0:00 / 0:10

🎯 La roadmap en 6 étapes

Suivez cet ordre. Chaque étape s'appuie sur la précédente — ne sautez pas la construction du portfolio.

1

📚Consolider les acquis

4 semaines
  • Revoir chaque schéma de cette page
  • Refaire les exercices du TP
  • Valider le quiz à ≥ 16/20
2

💼Construire un portfolio

2 semaines
  • 3 projets concrets (pas des clones)
  • Déployé sur Render (URL publique)
  • Lien dans le CV et LinkedIn
3

🐙Être visible sur GitHub

1 semaine
  • Profil public complet (photo, bio)
  • Repos bien nommés + README clair
  • Au moins 5 commits par projet
4

💼Optimiser LinkedIn

1 semaine
  • Titre précis : « Développeur PHP Junior »
  • Section « Projets » remplie
  • 3 compétences + 1 post par semaine
5

📨Postuler intelligemment

En continu
  • CV ATS-friendly (1 colonne, texte simple)
  • Lettre personnalisée par offre
  • 3 candidatures de qualité par jour
6

🌍Élargir : freelance

Si besoin
  • S'inscrire sur Malt, ComeUp, Upwork
  • Tarif débutant : 15–25 €/h
  • Portfolio = preuve de compétence

📍 Où postuler

Créez des comptes sur toutes ces plateformes dès aujourd'hui. Chaque semaine, consacrez 2–3 h à postuler.

🌍 Freelance

👥 Communautés

  • dev.to
  • Hashnode
  • Discord et Slack tech FR
  • Meetups locaux (Tunis, Paris…)

💡 Conseils pour réussir vos candidatures

📄 Sur le CV et le portfolio

  • CV ATS-friendly : une seule colonne, texte simple (pas de tableau ni de photo), mots-clés de l'offre.
  • 3 projets chiffrés : « Application de gestion de tâches Laravel avec authentification, 100 % responsive, déployée sur Render ».
  • URL courte et propre : prenom-nom.com ou portfolio-prenom.onrender.com.
  • GitHub actif : au moins 1 commit par projet dans les 3 derniers mois.

💬 Sur l'entretien

  • Révisez vos propres projets : on vous demandera pourquoi vous avez utilisé telle solution.
  • Sachez expliquer simplement : « Un embedding, c'est… » avec vos mots. C'est ce qu'on attend d'un junior.
  • Montrez que vous apprenez en continu : citez vos lectures, votre dernier projet perso, une veille tech.
  • Posez des questions : équipe, stack, process. Cela montre votre intérêt réel.

🚀 Sur la candidature

  • Qualité > quantité : 3 candidatures personnalisées par jour battent 30 candidatures copiées-collées.
  • Lettre en 3 lignes : 1) Pourquoi cette entreprise. 2) Ce que vous apportez. 3) Ce que vous voulez apprendre.
  • Relance après 7 jours : un email poli sur LinkedIn double les chances d'avoir une réponse.
  • Postulez même si vous ne cochez pas tout : on ne coche jamais 100 %. 60–70 % suffit pour un junior.

🎯 Les pièges à éviter

  • Ne dites pas « j'apprends encore » : dites « j'ai déjà construit X et je continue sur Y ».
  • Ne montrez pas un tutoriel copié : les recruteurs repèrent les clones To-Do ou Netflix. Visez un projet à vous.
  • Ne mentez jamais sur vos compétences : l'entretien technique vous démasquera. Montrez ce que vous savez vraiment.
  • Ne postulez pas sans lien : CV + LinkedIn + GitHub + portfolio = 4 liens minimum sur la candidature.

🎯 Quiz final

10 questions, une seule bonne réponse par question. Note sur 20 (2 points par bonne réponse). Un thème par question.

Prompt copié !