Notre premier cas va être celui qui fait le plus peur, mais qui est à la fois le plus excitant car tout est possible : démarrer un projet de zéro. Autant cela peut être une source de créativité, autant cela peut être très effrayant.
Ensemble, nous allons structurer tout cela pour que les créatifs ne s'éparpillent pas et que les plus angoissés soient rassurés.
Nous allons prendre l'exemple d'un projet que l’on souhaite faire. Le but est d’avoir un portfolio de photographe (ça vous rappelle quelque chose ?). C’est une vitrine virtuelle destinée à exposer votre travail et donner envie de travailler avec vous. Voyons voir comment nous allons commencer.
Étape 1 : posez-vous des questions pour identifier l’objectif visé
On commence toujours par se poser des questions !
Qu’est-ce que je souhaite faire ?
Vous voulez avoir un portfolio en ligne afin de pouvoir mettre en avant vos meilleures photos. Tout mettre serait juste un catalogue et ne serait pas assez percutant. Alors vous avez sélectionné une douzaine de photos. Vous devez donner envie de travailler avec vous. Pour cela, vous souhaitez aussi un formulaire de contact pour ne rater aucun client.
De quel langage/quelle technologie j’ai besoin ?
Vous n’avez pas besoin de faire appel à un service pour récupérer des données pour le moment. Un site web statique est suffisant. Un projet en HTML/CSS peut suffire. Pour le formulaire de contact, d’après ce que vous avez vu sur internet, le PHP est le plus recommandé.
Quels sont les outils à ma disposition ?
Vous avez des bases en HTML/CSS. Vous codez sur Visual Studio Code. Toutes vos meilleures photos sont déjà classées, prêtes à être exposées ! Vous avez également vu qu’il existe des tutos pour vous former au PHP si besoin, et trouver des exemples de code.
Quel serait mon MVP ?
Avant tout, l’objectif d’un portfolio, c’est d’avoir une belle vitrine pour mettre en avant votre talent. Alors, même si avoir un formulaire de contact serait top, ce n’est pas ce que vous maîtrisez, et ce n’est pas ce qui est le plus essentiel à votre projet. Pour votre MVP, une page avec vos photos les plus pertinentes sera déjà bien suffisante. Vous verrez pour faire évoluer votre projet par la suite. Cette page n’aura pas besoin de navigation car elle n’aura qu’une section.
Étape 2 : isolez la fonctionnalité
Ici vous démarrez un projet vide ; peut-être que vous aurez besoin de faire des tests à part, mais vous pouvez commencer directement votre projet. Il n’y a pas une seule façon de découper un projet, faites ce qui vous paraît logique.
Je vous propose un découpage simple en commençant par “ce que je sais faire” :
Constituer la structure du projet : afficher une page internet vide mais avec les bases de sa structure en HTML.
Afficher un titre sur la page : ajouter un titre de page simple au milieu et dans la balise pour le titre de l’onglet.
Afficher 6 photos : avoir une grille de 6 de vos plus belles photos.
Changer la couleur de fond de la page : ajouter un fichier CSS.
Mettre en forme le reste de la page avec du CSS.
Rendre la page responsive.
Peut-être que j’oublie des choses, ce n’est pas grave, le principal c’est d’avoir une idée de la direction. Vous pourrez rectifier la trajectoire à la fin de chaque étape si besoin !
Étape 3 : utilisez les ressources disponibles
Pour les instructions 1 et 2, vous savez le faire assez facilement vu que vous avez déjà fait des sites internet. Au pire, une bonne recherche sur Google et hop, vous avez les balises de base. Ou encore en utilisant le raccourci VSCode : ! puis Entrer .
Et hop, on n’a déjà plus une page de code blanche ! Facile, non ?
Commencer par ce que l’on sait faire ou par la configuration de la structure de projet peut vous permettre de faire les premiers petits pas, loin du stress.
En revanche, pour la grille photos, vous avez peut-être des idées mais rien de sûr. Là, c’est un peu plus effrayant, et c’est un peu comme si vous repartiez d’une page blanche.
Alors même si vous avez déjà codé une grille de photos, personne ne peut se souvenir de tout ce qu’il a codé. Les développeurs passent leur temps sur internet à trouver le code dont ils ont besoin. Tout va tellement vite, votre façon de faire il y a 1 an a peut-être changé depuis !
Alors je vous propose de chercher un tutoriel pour faire une grille, comme celui-ci par exemple. Avec des mots-clés comme “tuto grid html”.
Faire du copier-coller fait partie du quotidien des programmeurs. La seule règle, c’est d'essayer de comprendre ce que vous collez dans votre projet. Ce n’est pas une simple copie, voyez-le plus comme une source d’inspiration.
Comme je l’ai déjà dit, cela ne sert à rien de réinventer la roue !
Ici le tutoriel vous permet d’avoir une grille, mais ce n’est que la structure, il faut que vous rajoutiez des photos. Vous avez la logique et l’ossature pour construire la suite par-dessus. Avancez pas à pas, de manière incrémentale.
Étape 4 : intégrez la solution à votre projet
Maintenant, vous allez pouvoir ajouter les photos pour que ce tuto puisse complètement s'intégrer à votre besoin et à votre projet.
Vous savez comment ajouter une image dans un code HTML, vous connaissez la balise. Si vous n'étiez pas sûr, encore une fois, c’est OK d’aller chercher de l’aide sur internet.
Essayez et voyez si vous obtenez le résultat attendu.
Plus vous allez tester des choses et plus vous affinerez ce que vous cherchez à faire (et ce qu’il est possible de faire aussi).
Néanmoins, il est important de savoir s'arrêter pour avancer. Vous pourrez revenir dessus plus tard pour réitérer.
Maintenant, votre page n’est plus blanche. Vous n’avez qu'à continuer dans cette même dynamique pour construire votre MVP.
N’oubliez pas de faire un commit avec Git avant de vous lancer sur une nouvelle étape !
En résumé
Découper votre projet en petites tâches est indispensable pour avancer sereinement.
Se tromper fait partie de l’apprentissage.
Copier les ressources à votre disposition, ce n’est pas tricher, mais c’est au contraire un outil quotidien dans le développement.
Commencez par faire ce que vous savez faire.
On a vu ensemble comment démarrer un projet ; je vous propose que l’on continue en essayant d’ajouter une fonctionnalité à un projet existant, dans le prochain chapitre !
