Comment devenir un meilleur développeur front-end en créant des projets (idées incluses)

Si vous souhaitez accélérer votre croissance en tant que développeur front-end, rien ne vaut de vrais projets de développement.

La vérité est que vous pouvez regarder tous les tutoriels et cours du monde, mais sans application et pratique, vous n'apprendrez pas vraiment les compétences dont vous avez besoin pour travailler sur de vrais projets.

Les projets clients ne sont pas accompagnés d'instructions étape par étape, car sinon, ils n'auraient pas du tout besoin de vous. Vous devrez sortir des sentiers battus, trouver des solutions, faire des compromis et vous frayer un chemin jusqu'à la ligne d'arrivée.

La meilleure façon d'acquérir ces compétences est de réaliser des projets de développement frontaux et d'apprendre en cours de route. Et la meilleure partie? Vous n'avez même pas besoin d'un client pour démarrer car vous pouvez réaliser ces projets vous-même.

Comment choisir un projet de développement Front-End personnel

Gardez à l'esprit votre niveau de compétence

Ne choisissez pas un projet trop avancé pour votre niveau de compétence, surtout si vous êtes du genre à perdre la motivation lorsque les choses deviennent trop difficiles.

Mais n'oubliez pas que puisque l'objectif ici est de vous aider à maîtriser le développement front-end, choisissez un projet qui dépasse votre niveau de compétence actuel mais qui reste réalisable.

Par exemple, si vous avez récemment appris le HTML et le CSS, il est temps de passer au niveau supérieur en apprenant JavaScript.

Résolvez un problème personnel ou un problème qui vous tient à cœur

Vous êtes également plus susceptible d'apprécier et de vous en tenir à un projet s'il résout vos propres problèmes ou répond à vos propres désirs.

Peut-être que vous perdez toujours la notion du temps lorsque vous parcourez votre fil d'actualité Facebook, ou que vous voulez un site Web sur lequel vous pouvez générer automatiquement des miniatures YouTube attrayantes.

Pensez à un problème personnel que vous pouvez résoudre avec la technologie et partez de là. Les suggestions de cet article sont uniquement destinées à être un point de départ. Ce sera beaucoup mieux si vous le modifiez pour ajouter votre touche unique.

4 projets de développement front-end amusants

Créez un clone d'un site Web.

Compétences à apprendre: HTML, CSS, JavaScript et / ou Bootstrap.

Construire un clone d'un site Web est un excellent moyen d'explorer la façon dont il est construit et d'apprendre les bases de la structure des pages, des couleurs, des polices, des supports, des tableaux, etc. Entrez dans le plus de détails possible pour reproduire l'original.

Choisissez un site Web que vous aimez et créez-en un clone vous-même. Ne regardez pas le code source autant que possible pour en tirer le meilleur parti.

Le clonage de Google est en fait l'un des exercices de Thinkful pour les étudiants de leur atelier de codage. Thinkful est une entreprise éducative qui propose des cours de technologie, y compris un bootcamp de développement Web.

Vous pouvez également suivre cet exercice pour vous aider à cloner la page de destination d'une application appelée Karma WiFi. Il a été créé par Kyle Koski, l'un des mentors de Thinkful, et utilise HTML et CSS.

Ce qui est bien avec le clonage d'un site Web, c'est que vous pouvez choisir le niveau de complexité du site Web. Si vous débutez, un site Web simple qui n'a besoin que de HTML et de CSS est un bon point de départ. Si vous êtes plus avancé, choisissez un site Web qui nécessite JavaScript ou React.

Créez un jeu de quiz JavaScript.

Compétence à apprendre: JavaScript

JavaScript est un langage de programmation qui vous permet de créer des pages Web interactives. C'est le langage que vous utilisez pour créer des éléments réactifs tels que des menus, des lecteurs vidéo, des animations, des cartes interactives et même des jeux dans le navigateur.

Mais avant de continuer, il est important de savoir pourquoi vous voudriez créer un quiz.

C'est plus que du plaisir et des jeux. Les quiz gagnent en popularité en tant qu'outils de marketing de contenu. Avez-vous déjà vu ce genre de choses?

Les quiz sont d'excellents outils de marketing car ils sont interactifs. Selon un sondage réalisé par Content Marketing Institute, 81% des spécialistes du marketing conviennent que le contenu interactif - qui est tout type de contenu qui oblige l'utilisateur à participer - attire l'attention plus efficacement que le contenu statique.

Pour cette raison, les quiz sont utilisés à des fins marketing différentes. Des quiz triviaux, comme celui de gauche, sont utilisés pour augmenter le trafic vers un site Web. Certains spécialistes du marketing utilisent également des quiz pour qualifier les prospects, segmenter les prospects et augmenter l'engagement.

J'explique cela parce qu'en tant que développeur, votre travail consiste non seulement à vous assurer que les choses sont jolies, mais également à créer des fonctionnalités conviviales et qui rendront le site Web de votre client plus efficace pour atteindre ses objectifs de vente et de marketing.

Pour créer un quiz, consultez ces didacticiels sur la création de quiz JavaScript à partir de WebDevTrick et SitePoint. Voici à quoi peut ressembler votre quiz JS:

Créez votre propre lecteur QR mobile.

Compétence à apprendre: JavaScript

Les codes à barres et les codes QR ont changé la façon dont nous faisons nos achats. Les clients peuvent désormais scanner un produit avec leur smartphone et trouver diverses informations à son sujet telles que le prix ou où ils peuvent l'acheter.

Il élimine également le besoin de taper de longs codes sur un site Web comme des codes d'activation ou des numéros de modèle, ce qui rend leur expérience d'achat plus facile et sans tracas.

Contrairement à ce que d'autres pensent, vous n'avez pas besoin d'une application téléphonique native pour scanner les codes QR.

Les sites Web fonctionnant sur un appareil intelligent avec une caméra peuvent faire l'affaire.

Ce guide vous montre le processus étape par étape de création de votre propre lecteur de code QR.

Vous utiliserez HTML et JavaScript, mais la partie la plus importante est d'utiliser une bibliothèque JS qui peut interpréter le code QR. La bonne nouvelle est que vous n'aurez pas à le créer à partir de rien, car il existe de nombreuses excellentes bibliothèques dans ce but précis.

Créez une application météo.

Compétence à apprendre: Angular 8

Angular est l'un des trois frameworks de développement front-end les plus populaires aux côtés de React et Vue.js. Il est couramment utilisé pour créer des applications basées sur des formulaires (où vous devez vous inscrire pour créer un compte), mais peut également être utilisé pour créer des jeux et même des applications avec des éléments de réalité virtuelle.

Il existe un didacticiel pas à pas très détaillé sur Medium qui enseigne aux débutants comment créer une belle application météo avec Angular 8 (la dernière version d'Angular). L'application météo ressemble à ceci:

Cette application présente un design épuré et minimaliste avec des illustrations époustouflantes et une interface simple. Il dispose également d'une fonction de mode clair et sombre astucieuse qui lui ajoute plus de flair.

Ce qui est génial avec ce projet, c'est que vous aurez une idée de ce que c'est que de créer une application utilisable et réactive à partir de zéro. Vous apprendrez tout, de l'installation de Node.js et de la CLI angulaire au test de votre code avec LightHouse.

Et bien que le créateur du didacticiel ait évidemment inséré sa propre préférence de conception, vous pouvez ajouter votre propre style et être aussi créatif que vous le souhaitez. Vous pouvez jouer avec le style et les animations CSS et même utiliser votre propre logo, icônes et autres matériaux de conception.

Faites-le correctement et vous aurez une application météo impressionnante sur votre portefeuille.

Vous pouvez accéder au tutoriel ici.

Bien que ce didacticiel soit adapté aux débutants, vous avez toujours besoin d'un peu de familiarité angulaire. Si vous voulez apprendre Angular, le meilleur endroit pour commencer est Angular.io.

Concevez et codez votre propre site Web de portfolio.

Dans un projet typique, vous travaillerez probablement aux côtés d'un concepteur Web qui déterminera à quoi ressemblera le site Web.

Bien que la conception et le développement soient sans doute deux domaines différents, se familiariser avec la conception Web ajoutera non seulement un autre ensemble de compétences à votre arsenal, mais vous équipera également si vous décidez de vous lancer en solo en tant que pigiste et de travailler sur des projets de la conception au déploiement.

Concevoir et coder votre propre site Web de portfolio vous donnera la liberté de présenter simultanément votre côté artistique et technique.

La première étape consiste à penser à votre message ou à votre image de marque . Quels sont vos services de base, qui souhaitez-vous servir et pourquoi devraient-ils vous choisir? (En savoir plus sur l'image de marque ici.)

La deuxième consiste à créer une maquette qui détaillera la mise en page, les couleurs et la typographie.

Pensez également à un thème. Est-ce minimaliste ou bruyant et funky? Est-ce monochrome ou utilisera-t-il des couleurs vives? Faites ensuite une liste des pages dont vous aurez besoin. Cela comprend souvent une page de contact, quelques articles de blog, une page à propos de moi et une page de conditions générales.

Troisièmement, codez-le ! Utilisez le CSS moderne pour mettre en page le site, ajouter des animations, ajouter des images de haute qualité, etc. Le ciel est la limite ici - vous pouvez faire ce que vous voulez avec votre site Web de portfolio parce que c'est le vôtre - allez-y!

Où puis-je pratiquer le développement frontal?

Bien que la meilleure façon de pratiquer le développement front-end soit de créer vous-même de vraies applications et des sites Web publicitaires, il est toujours bon d'avoir un endroit où obtenir des conseils, accéder à des tutoriels et obtenir de l'aide lorsque vous êtes bloqué ou avez besoin d'un avis sur quelque chose.

Ce sont d'excellents endroits pour obtenir de l'aide pendant que vous pratiquez le développement frontal:

  1. freeCodeCamp.org - Il s'agit d'un site Web rempli de tutoriels gratuits sur la théorie du développement Web, les langages et les meilleures pratiques. Il y a aussi une grande communauté ici qui peut vous aider avec vos questions.
  2. HTML et CSS modernes depuis le début - Il s'agit d'un cours Udemy de Brad Traversy. Il contient des informations utiles et peut vraiment vous apprendre tout ce dont vous avez besoin pour vous familiariser avec ces langues.
  3. Frontendmentor.io - Vous pouvez trouver ici des «défis» gratuits et premium que vous pouvez faire pendant votre temps libre pour développer vos compétences. La difficulté des défis va de «junior» à «avancé». Voici des exemples des défis que vous trouverez ici:

Il y a plus de ressources que j'aimerais partager avec vous, mais pour éviter que cela ne soit trop long, vous pouvez consulter ce lien pour voir ma liste complète des cours recommandés.

Ce sont 5 projets de développement front-end amusants que vous pouvez essayer aujourd'hui. Encore une fois, ce sont des points de départ. C'est finalement à vous de le personnaliser pour ajouter un peu de votre touche personnelle :)

Rappelez-vous, tout est question de pratique. Vous DEVEZ construire des choses pour améliorer vos compétences.

N'apprenez pas seulement en regardant.

Apprenez en construisant.

Apprendre en faisant.

- Kyle Prinsloo (@study_web_dev) 24 juin 2020

Bon codage!

Merci d'avoir lu et bravo pour l'instant,

Kyle

Suivez-moi sur Twitter pour plus de conseils.