Atelier WEB DESIGN : Designer un Blog minimaliste de A à Z sur Figma
Atelier WEB DESIGN : Designer un Blog minimaliste de A à Z sur Figma
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 !
Cours dans ce bundle
Atelier HTML & CSS : Intégrer un Blog responsive de A à Z
Atelier HTML & CSS : Intégrer un Blog responsive de A à Z
Atelier WordPress : Création d'un thème de Blog de A à Z
Atelier WordPress : Création d'un thème de Blog de A à Z
Plan détaillé des cours
Leçon 1Introduction, fichiers sources, palette de couleurs et grille
08m51
Leçon 2Création du Logo à partir d'une police de caractère
09m12
Leçon 3Création du menu de navigation
05m35
Leçon 4Designer le Footer du site et apprendre à créer un composant réutilisable
16m21
Leçon 5Designer un Bloc d'article et en faire un composant
14m59
Leçon 6Dupliquer les articles sur la page d'accueil et remplir avec du contenu
10m27
Leçon 7Designer le single d'un article
21m04
Leçon 8Designer la page : à propos, avec un texte sur l'auteur
07m57
Leçon 9Designer la page de contact avec un formulaire
17m16
Leçon 10Designer la page d'une catégorie listant des articles
12m26
Leçon 11Créer un prototype animé pour naviguer simplement entre les maquettes
11m11
Leçon 12Conclusion, partage du prototype et proposition d'une suite à cet atelier
07m25
Leçon 1Introduction
04m06
Leçon 2Exporter des médias depuis Figma
06m08
Leçon 3Header - Partie 01 : Le Logo
07m22
Leçon 4Header - Partie 02 : Le menu principal
14m18
Leçon 5Box d'article - Partie 01
21m21
Leçon 6Box d'article - Partie 02
17m52
Leçon 7Intégration du Footer
19m10
Leçon 8Template de catégorie avec les variantes de couleurs
28m39
Leçon 9Single d'un article
17m28
Leçon 10La page A propos
06m
Leçon 11Page contact avec le formulaire
19m39
Leçon 12Template de page classique : mentions légales
06m49
Leçon 13Rendre tout le blog entièrement responsive tablette/mobile
13m28
Leçon 14Conclusion
57s
Leçon 1Introduction et installation de Wamp
04m
Leçon 2Installation de WordPress sur le serveur local
05m16
Leçon 3Configuration de l'admin WordPress : permaliens, page d'accueil...
12m47
Leçon 4Insérer des médias dans l'admin et les organiser dans des dossiers
04m21
Leçon 5Création des pages + changer l'ordre en drag & drop
05m14
Leçon 6Création des articles, des catégories + ajouter une colonne pour la miniature
09m42
Leçon 7Création de la base du thème : index, style & screenshot
13m43
Leçon 8Boucle WordPress (loop) pour récupérer le contenu dynamiquement
04m37
Leçon 9Création du fichier functions.php pour ajouter des fonctionnalités au thème
06m02
Leçon 10Création du menu et affichage dans le template
08m44
Leçon 11Scinder index.php en 2 fichiers header & footer
02m53
Leçon 12Créer le template de la page d'accueil
15m17
Leçon 13Créer le template d'une catégorie
07m16
Leçon 14Créer le template du single d'un article
07m13
Leçon 15Créer le template de la page A propos
05m08
Leçon 16Créer le template de la page Contact avec le formulaire
17m47
Leçon 17Ajouter une taille d'image personnalisée, changer le cadrage d'une image
17m35
Leçon 18Plugin ACF pour créer des champs personnalisés pour les réseaux sociaux
10m38
Leçon 19Bouger la classe active sur le menu en fonction de la page ou on se trouve
06m59
Leçon 20Ajouter la gestion des commentaires sur un article + système de notation
09m53
Leçon 21Ajouter le partage d'article via les réseaux sociaux
04m36
Leçon 22Création d'une page d'erreur 404 pour les pages inexistantes
05m20
Leçon 23Mettre en place une pagination sur l'accueil et les catégories
04m57
Leçon 24Conclusion
02m18
Avis des apprenants