10 projets pour vous amener à votre premier emploi de développeur en 2020

10 projets pour vous amener à votre premier emploi de développeur en 2020

Pour ceux d'entre vous qui cherchent à percer dans le monde du développement Web avec votre premier travail de développement, le montant de les choses que vous devez savoir peuvent être accablants: HTML, CSS, JavaScript, contrôle de version, outils de construction, frameworks, la ligne de commande. La liste continue …

Mais n'ayez crainte! Dans cet article, j'aimerais vous offrir quelques conseils en décrivant dix compétences qui vous aideront à décrocher votre premier emploi de développeur en 2020. Pour chaque compétence, je vous proposerai un projet pratique pour vous aider à démarrer aux ressources appropriées sur Zentica Premium pour en savoir plus.

Plongeons-nous.

1. Familiarisez-vous avec votre éditeur de code

En tant que codeur, vous allez passer beaucoup de temps dans l'éditeur de votre choix. C'est pourquoi vous devriez faire l'effort d'apprendre ce qu'il peut faire et comment le configurer correctement. Le sujet de l'éditeur à utiliser peut rapidement devenir controversé, mais si vous débutez, je vous encourage à vérifier Code VS (ou VSCodium si vous vous souciez de la confidentialité).

VS Code est livré avec de nombreuses fonctionnalités intéressantes, telles que Abréviations Emmet, intellisense, divers raccourcis clavier et Intégration Git. Il y a aussi des centaines (voire des milliers) d'extensions que vous pouvez installer pour personnaliser votre flux de travail.

Idée de projet

Installez VS Code sur votre machine et engagez-vous à l'utiliser. Passez du temps à rechercher des extensions populaires pour la langue de votre choix et installez au moins trois d'entre elles. Vous devez également installer Plus jolie et configurez-le pour formater votre code lors de l'enregistrement, ainsi que ESLint, qui affichera les erreurs de linting JavaScript dans la console de VS Code. Pour les points bonus, vous pouvez imprimer le feuille de référence des raccourcis clavier pour votre plate-forme et essayez de mémoriser deux ou trois raccourcis par semaine.

Lectures complémentaires

À titre de référence, je recommanderais Visual Studio Code: outils d'édition et de débogage de bout en bout pour les développeurs Web. Ce guide à jour couvre tous les composants essentiels de VS Code, y compris les fonctionnalités d'édition de l'espace de travail, les fonctionnalités avancées telles que la refactorisation du code et la liaison de touches, et l'intégration avec Grunt, Gulp, npm et d'autres outils externes. Le chapitre deux, qui vous présente l'interface utilisateur, et le chapitre neuf, sur l'utilisation des extensions, devraient être d'un intérêt particulier.

Si vous créez une application Web, ce n'est qu'une question de temps avant de rencontrer des formulaires HTML. Ils font partie intégrante de l'expérience Web et peuvent être compliqués. Par exemple, vous devez les rendre accessibles et vous assurer qu'ils s'affichent correctement sur différents navigateurs et sur des écrans plus petits. Il peut également être difficile de les styliser de manière cohérente sans compromettre leur convivialité.

Les formulaires sont une partie essentielle du parcours d'un visiteur sur votre site. Même si votre visiteur est vendu sur ce que vous avez à offrir, un formulaire cassé ou même mal présenté pourrait lui suffire pour abandonner le navire. Cela signifie que vous perdez la conversion.

Idée de projet

Créez et stylisez un formulaire de contact. Concentrez-vous sur l'alignement des champs du formulaire, un CTAet assurez-vous que le formulaire affiche bien un aperçu des navigateurs et des appareils. Essayez d'inclure divers contrôles de formulaire, tels que <select> éléments et cases à cocher, tout en gardant la mise en page simple et élégante.

Vous voudrez peut-être également télécharger votre formulaire terminé sur CodePen, une communauté en ligne pour tester et présenter des extraits de code HTML, CSS et JavaScript créés par les utilisateurs. Lorsque vous postulez pour un emploi, un compte CodePen bien organisé pourrait potentiellement servir de mini portefeuille.

Lectures complémentaires

Modèles de conception de formulaire propose dix recettes pour différents types de formulaires - formulaires d'inscription, formulaires de réservation, formulaires de connexion et plus encore. Apprenez des pros et découvrez comment rendre vos formulaires à la fois attrayants et accessibles à tous. Si vous recherchez un démarrage rapide avec ce projet, je vous recommande de lire la première partie du premier chapitre, qui couvre des éléments tels que les étiquettes, les espaces réservés, le style et les types d'entrée.

3. Familiarisez-vous avec la validation côté client

Vous n'irez pas loin en tant que développeur Web en 2020 sans connaître JavaScript: c'est l'un des langages de programmation les plus populaires au monde et, franchement, une compétence incontournable.

Sur le front-end, il est utilisé pour une grande variété de tâches, telles que la création d'éléments interactifs pour les pages Web (curseurs, cartes, graphiques, menus, widgets de discussion, etc.) et l'amélioration générale de l'expérience utilisateur. Une caractéristique plutôt intéressante du langage est qu'il peut manipuler le DOM, pour offrir aux utilisateurs un retour instantané sur une action sans avoir besoin de recharger la page. Cela rend les pages Web plus vives et plus réactives.

Idée de projet

Dans ce projet, vous devez prendre le formulaire de contact que vous avez créé à l'étape deux et le compléter avec une validation côté client.

En utilisant le types d'entrée corrects vous y conduira en grande partie, mais essayez également d'ajouter une validation personnalisée. Vous devez afficher les messages d'erreur de manière intuitive et éviter d'utiliser des boîtes d'alerte. Et si tout cela semble un peu trop simple, pourquoi ne pas ajouter un champ qui pose une question pour s'assurer que l'utilisateur n'est pas un bot.

Lectures complémentaires

Si vous êtes nouveau dans le monde de la programmation JavaScript, ou si vous souhaitez simplement une référence de bureau rapide et facile, alors consultez JavaScript: Novice to Ninja, 2e édition. Cette introduction pas à pas au codage en JavaScript vous montrera comment résoudre des problèmes du monde réel et développer des applications Web plus riches. Vous voudrez porter une attention particulière au chapitre huit, qui vous montre comment utiliser JavaScript pour interagir avec un formulaire HTML.

4. Créer un convertisseur de devises à l'aide de l'API Fixer

Dans le passé, JavaScript avait la réputation d'être un langage de jouet - bon pour les menus et les animations, mais pas grand-chose d'autre. Et bien que cela ait pu être le cas au début des années 2000, en 2020, rien ne pouvait être plus éloigné de la vérité.

De nos jours, des applications entières sont écrites en JavaScript. De nouveaux outils et frameworks sont introduits et développés à un rythme rapide, et le langage lui-même a subi de grands changements depuis l'arrivée d'ES2015 (alias ES6). Il est important que vous vous teniez au courant de ces changements et que vous ayez une bonne idée de ce dont JavaScript est capable et de sa place dans l'image du développement Web dans son ensemble.

Idée de projet

Créez une application qui permet aux utilisateurs de convertir une devise en une autre. Les utilisateurs doivent entrer un montant, sélectionner la devise réelle, sélectionner la devise souhaitée, puis l'application doit récupérer le taux de change à partir du API Fixer. L'interface utilisateur doit être mise à jour dynamiquement sans aucune sorte d'actualisation de la page.

Utilisez les fonctionnalités JavaScript modernes là où vous le pouvez. Terminez le projet en utilisant soit du JavaScript vanilla, soit une bibliothèque comme Réagir pour gérer les mises à jour de l'interface utilisateur.

Lectures complémentaires

JavaScript: bonnes pratiques est une collection d'articles qui examinent le JavaScript moderne et comment le langage a évolué pour vous permettre d'écrire du code propre, maintenable et réutilisable. Je recommanderais de lire «Anatomie d'une application JavaScript moderne», «Utilisation de la syntaxe JavaScript moderne» et «Contrôle de flux en JavaScript moderne».

5. Concevez votre propre site Web de portfolio

Dans votre carrière de développeur Web, vous vous retrouverez probablement aux côtés d'un concepteur sur le même projet. Et bien que la conception et le développement puissent être considérés comme des disciplines distinctes, avoir une bonne compréhension du processus de conception facilitera cette relation et vous mettra en bonne position avec vos collègues.

Ou peut-être voulez-vous faire cavalier seul en tant que pigiste, en faisant passer les projets de la conception au déploiement. Dans ce cas, un site Web d'apparence générique ne le coupera pas. Vous devrez offrir au client un design accrocheur mais aussi très fonctionnel qui l'aide à atteindre ses objectifs commerciaux.

Idée de projet

Concevez votre propre site Web de portfolio - votre place sur Internet pour vous présenter et mettre en valeur vos compétences. Passez un peu de temps à rechercher ce qui fait une bonne conception de portefeuille, puis faites une maquette de votre propre conception soit avec un crayon et du papier, soit en utilisant un outil de wireframing de votre choix.

Côté design, faites attention à la mise en page, aux couleurs que vous utiliserez et à la typographie. En ce qui concerne le contenu, réfléchissez aux pages dont vous aurez besoin (indice: vous pouvez inclure un formulaire de contact) et à la manière de vous présenter et de présenter votre travail. Il y a beaucoup de sites sur Internet qui vous donnera des conseils sur ce qu'il faut inclure.

Lectures complémentaires

Ok, je comprends. Le design est difficile. Mais cela n'a pas besoin d'être ...

Les principes de la belle conception Web est un livre fantastique si vous êtes aux prises avec le processus de conception. Il vous guidera à travers un exemple de conception, du concept à l'achèvement, vous apprenant une foule de compétences pratiques en cours de route.

Commencez au chapitre un en lisant ce qui fait un bon design et prenez-le à partir de là. Personnellement, j'ai lu le livre d'une couverture à l'autre en une semaine, mais vous pouvez également vous plonger dans les autres chapitres et en apprendre davantage sur la mise en page, la couleur, la texture, la typographie et l'imagerie à votre guise.

6. Codez votre propre site Web de portefeuille

JavaScript n'est pas la seule technologie qui évolue rapidement; il y a aussi beaucoup de changements dans le monde du CSS. Les progrès du langage nous permettent désormais de créer facilement des mises en page compliquées, de déclarer des variables dans notre code CSS, de créer des animations, d'appliquer le CSS de manière conditionnelle (en utilisant @les soutiens) et plus encore - des choses que, dans le passé, nous aurions eu recours à des hacks (ou JavaScript) pour réaliser.

Si vous écrivez du CSS en 2020, vous devez connaître toutes ces techniques modernes et savoir quand les utiliser, en particulier Flexbox et CSS Grid pour créer des mises en page. Vous devez également maîtriser les outils CSS modernes (tels que Houdini), les pré-processeurs et les cadres d'abondance dont nous disposons.

Idée de projet

Dans le projet précédent, vous avez conçu votre site Web de portefeuille. Il est maintenant temps de se salir les mains et de le coder. Utilisez le CSS moderne pour mettre en page le site et prenez le temps de rechercher certaines des unités de mesure les plus récemment introduites, telles que vw et vh. Ceux-ci seront très utiles si, par exemple, vous souhaitez inclure une image de démarrage en plein écran.

Incluez également le formulaire de contact que vous avez créé précédemment et utilisez CSS pour ajouter quelques animations minimales. Par exemple, vous pouvez animer le Envoyer bouton lorsque l'utilisateur survole ou clique dessus.

Lectures complémentaires

CSS Master, 2e édition vous montre comment écrire un CSS meilleur et plus efficace et tirer parti de la pléthore de nouvelles fonctionnalités CSS de pointe disponibles pour le développeur frontal. Vous apprendrez également à maîtriser les outils qui amélioreront votre flux de travail.

Portez une attention particulière au chapitre cinq qui vous aidera à créer des mises en page complexes en utilisant les multicolumn, Flexbox, et Grid modules.

7. La performance compte! Auditez votre site avec Lighthouse

De nos jours, il n'y a guère d'excuse pour un site Web lent. Les gens sont impatients. Personne ne veut attendre 15 secondes pour que vos images haute définition se chargent. Vos utilisateurs veulent simplement accéder directement à votre contenu.

Et même si les choses vous semblent bien, n'oubliez pas comment vit l'autre moitié. Tout le monde n'a pas un MacBook pro haut de gamme avec une connexion Ethernet 100 Gbit. Beaucoup de vos visiteurs navigueront sur votre site sur un smartphone, éventuellement sur un réseau 3G floconneux. C'est votre travail en tant que développeur Web de fournir tout de vos visiteurs avec la meilleure expérience possible que leur technologie permettra.

Idée de projet

Google Chrome est livré avec un outil fantastique appelé Phare, qui exécute des audits sur une page pour les performances, l'accessibilité, les meilleures pratiques et le référencement. Il vous offrira une variété de conseils sur la façon de résoudre les problèmes rencontrés.

Vous devez exécuter cet outil sur votre site de portefeuille nouvellement créé et faire de votre mieux pour vous assurer que chaque catégorie est dans le vert. Lighthouse vous permettra de générer des rapports pour les versions mobile et bureau de votre site. Vous devriez vérifier les deux.

Si vous n'avez pas créé de site de portefeuille, exécutez-le sur un autre site que vous possédez.

Lectures complémentaires

Le petit livre pratique Jump Start Web Performance fournit des conseils, astuces et bonnes pratiques pour améliorer les performances et la réactivité de votre site. Celles-ci vont des changements de configuration rapides de cinq minutes aux révisions majeures du site Web. Il entre dans certains détails sur l'exécution des audits avec Lighthouse, ainsi que sur Chrome ...

Vous pourriez également être intéressé par