Introduction au Développement HTML et CSS
Introduction au Développement HTML et CSS

Création d'un site portfolio responsive

Bienvenue dans cette leçon consacrée à la création d'un site portfolio responsive, un projet essentiel pour tout développeur web en herbe. Dans le cadre de votre Introduction au Développement HTML et CSS, ce cours vous fournira les bases pour construire une présence en ligne professionnelle et adaptable à tous les appareils.

Introduction : L'Importance d'un Portfolio en Ligne

Dans le monde numérique actuel, un site portfolio est bien plus qu'une simple vitrine de vos projets ; c'est votre carte de visite numérique, votre CV interactif et un témoignage concret de vos compétences. Il permet de présenter vos réalisations, votre parcours et votre personnalité à des employeurs potentiels, des clients ou même d'autres développeurs.

Pourquoi un portfolio ?

  • Visibilité : Vous êtes accessible 24h/24, 7j/7, partout dans le monde.
  • Crédibilité : Prouve que vous savez mettre en pratique vos compétences.
  • Personnalisation : Montrez votre créativité et votre style unique.
  • Démontrer vos compétences : C'est un projet en soi qui montre votre maîtrise de HTML, CSS (et plus tard JavaScript).

Qu'est-ce qu'un site portfolio "responsive" ?

Un site web est dit responsive (ou adaptatif) lorsqu'il est conçu pour s'afficher correctement et offrir une expérience utilisateur optimale sur une grande variété d'appareils et de tailles d'écran : ordinateurs de bureau, ordinateurs portables, tablettes et smartphones.

Les principes clés du responsive design :

  • Grilles fluides : Utilisation d'unités relatives (pourcentages, em, rem, vw, vh) pour que les éléments s'adaptent à la taille de l'écran, plutôt que des largeurs fixes en pixels.
  • Images flexibles : Les images sont redimensionnées dynamiquement pour éviter de déborder de leur conteneur.
  • Media Queries : Des règles CSS spécifiques qui s'appliquent uniquement lorsque certaines conditions (comme la largeur de l'écran) sont remplies. C'est le cœur du responsive design.

Pourquoi est-ce crucial pour un portfolio ? Imaginez un recruteur consultant votre portfolio depuis son smartphone. Si le site n'est pas responsive, le texte sera illisible, les images coupées, et la navigation impraticable. Une mauvaise expérience sur mobile peut donner une image non professionnelle et faire fuir les visiteurs. Un site responsive assure que votre travail est toujours présenté sous son meilleur jour, quel que soit l'appareil utilisé.

Les Fondations : HTML pour la Structure

HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu d'une page web. C'est l'ossature de votre portfolio.

Structure de base d'une page HTML

Toute page HTML valide doit commencer par une déclaration <!DOCTYPE html> et inclure les balises <html>, <head> et <body>.

  • La section <head> contient les métadonnées de la page (titre, liens vers les feuilles de style CSS, encodage des caractères, etc.) et est invisible pour l'utilisateur.
  • La section <body> contient tout le contenu visible de la page (texte, images, liens, etc.).

Un élément crucial pour le responsive design est la balise <meta name="viewport"> placée dans le <head>. Elle indique au navigateur comment contrôler les dimensions et le zoom de la page.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Portfolio - John Doe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Le contenu de votre site ira ici -->
</body>
</html>
  • width=device-width : Définit la largeur de la fenêtre (viewport) à la largeur de l'écran de l'appareil.
  • initial-scale=1.0 : Définit le niveau de zoom initial lorsque la page est chargée pour la première fois.

Sections clés d'un portfolio

Un portfolio bien structuré devrait inclure plusieurs sections sémantiques pour organiser votre contenu de manière logique. Voici des exemples courants de sections, utilisant des balises HTML5 appropriées :

  • <header> : Contient le logo ou le nom du site et la navigation principale (<nav>).
  • Section "Hero" (souvent une <section> ou <div> distincte) : La première chose que les visiteurs voient. Elle inclut généralement une image attrayante, un titre accrocheur, votre nom et une brève description de qui vous êtes ou ce que vous faites.
  • <section id="a-propos"> : Une section "À Propos" de vous, votre parcours, vos passions.
  • <section id="competences"> : Liste de vos compétences techniques (langages, outils, frameworks).
  • <section id="portfolio"> ou <section id="projets"> : La partie la plus importante. Présentez vos projets avec des images, des descriptions, et des liens vers les démos ou dépôts GitHub. Utilisez des <article> ou des <div> pour chaque projet.
  • <section id="contact"> : Formulaire de contact, adresses e-mail, liens vers vos profils de réseaux sociaux professionnels.
  • <footer> : Informations de copyright, liens secondaires.

Voici un exemple simplifié de structure HTML pour un site portfolio :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Portfolio - Jane Doe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="container">
            <h1><a href="#hero">Jane Doe</a></h1>
            <nav>
                <ul>
                    <li><a href="#a-propos">À Propos</a></li>
                    <li><a href="#competences">Compétences</a></li>
                    <li><a href="#projets">Projets</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="hero" class="hero">
        <div class="container">
            <h2>Développeuse Web Créative</h2>
            <p>Passionnée par la création d'expériences numériques engageantes et intuitives.</p>
            <a href="#projets" class="btn">Voir mes projets</a>
        </div>
    </section>

    <section id="a-propos" class="about">
        <div class="container">
            <h3>À Propos de Moi</h3>
            <p>Bonjour ! Je suis Jane, une développeuse front-end avec X années d'expérience...</p>
        </div>
    </section>

    <section id="projets" class="projects">
        <div class="container">
            <h3>Mes Projets</h3>
            <div class="project-grid">
                <article class="project-item">
                    <h4>Projet 1 : Nom du site</h4>
                    <img src="https://via.placeholder.com/300x200" alt="Image du projet 1">
                    <p>Brève description du projet 1...</p>
                    <a href="#" target="_blank">Voir le projet</a>
                </article>
                <article class="project-item">
                    <h4>Projet 2 : Application mobile</h4>
                    <img src="https://via.placeholder.com/300x200" alt="Image du projet 2">
                    <p>Brève description du projet 2...</p>
                    <a href="#" target="_blank">Voir le projet</a>
                </article>
                <!-- Plus de projets ici -->
            </div>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <h3>Me Contacter</h3>
            <p>N'hésitez pas à me contacter via ce formulaire ou mes réseaux sociaux.</p>
            <!-- Un formulaire de contact simple pourrait aller ici -->
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2023 Jane Doe. Tous droits réservés.</p>
        </div>
    </footer>

</body>
</html>

Explication du code HTML : Ce bloc de code fournit la structure sémantique de notre portfolio. Chaque section est délimitée par une balise appropriée (<header>, <section>, <footer>) et possède un id pour faciliter la navigation interne et le ciblage CSS. Des classes (.container, .hero, .project-grid, etc.) sont ajoutées pour faciliter le stylisme avec CSS. Le div.container est une pratique courante pour centrer et limiter la largeur du contenu.

L'Esthétique et l'Adaptabilité : CSS pour le Style et le Responsive

CSS (Cascading Style Sheets) est le langage utilisé pour styliser le HTML. Il détermine l'apparence de votre site : couleurs, polices, espacements, mise en page. Pour un site responsive, CSS est également essentiel pour adapter cette apparence aux différentes tailles d'écran.

Les bases du CSS

Vous savez déjà que le CSS utilise des sélecteurs pour cibler des éléments HTML et leur appliquer des propriétés avec des valeurs.

/* Exemple de base */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 1200px; /* Limite la largeur du contenu */
    margin: 0 auto;    /* Centre le conteneur */
    padding: 0 20px;   /* Ajoute un peu d'espacement sur les côtés */
}

/* Styles pour le header */
header {
    background-color: #333;
    color: white;
    padding: 1rem 0;
}

header h1 {
    margin: 0;
    font-size: 1.8rem;
}

header h1 a {
    color: white;
    text-decoration: none;
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

header nav ul li {
    display: inline-block; /* Pour aligner les éléments de menu */
    margin-left: 20px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

Mise en page avec Flexbox

Pour les mises en page modernes et flexibles, Flexbox (Flexible Box Layout) est un outil indispensable. Il permet de distribuer l'espace entre les éléments d'un conteneur et de les aligner facilement, dans une seule dimension (ligne ou colonne).

Pour utiliser Flexbox, vous définissez un conteneur comme display: flex;. Les éléments enfants de ce conteneur deviennent des éléments flexibles.

Par exemple, pour la navigation dans le <header>, nous voulons que le titre et la navigation soient alignés horizontalement, avec le titre à gauche et la navigation à droite.

/* Dans style.css, en complément des styles précédents */

/* Mise en page du header avec Flexbox */
header .container {
    display: flex; /* Active Flexbox pour le conteneur du header */
    justify-content: space-between; /* Distribue l'espace : titre à gauche, nav à droite */
    align-items: center; /* Centre verticalement les éléments */
}

/* Mise en page de la grille de projets avec Flexbox */
.project-grid {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si l'espace manque */
    gap: 20px;       /* Espacement entre les projets */
    justify-content: center; /* Centre les projets horizontalement */
}

.project-item {
    flex: 1 1 300px; /* Croissance, Réduction, Taille de base (minimum 300px) */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
}

.project-item img {
    max-width: 100%; /* S'assure que les images ne débordent pas */
    height: auto;    /* Maintient le ratio d'aspect */
    border-radius: 4px;
    margin-bottom: 15px;
}

Explication du code CSS Flexbox :

  • header .container: On utilise display: flex; pour faire du conteneur un conteneur flex. justify-content: space-between; pousse les éléments enfants (h1 et nav) aux extrémités. align-items: center; les centre verticalement.
  • .project-grid: On utilise display: flex; pour créer une grille flex. flex-wrap: wrap; est crucial pour le responsive : il permet aux éléments de passer à la ligne suivante si l'espace est insuffisant. gap ajoute un espacement uniforme entre les éléments.
  • .project-item: flex: 1 1 300px; est une shorthand pour flex-grow: 1; flex-shrink: 1; flex-basis: 300px;. Cela signifie que chaque élément de projet essaiera d'avoir une largeur de 300px, pourra grandir (flex-grow: 1;) pour prendre l'espace disponible, et pourra rétrécir (flex-shrink: 1;) si l'espace est limité.

Principes du Responsive Design avec CSS

Le responsive design repose sur l'idée d'adapter le style en fonction des caractéristiques de l'appareil.

  1. Unités Relatives :

    • Pourcentages (%) : Idéales pour les largeurs et hauteurs qui doivent s'adapter au conteneur parent.
    • em et rem : Unités relatives à la taille de la police. em est relatif à la taille de la police de l'élément parent, tandis que rem est relatif à la taille de la police de l'élément racine (<html>). Préférables pour les polices et espacements pour une meilleure accessibilité et adaptabilité.
    • vw (viewport width) et vh (viewport height) : Relatives à la largeur et hauteur du viewport. 1 vw = 1% de la largeur du viewport. Utiles pour des éléments qui doivent scaler avec la taille de l'écran (ex: taille de texte de titre principal).

  2. Media Queries : Le Cœur du Responsive Les Media Queries sont des règles CSS qui s'appliquent uniquement si certaines conditions sont remplies. Elles sont utilisées pour appliquer des styles différents en fonction de la taille de l'écran, de l'orientation (portrait/paysage), de la résolution, etc.

    La syntaxe de base est :

    @media (condition) {
    /* Règles CSS qui s'appliquent si la condition est vraie */
}

    Les conditions les plus courantes sont min-width (largeur minimale) et max-width (largeur maximale).

    Exemple de Media Query pour un portfolio : Sur les petits écrans (mobiles), la navigation peut être affichée verticalement, et les éléments de projet peuvent prendre toute la largeur pour être plus lisibles.

    /* style.css */

/* Styles par défaut (Mobile First - pour les petits écrans en premier) */
header .container {
    flex-direction: column; /* La navigation est en colonne par défaut */
    text-align: center;
}

header nav ul li {
    display: block; /* Chaque élément de menu prend toute la largeur */
    margin: 10px 0;
}

.project-item {
    flex: 1 1 100%; /* Sur mobile, chaque projet prend 100% de la largeur */
}

/* Media Query pour les écrans plus grands (tablettes et desktops) */
@media (min-width: 768px) {
    /* Quand l'écran est d'au moins 768px de large */
    header .container {
        flex-direction: row; /* La navigation revient en ligne */
        justify-content: space-between;
        text-align: left;
    }

    header nav ul li {
        display: inline-block; /* Les éléments de menu reviennent en ligne */
        margin-left: 20px;
        margin-right: 0;
    }

    .project-item {
        flex: 1 1 calc(50% - 20px); /* Sur les écrans moyens, 2 projets par ligne (avec espace) */
    }
}

/* Media Query pour les très grands écrans (desktops) */
@media (min-width: 1024px) {
    /* Quand l'écran est d'au moins 1024px de large */
    .project-item {
        flex: 1 1 calc(33.333% - 20px); /* Sur les grands écrans, 3 projets par ligne */
    }
}

Explication du code CSS Responsive : Ce bloc montre une approche "Mobile First". Nous définissons d'abord les styles pour les plus petits écrans par défaut, puis utilisons les media queries avec min-width pour ajouter ou modifier des styles pour les écrans plus grands.

  • Sur les petits écrans, la navigation est empilée (flex-direction: column;, display: block;), et chaque projet prend toute la largeur (flex: 1 1 100%;).
  • À partir de 768px (min-width: 768px), la navigation repasse en ligne (flex-direction: row;, display: inline-block;), et les projets se réorganisent pour avoir 2 par ligne (flex: 1 1 calc(50% - 20px);).
  • À partir de 1024px (min-width: 1024px), les projets s'affichent à 3 par ligne (flex: 1 1 calc(33.333% - 20px);).

C'est ainsi que l'on adapte dynamiquement la mise en page et l'apparence du site en fonction de la taille de l'écran de l'utilisateur, garantissant une expérience optimale pour tous.

Mise en œuvre pas à pas pour votre Portfolio

  1. Planification & Maquettage :

    • Réfléchissez au contenu : Quels projets voulez-vous montrer ? Quelles informations personnelles sont pertinentes ?
    • Esquissez la mise en page : Dessinez grossièrement comment vous voulez que votre site apparaisse sur desktop et mobile (sur papier ou avec un outil de maquettage).

  2. Développement HTML :

    • Créez votre fichier index.html.
    • Mettez en place la structure de base (html, head, body, meta viewport).
    • Ajoutez toutes les sections de contenu (header, hero, about, skills, projects, contact, footer) en utilisant les balises sémantiques appropriées.
    • N'oubliez pas d'inclure des liens vers vos images et d'ajouter des attributs alt pertinents pour l'accessibilité.

  3. Styling CSS de Base :

    • Créez votre fichier style.css et liez-le dans le <head> de votre HTML.
    • Appliquez les styles généraux : polices, couleurs d'arrière-plan, espacements.
    • Utilisez Flexbox (ou Grid si vous êtes à l'aise) pour les mises en page principales (navigation, grille de projets). Commencez par une version "desktop" ou "mobile" de base.

  4. Rendre Responsive avec les Media Queries :

    • Identifiez les "points de rupture" (breakpoints) où votre design doit changer (ex: 768px pour les tablettes, 1024px pour les desktops).
    • Écrivez vos @media rules pour adapter les styles. Changez l'orientation de Flexbox, la taille des polices, les marges, ou la visibilité d'éléments si nécessaire.
    • Testez sur différentes tailles de navigateur (ou utilisez les outils de développement des navigateurs pour simuler des appareils).

  5. Test et Optimisation :

    • Test sur différents navigateurs et appareils : Assurez-vous que votre site fonctionne bien partout.
    • Test d'accessibilité : Vérifiez que le contraste des couleurs est bon, que les images ont des textes alternatifs, etc.
    • Optimisation des images : Utilisez des formats et des tailles d'images optimisés pour le web afin d'améliorer les temps de chargement.
    • Validation : Utilisez des validateurs HTML et CSS en ligne pour corriger les erreurs.

Bonnes Pratiques et Conseils

  • Commencez simple : Ne tentez pas de créer un design trop complexe pour votre premier portfolio. Concentrez-vous sur la clarté et la fonctionnalité.
  • Utilisez des unités relatives : Privilégiez %, em, rem, vw, vh plutôt que les px pour les largeurs, marges, paddings et tailles de police.
  • Mobile First vs. Desktop First : Nous avons vu une approche mobile-first dans l'exemple CSS. C'est une excellente pratique qui consiste à designer d'abord pour les plus petits écrans, puis à ajouter des styles pour les écrans plus grands avec min-width. Cela garantit que votre site est léger et rapide sur mobile.
  • Pensez à l'expérience utilisateur (UX) : Votre site doit être facile à naviguer et agréable à utiliser.
  • Ajoutez de l'interactivité : Une fois les bases HTML/CSS maîtrisées, vous pourrez ajouter du JavaScript pour des animations, des galeries d'images dynamiques, ou des formulaires de contact fonctionnels.
  • Versionnez votre code : Utilisez Git et GitHub pour suivre vos modifications et sauvegarder votre travail.
  • Soyez fier de votre travail : Votre portfolio est une représentation de vous-même. Mettez-y du cœur !

Conclusion

Créer un site portfolio responsive est un projet fondamental qui consolide vos connaissances en HTML et CSS. Vous avez appris l'importance de structurer votre contenu avec HTML, de le styliser avec CSS, et surtout, de le rendre adaptable à tous les appareils grâce aux principes du responsive design, notamment l'utilisation des unités relatives et des Media Queries.

En appliquant ces concepts, vous serez capable de construire une vitrine professionnelle et efficace pour vos compétences, essentielle pour votre parcours dans le développement web. N'oubliez pas que la pratique est la clé : expérimentez, construisez, et itérez !