Création d'un site web avec l'IA : guide pratique d'ingénierie de prompts pour les développeurs

Créez un site portfolio one-page en un week-end avec une IA : Guide du développeur

Développer un site portfolio one-page avec l'aide d'une assistante IA comme Claude Code offre une approche novatrice du développement web. Cette méthode vous permet de réaliser un projet entièrement fonctionnel en peu de temps, sans faire appel à des experts externes — il suffit de bases en HTML/CSS et de compétences en ingénierie de prompts.

Phase de préparation : Contenu et structure

Avant d'écrire la moindre ligne de code, rassemblez votre contenu et définissez l'architecture du projet. L'IA peut générer du texte si vous fournissez suffisamment de contexte : historiques de discussions, supports de présentation, descriptions de projets. Pour une bio, demandez trois versions — courte, moyenne et détaillée — pour gagner du temps.

Définissez la structure de la page avant votre premier prompt. Voici une maquette recommandée pour un site portfolio d'orateur :

• Barre latérale fixe de 300 px
• Contenu principal avec sections
• Section hero avec photo et infos clés
• Bloc bio
• Cartes de thèmes de conférences
• Section réalisations avec stats
• Galerie photo et vidéo
• Coordonnées

Élaboration des prompts : Du squelette au fini

La règle d'or avec les IA : décrivez le résultat final, pas les étapes. Votre premier prompt doit générer le squelette de base avec la bonne structure et sémantique.

Exemple de prompt de démarrage efficace :

Créez un site portfolio one-page pour un orateur.

Style : Thème sombre (fond #0a0a0a), police Raleway via Google Fonts, couleur accent #3182CE.

Disposition : Deux colonnes. Gauche : barre latérale sticky 300px avec photo ronde, nom, titre, liens sociaux. Droite : sections contenu principal — Bio, Thèmes de conférences (cartes), Réalisations (stats), Galerie (grille photos), Contacts.

Exigences : HTML pur, CSS et JS vanilla. Pas de frameworks ni dépendances externes sauf Google Fonts.

Une fois le squelette obtenu, itérez pour affiner. Chaque tour cible une tâche précise :

• Typographie et palette de couleurs
• Design responsive
• Éléments interactifs
• Animations et micro-interactions

Détails techniques de mise en œuvre

Disposition responsive et compatibilité multi-navigateurs

La réactivité mobile mérite une attention particulière. Après les ajustements desktop, demandez explicitement les corrections mobile :

Sur mobile (<768px), la mise en page casse : barre latérale et contenu côte à côte, contenu qui déborde. Correction : Empilez la barre latérale en haut horizontalement (photo et contacts en ligne), contenu principal pleine largeur en dessous.

Conseils clés pour la compatibilité :

• Testez sur Chrome, Safari, Firefox
• Ajoutez les préfixes vendeurs pour les propriétés CSS
• Vérifiez les tablettes (768-1024px)

Optimisation des performances

Une fois les visuels terminés, optimisez. Problèmes courants et solutions :

• Optimisation des images :

- Convertissez PNG en WebP

- Redimensionnez aux bonnes tailles

- Ajoutez le lazy loading

• Chargement des ressources :

- Google Fonts asynchrones

- Préchargez les assets critiques

- Reportez le chargement des iframes

• Métriques de performance :

- LCP (Largest Contentful Paint)

- FID (First Input Delay)

- CLS (Cumulative Layout Shift)

Exemple de prompt d'optimisation :

Le site obtient 38 sur PageSpeed Insights. Problèmes : images lourdes (photo profil 12MB), ressources bloquantes au rendu, pas de lazy loading pour les vidéos. Optimisez : Convertissez les images en WebP, préchargez l'image hero, reportez le chargement des iframes.

Déploiement et hébergement

Options d'hébergement

• Netlify/GitHub Pages — gratuit, ultra-simple
• VPS personnalisé — contrôle total, configuration requise

Pièges du déploiement VPS

• Noms de fichiers sensibles à la casse (Linux est tatillon)
• Chemins absolus vs relatifs
• Permissions de fichiers et isolation utilisateur
• Organisation de la structure du projet

Conseils pour éviter les galères :

• Utilisez des noms en minuscules
• Pas d'espaces ni caractères spéciaux
• Documentez votre configuration
• Utilisez Git pour le contrôle de version

Leçons clés

• Processus itératif : Découpez le dev en petites tâches ; chaque itération corrige un problème
• Contrôles qualité : Testez sur tous les navigateurs, lancez les outils de perf
• Documentation : Notez les changements et décisions pour des retours faciles
• Optimisation : Traitez les performances comme une phase distincte après les visuels

Bonnes pratiques de code

Structure du projet

Organisez les fichiers logiquement :

projet/
├── index.html
├── styles/
│   ├── main.css
│   ├── mobile.css
│   └── animations.css
├── scripts/
│   └── main.js
├── images/
│   ├── optimisees/
│   └── originales/
└── assets/
    └── fonts/

Méthodologie CSS

Utilisez des noms de classes BEM significatifs :

.speaker-card {
    /* styles carte */
}

.speaker-card__image {
    /* styles image dans la carte */
}

.speaker-card__image--rounded {
    /* modificateur pour image ronde */
}

JavaScript pour l'interactivité

Ajoutez des interactions basiques sans frameworks :

// Animations déclenchées par scroll
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
        }
    });
}, observerOptions);

// Appliquez à tous les éléments .animate-on-scroll
document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});

Erreurs courantes et solutions

• Prompts vagues — L'IA produit des templates génériques
• Pas de contraintes — L'IA glisse des libs indésirables
• Sauter l'optimisation — Site joli mais lent
• Ignorer le mobile — Perdez la moitié de votre audience

Outils de contrôle qualité

• PageSpeed Insights — audits de performance
• Lighthouse — vérifications complètes du site
• BrowserStack — tests multi-navigateurs
• Git — contrôle de version et rollbacks

— Editorial Team