Créer une Boîte de Compétences en HTML est une excellente façon de montrer vos talents et compétences sur votre site web ou votre portfolio. En utilisant HTML et un peu de CSS, vous pouvez créer une présentation visuelle attrayante et dynamique de vos compétences. Apprenons comment construire une boîte de compétences étape par étape.

Introduction à la Création d’une Boîte de Compétences en HTML

Dans ce tutoriel, nous allons concevoir une boîte de compétences simple utilisant HTML et CSS. Cette boîte de présentation est idéale pour les portfolios, les CV en ligne ou toute autre utilisation où vous souhaitez afficher vos compétences de manière claire et esthétique. Voici comment procéder, étape par étape.

Étape 1: Structurer le HTML

Commençons par créer une structure de base en HTML pour notre boîte de compétences. Nous utiliserons des <div> pour contenir et organiser notre contenu.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boîte de Compétences</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="skills-box">
        <h2>Mes Compétences</h2>
        <div class="skill">
            <h3>HTML</h3>
            <div class="skill-bar">
                <div class="skill-level" style="width: 90%;"></div>
            </div>
        </div>
        <div class="skill">
            <h3>CSS</h3>
            <div class="skill-bar">
                <div class="skill-level" style="width: 75%;"></div>
            </div>
        </div>
        <div class="skill">
            <h3>JavaScript</h3>
            <div class="skill-bar">
                <div class="skill-level" style="width: 60%;"></div>
            </div>
        </div>
    </div>
</body>
</html>

Étape 2: Styliser avec CSS

Pour rendre notre boîte de compétences visuellement attrayante, nous allons écrire quelques styles CSS. Nous allons ajouter une mise en page simple, des couleurs, et des barres de progression pour chaque compétence.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.skills-box {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-width: 400px;
    width: 100%;
}

.skills-box h2 {
    text-align: center;
    margin-bottom: 20px;
}

.skill {
    margin-bottom: 15px;
}

.skill h3 {
    margin: 0 0 5px;
}

.skill-bar {
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.skill-level {
    height: 20px;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    text-align: right;
    padding-right: 5px;
    line-height: 20px;
    color: #fff;
    border-radius: 5px 0 0 5px;
}

Étape 3: Adjuster les Détails et Ajouter des Barres de Progression Dynamiques

Nous pouvons ajouter quelques styles supplémentaires pour faire ressortir la boîte de compétences. Vous pouvez également rendre les barres de progression dynamiques en utilisant des animations CSS pour les faire progresser lorsqu’elles apparaissent dans la vue.

/* Ajoutons quelques animations */
@keyframes progress {
    from {
        width: 0;
    }
    to {
        width: inherit;
    }
}

.skill-level {
    animation: progress 2s;
}

Étape 4: Ajuster pour les Mobiles

Assurez-vous que votre boîte de compétences est réactive et fonctionne bien sur différents appareils. Vous pouvez utiliser des media queries pour ajuster les styles pour les écrans plus petits.

@media (max-width: 600px) {
    .skills-box {
        padding: 15px;
    }

    .skill-level {
        height: 15px;
        line-height: 15px;
    }
}

Conclusion

En suivant ces étapes simples, vous pouvez créer une Boîte de Compétences en HTML élégante et professionnelle. Non seulement cela améliore le design de votre portfolio ou CV en ligne, mais cela montre également aux employeurs potentiels votre capacité à structurer et styliser du contenu web. Pour d’autres tutoriels HTML et CSS, consultez notre site internet ou suivez des cours en ligne sur des plateformes comme Coursera.

Learnify Formation Web Dev Offre 50%

.

Pour plus d’informations sur la création de boîtes de compétences, vous pouvez consulter nos guides sur le création d’un portfolio HTML et comment créer un curriculum vitae en HTML. Ces ressources vous fournissent des instructions détaillées pour améliorer le design et la fonctionnalité de vos projets web.

En plus, pour optimiser l’impact de votre boîte de compétences, n’oubliez pas d’intégrer des éléments visuels et des métadonnées performantes, qui peuvent aider à l’optimisation SEO de votre page. Un autre conseil consiste à valider votre code en utilisant les outils de validation du W3C.

Pour les utilisateurs qui préfèrent des balises conteneur générales comme <div> et <span>, n’hésitez pas à visiter notre guide complet sur l’utilisation de div et span en CSS. Vous trouverez des astuces et des techniques avancées pour améliorer vos compétences en développement web.

Learnify Formation HTML et CSS Offre 50%

Categorized in:

CSS, HTML,

Tagged in: