Pour ceux d'entre vous qui cherchent à percer dans le monde du développement Web avec votre premier travail de développement, la quantité de choses que vous êtes censé savoir peut être écrasante: HTML, CSS, JavaScript, contrôle de version, construire des outils, des cadres, 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 et vous indiquer aux ressources appropriées sur SitePoint Premium pour plus de détails.
Plongeons dedans.
1. Apprenez à connaître votre éditeur de code
En tant que codeur, vous allez passer beaucoup de temps dans l'éditeur de votre choix. C'est pourquoi vous devez 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 à consulter VS Code (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 existe également des centaines (sinon 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 Prettier et le configurer pour formater votre code lors de l'enregistrement, ainsi que ESLint qui affichera les erreurs de peluchage JavaScript dans la console de VS Code. Pour des points bonus, vous pouvez imprimer la feuille de référence des raccourcis clavier pour votre plate-forme et essayer de mémoriser deux ou trois raccourcis par semaine.
Lectures complémentaires
À titre de référence, je recommanderais Code Visual Studio: 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 fonctions d'édition de l'espace de travail, les fonctionnalités avancées telles que la refactorisation de 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 particulièrement intéressants.
Si vous créez une application Web, ce n'est qu'une question de temps jusqu'à ce que vous rencontriez 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 devez vous assurer qu'ils s'affichent bien sur différents navigateurs et sur des écrans plus petits. Il peut également être difficile de les styliser de manière cohérente sans briser leur facilité d'utilisation.
Les formulaires sont un élément essentiel 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 agencé 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 CTA proéminent, et assurez-vous que le formulaire est bien prévisualisé sur les navigateurs et les appareils. Essayez d'inclure divers contrôles de formulaire, tels que des éléments et des cases à cocher tout en conservant la mise en page simple et élégante.
Vous pouvez é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 l'utilisateur. Lors de la candidature à un emploi, un compte CodePen bien organisé peut potentiellement servir de mini portefeuille.
Lectures complémentaires
Form Design Patterns propose dix recettes pour différents types de formulaires – enregistrement formulaires, formulaires de réservation, formulaires de connexion et plus encore. Apprenez des professionnels et découvrez comment rendre vos formulaires à la fois attrayants et accessibles à tous. Si vous cherchez un démarrage rapide avec ce projet, je vous recommande de lire la première partie du premier chapitre qui couvre des choses telles 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 chat, etc.) et l'amélioration générale de l'expérience utilisateur. Une caractéristique assez 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 intuitives 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 l'étendre avec la validation côté client.
Utilisation du les types d'entrée corrects vous permettront d'obtenir une bonne partie du chemin, 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 vous semble un peu trop simple, pourquoi ne pas ajouter un champ qui pose une question pour vous assurer que l'utilisateur n'est pas un bot.
Pour en savoir plus
Si vous êtes nouveau dans le monde de la programmation JavaScript, ou souhaitez simplement une référence de bureau rapide et facile, puis consultez JavaScript: Novice to Ninja, 2nd Edition . Cette introduction étape par étape 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 beaucoup d'autre. Et même si cela aurait pu être le cas au début des années 2000, rien ne pouvait être plus éloigné de la vérité en 2020.
De nos jours, des applications entières sont écrites en JavaScript. De nouveaux outils et cadres 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 restiez au courant de ces changements et que vous ayez une bonne idée de ce dont JavaScript est capable et où il s'intègre dans l'image de développement Web dans son ensemble.
Idée de projet
Créez une application qui permet aux utilisateurs d'en convertir une monnaie à 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 de API Fixer . L'interface utilisateur doit être mise à jour dynamiquement sans aucune actualisation de page.
Utilisez des fonctionnalités JavaScript modernes où vous le pouvez. Terminez le projet à l'aide de JavaScript vanille ou d'une bibliothèque comme React pour gérer les mises à jour de l'interface utilisateur.
Lectures complémentaires
JavaScript: Best Practice est une collection de des articles qui jettent un regard sur 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 dans JavaScript moderne ».
5. Concevez votre propre site Web de portefeuille
Au cours de votre carrière de développeur Web, vous vous retrouverez probablement à travailler 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, une bonne compréhension du processus de conception facilitera cette relation et vous mettra en bonne position avec vos collègues.
Ou peut-être que vous voulez faire cavalier seul en tant que pigiste, en prenant des projets de la conception au déploiement. Dans ce cas, un site Web d'aspect générique ne le coupera pas. Vous devrez offrir au client une conception accrocheuse mais aussi très fonctionnelle qui l'aide à atteindre ses objectifs commerciaux.
Idée de projet
Concevez votre propre site Web de portefeuille – votre place sur Internet pour vous présenter et présenter votre compétences. Passez un peu de temps à rechercher ce qui fait une bonne conception de portefeuille, puis modélisez votre propre conception soit avec un crayon et du papier, soit en utilisant un outil de filaire de votre choix.
Côté design, faites attention à la disposition, les couleurs que vous utiliserez et la typographie. En termes de contenu, réfléchissez aux pages dont vous aurez besoin (indice: vous pouvez inclure un formulaire de contact) et comment vous présenter et présenter votre travail. Il y a beaucoup de sites sur Internet qui vous donneront des conseils sur ce qu'il faut inclure.
Lectures complémentaires
D'accord, je comprends. Le design est dur. Mais il n'est pas nécessaire que ce soit…
Les principes d'une belle conception Web est un livre fantastique si vous avez du mal avec le processus de conception. Il vous guidera à travers un exemple de conception, du concept à l'achèvement, vous enseignant une multitude de compétences pratiques tout au long du chemin.
Commencez au chapitre un en lisant sur ce qui fait une bonne conception et continuez à partir de là . Personnellement, j'ai lu le livre de bout en bout en une semaine, mais vous pouvez également plonger dans les autres chapitres et en apprendre à votre guise sur la mise en page, la couleur, la texture, la typographie et l'imagerie.
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 de la langue signifient que nous pouvons maintenant facilement créer des mises en page compliquées, déclarer des variables dans notre code CSS, créer des animations, appliquer CSS de manière conditionnelle (en utilisant @supports ) et plus encore – des choses que, dans le passé, nous J'ai eu recours à des hacks (ou JavaScript) pour y parvenir.
Si vous écrivez CSS en 2020, vous devez être au courant de toutes ces techniques modernes et 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 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 aménager le site et prenez le temps de rechercher certaines des unités de mesure les plus récemment introduites, comme vw et vh . Celles-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 bouton Envoyer lorsque l'utilisateur survole ou clique dessus.
Lectures complémentaires
CSS Master, 2e édition vous montre comment écrire du CSS meilleur et plus efficace, et profiter 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 nouvelles multicolonnes ] Modules Flexbox et Grid .
7. La performance, ça 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 correctes, 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 parcourront votre site sur un smartphone, éventuellement sur un réseau 3G feuilleté. C'est votre travail en tant que développeur Web de fournir à tous tous vos visiteurs la meilleure expérience possible que leur technologie permettra.
Idée de projet
Google Chrome est livré avec un outil fantastique appelé Lighthouse qui effectue 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 qu'il détecte.
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 desktop de votre site. Vous devriez vérifier les deux.
Si vous n'avez pas créé de site de portfolio, exécutez-le sur un autre site que vous possédez.
Lectures complémentaires
Le livre court et pratique Jump Start Web Performance fournit des conseils, des astuces et les meilleures pratiques pour améliorer les performances et la réactivité de votre site. Cela va des changements de configuration rapides en cinq minutes aux révisions majeures du site Web. Il donne quelques détails sur l'exécution des audits avec Lighthouse ainsi qu'avec Chrome DevTools en général. Les chapitres ultérieurs de l'ouvrage seront utiles pour résoudre tout problème mis en évidence par les audits.
8. Apprenez à connaître votre terminal
En tant que développeur Web, la ligne de commande devient une partie de plus en plus importante de notre flux de travail. Nous l'utilisons pour installer des packages à partir de npm, pour tester les points de terminaison de l'API, pour envoyer des validations à GitHub, et bien plus encore. Si vous pouvez démontrer la familiarité avec la ligne de commande à un employeur potentiel, cela augmentera sans aucun doute vos chances.
Un autre avantage de pouvoir utiliser le terminal est qu'il ouvre la porte aux scripts. Cela vous permettra d'automatiser diverses tâches banales (telles que la manipulation de fichiers ou le déploiement d'un site) qui, à long terme, pourraient s'avérer un véritable gain de temps.
Idée de projet
Installez et familiarisez-vous avec le Bash shell . Cela viendra en standard sur macOS et beaucoup de distributions Linux. Sous Windows, vous devez activer quelque chose appelé sous-système Windows pour Linux, que vous pouvez lire sur ici .
Engagez-vous à utiliser Bash pendant une semaine entière et utilisez-le pour effectuer toutes les tâches que vous pouvez. Il peut s'agir de naviguer dans votre système de fichiers, de travailler avec des fichiers, de modifier des fichiers, de lire des journaux, de lancer des services ou d'installer des programmes. Vous devez également rechercher les alias, qui sont des raccourcis pour les commandes couramment utilisées.
Astuce: si vous vous sentez déjà à l'aise avec Bash, vous pouvez essayer Zsh comme alternative. J'y vais ici .
Lectures complémentaires
Si quitter le confort de votre interface graphique vous fait vous sentir mal, jetez un œil au Guide de démarrage rapide de Bash . Ce livre vous donnera une introduction approfondie à Bash, vous familiarisera avec sa structure de commandes et vous mettra rapidement au courant de certaines commandes essentielles.
Pour les courageux, les chapitres ultérieurs du livre vous présenteront les scripts shell et démontreront comment même des constructions de programmation simples dans le shell peuvent accélérer et automatiser tout type de travail quotidien en ligne de commande.
9. Mettez vos projets sous contrôle de version
Maintenant que nous avons des connaissances sur les terminaux, nous devons examiner Git – logiciel de contrôle de version utilisé pour suivre les modifications du code source pendant le développement. Grâce à sa fonction de branchement, Git facilite la collaboration de plusieurs personnes sur un projet. Cela vous permet également de restaurer votre code à un état précédent si vous vous rendez compte que vous avez introduit un bogue sans le savoir.
Pratiquement tout poste pour lequel vous postulez s'attendra à ce que vous connaissiez le contrôle de version. C'est le bon moment pour acquérir ces connaissances.
Idée de projet
Installez Git sur votre machine et familiarisez-vous avec ses commandes de base. Mettez l'application de conversion de devises que vous avez créée dans le projet quatre sous contrôle de version, puis créez un compte GitHub et téléchargez-la pour que le monde la voie (à partir de la ligne de commande, bien sûr).
Pour ceux qui ne connaissent pas GitHub, c'est une plate-forme Web où les développeurs peuvent stocker leurs projets et interagir avec d'autres développeurs partageant les mêmes idées. Lorsque vous posez votre candidature, il sera avantageux d'avoir un compte GitHub vers lequel vous pourrez diriger les employeurs potentiels.
Lectures complémentaires
Destiné aux développeurs débutants avec peu ou pas d'expérience Git, Jump Start Git vous guidera tout au long de la configuration, ainsi que les commandes et étapes de base qui constituent un flux de travail Git réussi.
N'oubliez pas de consulter Chapitre deux qui couvre les référentiels distants et comment pour pousser votre code vers GitHub.
10. Créez votre première application de nœud
Comme je l'ai mentionné précédemment, JavaScript est partout. Il alimente la plupart, sinon la totalité, des applications frontales, mais il peut également s'exécuter sur le serveur sous l'apparence de Node.js . Avoir au moins une certaine connaissance de la façon d'écrire JavaScript sur le serveur (y compris le modèle d'exécution de Node) est une compétence souhaitable lors de l'entrée sur le marché du travail d'aujourd'hui.
Idée de projet
Nous allons adopter une approche légèrement différente avec celle-ci , comme je voudrais vous orienter vers mon tutoriel " Construire une application simple pour débutant avec Node, Bootstrap et MongoDB ".
À partir de zéro, je montre comment créer une application Web sans fioritures à l'aide de Node.js, mais au lieu de me concentrer sur le résultat final, je me concentre sur un éventail de choses que vous êtes susceptible de rencontrer lors de la construction d'un application du monde réel. Ceux-ci incluent le routage, les modèles, le traitement des formulaires, l'interaction avec une base de données et même l'authentification de base.
Pour ce projet, vous devez suivre mon tutoriel, en adaptant le résultat final à vos besoins. Vous devriez également garder votre code sous contrôle de version et le pousser vers votre profil GitHub.
Lectures complémentaires
Pas tellement de lecture, comme ressource: les forums SitePoint . C'est un projet potentiellement délicat à aborder, donc si vous êtes coincé, n'hésitez pas à passer nous voir et à demander de l'aide.
Conclusion
Donc, vous l'avez – dix compétences qui vous aideront à décrocher votre premier emploi de développeur en 2020. Bien qu'il ne soit pas exhaustif, j'espère que ce billet vous aidera dans une certaine mesure à vous orienter dans le monde en constante évolution du développement Web et vous donnera une idée de ce que vous apprendrez ensuite.
Et n'oubliez pas, en lisant des tutoriels est génial, mais il n'y a pas de substitution pour réellement construire des trucs. Votre prochain employeur sera plus impressionné par un compte GitHub actif qu'une liste de ce que vous avez lu.
Source link