ITSkillsCenter
Développement Web

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

6 min de lecture

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

<!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

* { 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; }
}

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é)

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
#css #html #portfolio
Besoin d'un site web ?

Confiez-nous la Création de Votre Site Web

Site vitrine, e-commerce ou application web — nous transformons votre vision en réalité digitale. Accompagnement personnalisé de A à Z.

À partir de 350.000 FCFA
Parlons de Votre Projet
Publicité

Articles Similaires