{"id":7423,"date":"2026-10-22T06:38:32","date_gmt":"2026-10-22T06:38:32","guid":{"rendered":"https:\/\/portaileduc.net\/website\/?p=7423"},"modified":"2026-10-22T18:19:58","modified_gmt":"2026-10-22T18:19:58","slug":"vibe-coding-un-guide-pratique-pour-creer-des-sites-web-avec-lintelligence-artificielle","status":"publish","type":"post","link":"https:\/\/portaileduc.net\/website\/vibe-coding-un-guide-pratique-pour-creer-des-sites-web-avec-lintelligence-artificielle\/","title":{"rendered":"Vibe coding : un guide pratique pour cr\u00e9er des sites web avec l&rsquo;intelligence artificielle"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Yann Houry propose un guide interactif consacr\u00e9 au vibe coding<\/strong>, une approche du d\u00e9veloppement informatique qui consiste \u00e0 utiliser l&rsquo;intelligence artificielle pour cr\u00e9er des sites web et des applications \u00e0 partir d&rsquo;instructions formul\u00e9es en langage naturel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Accessible aux personnes qui ne ma\u00eetrisent pas n\u00e9cessairement la programmation, cette ressource rassemble des conseils, des exemples et des instructions pr\u00eates \u00e0 l&#8217;emploi pour accompagner les diff\u00e9rentes \u00e9tapes d&rsquo;un projet de d\u00e9veloppement web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Des conseils pour se lancer et am\u00e9liorer ses cr\u00e9ations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Le guide est organis\u00e9 en plusieurs rubriques permettant de progresser dans la conception d&rsquo;un projet :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>D\u00e9marrer<\/strong> : choisir un assistant d&rsquo;intelligence artificielle, d\u00e9crire son projet et produire une premi\u00e8re version ;<\/li>\n\n\n\n<li><strong>Am\u00e9liorer son site<\/strong> : enrichir les fonctionnalit\u00e9s, adapter l&rsquo;affichage aux appareils mobiles et travailler l&rsquo;accessibilit\u00e9 ;<\/li>\n\n\n\n<li><strong>Optimiser et s\u00e9curiser<\/strong> : am\u00e9liorer la structure du code, identifier les erreurs et examiner les \u00e9ventuelles failles de s\u00e9curit\u00e9 ;<\/li>\n\n\n\n<li><strong>Personnaliser ses cr\u00e9ations<\/strong> : utiliser des biblioth\u00e8ques d&rsquo;ic\u00f4nes, des polices, des palettes de couleurs et des ressources graphiques ;<\/li>\n\n\n\n<li><strong>R\u00e9soudre les probl\u00e8mes<\/strong> : apprendre \u00e0 utiliser les outils du navigateur et \u00e0 transmettre les erreurs rencontr\u00e9es \u00e0 l&rsquo;IA.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La ressource pr\u00e9sente \u00e9galement diff\u00e9rents assistants, notamment ChatGPT, Gemini, Claude, Codex et Claude Code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Des prompts pr\u00eats \u00e0 utiliser<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Une rubrique propose des <strong>mod\u00e8les de prompts personnalisables<\/strong> pour accompagner la cr\u00e9ation et l&rsquo;am\u00e9lioration d&rsquo;un site web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les utilisateur\u00b7rices peuvent notamment pr\u00e9parer des instructions pour cr\u00e9er un premier site, examiner son accessibilit\u00e9 ou r\u00e9aliser une analyse de s\u00e9curit\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un g\u00e9n\u00e9rateur de prompt permet \u00e9galement de personnaliser le sujet d&rsquo;un site et sa palette de couleurs avant de r\u00e9cup\u00e9rer les instructions \u00e0 transmettre \u00e0 l&rsquo;IA.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des fonctionnalit\u00e9s plus avanc\u00e9es<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Le guide pr\u00e9sente plusieurs outils et biblioth\u00e8ques permettant d&rsquo;enrichir un projet avec l&rsquo;aide de l&rsquo;intelligence artificielle :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Remotion<\/strong> pour cr\u00e9er des vid\u00e9os et des animations ;<\/li>\n\n\n\n<li><strong>Qwen3-TTS<\/strong> pour transformer des textes en contenus audio ;<\/li>\n\n\n\n<li><strong>Leaflet<\/strong> pour int\u00e9grer des cartes interactives ;<\/li>\n\n\n\n<li><strong>Three.js<\/strong> pour cr\u00e9er des visualisations en trois dimensions.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque proposition est accompagn\u00e9e d&rsquo;explications, d&rsquo;un prompt \u00e0 adapter et d&rsquo;un exemple illustrant le r\u00e9sultat attendu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Un guide qui met en pratique ses propres conseils<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;une des particularit\u00e9s de cette ressource est son caract\u00e8re interactif. La page int\u00e8gre directement plusieurs d\u00e9monstrations : personnalisation de couleurs, exemples de contenus multim\u00e9dias, cartes, repr\u00e9sentations 3D ou encore simulations d&rsquo;outils de d\u00e9veloppement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Des tutoriels compl\u00e9mentaires expliquent \u00e9galement comment utiliser Git pour conserver les diff\u00e9rentes versions d&rsquo;un projet, exploiter l&rsquo;inspecteur du navigateur pour identifier des erreurs ou cr\u00e9er un fichier <code>AGENTS.md<\/code> pour conserver les consignes destin\u00e9es \u00e0 l&rsquo;assistant IA.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ce guide peut notamment int\u00e9resser les enseignant\u00b7es et formateur\u00b7rices qui souhaitent <strong>concevoir leurs propres outils p\u00e9dagogiques interactifs<\/strong>, r\u00e9aliser des simulations, d\u00e9velopper de petites applications ou cr\u00e9er des ressources num\u00e9riques adapt\u00e9es \u00e0 leurs besoins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une ressource pour d\u00e9couvrir progressivement le d\u00e9veloppement assist\u00e9 par intelligence artificielle, tout en gardant \u00e0 l&rsquo;esprit la n\u00e9cessit\u00e9 de tester et de v\u00e9rifier les productions g\u00e9n\u00e9r\u00e9es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Consulter le guide \u00ab Conseils pour le Vibe Coding \u00bb :<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.ralentirtravaux.com\/apps\/vibe-coding\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Yann Houry propose un guide interactif consacr\u00e9 au vibe coding, une approche du d\u00e9veloppement informatique qui consiste \u00e0 utiliser l&rsquo;intelligence artificielle pour cr\u00e9er des sites web et des applications \u00e0 partir d&rsquo;instructions formul\u00e9es en langage naturel. Accessible aux personnes qui ne ma\u00eetrisent pas n\u00e9cessairement la programmation, cette ressource rassemble des conseils, des exemples et des [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":7424,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[236,1],"tags":[275,277,291,292,310],"class_list":["post-7423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ia","category-informatique-numerique","tag-creation-de-contenus","tag-tutoriel","tag-guide-et-dossier-pedagogique","tag-informatique-numerique","tag-en-programmation-algorithmes-et-automation"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6aRPV-1VJ","jetpack-related-posts":[{"id":7432,"url":"https:\/\/portaileduc.net\/website\/optionia-des-fiches-pedagogiques-pour-enseigner-lintelligence-artificielle\/","url_meta":{"origin":7423,"position":0},"title":"Option\u2019IA : des fiches p\u00e9dagogiques pour enseigner l\u2019intelligence artificielle","author":"Maxime Duquesnoy","date":"22 octobre 2026","format":false,"excerpt":"L\u2019acad\u00e9mie d\u2019Orl\u00e9ans-Tours propose une collection de fiches p\u00e9dagogiques pour accompagner les enseignant\u00b7es dans la mise en \u0153uvre de l\u2019Option\u2019IA en classe de seconde, dans le syst\u00e8me \u00e9ducatif fran\u00e7ais. \u00c9labor\u00e9es par un groupe de travail acad\u00e9mique, ces ressources proposent des activit\u00e9s directement exploitables pour comprendre le fonctionnement de l\u2019intelligence artificielle, exp\u00e9rimenter\u2026","rel":"","context":"Dans &quot;Education au num\u00e9rique&quot;","block_context":{"text":"Education au num\u00e9rique","link":"https:\/\/portaileduc.net\/website\/category\/education-au-numerique\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5715,"url":"https:\/\/portaileduc.net\/website\/ia-education-selection-de-sites\/","url_meta":{"origin":7423,"position":1},"title":"IA &#038; Education, s\u00e9lection de sites","author":"Maxime Duquesnoy","date":"27 mars 2023","format":false,"excerpt":"\u00a0 50 Ressources ChatGPT en fran\u00e7ais https:\/\/outilia.notion.site\/outilia\/50-Ressources-ChatGPT-en-fran-ais-84e6040a73a149eea99fdd54dbeaff11 100 outils IA \u2192 la liste ultime https:\/\/outilia.notion.site\/outilia\/b36ebb86a60f4adfae1ea0c9186f419c?v=795b5a44d1d34d18800e0be65f8232b8 ChatGPT: des id\u00e9es pour enseigner, apprendre et \u00e9valuer https:\/\/eductive.ca\/ressource\/chatgpt-des-idees-pour-enseigner-apprendre-et-evaluer\/ IA BOX Education Le site IA BOX Education propose une s\u00e9lection d'outils utilisant l'intelligence artificielle ainsi que des articles & sites sur l'intelligence artificielle en \u00e9ducation.\u2026","rel":"","context":"Dans &quot;Informatique &amp; Num\u00e9rique&quot;","block_context":{"text":"Informatique &amp; Num\u00e9rique","link":"https:\/\/portaileduc.net\/website\/category\/domaines-disciplines\/informatique-numerique\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/03\/3-1.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/03\/3-1.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/03\/3-1.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/03\/3-1.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2023\/03\/3-1.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7462,"url":"https:\/\/portaileduc.net\/website\/connectia-un-jeu-de-plateau-collaboratif-pour-decouvrir-lintelligence-artificielle\/","url_meta":{"origin":7423,"position":2},"title":"Connect\u2019IA : un jeu de plateau collaboratif pour d\u00e9couvrir l\u2019intelligence artificielle","author":"Maxime Duquesnoy","date":"22 octobre 2026","format":false,"excerpt":"Le Learning Lab de l\u2019Universit\u00e9 d\u2019Orl\u00e9ans propose Connect\u2019IA, un jeu de plateau gratuit destin\u00e9 \u00e0 sensibiliser les apprenant\u00b7es \u00e0 l\u2019intelligence artificielle. Con\u00e7u pour d\u00e9mystifier l'IA, d\u00e9couvrir son vocabulaire et favoriser les \u00e9changes, il propose une approche ludique et collaborative accessible \u00e0 diff\u00e9rents publics. Ce jeu est une adaptation du jeu\u2026","rel":"","context":"Dans &quot;L'Atelier de Ludo&quot;","block_context":{"text":"L'Atelier de Ludo","link":"https:\/\/portaileduc.net\/website\/category\/latelier-de-ludo\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/adr.png?fit=390%2C280&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5411,"url":"https:\/\/portaileduc.net\/website\/guide-dactivites-technocreatives-pour-les-enfants-du-21e-siecle\/","url_meta":{"origin":7423,"position":3},"title":"Guide d\u2019activit\u00e9s technocr\u00e9atives pour les enfants du 21e si\u00e8cle","author":"Maxime Duquesnoy","date":"7 d\u00e9cembre 2021","format":false,"excerpt":"A la recherche d'id\u00e9es pour int\u00e9grer diff\u00e9rents usages cr\u00e9atifs des technologies pour l\u2019apprentissage dans plusieurs domaines, en plus de pistes d\u2019\u00e9valuation concr\u00e8tes pour les comp\u00e9tences du 21e si\u00e8cle. D\u00e9couvrez donc le \u00ab Guide d\u2019activit\u00e9s technocr\u00e9atives pour enfants du 21e si\u00e8cle \u00bb avec ses 15 activit\u00e9s. Le guide\u00a0\u00a0a \u00e9t\u00e9 r\u00e9alis\u00e9 dans\u2026","rel":"","context":"Dans &quot;Comp\u00e9tences num\u00e9riques&quot;","block_context":{"text":"Comp\u00e9tences num\u00e9riques","link":"https:\/\/portaileduc.net\/website\/category\/competences-numeriques\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2021\/12\/guide-300x196-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7412,"url":"https:\/\/portaileduc.net\/website\/286-fiches-pedagogiques-pour-enseigner-la-culture-de-lia\/","url_meta":{"origin":7423,"position":4},"title":"286 fiches p\u00e9dagogiques pour enseigner la culture de l&rsquo;IA","author":"Maxime Duquesnoy","date":"22 octobre 2026","format":false,"excerpt":"Rochane Kherbouche propose une collection de 286 fiches p\u00e9dagogiques en fran\u00e7ais pour d\u00e9velopper la culture de l\u2019intelligence artificielle, de la petite enfance \u00e0 l\u2019enseignement sup\u00e9rieur. Ces ressources sont issues du projet finlandais Faktabaari EDU, consacr\u00e9 \u00e0 l\u2019\u00e9ducation aux m\u00e9dias, \u00e0 l'information et au d\u00e9veloppement de l'esprit critique. Con\u00e7ues initialement par\u2026","rel":"","context":"Dans &quot;Education au num\u00e9rique&quot;","block_context":{"text":"Education au num\u00e9rique","link":"https:\/\/portaileduc.net\/website\/category\/education-au-numerique\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/human-l.jpg?fit=845%2C845&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":7446,"url":"https:\/\/portaileduc.net\/website\/educia-des-activites-interactives-pour-comprendre-lintelligence-artificielle-et-developper-lesprit-critique\/","url_meta":{"origin":7423,"position":5},"title":"\u00c9duc\u2019IA : des activit\u00e9s interactives pour comprendre l\u2019intelligence artificielle et d\u00e9velopper l\u2019esprit critique","author":"Maxime Duquesnoy","date":"22 octobre 2026","format":false,"excerpt":"\u00c9duc\u2019IA est une plateforme p\u00e9dagogique gratuite qui propose des activit\u00e9s interactives pour aider les \u00e9l\u00e8ves \u00e0 comprendre le fonctionnement de l\u2019intelligence artificielle, \u00e0 identifier ses limites et \u00e0 d\u00e9velopper un regard critique sur ses productions. D\u00e9velopp\u00e9e par Emmanuel Gaunard dans le cadre du Lab\u2019IA et h\u00e9berg\u00e9e sur La Forge des\u2026","rel":"","context":"Dans &quot;Education au num\u00e9rique&quot;","block_context":{"text":"Education au num\u00e9rique","link":"https:\/\/portaileduc.net\/website\/category\/education-au-numerique\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/Image18.png?fit=1200%2C624&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/Image18.png?fit=1200%2C624&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/Image18.png?fit=1200%2C624&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/Image18.png?fit=1200%2C624&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/Image18.png?fit=1200%2C624&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/portaileduc.net\/website\/wp-content\/uploads\/2026\/10\/1792088866504.jpeg?fit=800%2C584&ssl=1","_links":{"self":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts\/7423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/comments?post=7423"}],"version-history":[{"count":1,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts\/7423\/revisions"}],"predecessor-version":[{"id":7425,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/posts\/7423\/revisions\/7425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/media\/7424"}],"wp:attachment":[{"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/media?parent=7423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/categories?post=7423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portaileduc.net\/website\/wp-json\/wp\/v2\/tags?post=7423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}