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

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

Adrien Gazaix
25,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.
A 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 A 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 rencontrer 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

Plan détaillé du cours

Leçon 1Introduction
04m06s
Leçon 2Exporter des médias depuis Figma
06m08s
Leçon 3Header - Partie 01 : Le Logo
07m22s
Leçon 4Header - Partie 02 : Le menu principal
14m18s
Leçon 5Box d'article - Partie 01
21m21s
Leçon 6Box d'article - Partie 02
17m52s
Leçon 7Intégration du Footer
19m10s
Leçon 8Template de catégorie avec les variantes de couleurs
28m39s
Leçon 9Single d'un article
17m28s
Leçon 10La page A propos
06m
Leçon 11Page contact avec le formulaire
19m39s
Leçon 12Template de page classique : mentions légales
06m49s
Leçon 13Rendre tout le blog entièrement responsive tablette/mobile
13m28s
Leçon 14Conclusion
57s

Aperçus

Avis des apprenants

Détail des avis
23
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

Avec quelles versions de logiciels ce tuto est-il compatible ?

HTML , CSS , Figma

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.

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données