Développement Web

Tutoriel : Créer un portfolio professionnel en HTML et CSS

14 min de lecture

Prérequis

  • Niveau : bases HTML/CSS, idéalement avoir vu Flexbox et Grid.
  • Outils : VS Code + Live Server, navigateur moderne, photos en WebP, hébergement GitHub Pages ou Netlify (gratuit).
  • Temps estimé : 2 à 3 h.

Pourquoi un portfolio web ?

Un portfolio en ligne convertit beaucoup mieux qu’un CV statique : il montre vos compétences en action, est partageable d’un clic, et reste accessible aux recruteurs 24/7. Pour un développeur freelance, c’est aussi votre première interface commerciale.

Votre portfolio : votre meilleure carte de visite

Un portfolio en ligne montre vos compétences mieux qu’un CV. Voici comment créer un portfolio professionnel et responsive avec HTML et CSS pur, sans framework.

Structure HTML complète

Voici la mise en pratique pour Structure HTML complète. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mamadou Diallo - Développeur Web | Dakar</title>
    <meta name="description" content="Portfolio de Mamadou Diallo, développeur web à Dakar. HTML, CSS, JavaScript, WordPress.">
</head>
<body>

<!-- Header / Hero -->
<header class="hero">
    <nav>
        <span class="logo">MD</span>
        <ul>
            <li><a href="#projets">Projets</a></li>
            <li><a href="#competences">Compétences</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <div class="hero-content">
        <img src="photo.jpg" alt="Photo" class="avatar">
        <h1>Mamadou Diallo</h1>
        <p class="tagline">Développeur Web Full-Stack basé à Dakar</p>
        <div class="hero-links">
            <a href="#projets" class="btn-primary">Voir mes projets</a>
            <a href="#contact" class="btn-outline">Me contacter</a>
        </div>
    </div>
</header>

<!-- Projets -->
<section id="projets">
    <h2>Projets récents</h2>
    <div class="projets-grid">
        <article class="projet-card">
            <img src="projet1.jpg" alt="Projet e-commerce">
            <div class="projet-info">
                <h3>Boutique en ligne</h3>
                <p>Site e-commerce pour un artisan sénégalais</p>
                <div class="tags">
                    <span>WordPress</span>
                    <span>WooCommerce</span>
                    <span>CSS</span>
                </div>
                <a href="#">Voir le projet →</a>
            </div>
        </article>
        <!-- Répéter pour chaque projet -->
    </div>
</section>

<!-- Compétences -->
<section id="competences">
    <h2>Compétences</h2>
    <div class="skills-grid">
        <div class="skill">
            <span class="skill-name">HTML/CSS</span>
            <div class="skill-bar"><div style="width:95%"></div></div>
        </div>
        <div class="skill">
            <span class="skill-name">JavaScript</span>
            <div class="skill-bar"><div style="width:85%"></div></div>
        </div>
        <div class="skill">
            <span class="skill-name">WordPress</span>
            <div class="skill-bar"><div style="width:90%"></div></div>
        </div>
    </div>
</section>

<!-- Contact -->
<section id="contact">
    <h2>Contactez-moi</h2>
    <form>
        <input type="text" placeholder="Votre nom" required>
        <input type="email" placeholder="Votre email" required>
        <textarea placeholder="Votre message" rows="5" required></textarea>
        <button type="submit">Envoyer</button>
    </form>
</section>

</body>
</html>

CSS complet du portfolio

Voici la feuille de style complète qui structure le portfolio. Elle commence par un reset minimal pour neutraliser les marges et paddings par défaut des navigateurs, puis définit la typographie de base sur body, et enchaîne sur les sections hero, about, projets et contact. Copiez ce CSS dans style.css à la racine de votre projet et liez-le depuis le <head> de votre index.html. Les couleurs et tailles sont volontairement neutres — adaptez-les à votre charte personnelle (palette, typo Google Fonts).

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Segoe UI', sans-serif; color: #333; }

/* HERO */
.hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: white;
    display: flex;
    flex-direction: column;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
}

.logo {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(to right, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

nav ul { list-style: none; display: flex; gap: 25px; }
nav a { color: rgba(255,255,255,0.8); text-decoration: none; }
nav a:hover { color: white; }

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #667eea;
    object-fit: cover;
    margin-bottom: 20px;
}

.hero h1 { font-size: 42px; margin-bottom: 10px; }
.tagline { font-size: 20px; opacity: 0.8; margin-bottom: 30px; }

.btn-primary {
    padding: 12px 30px;
    background: #667eea;
    color: white;
    border-radius: 25px;
    text-decoration: none;
    margin: 5px;
}

.btn-outline {
    padding: 12px 30px;
    border: 2px solid white;
    color: white;
    border-radius: 25px;
    text-decoration: none;
    margin: 5px;
}

/* PROJETS */
#projets { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }

#projets h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    position: relative;
}

.projets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.projet-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.projet-card:hover { transform: translateY(-8px); }

.projet-card img { width: 100%; height: 220px; object-fit: cover; }

.projet-info { padding: 20px; }
.projet-info h3 { margin-bottom: 8px; }
.projet-info p { color: #666; margin-bottom: 12px; }

.tags { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.tags span {
    background: #eef2ff;
    color: #667eea;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 13px;
}

/* COMPÉTENCES */
#competences { padding: 80px 40px; background: #f8f9fa; }

.skills-grid { max-width: 600px; margin: 0 auto; }

.skill { margin-bottom: 20px; }
.skill-name { font-weight: 600; margin-bottom: 8px; display: block; }

.skill-bar {
    background: #e0e0e0;
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
}

.skill-bar div {
    background: linear-gradient(to right, #667eea, #764ba2);
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease;
}

/* CONTACT */
#contact { padding: 80px 40px; max-width: 600px; margin: 0 auto; }

form input, form textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
}

form input:focus, form textarea:focus {
    border-color: #667eea;
    outline: none;
}

form button {
    width: 100%;
    padding: 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero h1 { font-size: 28px; }
    .projets-grid { grid-template-columns: 1fr; }
    nav ul { gap: 15px; }
}

Une fois ce CSS chargé, rafraîchissez votre page : la mise en page doit s’afficher avec le hero plein écran, la section À propos centrée, la grille de projets responsive et le formulaire de contact stylisé. Si quelque chose semble cassé, ouvrez les DevTools (F12) → onglet Elements pour vérifier que le fichier CSS est bien lié et que les sélecteurs ciblent les bonnes balises HTML. Adaptez ensuite les couleurs principales (#2563eb, #1a1a1a) à votre palette personnelle, ajustez les espacements selon votre densité visuelle préférée, et basculez sur des polices Google Fonts adaptées à votre style (Inter, Poppins, Manrope sont des choix sûrs en 2026).

Conseils pour un portfolio qui impressionne

  • 3-6 projets maximum : montrez la qualité, pas la quantité
  • Chaque projet doit avoir : une image, une description du problème résolu, les technologies utilisées, un lien vers le site
  • Photo professionnelle : pas de selfie, fond neutre
  • Texte concis : recruteurs passent 30 secondes sur un portfolio
  • Performances : images optimisées (WebP, lazy loading)
  • Hébergement gratuit : GitHub Pages (voir notre article dédié)

Erreurs fréquentes

Mettre 30 projets dans le portfolio

Cause : on veut tout montrer.
Solution : 3 à 6 projets MAXIMUM, choisis pour leur diversité technique. La qualité prime.

Pas de problème résolu, juste des technos listées

Cause : chaque projet est décrit par « React + Node + MongoDB ».
Solution : formulez « Pour quel client / quel besoin, j’ai construit X qui apporte Y ». Les recruteurs cherchent des résolveurs de problèmes, pas des collectionneurs de technos.

Aucune trace du code source

Cause : on lie au site live mais pas au repo GitHub.
Solution : ajoutez systématiquement un lien vers le code (ou un dépôt GitHub démonstratif), sauf clauses de confidentialité.

Performance et accessibilité ignorées

Cause : portfolio = vitrine technique, et il rame ou n’est pas accessible.
Solution : visez Lighthouse 95+ sur les 4 axes (performance, accessibilité, SEO, best practices). Sinon, vous décrédibilisez vos compétences.

Exercice pratique

🎯 Défi : Votre portfolio en 2 heures

  1. Copiez la structure HTML ci-dessus et personnalisez avec vos infos
  2. Ajoutez 3 projets avec des captures d’écran
  3. Personnalisez les couleurs (changez #667eea par votre couleur)
  4. Testez sur mobile avec les DevTools (F12 → icône mobile)
  5. Déployez sur GitHub Pages

Mise en page Grid pour la galerie de projets

Voici la mise en pratique pour Mise en page Grid pour la galerie de projets. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

.projets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

minmax(280px, 1fr) impose une largeur minimale de 280 px et laisse Grid créer autant de colonnes que la fenêtre le permet. Pour une carte qui doit occuper deux colonnes (un projet phare), ajoutez grid-column: span 2;.

Dark mode propre

Voici la mise en pratique pour Dark mode propre. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

:root {
  --bg: #ffffff; --texte: #1a1a1a; --accent: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f172a; --texte: #e2e8f0; --accent: #60a5fa; }
}
body { background: var(--bg); color: var(--texte); }

Pour offrir un bouton manuel, ajoutez data-theme='dark' sur <html> et redéfinissez les variables. Stockez le choix dans localStorage.

Accessibilité

  • Contraste 4,5:1 pour le texte normal, 3:1 pour le grand texte. WCAG 2.2 AA.
  • Images de projet : alt descriptif (« Maquette Figma de l’application bancaire X »).
  • Navigation clavier : :focus-visible { outline: 2px solid var(--accent); }.
  • Hiérarchie : un seul <h1> par page, pas de saut de niveau.

Performance Lighthouse 95+

  1. Compressez les images en WebP/AVIF avec squoosh.app. Une capture passe de 800 Ko à 80 Ko.
  2. Ajoutez loading='lazy' sous la ligne de flottaison.
  3. Servez les polices en woff2, déclarez font-display: swap.
  4. Inlinez le CSS critique si votre portfolio dépasse 100 Ko de CSS.

Déployer sur Netlify ou Cloudflare Pages

Pas besoin d’hébergeur payé pour un portfolio statique. Plan gratuit Netlify et Cloudflare Pages : domaine *.netlify.app ou *.pages.dev, HTTPS automatique, CDN global. Avec GitHub : poussez votre dossier, connectez à Netlify, chaque git push déclenche un déploiement. Pour un domaine personnel moncompte.sn chez NIC Sénégal (15 000 FCFA/an), ajoutez l’enregistrement CNAME indiqué.

Pièges qui font fuir un recruteur

Effet parallaxe agressif. Vidéo de fond auto-play en 1080p. Page « Contact » sans email visible. Lien « Mon CV.pdf » mort en 404. Avant de partager le lien sur LinkedIn, ouvrez votre site sur un Android moyen de gamme, en navigation privée, et cliquez chaque lien.

Adaptation au contexte ouest-africain : performance, équipe, marché

Pour un développeur ou une PME basée à Dakar, Abidjan, Bamako, Cotonou, Lomé, Ouagadougou, Niamey ou Conakry qui livre des sites web ou applications custom, trois adaptations pèsent sur le succès des projets. Premièrement, la connectivité 4G inégale impose de réduire le poids des pages au strict nécessaire. Deuxièmement, le profil typique des développeurs disponibles localement est majoritairement formé sur du JavaScript moderne et du PHP. Troisièmement, le coût en FCFA des services cloud doit être anticipé : Hetzner CX22 à 4 500 FCFA/mois reste imbattable pour démarrer, Cloudflare Pages gratuit pour les sites statiques, Backblaze B2 à 6 USD/TB/mois pour les sauvegardes.

Tester sur appareils réels

Plus important que tous les outils synthétiques, tester son site sur un Android d’entrée de gamme (Galaxy A03 à 200 EUR neuf, Tecno Spark, Itel A60) avec une connexion 4G locale dégradée donne le seul verdict qui compte. Lectures complémentaires, voir le guide media queries responsive.

Pratiques avancées et outils complémentaires

Au-delà des patterns présentés, plusieurs outils complètent une maîtrise sérieuse. Premier axe : automatiser la qualité via une pipeline CI (GitHub Actions, GitLab CI) qui exécute tests, linting et audit avant chaque déploiement. Deuxième axe : monitorer en production avec Sentry pour les erreurs JavaScript ou New Relic pour les performances applicatives. Troisième axe : documenter les décisions importantes dans un dossier docs/adr/ avec format simple (contexte, décision, conséquences).

Ressources francophones pour approfondir

Plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs reste la documentation de référence. FreeCodeCamp propose des parcours de 300+ heures. Grafikart.fr offre des centaines de tutoriels vidéos en français. Pour la pratique, contribuer à un projet open source via GitHub est l’investissement le plus payant à moyen terme.

Pratiques avancées et outils complémentaires

Au-delà des patterns présentés, plusieurs outils complètent une maîtrise sérieuse. Premier axe : automatiser la qualité via une pipeline CI (GitHub Actions, GitLab CI) qui exécute tests, linting et audit avant chaque déploiement. Deuxième axe : monitorer en production avec Sentry pour les erreurs JavaScript ou New Relic pour les performances applicatives. Troisième axe : documenter les décisions importantes dans un dossier docs/adr/ avec format simple (contexte, décision, conséquences).

Ressources francophones pour approfondir

Plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs reste la documentation de référence. FreeCodeCamp propose des parcours de 300+ heures. Grafikart.fr offre des centaines de tutoriels vidéos en français. Pour la pratique, contribuer à un projet open source via GitHub est l’investissement le plus payant à moyen terme.

Erreurs courantes à éviter en production

Trois patterns reviennent dans les projets web mal exécutés et coûtent cher à corriger plus tard. Premier pattern : copier-coller de code Stack Overflow sans comprendre le contexte d’origine. Deuxième pattern : ignorer les warnings de la console — chaque warning est un signal qui mérite d’être lu. Troisième pattern : ne pas tester sur de vrais appareils. DevTools simule mais ne remplace pas un test physique sur un Android d’entrée de gamme avec une 4G dégradée. Documenter chaque décision technique majeure dans un fichier ADR prend dix minutes et fait gagner des heures lors d’un incident ou d’un audit.

Erreurs courantes à éviter en production

Trois patterns reviennent dans les projets web mal exécutés et coûtent cher à corriger plus tard. Premier pattern : copier-coller de code Stack Overflow sans comprendre le contexte d’origine. Deuxième pattern : ignorer les warnings de la console — chaque warning est un signal qui mérite d’être lu. Troisième pattern : ne pas tester sur de vrais appareils. DevTools simule mais ne remplace pas un test physique sur un Android d’entrée de gamme avec une 4G dégradée. Documenter chaque décision technique majeure dans un fichier ADR prend dix minutes et fait gagner des heures lors d’un incident ou d’un audit.

Pour les équipes qui veulent industrialiser leur production de sites professionnels, formaliser un design system partagé entre projets accélère la livraison et garantit une cohérence visuelle de marque qui se voit immédiatement.

À lire ensuite

#css #html #portfolio
Service ITSkillsCenter

Application mobile Android et iOS

Création d'application mobile Android et iOS. À partir de 350 000 FCFA.

Démarrer mon projet
Publicité

Articles Similaires