Atelier HTML & CSS : Intégrer un Blog responsive de A à Z
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
3h03
de formation
14
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Atelier HTML & CSS : Intégrer un Blog responsive de A à Z

Promo -32%
4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
3h03
de formation
14
leçons vidéo
1
chapitre

Dans ce atelier pratique HTML & CSS en vidéo, je vous propose de découvrir ensemble comment intégrer plusieurs maquettes de blog.
Il vous permettra de développer vos compétences de développeur front-end.
Les maquettes graphiques que nous allons intégrer sont celles que nous avons précédemment appris à créer sous le logiciel création d'UI : Figma. Ce cours de webdesign optionnel peut être suivi de manière indépendante.

Nous utiliserons les langages HTML & CSS ainsi que des techniques modernes d'intégration telles que les Flexbox et les Grid.
Dans cet atelier de plus de 3h, nous n'aurons pas besoin de framework tel que Bootstrap donc nous ferons toute l'intégration de A à Z en pure CSS.
À la fin de cette formation, vous aurez une intégration pixel perfect de vos maquettes, et toutes les cartes en main pour créer un futur thème WordPress.

Prérequis pour suivre cette formation dans de bonnes conditions :

  • Connaître les bases du HTML : créer une page .html, le système de balisage...
  • Connaître les bases du CSS : créer une feuille de style, la lier avec une page .html...

Ce que nous allons intégrer dans cette formation Blog Responsive de A à Z :

  • Template de page d'accueil : header, box d'articles, footer,
  • Template single d'un article,
  • Template d'une catégorie avec déclinaisons autres couleurs,
  • Template de la page À propos,
  • Template de la page contact avec formulaire,
  • Template d'une page classique : mentions légales,

Je vous invite à regarder l'extrait vidéo pour vous rendre compte du rendu final obtenu à la fin de la formation.

Vous aurez les fichiers de départ, les templates HTML / CSS finalisés, ainsi que la maquette Figma dans les sources fournies avec la vidéo.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la vidéo.

Bonne formation à tous !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction
Leçon 2
Exporter des médias depuis Figma
Leçon 3
Header - Partie 01 : Le Logo
Leçon 4
Header - Partie 02 : Le menu principal
Leçon 5
Box d'article - Partie 01
Leçon 6
Box d'article - Partie 02
Leçon 7
Intégration du Footer

Table des matières

Leçon 1

Introduction

04m06
Leçon 2

Exporter des médias depuis Figma

06m08
Leçon 3

Header - Partie 01 : Le Logo

07m22
Leçon 4

Header - Partie 02 : Le menu principal

14m18
Leçon 5

Box d'article - Partie 01

21m21
Leçon 6

Box d'article - Partie 02

17m52
Leçon 7

Intégration du Footer

19m10
Leçon 8

Template de catégorie avec les variantes de couleurs

28m39
Leçon 9

Single d'un article

17m28
Leçon 10

La page A propos

06m
Leçon 11

Page contact avec le formulaire

19m39
Leçon 12

Template de page classique : mentions légales

06m49
Leçon 13

Rendre tout le blog entièrement responsive tablette/mobile

13m28
Leçon 14

Conclusion

57s

Aperçus

Avis des apprenants

Détail des avis
134
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Davy Gorchon
Davy Gorchon
Publié le 19/04/2022
Super comme d'habitude, je démarre de suite wordpress, je vais surement avoir besoin d'aide
Adrien Gazaix
Adrien Gazaix
Super 😉 en avant pour la suite WordPress alors ! Et si il y a besoin je suis dispo dans le salon d'entraide.
Véronica La Padula
Véronica La Padula
Publié le 01/02/2022
Bien fait et de très bons conseils. Merci
Adrien Gazaix
Adrien Gazaix
Merci à toi, et bonne continuation !
Olivier Plouchard
Olivier Plouchard
Publié le 21/01/2022
Un tuto de très grande qualité. Merci.
Adrien Gazaix
Adrien Gazaix
Merci à toi, ça fait super plaisir d'entendre ça ;) A très bientôt pour de nouveaux tuto et n'hésites pas a suivre l'épisode 3 si WordPress t'intéresse.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Les fichiers de départ, les templates HTML/CSS obtenus à la fin de la formation ainsi que les maquettes créées sur Figma.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
24,99€ 17€
Promo -32%
Paiement unique, sans abonnement
Accès à vie à cette formation
3h03 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 793 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1427 tutos gratuits

Notre politique de protection des données