Article original : 5 Coding Projects You Should Include in Your Front End Portfolio
Un portfolio est un excellent moyen de montrer vos compétences à de potentiels employeurs. Et il est particulièrement utile pour les développeurs débutants qui n'ont peut-être pas d'expérience professionnelle.
Cependant, un problème courant lors de la création d'un portfolio est de savoir quoi y inclure.
La simple page web que vous avez créée pour un cours est-elle suffisante pour figurer sur votre site ? Devez-vous inclure uniquement des projets pour lesquels vous avez été payé, ou pouvez-vous inclure même les plus petites réalisations ? Y a-t-il un nombre 'idéal' de projets à avoir ?
Le but de cet article est de fournir des directives sur la manière de remplir votre portfolio de développeur frontend, à travers des exemples de projets.
Voici un résumé rapide des projets que nous allons aborder dans cet article :
- Un site web de portfolio
- Un site web cloné
- Une application web CRUD
- Un site web connecté à une API
- Un site web 'parfait'
Note : cela ne signifie pas que vous devez réaliser tous ces projets. Cette liste est simplement là pour vous donner des idées sur le type de projets que vous pouvez construire.
De plus, ces projets sont destinés aux développeurs débutants qui ont couvert les bases du développement frontend et recherchent des projets légèrement plus avancés.
1. Créer un Site Web de Portfolio
_Photo par [Unsplash](https://unsplash.com/@goshua13?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Joshua Aragon / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)
Tant que vous avez construit votre site web de portfolio vous-même, il est parfaitement acceptable de l'inclure dans votre liste de projets. Si vous avez tendance à changer régulièrement le design de votre portfolio, vous pouvez également inclure les versions précédentes.
En incluant un projet dans votre portfolio, vous ne montrez pas seulement vos compétences, mais vous expliquez également la réflexion derrière le design. Et c'est quelque chose qui intéresse généralement les employeurs potentiels.
Pour les développeurs frontend, expliquer comment vous avez abouti à votre mise en page choisie est tout aussi important que d'avoir un design esthétiquement agréable.
Vous pouvez aller plus loin et décrire les étapes que vous avez suivies pour vous assurer que votre site web suivait les meilleures pratiques de développement. Par exemple, partagez comment vous vous êtes concentré sur l'amélioration du SEO et des performances de votre site.
Ressources et exemples : Cet article de Laurence Bradford fournit plus d'informations sur la structure d'un portfolio et inclut des exemples de portfolios de développeurs web impressionnants que vous pouvez utiliser comme inspiration.
Technologie recommandée : Pour les débutants, je recommande d'utiliser HTML, CSS et JavaScript vanilla pour construire un portfolio, surtout si c'est la première fois.
2. Créer un Site Web Clonné
Savoir convertir avec précision un design en une page web entièrement fonctionnelle est une compétence que tout développeur frontend doit avoir.
Pour cela, vous devez avoir un bon œil pour la mise en page et les couleurs. Vous aurez également besoin de connaissances basées sur l'expérience, comme savoir quelle propriété d'affichage CSS est la meilleure pour correspondre à une mise en page ou être capable de rendre une animation selon les spécifications.
Dans la plupart des organisations, les développeurs frontend sont responsables de la traduction des maquettes et prototypes en pages web, il est donc bénéfique que votre portfolio montre vos compétences en matière de 'design-to-code'. Construire un site web cloné est un bon moyen d'y parvenir.
Il existe deux façons de procéder pour construire un site web cloné :
Premièrement, vous pouvez recréer un site web existant. Un défi courant pour les développeurs juniors est de cloner la page d'accueil de Google.
Cette méthode est particulièrement utile pour comprendre les applications réelles des choix de style dans les sites web populaires. Vous pouvez inspecter les éléments de la page et essayer de comprendre les méthodes utilisées pour le modèle de boîte, le positionnement et l'affichage.
_Photo par [Unsplash](https://unsplash.com/@solenfeyissa?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Solen Feyissa / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)
Deuxièmement, vous pouvez recréer un design à partir de zéro. Pour un projet plus ambitieux, vous pouvez chercher des designs sur Dribbble ou Behance et essayer de traduire le design en code.
Pour rendre cette méthode plus accessible aux débutants, essayez de recréer une page simple ou une fonctionnalité comme un formulaire de connexion ou une application météo.
Technologie recommandée : Cloner le design d'un site web ne nécessite aucune fonctionnalité, donc HTML et CSS suffisent. Vous pouvez également en profiter pour vous familiariser avec un framework CSS ou un préprocesseur comme SASS.
Note : tous les designs téléchargés sur ces plateformes sont la propriété protégée par copyright de leurs propriétaires, vous n'êtes donc pas autorisé à les utiliser à des fins commerciales. Cependant, si vous leur envoyez un email ou laissez un commentaire pour demander la permission de recréer le design à des fins non commerciales, le designer pourrait être ouvert à vous laisser recréer leurs designs gratuitement.
Il est également important de préciser sur votre portfolio que le projet est un travail cloné ou une recréation du design de quelqu'un d'autre.
3. Une Application Web CRUD
Effectuer des opérations CRUD (Create-Read-Update-Delete) est une fonctionnalité très courante pour la plupart des sites web (comme les blogs, le e-commerce, les tableaux de bord, etc.), il est donc essentiel de savoir les construire en tant que développeur frontend.
Une forme basique d'une application CRUD est une liste de tâches ou une page web de notes. Avoir l'un de ces projets sur votre site montre votre compétence dans la manipulation des structures de données. C'est aussi une bonne opportunité de montrer votre travail avec un framework frontend.
_Photo par [Unsplash](https://unsplash.com/@jessbaileydesigns?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Jess Bailey / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)
L'article de Tania Rascia sur le travail avec le stockage local est une introduction utile pour apprendre à créer des applications web CRUD avec JavaScript vanilla. Ou, si vous voulez un article plus spécifique à un framework, consultez l'article de la même auteure sur la création d'une application CRUD avec les hooks React
Technologie recommandée : Les applications CRUD nécessitent l'utilisation de composants réutilisables, il est donc judicieux de les construire en utilisant un framework comme React ou Vue, selon votre familiarité.
Site d'exemple : Application CRUD React avec Hooks
4. Un Site Web Connecté à une API
De nombreux projets à grande échelle nécessitent une certaine forme de communication avec un serveur backend et l'affichage de données récupérées depuis ce serveur. Cela nécessite l'utilisation d'une Interface de Programmation d'Application (API) dans la plupart des cas.
Une API est... J'aime à la comparer à un bibliothécaire numérique. Imaginez avoir des livres stockés dans une bibliothèque et vous avez besoin d'utiliser ces livres pour un rapport.
Vous allez donc voir le bibliothécaire et demandez à emprunter un livre. Vous devez donner au bibliothécaire certains mots-clés (disons le nom du livre et le nom de l'auteur) et avoir la bonne autorisation (dans ce cas, une carte de bibliothèque) pour obtenir ce livre.
Maintenant, remplacez 'bibliothèque' par 'serveur', 'livres' par 'données', 'rapport' par 'site web' et 'bibliothécaire' par 'API'.
_Photo par [Unsplash](https://unsplash.com/@ismailenesayhan?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">İsmail Enes Ayhan / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)
Les API permettent aux développeurs frontend de collecter, modifier et supprimer des données d'une base de données backend. Construire un site qui utilise une API pour afficher des données est un excellent projet à inclure dans votre portfolio.
Sites d'exemple : Vous pouvez choisir de créer un site d'affichage de données (par exemple, un site qui se connecte à une API météo et affiche la météo actuelle) ou, pour un projet plus ambitieux, vous pouvez configurer une API RESTful et effectuer les opérations sur votre site web.
5. Un Site Web 'Parfait'
Un site web 'parfait' est un site qui obtient 100 % dans toutes les catégories du rapport d'audit Chrome Lighthouse. Construire un site web qui répond à toutes les fonctionnalités requises montre votre compétence à suivre les meilleures pratiques et à garantir des projets de haute qualité.
Vous pouvez lire comment optimiser votre site web pour les performances et l'accessibilité afin d'obtenir un score Lighthouse parfait dans cet article Comment J'ai Construit Mon Site Web de Portfolio avec un Score Parfait.
Conclusion
Voilà, vous avez maintenant 5 projets que vous pouvez inclure dans votre portfolio frontend. De plus, ces projets n'ont pas besoin d'être tous séparés. Vous pourriez créer un site web cloné avec un score parfait ou une application CRUD qui utilise une API pour appeler des données depuis un fichier JSON.
Maintenant, vous pouvez vous lancer et construire. Bon codage :)
Si vous avez trouvé cet article utile ou si vous avez des questions, vous pouvez me le faire savoir sur Twitter.