$ 110.00 au lieu de $ 135.00

Tuto Bundle : formation complète HTML5 et CSS3 pour débutants avec HTML, CSS bundle -19%

$ 110.00 au lieu de $ 135.00

  • Une formation vidéo de 13h11m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Vous souhaitez devenir un développeur web et ne savez pas par où commencer ? Vous souhaitez créer un site web en toute autonomie sans trop savoir quoi faire ?
C'est ici qu'il faut commencer car dans cette formation Intégration Web, vous allez apprendre les notions fondamentales du Web et des langages HTML et CSS.

Cette formation s'adresse à tous car elle est conçue en partant du principe que vous n'avez aucune connaissance technique. Elle considère que vous êtes un(e) débutant(e).

Au programme de cette formation complète HTML et CSS :

Plus de 13h de formation en vidéo regroupant 6 modules de cours et 1 module sur un atelier :

  • Le 1er module (Bien commencer en HTML) aborde les aspects du web, les rôles de langages HTML et CSS, les outils de développement et la différence entre les sites web statiques et dynamiques.
  • Le 2ème module (Comment créer votre 1ère page web) aborde les bases théoriques du langage HTML : Créer une page avec un éditeur de texte, les notions de balises et attributs, les principales balises d'un document HTML et la structure de base d'une page HTML 5, etc.
  • Le 3ème module (Bien organiser son texte) aborde le langage HTML : comment créer des paragraphes, des titres, des listes, des liens, insérer les images et les miniatures cliquables dans sa page, etc.
  • Le 4ème module (La mise en forme avec CSS) aborde les bases du langage CSS : son rôle et son historique, où écrire son code, comment formater son texte, insérer les couleurs, les images de fond, les niveaux de transparence, créer les ombres, les bordures standards et arrondies, les apparences dynamiques, etc.
  • Le 5ème module (La mise en page du site) : Comment structurer sa page avec les balises structurantes de HTML5, redimensionner les blocs, les couper, leur attribuer les marges, les positionner et assurer la compatibilité du site avec Internet Explorer.
  • Le 6ème module (Les fonctionnalités évoluées) : Comment créer les tableaux simples et complexes, les formulaires interactifs, insérer les vidéos et les lecteurs audio dans ses pages, afficher son site sur les appareils mobiles avec les media queries et gérer la compatibilité du site entre les navigateurs. Ce module marque la fin du cours. 
  • Et enfin, le 7ème module porte sur un atelier de création pas-à-pas d'un site responsive. L'atelier est reparti en 6 grandes étapes : Le maquettage du design, l'édition du site en HTML, sa mise en forme en CSS, assurer sa compatibilité sur Internet explorer et son affichage sur les petites résolutions d'écran et les navigateurs mobiles, tester sa validité et le mettre en ligne. 
  • En annexe, vous allez apprendre à envoyer votre site sur le web, vous aurez un mémento des balises HTML, un mémento des propriétés CSS et nous verrons quelques pistes pour aller plus loin dans votre apprentissage.

Ce bundle comprend :

  • Plus de 13 heures de formation (cours théoriques avec mise en pratique)
  • 1 gros atelier (de 4h30) pour mettre en pratique les connaissances acquises pendant le cours
  • 6 QCM de plus de 200 questions pour tester vos connaissances sur les notions fondamentales
  • Des ressources utiles : références de lecture, liens, fichiers sources de l’atelier et des exercices abordés pendant le cours. 

Pour vos besoins spécifiques ou plus de précision, n’hésitez pas à parcourir les fiches individuelles de chaque module.

Et si vous avez des questions ou des difficultés pendant votre apprentissage, je reste disponible via l’espace d’entraide pour répondre à toutes vos questions.


Tuto composant ce bundle :

  • Créez facilement votre site web avec HTML5 & CSS3 - 1ère partie (voir la fiche produit)


    • Introduction

      • Présentation du cours gratuit00:01:49

    • Chapitre 1 : Le fonctionnement du Web

      • Introduction au fonctionnement du Web 00:00:23
      • Sommaire du chapitre 1 00:00:35
      • Internet ou web 00:01:30
      • Rôle du HTML et CSS 00:00:55
      • Architecture web 00:02:34
      • Sites statiques et dynamiques 00:06:11
      • Bon à savoir 00:01:10
      • Conclusion chapitre 1 00:00:32

    • Chapitre 2 : HTML et CSS, ces 2 langages incontournables

      • Introduction au HTML et CSS 00:00:19
      • Sommaire du chapitre 2 00:00:15
      • Rôle du HTML et CSS 00:06:42
      • Historique du HTML 00:02:14
      • Historique du CSS 00:00:48
      • Conclusion chapitre 2 00:00:27

    • Chapitre 3 : Vos outils de développement

      • Introduction aux outils de développement 00:00:26
      • Outils d'édition 00:14:01
      • Outils de visualisation 00:07:35
      • Bon à savoir 00:00:31
      • Conclusion chapitre 3 00:00:41
  • Créez facilement votre site web avec HTML5 & CSS3 - 2ème partie (voir la fiche produit)


    • Introduction

      • Présentation du cours gratuit00:00:58

    • Chapitre 4 : Créer votre première page avec Notepad

      • Introduction à la création d'une page web 00:00:17
      • Première page avec Notepad 00:04:58
      • Conclusion du chapitre 4 00:00:09

    • Chapitre 5 : Les balises et les attributs

      • Introduction aux balises et attributs 00:00:17
      • Sommaire du chapitre 5 00:00:12
      • Le rôle des balises 00:01:09
      • Les types de balises 00:04:12
      • Les attributs 00:02:18
      • Bon à savoir 00:01:09
      • Conclusion du chapitre 5 00:00:14

    • Chapitre 6 : La structure de base d'une page HTML5

      • Introduction à la structure de bas de page web en HTML5 00:00:13
      • Sommaire du chapitre 6 00:00:15
      • Structure d'un document HTML 00:03:53
      • Déclaration Doctype 00:01:19
      • Les conteneurs HTML 00:00:45
      • La balise entête head 00:04:29
      • La balise body pour le corps du texte 00:00:45
      • Les commentaires HTML 00:01:13
      • Conclusion du chapitre 6 00:00:28
  • Créez facilement votre site web avec HTML5 & CSS3 - 3ème partie (voir la fiche produit)


    • Introduction

      • Présentation du cours gratuit00:00:52

    • Chapitre 7 : Editer son texte

      • Introduction à l'édition de texte gratuit00:00:25
      • Sommaire du chapitre 7 00:00:14
      • Créer des paragraphes 00:11:44
      • Mettre son texte en valeur 00:05:00
      • Créer des titres 00:04:17
      • Créer des listes 00:12:34
      • Conclusiondu chapitre 7 00:00:56

    • Chapitre 8 : créer des liens

      • Introduction à la création de liens 00:00:10
      • Sommaire du chapitre 8 00:00:14
      • Les liens 00:02:25
      • Créer des liens internes 00:07:19
      • Créer des liens externes 00:01:55
      • Créer des ancres 00:06:03
      • Les liens mailto 00:00:27
      • Les protocoles 00:01:55
      • Créer un lien pour envoyer un email gratuit00:01:56
      • Créer un lien pour afficher une info bulle au survol gratuit00:01:13
      • Créer un lien qui ouvre un nouvel onglet gratuit00:01:47
      • Créer un lien pour télécharger un fichier gratuit00:01:26
      • Conclusion du chapitre 8 00:00:19

    • Chapitre 9 : insérer les images

      • Introduction à l'insertion d'images 00:00:16
      • Sommaire du chapitre 9 00:00:16
      • Insérer une image dans une page 00:02:09
      • Insérer des miniatures cliquables 00:04:47
      • Les formats d'image 00:03:28
      • Créer des figures 00:01:58

    • Conclusion

      • Conclusion 00:01:21
  • Créez facilement votre site web avec HTML5 & CSS3 - 4ème partie (voir la fiche produit)


    • Introduction

      • 01. Présentation du cours gratuit00:01:19

    • Chapitre 10 : Le langage CSS

      • 02. Introduction au langage CSS gratuit00:00:33
      • 03. Sommaire du chapitre 10 00:00:45
      • 04. Historique et rôle du CSS 00:03:54
      • 05. Où écrire son code CSS 00:15:43
      • 06. Appliquer le style sur une balise 00:01:39
      • 07. Appliquer le style sur plusieurs balises 00:03:06
      • 08. Appliquer le style avec les attributs class et id 00:04:43
      • 09. Les balises universelles span et div 00:02:55
      • 10. Les sélecteurs avancés 00:03:30
      • 11. Les commentaires en CSS 00:02:16
      • 12. Conclusion du chapitre 10 00:01:15

    • Chapitre 11 : Le formatage du texte

      • 13. Introduction au formatage du texte 00:00:23
      • 14. Sommaire du chapitre 11 00:00:17
      • 15. Modifier la taille du texte 00:04:20
      • 16. Modifier la police du texte 00:05:54
      • 17. Les styles gras, italique, souligné, ... 00:03:31
      • 18. L'alignement du texte 00:02:56
      • 19. Les flottants 00:04:55
      • 20. Conclusion du chapitre 11 00:00:50

    • Chapitre 12 : La couleur et le fond

      • 21. Introduction à la couleur et au fond 00:00:16
      • 22. Sommaire du chapitre 12 00:00:17
      • 23. Modifier la couleur du texte 00:06:57
      • 24. Insérer une couleur de fond 00:03:56
      • 25. L'héritage en CSS 00:02:13
      • 26. Insérer les images de fond 00:06:54
      • 27. La transparence 00:05:49
      • 28. Conclusion du chapitre 12 00:00:43

    • Chapitre 13 : Les bordures et les ombres

      • 29. Introduction aux bordures et aux ombres 00:00:13
      • 30. Sommaire du chapitre 13 00:00:10
      • 31. Les bordures standards 00:06:15
      • 32. Les bordures arrondies 00:03:00
      • 33. Les ombres 00:05:34
      • 34. Conclusion du chapitre 13 00:00:31

    • Chapitre 14 : La création d'apparences dynamiques

      • 35. Introduction à la création d'apparences dynamiques 00:00:16
      • 36. Sommaire du chapitre 14 00:00:20
      • 37. Changer l'apparence au survol 00:04:24
      • 38. Changer l'apparence au clic 00:02:24
      • 39. Changer l'apparence pendant la sélection 00:01:24
      • 40. Changer l'apparence quand le lien a été visité 00:00:28
      • 41. Conclusion du chapitre 14 00:00:12

    • Conclusion

      • 42. Conclusion du cours 00:00:36
  • Créez facilement votre site web avec HTML5 et CSS3 - 5ème partie (voir la fiche produit)


    • Introduction

      • 01. Présentation du cours gratuit00:01:12

    • Chapitre 15 : Structurer sa page

      • 02. Introduction à la structure de la page 00:00:47
      • 03. Sommaire du chapitre 15 00:00:13
      • 04. Les balises structurantes de HTML5 00:03:11
      • 05. Comment éditer les balises structurantes 00:12:09
      • 06. Comment repérer les balises structurantes 00:04:36
      • 07. La compatibilité avec Internet Explorer 00:00:55
      • 08. Comment assurer la compatibilité avec Internet Explorer 00:02:03
      • 09. Conclusion du chapitre 15 00:00:57

    • Chapitre 16 : Le modèle des boîtes

      • 10. Introduction aux modèles des boîtes 00:00:44
      • 11. Sommaire du chapitre 16 00:00:25
      • 12. Les balises de types bloc et inline 00:01:37
      • 13. Quelques exemples 00:00:27
      • 14. Les dimensions 00:00:45
      • 15. Comment modifier les dimensions des blocs 00:03:40
      • 16. Les marges 00:01:20
      • 17. Comment indiquer les marges autour des blocs 00:02:33
      • 18. Couper les blocs 00:01:17
      • 19. Comment couper les blocs avec overflow 00:04:28
      • 20. Couper les textes trop larges 00:00:28
      • 21. Conclusion du chapitre 16 00:00:58

    • Chapitre 17 : Positionner les balises structurantes

      • 22. Introduction au chapitre 17 00:00:17
      • 23. Sommaire du chapitre 17 00:00:20
      • 24. Le positionnement flottant 00:01:09
      • 25. Comment positionner ses éléments avec float 00:04:07
      • 26. Transformer ses éléments avec display 00:03:06
      • 27. Comment positionner ses éléments avec inline-block 00:03:08
      • 28. Les positionnements absolu, fixe et relatif 00:02:01
      • 29. Comment positionner ses éléments avec la méthode absolue 00:03:45
      • 30. Conclusion du chapitre 17 00:01:19

    • Conclusion

      • 31. Conclusion du cours 00:00:44
  • Créez facilement votre site web avec HTML5 et CSS3 - 6ème partie (voir la fiche produit)


    • Introduction

      • 01. Présentation du cours 00:01:20

    • Chapitre 18 : Les tableaux

      • 02. Introduction aux tableaux 00:00:24
      • 03. Sommaire du chapitre 18 00:00:09
      • 04. Les tableaux simples 00:01:36
      • 05. Comment créer un tableau simple (1/2) 00:03:29
      • 06. Comment créer un tableau simple (2/2) 00:04:52
      • 07. Les tableaux structurés 00:01:56
      • 08. Comment structurer un tableau complexe 00:08:30
      • 09. Comment fusionner un tableau 00:04:46
      • 10. Conclusion du chapitre 18 00:01:00

    • Chapitre 19 : Les formulaires

      • 11. Introduction aux formulaires 00:00:47
      • 12. Sommaire du chapitre 19 00:00:25
      • 13. La balise <form> 00:03:22
      • 14. Les zones de texte monolignes 00:02:49
      • 15. Comment créer une zone de texte monoligne 00:12:56
      • 16. Les zones de texte multilignes 00:01:54
      • 17. Comment créer une zone de texte multiligne 00:04:07
      • 18. Les zones de saisie enrichies 00:03:14
      • 19. Comment créer une zone de saisie enrichie 00:03:39
      • 20. Les éléments d'options 00:01:57
      • 21. Comment créer des cases à cocher 00:04:31
      • 22. Créer une liste déroulante, sélectionner un élément, regrouper les éléments 00:07:31
      • 23. Comment créer les zones d'options d'un formulaire 00:06:37
      • 24. Finaliser le formulaire 00:00:50
      • 25. Valider le formulaire 00:00:58
      • 26. Comment créer le bouton "Envoyer" 00:09:36
      • 27. Conclusion du chapitre 19 00:01:33

    • Chapitre 20 : La vidéo et l'audio

      • 28. Introduction à la vidéo et l'audio 00:00:26
      • 29. Sommaire du chapitre 20 00:00:19
      • 30. Les formats audio 00:01:02
      • 31. Les formats vidéo 00:01:43
      • 32. L'élément audio 00:01:15
      • 33. Comment insérer un lecteur audio dans sa page web 00:01:15
      • 34. L'élément vidéo 00:01:11
      • 35. Comment insérer une vidéo dans sa page web 00:01:52
      • 36. Conclusion du chapitre 20 00:00:31

    • Chapitre 21 : La mise en page adaptative

      • 37. Introduction à la mise en page adaptative 00:00:29
      • 38. Sommaire du chapitre 21 00:00:11
      • 39. Les media queries 00:03:16
      • 40. Les règles disponibles 00:01:12
      • 41. Comment appliquer une media query 00:02:38
      • 42. Les media queries et les navigateurs mobiles 00:02:02
      • 43. Conclusion du chapitre 21 00:00:42

    • Chapitre 22 : Gérer la compatibilité entre les navigateurs

      • 44. Introduction à la gestion de la compatibilité entre les navigateurs 00:01:04
      • 45. Sommaire du chapitre 22 00:00:14
      • 46. Les commentaires conditionnels 00:02:17
      • 47. Rôles des commentaires conditionnels 00:00:41
      • 48. Exemple de commentaire conditionnel 00:01:20
      • 49. Les hacks CSS 00:01:10
      • 50. Les outils de débogage 00:01:36
      • 51. Présentation de l'outil de débogage de Google Chrome 00:01:14
      • 52. Présentation de l'outil de débogage de Mozilla Firefox 00:01:36
      • 53. Conclusion du chapitre 22 00:00:43

    • Chapitre 23 : Envoyer son site sur le web

      • 54. Introduction à l'envoi du site sur le web 00:00:29
      • 55. Sommaire du chapitre 23 00:00:16
      • 56. Le nom de domaine 00:02:05
      • 57. L'hébergement du site 00:02:45
      • 58. Comment réserver son nom de domaine et souscrire à un hébergement : présentation de 2 hébergeurs 00:04:38
      • 59. Le client FTP 00:00:27
      • 60. Comment configurer Filezilla 00:05:34
      • 61. Conclusion du chapitre 23 00:00:18

    • Chapitre 24 : Mémento des balises HTML

      • 62. Introduction au mémento des balises HTML 00:00:20
      • 63. Sommaire du chapitre 24 00:00:17
      • 64. Récapitulatif des balises de niveau 1 00:00:24
      • 65. Récapitulatif des balises d'en-tête 00:00:29
      • 66. Récapitulatif des balises structurant le texte 00:01:46
      • 67. Récapitulatif des balises des listes 00:00:22
      • 68. Récapitulatif des balises de tableaux 00:00:28
      • 69. Récapitulatif des balises de formulaires 00:00:35
      • 70. Récapitulatif des balises de sections 00:00:23
      • 71. Récapitulatif des balises universelles 00:00:29
      • 72. Conclusion du chapitre 24 00:00:07

    • Chapitre 25 : Mémento des propriétés CSS

      • 73. Introduction au mémento des propriétés CSS 00:00:11
      • 74. Sommaire du chapitre 25 00:00:13
      • 75. Récapitulatif des propriétés de mise en forme du texte 00:01:08
      • 76. Récapitulatif des propriétés des couleurs et du fond 00:00:39
      • 77. Récapitulatif des propriétés des boites 00:01:48
      • 78. Récapitulatif des propriétés de positionnement et d'affichage 00:00:48
      • 79. Récapitulatif des propriétés de listes 00:00:25
      • 80. Récapitulatif des propriétés de tableaux 00:00:14
      • 81. Conclusion du chapitre 25 00:00:12

    • Chapitre 26 : Pour aller plus loin

      • 82. Introduction pour aller plus loin 00:00:22
      • 83. Sommaire du chapitre 26 00:00:10
      • 84. Du site web à l'application web 00:01:37
      • 85. Les technologies liées à HTML5 00:02:00
      • 86. Les langages de programmation 00:02:01
      • 87. Conclusion du chapitre 26 00:00:13

    • Conclusion

      • 88. Conclusion du cours 00:01:00
  • Créez facilement votre site web avec HTML et CSS3 - 7ème partie : Atelier pratique (voir la fiche produit)


    • Introduction

      • 01. Bienvenue dans l'atelier gratuit00:01:13
      • 02. Présentation de l'atelier 00:01:21

    • Etape 1 : Maquetter le design du site

      • 03. Introduction au maquettage du design 00:00:54
      • 04. Obtenir un design pour le site 00:02:19
      • 05. Conclusion de l'étape 1 00:00:06

    • Etape 2 : Editer le contenu du site en HTML

      • 06. Introduction à l'édition du contenu 00:00:51
      • 07. Découper la maquette de la page d'accueil 00:01:49
      • 08. Découper la maquette de la page "Activités" 00:00:59
      • 09. Découper la maquette de la page "Réalisations" 00:00:35
      • 10. Découper la maquette de la page "Témoignages" 00:00:25
      • 11. Découper la maquette de la page "Contact" 00:00:27
      • 12. Créer les pages du site 00:11:03
      • 13. Construire le squelette du site 00:09:34
      • 14. Editer le contenu identique pour les pages 00:14:40
      • 15. Editer le contenu spécifique à la page d'accueil 00:08:13
      • 16. Editer le contenu spécifique à la page "Activités" 00:04:11
      • 17. Editer le contenu spécifique à la page "Réalisations" 00:03:20
      • 18. Editer le contenu spécifique à la page "Témoignages" 00:03:10
      • 19. Editer le formulaire de contact 00:10:23
      • 20. Conclusion de l'étape 2 00:01:09

    • Etape 3 : Mettre le site en forme en CSS

      • 21. Introduction à la mise en forme du site 00:00:37
      • 22. Utiliser les polices personnalisées 00:11:54
      • 23. Définir les styles globaux pour le design du site 00:20:07
      • 24. Appliquer le style sur l'en-tête des pages 00:07:59
      • 25. Mettre en forme le menu 00:21:18
      • 26. Appliquer le style sur le bloc du contenu global 00:01:25
      • 27. Appliquer le style sur le slider 00:11:08
      • 28. Appliquer le style sur le côté latéral 00:13:11
      • 29. Appliquer le style sur le bloc du contenu variant 00:05:46
      • 30. Appliquer le style sur le bloc "presentation" 00:03:24
      • 31. Appliquer le style sur le bloc de texte avec flottant 00:05:11
      • 32. Appliquer le style sur le bloc "text-infos" 00:04:08
      • 33. Mettre en forme les boutons 00:08:49
      • 34. Mettre en forme la page "Activités" 00:04:20
      • 35. Mettre en forme la page "Réalisations" 00:04:16
      • 36. Mettre en forme la page "Témoignages" 00:06:33
      • 37. Mettre en forme le formulaire de contact 00:11:24
      • 38. Mettre en forme le pied de page du site 00:10:17
      • 39. Centrer le site 00:01:23
      • 40. Commenter le code 00:02:25
      • 41. Conclusion de l'étape 3 00:00:47

    • Etape 4 : Assurer la compatibilité et l'affichage du site

      • 42. Introduction à la compatibilité et à l'affichage du site 00:00:42
      • 43. Afficher le site avec quelques navigateurs 00:03:07
      • 44. Assurer la compatibilité du site avec Internet Explorer 00:02:57
      • 45. Assurer l'affichage des principaux blocs sur les petites résolutions d'écran (<1024px) 00:04:40
      • 46. Assurer l'affichage de l'en-tête sur les petites résolutions d'écran (<1024px) 00:02:33
      • 47. Assurer l'affichage du menu sur les petites résolutions d'écran (< 1024px) 00:10:35
      • 48. Rendre le slider invisible sur les petites résolutions d'écran (<1024px) 00:01:02
      • 49. Assurer l'affichage du côté latéral sur les petites résolutions d'écran (<1024px) 00:02:32
      • 50. Assurer l'affichage du bloc de contenu variant sur les petites résolutions d'écran (<1024px) 00:03:09
      • 51. Assurer l'affichage du pied de page sur les petites résolutions d'écran (<1024px) 00:00:54
      • 52. Assurer l'affichage du site sur les petites résolutions d'écran (<1024px) et sa compatibilité avec Internet Explorer 00:03:18
      • 53. Assurer la compatibilité du site avec les navigateurs mobiles 00:01:31
      • 54. Conclusion de l'étape 4 00:00:07

    • Etape 5 : Tester la validité du site

      • 55. Introduction au test sur la validité du site 00:00:39
      • 56. Vérifier la validité du site auprès du validateur W3C 00:08:11
      • 57. Conclusion de l'étape 5 00:00:09

    • Etape 6 : Envoyer le site sur le web

      • 58. Introduction à l'étape 6 00:00:26
      • 59. Transférer les fichiers sur le serveur d'hébergement avec Filezilla 00:04:12
      • 60. Naviguer sur le site avec un PC 00:01:19
      • 61. Naviguer sur le site avec une tablette 00:01:49
      • 62. Naviguer sur le site avec un Smartphone 00:01:25
      • 63. Conclusion de l'étape 6 00:00:19
      • 64. Conclusion de l'atelier 00:01:40
      • 65. Conclusion de la formation 00:00:38

Formateur : Diane Dransart

Diane Dransart a publié 8 tutoriels et obtenu une note moyenne de 2,0/5 sur 39 tutoriels vendus. Voir les autres formations de Diane Dransart

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    HTML 5, CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1583 tuto gratuits


non, je ne veux pas me former gratuitement