Formation complète : Designer, Intégrer et Développer un Blog WordPress
-25% de réduction
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 !
Table des matières de cette formation HTML, CSS, Figma (durée : 3h03m)
-
- Introduction gratuit 00:04:06
- Exporter des médias depuis Figma 00:06:08
- Header - Partie 01 : Le Logo 00:07:22
- Header - Partie 02 : Le menu principal 00:14:18
- Box d'article - Partie 01 00:21:21
- Box d'article - Partie 02 00:17:52
- Intégration du Footer 00:19:10
- Template de catégorie avec les variantes de couleurs 00:28:39
- Single d'un article 00:17:28
- La page A propos 00:06:00
- Page contact avec le formulaire 00:19:39
- Template de page classique : mentions légales 00:06:49
- Rendre tout le blog entièrement responsive tablette/mobile 00:13:28
- Conclusion 00:00:57
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Super comme d'habitude, je démarre de suite wordpress, je vais surement avoir besoin d'aide
-
Bien fait et de très bons conseils. Merci
-
Un tuto de très grande qualité. Merci.
-
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.
note moyenne
avis laissés