📋 Résumé du projet
Les choses sérieuses commencent !
Ta mission ici consiste à transformer une maquette en un site web fonctionnel et responsive.
Pour mener à bien cette mission, tu ne pourras utiliser que les langages HTML et CSS.
Ton code devra être versionné sur GitHub ou GitLab.
GitHub, GitLab et Git ❓
GitHub et GitLab vont te permettre d'héberger ton code en ligne et pouvoir le modifier depuis ton ordinateur.
Ils se basent sur Git qui est un logiciel de gestion de versions décentralisé. Cela signifie que tu vas pouvoir l'installer sur ton ordinateur et versionner ton code sur ton ordinateur avant de tout synchroniser avec GitHub ou GitLab.
Dans le cours d'OC "Gérez du code avec Git et GitHub" tu vas apprendre à créer un dépôt Git puis à effectuer les opérations basiques, comme faire un commit et pusher ton code sur GitHub.
Si tu te poses une question sur Git, le plus simple reste encore la consultation de la documentation officielle de Git et les guides publiés par GitHub
Lancement du projet ! 🚀
Tu dois te demander quels sont les outils dont tu vas avoir besoin.
Pour commencer il te faut un éditeur de code. Personnellement je te conseille VisualStudioCode et une extension très utile Bracket Pair Colorizer 2 qui t'aidera à visualiser les ouvertures et fermetures de tes balises. VSCode propose aussi un terminal intégré qui te sera très utile pour taper tes commandes Git !
Pour versionner ton code il te faudra installer Git
Maintenant que tu as tous les outils, tu vas pouvoir commencer par découper la maquette fournie dans le projet.
Comment je découpe la maquette ? Avec des ciseaux ? ✂️
Pour commencer tu n'auras pas besoin de Photoshop pour cette maquette !
Le découpage de maquette consiste à distinguer des blocs tels que header, footer, main et aside.
Ces blocs vont structurer ta page HTML et sont ce que l'on appelle des balises sémantiques.
Une fois le code découpé en blocs, tu pourras affiner pour faire ressortir la barre de navigation, les titres, sous-titres, etc.
Je vais maintenant te présenter un nouveau copain qui s'appelle MDN !
MDN Web Docs, anciennement Mozilla Developper Network, recense toute sorte de documentation utile aux développeurs web.
Par exemple la documentation concernant les balises sémantiques
Petit tip pour chercher une documentation sur MDN, ouvre ton navigateur préféré et tape MDN et ce que tu recherches !
Si tu veux visualiser ton découpage plus facilement tu peux imprimer la maquette et tout simplement entourer tes blocs avec différentes couleurs ou encore utiliser un logiciel comme paint et tracer des rectangles ou des carrés autour de tes différents blocs.
Et maintenant ? 🤷♂️
Commençons par le HTML qui va structurer ta page.
Pour commencer crée un dossier qui aura pour nom TonprenomTonnom_2_JJMMAAAA en remplaçant Tonprenom par ton prénom, Tonnom par ton nom, 2 est le numéro du projet et JJMMAAAA la date à laquelle tu commences ce projet. Par exemple si tu t'appelles Jean Dupond et que tu commences le projet le 16 août 2021 ton dossier s'appellera JeanDupond_2_16082021.
Il est important de bien nommer le dossier car il est demandé, dans le projet, une nomenclature précise pour ton repository GitHub et c'est précisément ce dossier qui va être ton repository !
Maintenant tu peux ouvrir ce dossier dans VSCode. Pour l'instant, il est vide.
Tu vas créer un fichier index.html. Une fois le fichier créé tape html:5 dans ce dernier et là VSCode va compléter ce dont tu as besoin, au minimum, pour ton fichier index.html !
J'ai le squelette du site mais c'est tout moche ☹️
Passons à la décoration avec CSS !
Pour commencer tu peux te familiariser avec CSS-Grid et Flex-Box en jouant à GridGarden et FlexFroggy !
Un autre site qui te sera utile est CSS-Tricks tu y trouveras de nombreuses ressources pour ce projet !
Et n'oublie pas de lier ta feuille de style CSS à ta page index.html !
Si tu veux être au plus proche de la maquette il existe une extension Firefox Pixel Perfect Pro, qui te permet de superposer la maquette et ta page HTML !
Maintenant que tu as brillamment terminé ta version Desktop il va falloir t'attaquer à la version tablette et mobile.
Tu auras sans doute besoin des media-queries, je te laisse découvrir cela par toi-même.
Comment je dépose mes livrables ?
Pour commencer, si tu ne l'as pas déjà fait, il va falloir créer ta page en ligne.
Pour cela tu peux utiliser GitHub Pages
Ton livrable sera un dossier compressé qui contiendra deux fichiers texte avec respectivement le lien de ton dépôt GitHub et le lien de ta page web.
La soutenance 😰
N'aie crainte ! Suis les conseils donnés sur GauCode et tout se passera bien !
📚 Ressources utiles
Git
GitHub
GitLab
MDN
GridGarden
FlexFroggy
CSS-Tricks
Pixel Perfect Pro