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