$ 35.00

Tuto Créez facilement votre site web avec HTML et CSS3 - 7ème partie : Atelier pratique avec HTML, CSS

$ 35.00

  • Une formation vidéo de 4h50m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Bundle : formation complète HTML5 et CSS3 pour débutants
Retrouvez cette formation dans le bundle :

Bundle : formation complète HTML5 et CSS3 pour débutants

-19% de réduction

voir les détails du bundle


Voici la dernière partie de cette formation Intégration webL'atelier de création d'un site web responsive.

Au programme de cet atelier :

L'atelier est reparti en 6 grandes étapes pour mettre en application les compétences acquises dans les formations précédentes et apprendre à réaliser un site web responsive de A à Z.

Nous allons :

  • Etape 1 : Maquetter le design de notre site
  • Etape 2 : Editer son contenu en HTML
  • Etape 3 : Le mettre en forme en CSS
  • Etape 4 : Assurer sa compatibilité sur Internet Explorer et son affichage sur les petites résolutions d'écran et sur les navigateurs mobiles
  • Etape 5 : Tester si le site est valide afin de nous assurer qu'il respecte les standards du web.
  • Etape 6 : L'envoyer enfin sur le web et le visualiser sur PC, tablette et smartphone.

A noter que cet atelier est la 7ème et dernière partie d'une longue série de 7 modules, dédiés à l'apprentissage progressif des langages HTML et CSS, et plus généralement aux bases du développement web.

Cet atelier comprend :

  • 65 vidéos sur la création du site responsive
  • Des ressources : quelques liens utiles et l'ensemble des codes sources.

Si vous avez des questions, n'hésitez pas. Je reste à votre disposition et vous pouvez me contacter via l'espace d'entraide.
 

Table des matières de cette formation HTML, CSS (durée : 4h50m)

  • Introduction
    • 01. Bienvenue dans l'atelier gratuit 00: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 38 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 ?
    intermédiaire
accédez à plus de 1574 tuto gratuits


non, je ne veux pas me former gratuitement