Créez votre premier site internet avec HTML5 et CSS3

Faites vos premiers pas dans le web avec HTML5 et CSS3 avec flexbox et les grilles puis initiez-vous enfin au webdesign pour créer votre premier portfolio professionnel.

Créez votre premier site internet avec HTML5 et CSS3
15 heures
Tous les niveaux

Présentation

Bienvenue sur le cours sur HTML5 & CSS3, le seul cours dont vous avez besoin pour apprendre à utiliser HTML et à créer votre premier site internet, même en partant de zéro.

Avec plus de 15 heures, ce cours est sans doute celui qui trouve le meilleur compromis entre une formation ultra complète et une formation concise. Même si vous n'avez aucune expérience en programmation avec HTML et CSS, vous passerez du niveau débutant à celui de professionnel grâce à ce cours. Voici pourquoi :

  • Ce cours est enseigné par le formateur emblématique de BELIEVEMY, l'un des meilleurs acteurs de la pédagogie dans le domaine du développement web

  • Ce cours a été entièrement mis à jour pour la toute dernière version de HTML et de CSS, vous apprendrez les toutes dernières nouveautés et les meilleures astuces de programmation du moment

  • Ce cours n'est pas un cours magistral : vous allez passer par toutes les émotions et vous allez pratiquer dans des dizaines de cas concrets, avec notamment trois vrais projets

  • L'ensemble du contenu du cours a été vu et revu pendant plusieurs mois par plusieurs développeurs professionnels de PHP pour être parfaitement en adéquation avec les besoins professionnels des entreprises

  • Plus de 30.000 étudiants ont déjà appris le développement web grâce à nos cours

  • Ce cours est constamment mis à jour avec de nouveaux contenus et de nouveaux projets proposés par les étudiants : c'est-à-dire par vous !

Nous allons y aller pas à pas, nous avancerons méthodiquement et astucieusement pour que vous puissiez toujours comprendre ce que vous faites et pour que vous puissiez apprécier vos résultats.

Prérequis

Aucune connaissance en informatique n'est nécessaire pour suivre ce cours. Tout sera vu en partant de zéro.

Plan du cours

Tout ouvrir
    Partie 1 : Introduction
  • 1. Bienvenue dans ce cours !
    Extrait
  • 2. Que veut dire HTML ?
    Extrait
  • 3. Que veut dire CSS ?
    Extrait
  • 4. Prérequis
    Extrait
  • Partie 2 : Installons notre environnement
  • 5. Choisissons notre navigateur
  • 6. Choisissons notre éditeur de code
  • Partie 3 : Plongeons dans le HTML
  • 7. Comment commencer un projet ?
  • 8. L'extension pour avoir des icônes plutôt jolies
  • 9. Les textes et les paragraphes
  • 10. Qu'est-ce qu'une balise ?
  • 11. Structure de base d'une page HTML
  • 12. Les nouvelles balises de structure avec HTML5
  • 13. Qu'est-ce qu'un attribut ?
  • 14. Ajoutons des commentaires
  • 15. Ajouter des commentaires rapidement avec Visual Studio Code
  • 16. Ajouter des titres
  • 17. La mise en forme
  • 18. Faire des listes
  • 19. Et si je veux une liste avec des lettres ?
  • 20. Tout sur les liens
  • 21. Les liens pour télécharger des ressources
  • 22. Les liens pour envoyer des emails
  • 23. Ajouter une infobulle à son lien
  • Partie 4 : Tout ce qu'il faut savoir sur les images
  • 24. Les différents types d'images
  • 25. Ajouter une image à son site
  • 26. Les figures
  • 27. Les favicons (ou icônes)
  • Partie 5 : Exercice : Notre premier site internet !
  • 28. Ce que nous allons faire
  • 29. Etape 1 : Télécharger les images nécessaires
  • 30. Etape 2 : Créer la structure des deux pages
  • 31. Etape 3 : Ajouter du contenu sur la page d'accueil
  • 32. Etape 4 : Ajouter du contenu sur la page de la recette
  • 33. Correction
  • Partie 6 : Ajoutons du style à nos éléments
  • 34. Où écrire notre code CSS ?
  • 35. Les principaux sélecteurs : classes et ID
  • 36. Mettre en italique, gras et souligné
  • 37. Les commentaires en CSS
  • 38. Les sélecteurs avancés
  • 39. Récapitulatif des sélecteurs
  • 40. Changer la taille du texte
  • 41. Modifier la police du texte
  • 42. Ajouter une police personnalisée (méthode simple)
  • 43. Ajouter une police personnalisée (méthode créative)
  • 44. Récapitulatif des polices
  • 45. Aligner proprement son texte
  • 46. Modifier la couleur d'un élément
    Extrait
  • 47. Modifier le fond d'un élément
  • 48. Jouer avec la transparence
  • 49. Récapitulatif sur les couleurs
  • 50. Ajouter une image en fond d'écran
  • 51. Ajouter des ombres aux éléments
  • 52. Générer des ombres facilements
  • Partie 7 : Les bordures avec CSS
  • 53. Ajouter des bordures
  • 54. Et si on arrondissait les angles ?
  • Partie 8 : La mise en page de notre site internet
  • 55. Les balises dit "inline" et "block"
  • 56. Les dimensions (width / height)
  • 57. Qu'est-ce qu'une marge ?
  • 58. [Astuce] Utiliser la console développeur de Google Chrome
  • 59. Gérer les marges externes
  • 60. Gérer les marges internes
  • 61. Les positions : relatif vs. absolu vs. fixe
  • 62. La position "sticky"
  • 63. Gérer les éléments qui dépassent (overflow)
  • 64. [Astuce] Le principe d'un container
  • Partie 9 : Exercice : Entraînons-nous sur le CSS
  • 65. Ce que nous allons faire
  • 66. Etape 1 : Partons sur les mêmes bases
  • 67. Etape 2 : Occupons-nous de la page d'accueil
  • 68. Etape 3 : Occupons-nous de la page "recette"
  • 69. Correction
  • Partie 10 : Les apparences dynamiques
  • 70. Qu'est-ce qu'une apparence dynamique ?
  • 71. Au survol de la souris
  • 72. Au clic de la souris
  • 73. À la sélection d'un élément ou quand il a déjà été visité
  • 74. Les autres "pseudo-classes"
  • 75. Les "pseudo-éléments"
  • Partie 11 : Exercice : Un bouton moderne qui s'enfonce
  • 76. Ce que nous allons faire
  • 77. Etape 1 : Créer un lien
  • 78. Etape 2 : Styliser le lien
  • 79. Etape 3 : Ajouter des apparences dynamiques
  • 80. Correction
  • Partie 12 : Les bases du webdesign
  • 81. Qu'est-ce que le webdesign ?
    Extrait
  • 82. Qu'est-ce que l'UX et l'UI ?
  • 83. Armoniser ses couleurs
  • 84. L'art d'utiliser des polices d'écriture
  • 85. Les bonnes pratiques pour ses images
  • 86. L'espacement et l'aération
  • 87. Trouver de l'inspiration pour ses designs
  • Partie 13 : Flexons ensemble !
  • 88. Qu'est-ce que Flexbox ?
  • 89. Le principe de base : conteneur et éléments
  • 90. L'alignement avec Flexbox
  • 91. Définir les éléments prioritaires
  • 92. Choisir la taille des éléments
  • 93. Récapitulatif sur Flexbox
  • Partie 14 : Exerçons-nous sur Flexbox
  • 94. Exercice 1 : Ce que vous devez faire
  • 95. Exercice 1 : Correction
  • 96. Exercice 2 : Ce que vous devez faire
  • 97. Exercice 2 : Correction
  • Partie 15 : Les grilles avec CSS
  • 98. Les... grilles CSS ?
  • 99. Initialiser les grilles
  • 100. Les colonnes
  • 101. Les lignes
  • 102. Les pistes proportionnelles (unité fr)
  • 103. Le raccourci : repeat()
  • 104. Grilles implicites et grilles explicites
  • 105. Positionner les éléments grâce aux gouttières
  • 106. Aérer les éléments grâce aux gouttières
  • 107. Les grilles imbriquées
  • 108. Récapitulatif sur les grilles
  • Partie 16 : Exerçons-nous sur les grilles
  • 109. Exercice 1 : Ce que vous devez faire
  • 110. Exercice 1 : Correction
  • 111. Exercice 2 : Ce que vous devez faire
  • 112. Exercice 2 : Correction
  • Partie 17 : Le responsive design
  • 113. Qu'est-ce que le responsive design ?
  • 114. Les media queries
  • 115. Les unités EM et REM
  • 116. Les unités VH et VW
  • Partie 18 : Rendons notre site responsive
  • 117. Ce que nous allons faire
    Extrait
  • 118. Information importante
  • 119. Correction
  • Partie 19 : Techniques avancées
  • 120. Les tableaux
  • 121. Fusionner les cellules
  • 122. Mettre des vidéos
  • 123. Mettre des musiques
  • 124. Récapitulatif pour la vidéo et l'audio
  • 125. Ajouter un dégradé
  • Partie 20 : Revoyons tout ce que nous venons d'apprendre
  • 126. Ce que nous allons faire
  • 127. Correction
  • Partie 21 : Les formulaires
  • 128. Rappels sur les formulaires
  • 129. La base d'un formulaire
  • 130. Les zones de saisie simples
  • 131. Les zones de saisie enrichies
  • 132. Ajouter des options
  • 133. Le champ pour "suggérer" des valeurs prédéfinies
  • 134. Finaliser et envoyer un formulaire
  • 135. Récapitulatif sur les formulaires
  • Partie 22 : Entraînement sur les formulaires
  • 136. Ce que nous allons faire
  • 137. Correction
  • Partie 23 : Les variables et :root
  • 138. L'incroyable sélecteur :root
  • 139. Qu'est-ce qu'une variable ?
  • 140. Notre première variable
  • 141. Récapitulatif sur les variables
  • Partie 24 : HTML et les réseaux-sociaux
  • 142. Créer des cartes sociales
  • Partie 25 : Les inclassables
  • 143. Analyser nos utilisateurs grâce à Google Analytics
  • 144. Faire des calculs dans nos feuilles de style
  • 145. Les "features queries"
  • Partie 26 : Créons nos animations avec CSS
  • 146. Evenements VS Animations
  • 147. Le principe de base : création et utilisation
  • 148. La fonction @keyframes
  • 149. L'état initial et l'état final
  • 150. Utiliser une animation
  • 151. Faire une animation infinie
  • 152. Attention aux anciens navigateurs
  • 153. Créer des étapes intermédiaires
  • 154. Les propriétés non-raccourcies
  • Partie 27 : Générer des animations facilement
  • 155. Comment allons-nous générer des animations ?
  • 156. Animista : la version "simple"
  • 157. Keyframes.app : la version "pro"
  • Partie 28 : Entraînement aux animations
  • 158. Exercice 1 : consignes
  • 159. Exercice 1 : correction
  • 160. Exercice 2 : consignes
  • 161. Exercice 2 : correction
  • Partie 29 : Projet : Un portfolio professionnel pour nos réalisations
  • 162. Ce que nous allons faire
    Extrait
  • 163. Etape 1 - Créer les deux pages HTML
  • 164. Etape 2 - Concevoir la partie de "bienvenue"
  • 165. Etape 3 - Se lancer dans la présentation des projets
  • 166. Etape 4 - La partie "Contact"
  • 167. Etape 5 - Le pied de page
  • 168. Etape 6 - On passe à la page du projet
  • 169. Etape 7 - Le responsive design
  • 170. Etape 8 - Les cartes sociales
  • 171. Correction
  • Partie 30 : Conclusion
  • 172. Félicitations !
Proposé par Believemy

Gratuit

Disponible depuis partout : ordinateur, smartphone, tablette
Contenus vidéos en Full HD
Certificat de fin de formation