Article original : Front End Developer – What is Front End Development, Explained in Plain English

Si vous êtes nouveau en programmation, vous avez peut-être entendu parler du terme Développement Front End. Mais que signifie-t-il ?

Dans cet article, je vais expliquer ce qu'est le Développement Front End, quelles compétences vous devez acquérir pour devenir Développeur Front End, et des conseils pour décrocher un emploi.

Qu'est-ce que le Développement Front End ?

Tout ce que vous voyez sur un site web, comme les boutons, les liens, les animations, et plus encore, a été créé par un développeur web front end. C'est le travail du développeur front end de prendre la vision et le concept de design du client et de les implémenter via du code.

Prenons un exemple avec la page d'accueil de freeCodeCamp.

Image

Tout sur la page, du logo à la barre de recherche, les boutons, la mise en page générale et la manière dont l'utilisateur interagit avec la page a été créé par un développeur front end. Les développeurs front end sont responsables de l'apparence et de la convivialité du site web.

Les développeurs front end doivent également s'assurer que le site web a une belle apparence sur tous les appareils (téléphones, tablettes et écrans d'ordinateur).

Quelles Compétences Devez-Vous Acquérir pour Devenir Développeur Front End ?

Les trois principaux langages que vous devez bien connaître sont HTML, CSS et JavaScript. À partir de là, vous pouvez vous concentrer sur les frameworks, les bibliothèques et d'autres outils utiles.

HTML

HTML signifie HyperText Markup Language. HTML affiche le contenu de la page comme les boutons, les liens, les titres, les paragraphes et les listes.

Vous ne devriez pas utiliser HTML pour le style. C'est le rôle de CSS.

Je vous suggérerais de suivre les défis HTML de freeCodeCamp pour commencer à apprendre les bases.

CSS

CSS signifie Cascading Style Sheets. CSS est responsable du style de votre page web, y compris les couleurs, les mises en page et les animations.

Le Cours de Conception Web Réactive de freeCodeCamp vous enseignera les bases de CSS, de la conception réactive et de l'accessibilité. La conception réactive est essentielle pour créer des sites web qui ont une belle apparence sur tous les appareils.

L'accessibilité est la pratique qui consiste à s'assurer que tout le monde peut facilement utiliser vos sites web. Vous ne voulez pas créer des sites web qui ne peuvent pas être utilisés par ceux qui utilisent des technologies d'assistance comme les lecteurs d'écran.

Après avoir terminé le cours, vous serez en mesure de commencer à construire de petites pages web.

JavaScript

JavaScript permet aux utilisateurs d'interagir avec la page web. Des exemples de JavaScript peuvent être trouvés dans pratiquement n'importe quelle page web, y compris la page d'accueil de freeCodeCamp.

Par exemple, lorsque je clique sur le bouton Menu en haut de la page, il ouvre une liste déroulante d'options. Chaque fois que je clique sur ce bouton, il bascule entre l'ouverture et la fermeture du Menu.

Image

JavaScript peut être utilisé dans les jeux en ligne, les pages web, les applications mobiles et plus encore.

Pour commencer à apprendre JavaScript, vous pouvez suivre le cours Algorithmes et Structures de Données JavaScript de freeCodeCamp. À partir de là, vous pouvez commencer à construire des projets à partir de mes 40 Projets JavaScript pour Débutants.

Frameworks, Bibliothèques et Préprocesseurs CSS

Une fois que vous avez appris les bases de CSS, vous pouvez commencer à travailler avec différents frameworks et bibliothèques. Ces outils ont été créés pour aider à accélérer le processus de développement.

Des frameworks comme Bootstrap et Tailwind CSS vous permettent d'ajouter un catalogue de classes à votre page web. En conséquence, vous obtenez des designs professionnels et adaptés aux mobiles.

Il existe des dizaines d'options sur le marché et vous n'avez pas besoin de toutes les apprendre. Il est souvent utile de regarder les offres d'emploi dans votre région et de voir quelles technologies elles utilisent. Ensuite, vous pouvez vous concentrer sur les compétences les plus courantes/demandées.

Voici une liste de quelques options :

Les préprocesseurs CSS comme Sass et Less, vous permettent d'ajouter de la logique et de la fonctionnalité à votre CSS. Ces outils rendent votre CSS propre et facile à utiliser.

Bibliothèques et frameworks JavaScript

Tout comme avec les bibliothèques et frameworks CSS, il existe de nombreuses options pour JavaScript.

Il n'est pas nécessaire de toutes les apprendre. Comme ci-dessus, recherchez les offres d'emploi dans votre région pour voir quelles bibliothèques et frameworks sont utilisées.

Voici quelques options populaires :

Ces frameworks et bibliothèques vous permettent de gagner du temps et de faire plus avec moins de code. Il est possible de décrocher un emploi en se spécialisant dans React, Vue ou Angular.

Voici quelques ressources d'apprentissage suggérées.

Compétences en Test et Débogage

Lors du développement de votre application, il y aura des erreurs dans votre code qui devront être corrigées. Le débogage est l'acte d'identifier ces erreurs ("bugs") et de les corriger.

Le test est une autre compétence importante à apprendre. Écrire des tests pour votre code est un moyen de s'assurer que votre code fait ce qu'il est censé faire.

Pour une explication plus approfondie sur les différents types de tests, je vous suggérerais de lire cet article.

Contrôle de version

Le contrôle de version est un moyen de suivre et de gérer les modifications du code du projet. Git est un logiciel populaire utilisé pour suivre votre code.

Si vous faites beaucoup d'erreurs dans votre code, vous pouvez utiliser Git pour revenir à une version précédente de votre code au lieu de tout réécrire manuellement.

Apprendre Git vous permet également de collaborer avec d'autres personnes dans une équipe et d'apporter des modifications à la même base de code depuis différents endroits.

Je vous suggérerais de commencer à apprendre Git et d'utiliser un service comme GitHub pour héberger vos projets personnels.

Résolution de problèmes

La compétence la plus importante pour tout développeur est de savoir résoudre des problèmes. Les entreprises et les clients recherchent des solutions de votre part.

Il est important d'apprendre à aborder un problème, à le décomposer en morceaux plus petits et gérables, et à dépanner le problème dans ces applications web.

Comment Pouvez-Vous Obtenir un Emploi en tant que Développeur Front End ?

Une fois que vous avez appris les aspects techniques du développement front end, vous devez vous concentrer sur la préparation de vos documents de candidature. Il existe de nombreuses ressources incroyables qui peuvent vous aider à apprendre comment obtenir un emploi de développeur.

Ressources pour la création de CV

Ressources pour les entretiens techniques

Conseils pour décrocher un emploi

De plus, voici quelques ressources sur la façon de commencer en freelance si vous êtes intéressé par cette voie.

J'espère que vous avez apprécié cet article et je vous souhaite bonne chance sur votre chemin pour devenir développeur front end.