Bienvenue ! Si vous parlez espagnol et que vous souhaitez pratiquer vos compétences en HTML et CSS, créer des sites web responsives avec Bootstrap 5, et construire votre site portfolio, alors ce cours est fait pour vous.
Dans cet article, vous trouverez une brève introduction au développement web responsive et à Bootstrap 5. Vous apprendrez également pourquoi vous devriez les apprendre si votre objectif est de devenir développeur front-end.
Ensuite, vous trouverez un cours de 5 heures sur Bootstrap 5 sur la chaîne YouTube freeCodeCamp en espagnol. Dans ce cours, vous pouvez apprendre les fondamentaux en espagnol et construire votre site portfolio étape par étape en utilisant les composants, icônes et la grille de Bootstrap.
Si vous avez des amis hispanophones, vous êtes les bienvenus pour partager la version espagnole de cet article avec eux.
💡 Astuce : pour suivre le cours, vous devez avoir des connaissances préalables en HTML et CSS. Si vous devez réviser ces sujets, je vous invite à suivre nos cours complets sur la chaîne YouTube en espagnol.
Commençons ! ✨
🔹 Qu'est-ce que Bootstrap ?
Commençons par une introduction à Bootstrap. La documentation officielle de Bootstrap le définit comme :
Un outil puissant, extensible et riche en fonctionnalités pour le développement front-end.
Bootstrap 5 - Site officiel
Examinons de plus près les mots clés de cette définition :
- Bootstrap est puissant car il dispose de nombreuses fonctionnalités, y compris des classes CSS prédéfinies que vous pouvez appliquer à vos éléments HTML pour leur attribuer un style instantanément. Avec Bootstrap, vous pouvez également utiliser des plugins JavaScript puissants pour créer des éléments comme des carrousels, des modales, des infobulles, et plus encore.
- Bootstrap est extensible car vous pouvez étendre ou personnaliser les classes CSS prédéfinies qui accompagnent Bootstrap pour répondre à vos besoins. Si vous devez changer une couleur, vous pouvez le faire avec des sélecteurs, identifiants et classes CSS personnalisés. Vous pouvez également personnaliser le code JavaScript qui alimente certains composants Bootstrap.
- Bootstrap est utilisé pour le développement front-end car cette partie du développement web se concentre sur la conception et le développement de l'interface utilisateur, la partie du site web que les utilisateurs voient et avec laquelle ils interagissent directement.
💡 Astuce : en gros, Bootstrap vous fournit tous les outils nécessaires pour développer des sites web responsives avec des composants, icônes et styles prédéfinis.
Exemples de composants Bootstrap (source)
🔶 Importance de créer un portfolio de développeur
Développer votre site portfolio est très important pour mettre en avant vos connaissances, compétences et les projets sur lesquels vous avez travaillé pendant votre parcours d'apprentissage.
Réfléchissez-y...
Quel est le meilleur moyen de prouver vos connaissances et compétences ?
La réponse est : créer des projets concrets.
C'est exactement ce que recherchent les employeurs – des développeurs capables d'apprendre de nouvelles technologies et de les appliquer à de nouveaux scénarios.
Créer un projet est un excellent moyen de montrer que vous avez les bonnes compétences et la motivation pour travailler en tant que développeur web.
Super. Maintenant que vous savez pourquoi il est important de créer votre portfolio de développeur, voyons le site portfolio que vous allez créer. 👁🏻
🔸 Projet du cours
Voici la structure principale du projet de site portfolio que nous allons construire pendant le cours :
Section Hero et Section À propos de moi
Cette section aura une barre de navigation et une image de profil. La barre de navigation sera responsive. Une icône de menu burger sera affichée sur les petits appareils (au lieu de la barre de navigation) et le texte sera masqué automatiquement.
Section Expérience
Cette section inclura trois domaines de connaissances différents et des badges pour mettre en avant des compétences spécifiques. Cette section sera responsive et aura un effet de survol pour ajouter de l'interactivité.
Section Projets
Cette section inclura des liens vers les dépôts GitHub et les versions en direct des projets. Nous créerons cette section avec la grille Bootstrap, elle sera donc entièrement responsive et vous apprendrez à travailler avec les points de rupture de la grille.
Section Articles
Une liste d'articles ou de billets de blog. Ceux-ci seront des cartes et des groupes de listes Bootstrap. Chaque article sera représenté par un lien qui s'ouvrira dans un nouvel onglet.
Section Témoignages
Un carrousel de témoignages de clients. Ce sera un composant carrousel Bootstrap avec trois témoignages et des contrôleurs pour passer à l'élément précédent ou suivant dans le carrousel.
Section Contactez-moi et Pied de page
Cette section aura des liens vers les profils de réseaux sociaux et affichera les droits d'auteur du site web. Les liens de réseaux sociaux seront des icônes Bootstrap personnalisées.
Dans les coulisses
Nous travaillerons avec :
- La grille Bootstrap pour adapter le site web à des appareils de différentes tailles.
- Les composants Bootstrap, y compris les boutons, carrousel, barre de navigation responsive, images responsives, cartes, groupes de listes, et plus encore.
- Les icônes Bootstrap pour ajouter des liens vers les profils de réseaux sociaux (Twitter, GitHub, LinkedIn et Instagram).
- Les balises HTML sémantiques telles que
<header>,<section>, et<footer>. - Les requêtes média pour adapter les éléments HTML à des appareils de différentes tailles et orientations.
- Les sélecteurs CSS
- Google Fonts
- Et plus encore !
Vous pratiquerez de nombreuses compétences différentes en construisant ce projet et, une fois terminé, vous aurez un portfolio professionnel entièrement responsive pour mettre en avant vos compétences.
Cela semble génial, n'est-ce pas ?
💡 Astuce : après avoir créé la structure de base du site web, vous pouvez la personnaliser avec votre image de profil unique, vos compétences et vos projets.
🔹 Outils de développement
Nous travaillerons avec plusieurs outils que les développeurs utilisent dans leur travail quotidien.
Visual Studio Code
Un éditeur de code puissant et populaire créé par Microsoft. Vous pouvez le télécharger et l'installer gratuitement depuis son site officiel.
Visual Studio Code - Site officiel
Extension Live Server pour Visual Studio Code
Une extension très utile qui nous aidera à améliorer notre productivité en actualisant le navigateur lorsque nous modifions nos fichiers HTML ou CSS.
Live Server - Documentation dans la Place de marché des extensions
Outils de développement Chrome
Un ensemble d'outils de développement intégrés au navigateur Google Chrome. Ils sont très utiles pour tester la réactivité du site web, sélectionner des éléments dans la structure HTML et prévisualiser les modifications dans les fichiers HTML et CSS.
Outils de développement Chrome - freeCodeCamp
💡 Astuce : nous téléchargerons et installerons tous les outils nécessaires pendant le cours et vous apprendrez à travailler avec eux étape par étape.
🔸 Cours sur YouTube
Super. Maintenant que vous en savez plus sur Bootstrap 5 et sur l'importance de créer un portfolio professionnel, vous avez également vu ce que vous apprendrez pendant le cours.
Si vous êtes prêt, nous vous invitons à commencer à suivre le cours sur la chaîne YouTube freeCodeCamp Español :
💻 Dans ce lien, vous pouvez accéder au projet en direct (en espagnol) et pratiquer l'utilisation des outils de développement Chrome.
✍️ Cours créé par Estefania Cassingena Navone (Twitter : @EstefaniaCassN, YouTube : Coding with Estefania).
J'espère vraiment que vous aimerez le cours et que vous le trouverez utile pour créer votre portfolio de développeur.
Vous êtes également les bienvenus pour continuer à apprendre avec nos cours en espagnol :