Transformer une maquette en site web avec HTML & CSS
Lorsque j’ai commencé ma formation de développeur web, le premier projet que j’ai eu à réaliser a été celui-ci: Transformer une maquette en site web avec HTML et CSS.
J’ai donc décidé de recréer ce projet, avec la création d’une série de tutoriels en vidéos consacrée à sa réalisation.
L’idée de ce projet revient donc à “OpenClassRooms“, l’organisme chez qui j’ai suivi ma formation et obtenu mon diplôme. Leurs formations sont réalisées avec une pédagogie par projets. Vous devez donc valider chaque projet lors de soutenances, avant de passer au projet suivant. N’hésitez pas à aller voir leur site et suivre leurs formations si vous le souhaitez.
Bien entendu, j’ai recréé ce projet en modifiant les images et les textes ainsi que les spécifications techniques et fonctionnelles. Le principal, étant de voir comment nous pouvons, à partir d’une maquette de site web, la découper et l’intégrer pour la réalisation d’un site web en HTML et CSS.
Cette série viendra peut-être en aide aux étudiants ou à toute personne désireuse de développer un site web avec HTML et CSS, à partir d’une maquette. Tous les outils et logiciel utilisés dans ce projet sont gratuits.
Réaliser cette série m’a pris beaucoup de temps (voir à la fin de cet article). Alors svp, merci de me laisser vos commentaires, vous inscrire sur le site, vous abonnez à ma page Facebook, ou à ma chaine YouTube. Cela m’encouragera à continuer de créer du contenu de ce type, et à réaliser d’autres séries et tutoriels.
Transformer une maquette en site web avec HTML & CSS
Présentation du projet - Vidéo n°1
Lors de cette première vidéo, je vous présente le projet que nous réaliserons de A à Z.
Nous verrons les maquettes qui nous sont fournies, les spécifications techniques et fonctionnelles définies avec le client. Je vous détaillerais les différentes étapes du projet qui seront à réaliser.
Mais je vous laisse découvrir tout cela dans la vidéo ci-dessous.
Transformer une maquette en site web avec HTML & CSS
Balises sémantiques et découpe de la maquette - Vidéo n°2
Dans cette deuxième partie, nous verrons les balises sémantiques de structure et de contenu, et leur utilité. Nous les utiliserons ensuite pour découper notre maquette de site web au format ordinateur(desktop).
Transformer une maquette en site web avec HTML & CSS
Organisation et mise en place du projet - Vidéo n°3
3ème vidéo de cette série, où nous mettrons en place notre projet. Nous commençons par installer quelques extensions sur Visual Studio Code. Si vous n’avez pas encore l’éditeur de code VSCode, n’hésitez pas à aller sur l’article de blog que j’ai réalisé pour son installation.
Nous créerons ensuite notre fichier HTML et notre fichier CSS, et verrons comment lier ces 2 fichiers entre eux.
Bien entendu, nous vérifierons que cette liaison fonctionne, tout comme les extensions installées.
Nous verrons aussi le doctype en HTML, et utiliserons quelques raccourcis bien pratiques dans Visual Studio Code.
Transformer une maquette en site web avec HTML & CSS
Intégrations des CDN Google Fonts et Font Awesome - Vidéo n°4
Cette partie sera consacrée aux intégrations des CDN(Content Delivery Network) ou en français, les réseaux de diffusion de contenu. En effet, dans ce projet, nous utiliserons le CDN de Google Fonts pour utiliser la police d’écriture définie dans les spécifications techniques. Nous avons également besoin du CDN de Font Awesome pour intégrer les icônes présentes dans le projet.
Comme d’habitude, nous vérifierons ensuite que la liaison avec ces CDN fonctionne.
Transformer une maquette en site web avec HTML & CSS
Création du code HTML et CSS du Header(En-tête) - Vidéo n°5
Dans cette vidéo, nous nous plongeons dans le code, et nous allons mettre en place l’en-tête (header) du site de notre projet.
J’ai choisi de coder à la fois le HTML et le CSS, et de procéder ainsi pour chaque partie du site. Cela nous permettra de progresser pas à pas. Certains préfèreront coder d’abord le HTML, et ensuite réaliser le CSS.
Je ne l’ai pas encore dit, mais il existe différentes manières de travailler, de coder et d’arriver au résultat final. Ici, je présente une façon de faire, mais libre à chacun de travailler comme il le souhaite.
Allons voir ce “header” maintenant :
Transformer une maquette en site web avec HTML & CSS
Création du code HTML et CSS de la section "Recherche et filtres" - Vidéo n°6
Allons y pour coder notre section que j’ai appelée “recherche et filtres”.
Vidéo de 50 minutes qui comprend à la fois le code HTML et le code CSS.
Le mieux est de se mettre au travail et de coder :
Transformer une maquette en site web avec HTML & CSS
Code HTML des sections "Hébergements" et "Populaires" - Vidéo n°7
Nous attaquons le code HTML pour notre grosse section qui en contient deux autres.
Dans cette 7ème partie, nous coderons en HTML uniquement et verrons la mise en style de ces sections dans la vidéo suivante.
Profitons en pour boire un café entre le HTML et le CSS ! 😉
Transformer une maquette en site web avec HTML & CSS
Code CSS des sections "Hébergements" et "Populaires" - Vidéo n°8
Le café était bon ? 😉
Alors allons y pour mettre en style nos sections “Hébergements” et “Populaires”, avec l’écriture de notre code CSS, et ainsi coller à la maquette, au format ordinateur, fournie.
Transformer une maquette en site web avec HTML & CSS
Code HTML et CSS de la section "Activités " - Vidéo n°9
Nous arrivons à la dernière section de notre site, que nous devons coder.
Je ne sais pas ce que vous en pensez, mais ça prend forme, non ?
Eh oui, le travail paye toujours ! Ou presque…
Un développeur web passe la moitié de son temps à faire des recherches, à se creuser la tête et à trouver des solutions…
Et croyez moi, je sais de quoi je parle. Nous verrons peut-être dans de futurs projets et série de tutoriels, qu’il y a des langages beaucoup plus compliqués que le HTML et le CSS. Enfin cela dépendra aussi de vous, et si vous me faites savoir que de suivre des séries et réaliser des projets comme celui-ci, vous intéresse.
Bon allez, on y retourne et on code notre dernière section en HTML et CSS, avant le reste bien entendu :
Transformer une maquette en site web avec HTML & CSS
Code HTML et CSS du pied de page (footer) - Vidéo n°10
Il nous reste à coder notre footer, en HTML et CSS. Toujours en suivant la maquette du site web au format ordinateur.
Alors si vous êtes en forme, nous y allons pour finir la structure de notre site.
Il restera bien sûr encore du travail derrière (fonctionnalités attendues, médias queries, validations, etc.), mais une grosse partie aura été réalisée.
Codons maintenant notre pied de page :
Transformer une maquette en site web avec HTML & CSS
Fonctionnalités attendues - Vidéo n°11
Notre site selon la maquette au format ordinateur est maintenant terminé. Toutefois, nous avions lu, dans la note de synthèse accompagnante le projet, que nous devons mettre en place des spécifications fonctionnelles :
Pour rappel, elles sont celles-ci :
- Le champ de recherche est un champ de saisie, le texte doit donc pouvoir être édité par l’utilisateur.
- Chaque carte d’hébergement ou d’activité devra être cliquable dans son intégralité.
- Les filtres doivent changer d’apparence au survol. Par contre, ils ne doivent pas être fonctionnels.
- Les textes “Hébergements” et “Activités”, situés dans l’en-tête, sont des liens. Ils doivent mener respectivement vers la section “Hébergements en Bourgogne” et “Activités en Bourgogne”.
Voyons donc cela dans cette 11ème partie :
Transformer une maquette en site web avec HTML & CSS
Code des Médias Queries Mobile - 1ère partie - Vidéo n°12
Notre projet est maintenant réalisé au format ordinateur et les spécifications fonctionnelles attendues sont en place.
Nous devons donc nous attaquer à la partie responsive de notre site, et faire en sorte qu’il s’affiche correctement sur les différentes tailles d’écran.
Comme la maquette au format mobile, nous a été fournie, nous allons donc coder nos médias queries pour le format mobile en premier. Nous utiliserons les outils présents dans notre navigateur, et ferons en sorte de se conformer en tout point à la maquette mobile.
Le code à produire étant assez long, cette partie sera présentée en 2 vidéos. Nous en profiterons pour faire une pause entre ces 2 vidéos. 😉
Code des Médias Queries Mobile - 2ème partie - Vidéo n°13
J’espère que vous aurez profité de la pause pour vous inscrire où vous abonnez, si ce n’était pas encore fait ?
Désolé d’insister, mais j’ai vraiment besoin de vous sur ce coup-là, afin de savoir si le contenu que je produis en vaut la peine ou pas. Je vous demande quelques secondes pour m’encourager sur un travail qui m’a pris plusieurs jours.
Ceci étant dit, replongeons nous dans le code et continuons nos médias queries au format mobile :
Transformer une maquette en site web avec HTML & CSS
Code des Médias Queries Tablette - Vidéo n°14
Contrairement aux formats mobile et ordinateur, pour lesquels nous devions être conformes aux maquettes fournies, le format tablette est libre d’interprétation.
Nous devons donc écrire le code pour l’affichage de notre site au format tablette, et disposer nos éléments comme nous le souhaitons. Commençons cela dans cette première partie consacrée aux médias queries pour les tablettes.
Transformer une maquette en site web avec HTML & CSS
Code pour format Tablette (suite) et nouveaux breakpoints - Vidéo n°15
Dans cette 15ème partie de la série, nous terminerons le code des médias queries du format tablette. Mais je vous propose de ne pas s’arrêter à ces 3 formats, et de créer de nouveaux points d’arrêts (breakpoints), permettant de rendre notre site totalement responsive et adaptatif à toutes les largeurs d’écrans. Comme souvent sur le blog activateurweb.com, c’est le bonus de cette série.
Bien entendu, après avoir terminé le code du format tablette, nous pourrions nous arrêter là, car c’est ce qui était demandé en début de projet.
Mais j’aime ne pas être bloqué par des prérequis et aller au-delà, en offrant à l’utilisateur une expérience utilisateur plus agréable encore. Alors allons y pour rendre ce projet responsive.
Transformer une maquette en site web avec HTML & CSS
Code des nouveaux points d'arrêt (breakpoints) - Vidéo n°16
Dans cette avant-dernière partie, nous continuons sur notre lancée, et identifions le besoin de nouveaux points d’arrêts afin de rendre notre site responsive et complètement adaptatif à toutes les largeurs d’écrans.
Transformer une maquette en site web avec HTML & CSS
Vérification du code au W3C et compatibilité des navigateurs - Vidéo n°17
Dernière partie de cette série !
Nous arrivons à la fin de notre projet, mais avant de sabrer le champagne 😉🍾, il nous reste deux spécifications techniques à réaliser, et non des moindres.
Voyons donc dans cette ultime partie, comment s’assurer de la compatibilité de notre code sur les navigateurs Google Chrome et Mozilla Firefox.
Une fois cela fait, nous irons vérifier notre code HTML et notre code CSS, avec les validateurs en ligne du W3C.
Pour la compatibilité du code, je n’en ai pas parlé dans la vidéo et je m’en excuse, mais existe un site où nous pouvons vérifier la compatibilité des propriétés CSS de notre code. Ce site est le site Caniuse. N’hésitez pas à le consulter lorsque nécessaire.
Et maintenant, allons terminer notre projet.
Conclusion et mots de fin
Nous y sommes amis codeurs !
Vous pouvez être fier de la réalisation de ce projet, car nous avons vu beaucoup de choses dans cette série :
- Interpréter et respecter une note de synthèse, nous donnant les spécifications fonctionnelles et techniques d’un projet.
- Respecter les spécifications de cette note de synthèse et s’y conformer.
- Comment découper une maquette avec les balises sémantiques autant que possible.
- Comment lier notre feuille de style CSS à notre page HTML.
- Intégrer les CDN GoogleFonts et FontAwesome dans un projet.
- Utiliser L’éditeur de code Visual Studio Code et connaitre quelques raccourcis utiles.
- Utiliser les outils disponibles dans un navigateur pour aider à la mise en style.
- Transformez nos maquettes au format mobile et ordinateur en un site web.
- Utiliser les propriétés Flexbox dans notre feuille de style CSS.
- Utiliser les médias queries pour rendre le site responsive.
- S’assurer de la compatibilité de notre code pour l’affichage sur les différents navigateurs.
- Valider notre code HTML et CSS aux validateurs W3C.
Bien entendu, ce projet est perfectible et nous pourrions lui apporter des modifications, notamment lors de la création de nos points d’arrêts (breakpoints).
Dans ce projet, j’ai essayé de vous apporter des clefs, mais les vidéos devant être assez courtes, je ne peux pas toujours développer comme je le souhaiterai.
Le but est bien sûr de, vous expliquer ma façon de faire, mais surtout de vous permettre de trouver votre propre méthode de travail. Comme je vous l’ai dit, il existe un tas de façon d’arriver au résultat final, et c’est à vous de voir quelle méthode vous convient le mieux.
Si cette série a pu vous aider à avancer dans votre projet, alors ce sera une vraie récompense pour moi. Car c’est la raison de ce partage avec vous.
Je vous souhaite le meilleur pour la suite et vous donne rendez-vous très vite pour de nouveaux projets.
Merci de prendre encore quelques secondes pour lire ce qui suit, car c’est aussi important pour moi.
Partages et retours
Comme je vous l’ai dit en préambule, réaliser cette série de 17 vidéos) prend beaucoup de temps :
- Réaliser le projet en amont.
- Enregistrer les vidéos pendant que je code.
- Encodage des vidéos avant montage.
- Visualisation, montage, et assemblage de la vidéo et audio.
- Publication sur ma chaine et sur mon blog.
Alors SVP, merci de prendre quelques secondes (au pire quelques minutes) de votre temps, pour vous inscrire sur le site, et ainsi être prévenu de la parution des prochains articles, vous abonnez à ma chaine YouTube, et à ma page Facebook.
Cela m’encouragera grandement à continuer de produire du contenu, et sera un remerciement au travail accompli.
N’hésitez pas non plus à laisser vos commentaires sur cette série, ou à me dire quels sont les tutoriels que vous aimeriez avoir sur le blog Activateur Web.
En attendant, merci d’avoir suivi ce projet, et les prochains tutoriels et projets arrivent très vite , c’est promis.
Comme toujours : Prenez soin de vous et restez curieux.
Amicalement.
4 Responses
Merci pour cette formation très enrichissante
Merci Fabien,
Je trouve ton approche très pédagogique.
Je souhaite retravailler le code peux-tu partager les fichiers code html et Css stp.
Bien à toi.
Rafaela77@hotmail.fr
Bonjour Rafaela,
Merci pour le commentaire.
Vous pouvez accéder au repository du projet à cette adresse.
Bon courage pour votre projet.
Merci pour ce travail ça va m’être très utile