Dans cette formation complète de plus de 8h30, je vous propose de découvrir ensemble toutes les étapes de création d’un Blog de A à Z.
Au programme de cette formation complète de création d'un Blog :
- La première étape consistera à créer le design avec le logiciel Figma.
Nous obtiendrons alors plusieurs maquettes (blog, catégorie, contact…) ainsi qu’un prototype animé qui pourra servir à la validation graphique auprès d’un client. - La seconde partie sera consacrée à l’intégration HTML/CSS des différentes maquettes obtenues précédemment. Nous ferons pour cela du “pure CSS”, c'est-à-dire sans Framework tel que Bootstrap afin de garder un code propre, léger et facile d’accès.
Enfin, des techniques modernes d’intégration telles que les Flex ou les Grid seront utilisées pour créer la structure de notre Blog. - Pour clore cette formation, nous allons faire évoluer notre intégration statique en un site dynamique, grâce au CMS WordPress. Nous obtiendrons donc un thème de blog professionnel complet, facilement réutilisable et administrable.
Bien entendu, les 3 étapes de cette formation peuvent être suivies indépendamment des autres :
Toutes les sources sont fournies avec la formation : Design Figma, Intégration HTML/CSS, Thème WordPress.
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 formation.
Bonne formation !
Tuto composant ce bundle :
Atelier WEB DESIGN : Designer un Blog minimaliste de A à Z sur Figma (voir la fiche produit)
- Introduction, fichiers sources, palette de couleurs et grille gratuit00:08:51
- Création du Logo à partir d'une police de caractère 00:09:12
- Création du menu de navigation 00:05:35
- Designer le Footer du site et apprendre à créer un composant réutilisable 00:16:21
- Designer un Bloc d'article et en faire un composant 00:14:59
- Dupliquer les articles sur la page d'accueil et remplir avec du contenu 00:10:27
- Designer le single d'un article 00:21:04
- Designer la page : à propos, avec un texte sur l'auteur 00:07:57
- Designer la page de contact avec un formulaire 00:17:16
- Designer la page d'une catégorie listant des articles 00:12:26
- Créer un prototype animé pour naviguer simplement entre les maquettes 00:11:11
- Conclusion, partage du prototype et proposition d'une suite à cet atelier 00:07:25
Atelier HTML & CSS : Intégrer un Blog responsive de A à Z (voir la fiche produit)
- Introduction gratuit00: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
Atelier WordPress : Création d'un thème de Blog de A à Z (voir la fiche produit)
- Introduction et installation de Wamp gratuit00:04:00
- Installation de WordPress sur le serveur local 00:05:16
- Configuration de l'admin WordPress : permaliens, page d'accueil... 00:12:47
- Insérer des médias dans l'admin et les organiser dans des dossiers 00:04:21
- Création des pages + changer l'ordre en drag & drop 00:05:14
- Création des articles, des catégories + ajouter une colonne pour la miniature 00:09:42
- Création de la base du thème : index, style & screenshot 00:13:43
- Boucle WordPress (loop) pour récupérer le contenu dynamiquement 00:04:37
- Création du fichier functions.php pour ajouter des fonctionnalités au thème 00:06:02
- Création du menu et affichage dans le template 00:08:44
- Scinder index.php en 2 fichiers header & footer 00:02:53
- Créer le template de la page d'accueil 00:15:17
- Créer le template d'une catégorie 00:07:16
- Créer le template du single d'un article 00:07:13
- Créer le template de la page A propos 00:05:08
- Créer le template de la page Contact avec le formulaire 00:17:47
- Ajouter une taille d'image personnalisée, changer le cadrage d'une image 00:17:35
- Plugin ACF pour créer des champs personnalisés pour les réseaux sociaux 00:10:38
- Bouger la classe active sur le menu en fonction de la page ou on se trouve 00:06:59
- Ajouter la gestion des commentaires sur un article + système de notation 00:09:53
- Ajouter le partage d'article via les réseaux sociaux 00:04:36
- Création d'une page d'erreur 404 pour les pages inexistantes 00:05:20
- Mettre en place une pagination sur l'accueil et les catégories 00:04:57
- Conclusion 00:02:18
Formateur : Adrien Gazaix
-
Tuto progressif très bien conçu. Les conseils qui le jalonnent sont pertinents et bienvenus. Merci !
-
Super tuto ! Des explications claires et précises. J'aimerais pour le prochain tutoriel que vous fassiez un site complet E-commerce s'il vous plaît. Merci et bonne continuation ;)
-
Tuto de grande qualité. Les explications sont claires et précises. Seul léger bémol, j'aurais bien aimé un module sur la mise en ligne du blog. Mais sinon, parfait. Je recommande !
-
Avec quelle version de logiciel ce tuto est-il compatible ?WordPress 5
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés