Comment devenir un développeur front-end (rubrique de 50 points)

Comment fonctionne cette feuille de route

Dans ce guide, vous trouverez une feuille de route étape par étape pour devenir développeur front-end en 2023, notamment :

Un aperçu détaillé des compétences techniques exactes que vous devez acquérir et comment les apprendre
Chronologies sur la façon d’apprendre toutes les compétences en 3 à 6 mois, y compris les estimations de temps pour chaque compétence technique spécifique
Suggestions d’endroits où vous pouvez apprendre les compétences en ligne gratuitement
La rubrique exacte de 50 points que nous utilisons pour déterminer si nos étudiants sont « prêts à l’emploi » que vous pouvez utiliser pour déterminer votre progression vers votre objectif

Ce que ce guide n’est PAS :

Table des matières

Le développement frontal est-il un bon choix pour les personnes qui changent de carrière ?

Vous sentez-vous surmené, sous-estimé ou simplement coincé dans votre travail actuel ? Avez-vous été licencié récemment ? Avez-vous été curieux de savoir si le développement frontal est un bon choix pour les changements de carrière, mais n’avez-vous pas assez été capable de comprendre? Eh bien, vous êtes au bon endroit, et nous sommes si heureux que vous soyez ici ! 🤗

Avant d’entrer dans le vif du sujet, expliquons pourquoi le développement frontal est un excellent point de départ si vous souhaitez faire la transition vers une carrière dans la technologie.

Premièrement, il y a BEAUCOUP d’opportunités d’emploi – selon LinkedIn, il y a plus de 10 000 postes de développeur front-end ouverts rien qu’aux États-Unis. En plus de cela, l’industrie du développement et de la conception est globalement en croissance. Le Bureau of Labor Statistics prévoit que l’emploi de développeurs Web et de concepteurs numériques augmentera de 23% de 2021 à 2031, bien plus rapidement que la moyenne de toutes les professions.

Deuxièmement, le développement frontal est une carrière bien rémunérée. Salary.com indique que le salaire moyen d’un développeur front-end aux États-Unis est de 119 224 $. Ka-ching !! 💸

Enfin, comme vous l’apprendrez dans ce guide, la barrière à l’entrée est faible et le délai pour trouver un emploi est plus court que dans de nombreuses autres industries.

Le développement frontal sonne-t-il plutôt bien en ce moment ? Alors allons-y !!

Notre Méthodologie

Une note rapide sur notre méthodologie pour l’élaboration de ce guide : ce guide est une description complète du processus exact que nous utilisons pour former nos étudiants dans le cadre de notre programme de formation professionnelle Break Into Tech, y compris la rubrique exacte que nous utilisons pour déterminer si nos étudiants sont «prêts à l’emploi» à la fin de leur programme et prêts à participer à notre programme de coaching de recherche d’emploi Get Hired.

Notre parcours de développeur front-end a été conçu et construit au cours de 11 années de formation de milliers d’étudiants pour décrocher leur premier emploi de développeur front-end dans le domaine de la technologie et est informé par un large éventail de sources, y compris nos instructeurs experts, nos experts en la matière, nos coachs techniques de carrière et partenaires employeurs. Cela s’ajoute à l’examen de centaines d’offres d’emploi pour une gamme de postes de développement frontal et, bien sûr, le plus important, les expériences de nos étudiants sur le marché du travail.

Comment devenir développeur front-end en 2023, la feuille de route définitive et le plan d’étude

Remarque concernant la chronologie : ce guide est rédigé en partant du principe que vous apprendrez ces compétences à un rythme de 8 à 10 heures par semaine, ce qui signifie que nous supposons que vous le faites à temps partiel. C’est le cas de la plupart de nos étudiants qui travaillent à temps plein ou qui ont d’autres engagements à forte intensité de temps tout en suivant notre programme Break Into Tech. Si vous êtes en mesure de consacrer plus d’heures par semaine à l’apprentissage de ces compétences, alors n’hésitez pas !

Apprenez les compétences de base en développement frontal

Délai : 4-5 semaines

Il y a trois compétences principales que tout développeur front-end doit connaître avant toute autre chose : HTML, CSS et le contrôle de version avec Git.

HTML

HTML, qui signifie Hypertext Markup Language, est une compétence fondamentale pour les développeurs front-end. HTML est l’épine dorsale de tout site Web, fournissant la structure et l’organisation des pages Web et du contenu comme le texte, les images, les vidéos et les liens. Les compétences HTML incluent :

Démontrer une compréhension des balises et des attributs HTML sémantiques
Formater le HTML pour qu’il soit lisible et maintenable
Codage de sites Web statiques simples de plusieurs pages
Résolution des problèmes de compatibilité entre navigateurs

CSS

CSS – Feuilles de style en cascade – est une autre compétence fondamentale de développement frontal. Le CSS est essentiel pour créer des sites Web visuellement attrayants et conviviaux, permettant aux développeurs de contrôler la mise en page, la typographie, les couleurs et le style général des pages Web. Les compétences CSS incluent :

Démontrer sa maîtrise des techniques CSS modernes
Styliser les polices, les titres, le texte, les icônes et les images
Résolution de divers problèmes de mise en page à l’aide de CSS
Mise en œuvre des polices Web
Transformer des conceptions en de beaux sites Web

Gite

Git est un système de contrôle de version qui permet aux développeurs de gérer et de suivre les modifications apportées à leur code au fil du temps. La plate-forme la plus populaire pour l’utilisation de Git est GitHub — en janvier 2023, GitHub a signalé avoir plus de 100 millions de développeurs utilisant GitHub pour contrôler la version de leur code ! Bien qu’il existe des applications pour utiliser visuellement Git, la plupart des développeurs exécutent des commandes Git via la ligne de commande. Les compétences Git incluent :

Naviguer et travailler avec des fichiers et des dossiers via la ligne de commande
Configurer des espaces de travail pour votre code via la ligne de commande
Travailler avec les référentiels Git via la ligne de commande
Application du contrôle de version pour protéger le code source sur GitHub
Travailler avec des équipes qui utilisent GitHub
Hébergement d’un projet ou d’un site Web sur GitHub
Utilisation du contrôle de version pour maintenir et sauvegarder les fichiers de code
Saisie des commandes Git courantes pour créer et utiliser des référentiels
Utiliser Git pour contrôler la version de votre propre code

Ressources pour acquérir ces compétences

Qu’est-ce que le HTML ? Voici tout ce que vous devez savoir

Qu’est-ce que CSS, comment ça marche et à quoi ça sert ?

Classe CSS vs ID : Quelle est la différence ?

Emplois HTML et CSS : comment se faire embaucher

Ce sont les meilleurs projets HTML et CSS pour les débutants

Plus de 100 sites Web en ligne gratuits pour apprendre à coder pour les débutants

Commencez à travailler avec Git

Apprenez votre premier (et unique) langage de programmation frontal

Délai : 4 semaines

Maintenant que vous avez des compétences de base à votre actif, votre prochaine étape consiste à apprendre un langage de programmation. Les langages de programmation sont utilisés pour demander à un ordinateur d’effectuer un ensemble spécifique de tâches, par exemple, « prenez les informations de contact saisies dans ce formulaire et enregistrez-les dans la base de données ». Il existe de nombreux langages de programmation, mais le seul que vous pouvez utiliser pour le développement frontal est… JavaScript !

Javascript

JavaScript est le langage de programmation le plus largement déployé dans le monde car c’est le langage utilisé pour créer des sites Web dynamiques et interactifs. Les développeurs front-end utilisent JavaScript pour ajouter des fonctionnalités telles que la validation de formulaires, les animations, les fenêtres contextuelles, les diaporamas, le chargement de contenu dynamique et l’interactivité. Les compétences JavaScript incluent :

Développer des programmes pour résoudre des problèmes en utilisant la logique et les conditions
Amélioration de l’apparence et des fonctionnalités des sites Web à l’aide de gestionnaires d’événements
Écrire du code simplifié et lisible à l’aide de fonctions
Modifier, ajouter et supprimer des éléments en accédant au DOM
Travailler avec le DOM virtuel en utilisant React
Ajout d’interactivité aux interfaces utilisateur afin que les utilisateurs puissent ajouter, modifier et rechercher des données
Récupération et affichage des données des API REST ainsi que des fichiers JSON et texte
Utilisation d’appels d’API côté client pour charger des données à partir de sources externes

Ressources pour acquérir ces compétences

Qu’est-ce que JavaScript ? Un guide pour les débutants totaux

21 projets JavaScript faciles pour les débutants (code inclus !)

15 jeux de codage gratuits pour améliorer et améliorer vos compétences en codage

Plus de 100 sites Web en ligne gratuits pour apprendre JavaScript gratuitement

Améliorez les compétences de codage que vous avez apprises

Délai : 5-6 semaines

Votre prochaine étape consiste à acquérir les compétences nécessaires pour créer des sites Web plus complexes et pour rendre votre code plus rapide, réutilisable et plus facilement maintenable.

Développement Web réactif

Le développement Web réactif permet aux sites Web et aux applications Web de s’adapter à différentes tailles d’écran et types d’appareils. Il utilise des requêtes multimédia CSS et d’autres techniques pour créer des mises en page flexibles et fluides qui s’adaptent à différentes tailles d’écran – pensez au moment où vous ajustez la taille de la fenêtre de votre navigateur ou faites pivoter votre téléphone du paysage au portrait. Les compétences en développement Web réactif comprennent :

Démontrer sa maîtrise de l’utilisation des propriétés Flexbox pour fournir des mises en page fluides
Développement de sites Web allant de compositions de conception à un site multi-pages réactif
Styliser le contenu en fonction de la taille de l’écran
Travailler avec des points d’arrêt standard pour les appareils
Mise à l’échelle du texte en fonction de la taille de l’écran
Utiliser ems, rems et pixels pour la typographie
Conversion de pages Web statiques en responsive
Tester des pages Web sur différentes tailles d’écran

Réagissez JavaScript

React JavaScript (ou ReactJS) est une bibliothèque JavaScript open source permettant de créer des interfaces utilisateur dynamiques et interactives. Il permet aux développeurs de créer des composants de code réutilisables, ce qui facilite la création d’interfaces utilisateur complexes. Les compétences de React JavaScript incluent :

Démontrer sa maîtrise des techniques ES6 modernes
Utilisation des fonctions fléchées et des modules
Importation de code tiers
Écrire du code JSX propre et concis
Accepter et répondre aux entrées de l’utilisateur
Planification du flux de données à partir de différents composants pour garantir une exécution rapide des interfaces utilisateur
Modifier, ajouter et supprimer des éléments en accédant au DOM
Travailler avec le DOM virtuel en utilisant React
Ajout d’interactivité aux éléments de page destinés à l’utilisateur afin que les utilisateurs puissent ajouter, modifier et rechercher

Ressources pour acquérir ces compétences

Qu’est-ce que le Responsive Web Design ? Édition débutant

Tech 101 : Qu’est-ce que React JS ?

Tech 101 : Frameworks JavaScript et bibliothèques : quelle est la différence ?

Construisez votre portefeuille de développeurs front-end

Délai : 2 semaines

Créez un site Web de portefeuille mettant en valeur vos compétences et votre travail

Tu l’as fait! 🎉 À ce stade, vous avez acquis toutes les compétences recherchées dont vous avez besoin pour devenir développeur front-end. Votre dernière étape consiste à créer un site Web de portefeuille qui présente toutes vos nouvelles compétences étonnantes, un must pour postuler à des emplois de développeur front-end. Assurez-vous que votre site Web inclut :

Une mise en page simple et réactive avec une navigation claire en haut
Polices, couleurs et espacements cohérents, à la fois sur chaque page et sur toutes les pages de votre site Web
Une page d’accueil avec votre nom et un court texte de présentation indiquant le titre de votre poste cible, par exemple « Je suis un développeur front-end spécialisé dans les sites Web réactifs et accessibles ».
Une page à propos avec une image et une courte biographie – 1-2 paragraphes décrivant plus en détail vos compétences techniques et le rôle que vous aimeriez avoir, ainsi qu’un peu sur vos intérêts en dehors du travail
4-5 projets ou études de cas présentant votre travail – chaque projet doit être correctement lié et avoir une image, un titre, une brève description et une liste des langues, des compétences et des outils utilisés
Coordonnées dans le pied de page ou sur une page distincte liée à partir de votre navigation principale
Liens vers des informations pertinentes telles que LinkedIn, GitHub, votre CV, les réseaux sociaux le cas échéant, etc.

Ressources pour créer un site Web de portefeuille solide

9 modèles de portfolio gratuits pour mettre en valeur vos compétences

Besoin d’un travail? Ajoutez ces 8 projets à votre portefeuille

Comment aborder votre portefeuille de développeurs front-end (et pourquoi c’est si important)

Où aller en partant d’ici

Nous espérons que ce guide vous a été utile et vous fournit une feuille de route sur ce qu’il faut apprendre pour devenir un développeur front-end.

Apprendre à coder par soi-même grâce à un apprentissage autodirigé est tout à fait possible ! Mais si vous êtes intéressé à apprendre dans une communauté avec d’autres étudiants sur des parcours similaires, nous serions ravis de vous avoir dans notre programme de formation professionnelle Skillcrush Break Into Tech. Vous pouvez commencer gratuitement dans notre cours en ligne, Camp Skillcrush.