Build Responsive Websites with HTML5 and CSS3 - eLearning

Créer des sites web adaptatifs avec HTML5 et CSS3 - Formation en ligne

Acquérez des bases solides en développement web moderne grâce à HTML5 et CSS3, les technologies clés qui sous-tendent tous les sites web sur Internet. Ce cours est conçu pour vous aider à créer de toutes pièces des pages web visuellement attrayantes, adaptatives et conviviales.

Vous commencerez par les bases de la structure HTML et passerez progressivement à des techniques de mise en forme avancées utilisant CSS3, notamment Flexbox, Grid, les animations et les principes du responsive design. Grâce à des exercices pratiques et à des projets concrets, vous apprendrez à concevoir et à créer des sites web de qualité professionnelle qui s'adaptent parfaitement à tous les appareils.

À la fin de ce cours, vous serez capable de créer des mises en page web modernes en toute confiance et prêt à franchir une nouvelle étape pour devenir développeur front-end.

Caractéristiques principales

• Cours et supports en anglais
• Niveau débutant à intermédiaire
• Plus de 7 heures de vidéos à la demande
• 34 exercices pratiques guidés
• 8 évaluations notées automatiquement
• 3 devoirs
• 60 quiz de révision
• Plus de 20 heures de temps d'étude recommandé
• Accès d'un an à la plateforme d'apprentissage
• Certificat de fin de formation inclus

Acquis d'apprentissage

• Comprendre les différents types d'éléments d'entrée HTML et comment les utiliser pour créer des formulaires web interactifs
• Apprendre à valider les entrées de formulaire à l'aide du HTML afin d'améliorer la précision des données et l'expérience utilisateur
• Structurer efficacement le contenu web à l'aide de balises HTML sémantiques pour une meilleure lisibilité et accessibilité
• Appliquer les styles CSS de manière cascading pour contrôler la priorité et l'affichage des règles sur une page web
• Utiliser les pseudo-éléments CSS pour améliorer le design et ajouter des effets de style sans balisage HTML supplémentaire
• Utiliser Flexbox pour créer des mises en page flexibles et réactives, et gérer efficacement l'alignement et l'espacement des éléments

Public cible

• Futurs développeurs web
• Débutants en développement front-end
• Concepteurs UI/UX souhaitant coder leurs créations
• Étudiants s'orientant vers une carrière dans le développement web
• Professionnels en reconversion vers des postes dans le secteur technologique
• Toute personne souhaitant créer des sites web à partir de zéro

Prérequis

• Aucune expérience préalable en programmation requise
• Connaissances informatiques de base
• Intérêt pour la conception et le développement web

Contenu du cours

Introduction au développement web

• Qu'est-ce que le HTML
• Qu'est-ce que le CSS
• Configuration de l'environnement
• Hello World !
• Utilisation de VS Code avec Live Reload
• Utilisation d'Emmet et d'outils en ligne
• Utilisation des outils de développement Chrome

Introduction au HTML

• Éléments et balises HTML
• Balises simples et appariées
• Structure d'une page HTML
• Balises d'en-tête et de paragraphe
• Attributs en HTML
• Images
• Liens - internes et externes
• Listes
• Tableaux
• L'attribut style
• Couleurs en HTML
• Balises sémantiques HTML5
• Balises audio et vidéo HTML5
• Balises et attributs HTML de base
• Balise image et attributs
• Liens - internes et externes
• Listes - ordonnées et non ordonnées
• Tableaux en HTML
• L'attribut style
• Couleurs en HTML
• Éléments sémantiques HTML5
• Éléments audio et vidéo HTML
  
  

Formulaires et champs de saisie

• La balise Form
• Utilisation de la balise Label
• Balise Input HTML
• Select et TextArea
• Boutons
• Datalist
• Création d'un formulaire de contact
• Élément de formulaire simple
• Étiquettes et champs de saisie
• Balises et attributs HTML de base
• Sélection et options
• Champs de saisie e-mail et mot de passe, et boutons
• Datalists en HTML

Introduction au CSS

• Utilisation de la balise Style
• Cibler des éléments HTML
• Cibler des éléments HTML imbriqués
• Utilisation de feuilles de style externes
• Remplacer les styles CSS
• Propriétés CSS courantes
• Unités CSS
• Le modèle de boîte CSS
• Autres propriétés CSS
• Pseudo-classes CSS
• Utilisation de l'élément style
• Cibler des éléments HTML en CSS
• Cibler des éléments HTML imbriqués
• Utilisation de feuilles de style externes
• Stylisation à l'aide de feuilles de style externes

CSS avancé

• Positionnement CSS - Statique, relatif et absolu
• Positionnement CSS - Fixe et collant
• Pseudo-éléments CSS ::Before et ::After
• Variables CSS
• Polices personnalisées en CSS
• Importation de feuilles de style externes

Transitions et animations

• Que sont les transitions CSS
• Transitions de base et propriétés CSS
• Animations et propriétés CSS
• Définition des images clés

Conception Web adaptative

• Requêtes média
• Qu'est-ce que CSS Flexbox
• Création de lignes et de colonnes
• Autres propriétés Flexbox
• Qu'est-ce que la mise en page CSS Grid
• Lignes et colonnes dans Grid
• Attribution de cellules
• Zones de modèle Grid
• Création d'une galerie d'images responsive
• Requêtes média
• Propriétés CSS Flexbox
• Propriétés Flexbox avancées
• CSS Grid
• Propriétés CSS Grid
• Zones Grid dans CSS Grid

FAQ

Y aura-t-il d'autres supports d'apprentissage en plus des vidéos à suivre à son rythme?

Absolument ! L'expérience d'apprentissage à la demande va au-delà des vidéos pour offrir un environnement d'apprentissage totalement immersif, comprenant:

• APPRENDRE: des livres électroniques interactifs, des quiz de révision et des études de cas concrets pour renforcer les concepts
• ÉVALUER: des évaluations diagnostiques, par module et finales pour suivre vos progrès
• S'ENTRAÎNER: des exercices pratiques avec des simulations concrètes et des laboratoires Cloud
• OBTENEZ DES INFORMATIONS: des analyses et des rapports en temps réel mettant en évidence vos progrès d'apprentissage, vos difficultés et les domaines qu'il est suggéré de revoir pour maîtriser les compétences clés

Puis-je suivre ce cours tout en travaillant à temps plein?

Oui! Ce cours est conçu pour offrir une flexibilité maximale. Dispensé sous un format en ligne à votre rythme, il vous permet d'apprendre et de vous perfectionner à votre convenance, ce qui facilite la conciliation avec votre emploi à temps plein.

Qu'apprendrai-je dans ce cours?

Vous apprendrez à créer des sites web modernes et adaptatifs en utilisant HTML5 pour la structure et CSS3 pour le style, y compris des techniques de mise en page avancées telles que Flexbox et Grid.

Ce cours convient-il aux débutants?

Oui, il est conçu pour les débutants n'ayant aucune expérience préalable en codage.

Pourrai-je créer de vrais sites web après avoir suivi ce cours?

Oui, vous serez capable de concevoir et de créer des sites web entièrement fonctionnels et adaptatifs.

Le cours comprend-il une formation au design adaptatif?

Oui, vous apprendrez à créer des sites web qui s'adaptent à différentes tailles d'écran à l'aide de techniques CSS modernes.

Quelles compétences pratiques vais-je acquérir?

Vous apprendrez à structurer des pages web, à styliser des mises en page, à créer des formulaires et à concevoir des designs adaptatifs et interactifs.