Construire des projets est très important pour apprendre à coder. Lorsque vous créez un projet, vous développez votre portfolio et apprenez à appliquer vos compétences à de nouvelles situations.
Nous venons de publier un cours de 2 heures sur la chaîne YouTube freeCodeCamp.org Spanish qui vous guidera étape par étape dans la construction de 3 projets avec HTML, CSS et JavaScript. Vous pratiquerez vos compétences en construisant une barre de navigation responsive avec des menus déroulants, un slider et une page de destination avec une modale personnalisée.
Si vous avez des amis hispanophones, vous êtes les bienvenus pour partager la version espagnole de cet article avec eux.
Jordan Alexander Cruz Garcia enseigne ce cours. Il est un développeur web qui aime partager ses connaissances et enseigner aux autres le monde merveilleux de CSS.
💡 Astuce : Veuillez noter que le cours se concentre sur HTML et CSS mais nécessite également des connaissances de base en JavaScript pour implémenter l'interactivité.
HTML, CSS et JavaScript
HTML signifie HyperText Markup Language et CSS signifie Cascading Style Sheets. Alors que HTML fournit la structure et le contenu d'un site web, CSS détermine comment le contenu est affiché. Il contrôle les aspects visuels du site web, tels que les polices, les couleurs, les mises en page, les espacements et les animations.
Avec CSS, vous pouvez facilement créer différents styles et mises en page pour diverses tailles d'écran, rendant votre site web beau sur les ordinateurs de bureau, les tablettes et les appareils mobiles.
💡 Astuce : Les sites web qui s'adaptent à différentes tailles d'écran sont connus sous le nom de "sites web responsives".
Nous écrivons généralement CSS dans un fichier externe que nous appelons une "feuille de style". Ensuite, nous lions cette feuille de style au fichier HTML, appliquant tous les styles aux éléments HTML correspondants en fonction des sélecteurs et propriétés CSS.
Séparer le contenu du site web de sa présentation est très utile. Cela résulte en une structure de projet plus maintenable et un processus de rendu plus efficace car les navigateurs peuvent rendre la structure plus rapidement, tout en téléchargeant les styles CSS en arrière-plan.
En gros, CSS est un outil essentiel pour créer les sites web beaux, visuels et conviviaux que nous voyons aujourd'hui.
JavaScript ajoute de l'interactivité au site web. Il transforme des éléments simples en éléments interactifs pour créer des expériences utilisateur engageantes.
Projets HTML, CSS et JavaScript en espagnol
Super. Maintenant que vous en savez plus sur HTML, CSS et JavaScript, examinons les projets que vous allez construire pendant le cours.
Projet 1 : Barre de navigation
Vous commencerez par construire une barre de navigation avec des menus déroulants. Cette barre de navigation sera responsive, donc elle s'étendra ou se rétrécira pour s'adapter à la taille de l'écran. Si l'écran est trop petit, elle se transformera automatiquement en une barre latérale.
💡 Astuce : Les options principales seront toujours affichées. Lorsque l'utilisateur clique sur "À propos" ou "Projets", un menu déroulant avec des options supplémentaires sera affiché.
Version desktop
Ici vous pouvez voir la version desktop.
Version mobile
Voici la version mobile que vous verrez sur les petits appareils.
💡 Astuce : Cette technique de masquage et de basculement de la barre de navigation est utilisée très fréquemment pour optimiser l'espace pour le contenu autant que possible.
Projet 2 : Slider
Ensuite, vous construirez un slider avec trois positions qui changeront lorsque l'utilisateur cliquera sur les flèches de gauche ou de droite. Chaque position aura un titre, un court paragraphe et une image circulaire.
💡Astuce : Les sliders sont utiles pour partager les retours des utilisateurs, les citations et les avis.
Projet 3 : Page de destination
Enfin, vous construirez une page de destination étape par étape avec CSS Grid.
Lorsque l'utilisateur clique sur le bouton "Rejoignez-nous !", une modale personnalisée sera affichée. Vous implémenterez cette modale avec HTML, CSS et JavaScript étape par étape.
Si vous êtes prêt à commencer à pratiquer vos compétences en HTML, CSS et JavaScript, consultez le cours sur la chaîne YouTube freeCodeCamp.org Spanish :
✍️ Cours créé par Jordan Alexander Cruz Garcia (AlexCG).
YouTube : @AlexCGDesign
Twitter : @alexcgdesign
Linkedin : Jordan Alexander Cruz Garcia
Instagram : @alexcg_design
GitHub : AlexCGDesign
Blog de développement web : https://www.alexcgdesign.com/blog