Introduction

La certification "Créez votre site web avec HTML5 et CSS3" sur OpenClassrooms est conçue pour vous apprendre les bases du développement de sites web en partant de zéro. Vous allez apprendre à structurer des pages avec HTML5 (le langage utilisé pour créer le squelette d'un site) et à styliser ces pages avec CSS3 (le langage qui contrôle l'apparence des pages). Voici les concepts principaux expliqués avec des exemples de code au format Astro, un framework moderne pour créer des sites statiques.

HTML5 : Structurer une page web

<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, 
        initial-scale=1.0"/>
        <title>Mon site web</title>
    </head>
    <body>
        <header>
            <h1>Bienvenue sur mon site</h1>
            <nav>
                <ul>
                    <li><a href="#about">À propos</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section id="about">
            <h2>À propos de moi</h2>
            <p>Je suis développeur web en apprentissage !</p>
        </section>

        <footer>
            <p>&copy; 2024 Mon site web</p>
        </footer>
    </body>
</html>

CSS3 : Styliser votre site

CSS3 permet d'ajouter des styles à votre site, comme changer la couleur du texte, la taille des polices, et la disposition des éléments.

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
        margin: 0;
        padding: 0;
    }

    header {
        background-color: #333;
        color: white;
        padding: 1rem;
        text-align: center;
    }

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

    nav ul li {
        display: inline;
        margin-right: 10px;
    }

    section {
        margin: 20px;
        padding: 20px;
        background-color: white;
        border-radius: 5px;
    }

    footer {
        text-align: center;
        padding: 1rem;
        background-color: #333;
        color: white;
    }
</style>

Créer un projet fil rouge

Tout au long de la certification, vous allez travailler sur un projet : un site pour un photographe fictif. Cela vous permettra d'appliquer vos compétences de manière concrète. Par exemple, vous pouvez créer une page avec une galerie d'images pour montrer les photos du photographe, avec HTML pour la structure et CSS pour la mise en page.

<section id="gallery">
    <h2>Galerie</h2>
    <div class="gallery">
        <img src="/images/photo1.jpg" alt="Photo 1" />
        <img src="/images/photo2.jpg" alt="Photo 2" />
        <img src="/images/photo3.jpg" alt="Photo 3" />
    </div>
</section>

<style>
    .gallery {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }

    .gallery img {
        width: 30%;
        border-radius: 5px;
    }
</style>

Utilisation d'outils modernes

Durant le cours, vous allez aussi apprendre à utiliser Visual Studio Code, un éditeur de texte pour écrire du code, et GitHub, une plateforme pour partager et gérer vos projets. Vous y déposerez vos fichiers HTML et CSS et suivrez les corrections des exercices.

Conclusion

En résumé, cette certification vous prépare à créer des sites modernes et responsifs, en utilisant les meilleures pratiques du développement web. Grâce aux exemples concrets et aux outils commeAstro,Githubet Visual Studio Code, vous serez prêt à réaliser des projets réels.

Créez votre site web avec HTML5 et CSS3

Table of contents