Comment créer : Barre de compétences CSS

Apprenez à utiliser CSS pour créer des barres de compétences.

Mes compétences

Les barres de compétences sont souvent utilisées dans les CV en ligne pour afficher vos compétences dans différents domaines :

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Essayer personnellement

Comment créer une barre de compétences

Première étape - Ajouter HTML :

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

Deuxième étape - Ajouter CSS :

/* Assurez-vous que les marges fonctionnent comme prévu */
* {boîte à outils:border-box}
/* Conteneur des barres de compétences */
.container {
  largeur: 100%; /* Largeur complète */
  couleur-fond: #ddd; /* Fond gris */
}
.skills {
  alignement-texte: droite; /* Alignement du texte à droite */
  marge-haut: 10px; /* Ajouter une marge supérieure */
  marge-bas: 10px; /* Ajouter une marge inférieure */
  couleur: blanc; /* Couleur de texte en blanc */
}
.html {largeur: 90%; couleur-fond: #04AA6D;} /* Vert */
.css {largeur: 80%; couleur-fond: #2196F3;} /* Bleu */
.js {largeur: 65%; couleur-fond: #f44336;} /* Rouge */
.php {largeur: 60%; couleur-fond: #808080;} /* Gris foncé */

Essayer personnellement