Le développement de projets est très important pour apprendre à coder. Lorsque vous créez un projet, vous élargissez votre portefeuille et apprenez comment appliquer vos compétences à de nouvelles situations.

Nous avons récemment publié un cours de 2 heures sur le canal YouTube freeCodeCamp.org en espagnol qui vous guidera pas à pas dans la construction de 3 projets en utilisant HTML, CSS et JavaScript. Vous allez pratiquer vos compétences en construisant une barre de navigation réactive avec des menus déroulants, un glisseur et une page d’atterrissage avec une modale personnalisée.

Si vous avez des amis hispanophones, vous êtes les bienvenus à partager la version espagnole de cet article avec eux.

Jordan Alexander Cruz Garcia enseigne ce cours. Il est un développeur web qui adore partager son savoir et enseigner aux autres sur le monde fascinant de CSS.

💡 Astuce : Veuillez noter que le cours se concentre sur HTML et CSS mais nécessite également des connaissances de base de JavaScript pour l’implémenter l’interactivité.

HTML, CSS et JavaScript

HTML signifie HyperText Markup Language et CSS signifie Cascading Style Sheets. HTML fournit la structure et le contenu d’un site web, tandis que CSS détermine comment le contenu est affiché. Il contrôle les aspects visuels du site, tels que les polices, les couleurs, les mises en page, l’espacement et les animations.

Avec CSS, vous pouvez facilement créer différents styles et mises en page pour diverses tailles d’écrans, ce qui permet à votre site Web de se rendre superbe sur les ordinateurs de bureau, les tablettes et les appareils mobiles.

💡 Astuce : Les sites Web qui s’adaptent à différentes tailles d’écrans sont connus sous le nom de « sites Web adaptatifs ».

Nous écrivons généralement du 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 permet de Structure de projet plus maintenable et un processus de rendu plus efficient car les navigateurs peuvent rendre la structure plus rapidement, en chargeant les styles CSS en arrière-plan.

De base, CSS est un outil essentiel pour créer les belles, visuelles et conviviales sites Web que nous voyons aujourd’hui.

JavaScript ajoute de l’interactivité au site Web. Il transforme les éléments plaines en éléments interactifs pour créer des expériences utilisateur engageantes.

Projets HTML, CSS et JavaScript en espagnol

Génial. Maintenant que vous connaissez davantage sur HTML, CSS et JavaScript, voyons les projets que vous construirez pendant le cours.

Projet 1 : Barre de navigation

Vous commenceriez par construire une barre de navigation avec des menus déroulants. Cette barre de navigation sera adaptative, donc elle s’élargira ou se rétrécira pour s’ajuster à la taille de l’écran. Si l’écran est trop petit, elle se transformera automatiquement en barre latérale.

💡 Astuce : Les principales options seront toujours affichées. Lorsque l’utilisateur clique sur « A propos » ou « Projets », un menu déroulant avec des options supplémentaires sera affiché.

Version de bureau

Voici la version de bureau que vous pouvez voir ici.

Version mobile

C’est la version mobile que vous verrez sur les petits appareils.

💡 Astuce : Cette technique d’affichage et de basculement de la barre de navigation est très fréquemment utilisée pour optimiser l’espace du contenu le plus possible.

Projet 2 : Slider

Ensuite, vous construirerez un slider à 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 utilisateurs, les citations et les avis.

Projet 3 : Page d’accueil

Enfin, vous construirerez une page d’accueil progressivement avec le Grid CSS.

Lorsque l’utilisateur clique sur le bouton « Rejoignez-nous ! », un modal personnalisé sera affiché. Vous mettrez en œuvre ce modal avec HTML, CSS et JavaScript progressivement.

Si vous êtes prêt à commencer à pratiquer vos compétences en HTML, CSS et JavaScript, consultez le cours sur la chaîne YouTube espagnole de freeCodeCamp.org :

✍️ Cours créé par Jordan Alexander Cruz Garcia (AlexCG).