Dans le monde moderne, de plus en plus de gens veulent apprendre à programmer, alors qu'ils ne savent pas par où commencer, mais en même temps, l'industrie informatique est ce dont ils rêvent car être programmeur web est désormais à la mode. Pour de nombreuses personnes, cela positionne la première étape dans ce monde merveilleux, comme les développeurs Web ou les développeurs frontaux juniors, le développement frontal de base. Cependant, vous devez commencer quelque part avant de pouvoir trouver l'emploi de vos rêves. Voici un livre de connaissances pour débutants pour vous permettre d'obtenir des réponses : Existe-t-il un cours gratuit pour les développeurs front-end ? Comment apprendre par vous-même en ligne, où trouver du matériel d'apprentissage pour maîtriser HTML, CSS et JavaScript. Si vous connaissez le HTML et le CSS, vous pouvez déjà postuler au poste de concepteur de mise en page Web.
Quelles sont les bases du développement front-end ?
Entrer dans le monde de la programmation Web peut être difficile pour les nouveaux venus. Tant de concepts semblent étranges et deviennent problématiques au stade de l'écriture. Comment écrire : développeur logiciel ou développeur front-end ? Peut-être un développeur front-end, ou plutôt un ingénieur logiciel front-end ? Cependant, le plus courant est le trait d'union. Développeur front-end — la personne responsable de la partie visuelle de l'application (ce que nous voyons, nous = utilisateurs du site).
Habituellement, le développeur front-end travaille avec un graphiste (webdesigner) qui assure la conception graphique. Souvent, les développeurs front-end ont l'opportunité de travailler avec un designer UX qui propose et crée un prototype des interactions qui auront lieu sur les sites web. Le rôle des développeurs front-end est de tout mettre en place. On dit généralement qu'un développeur front-end est chargé de découper une conception graphique, en divisant la conception en parties plus petites et en codant (HTML et CSS) en sites Web que les utilisateurs utilisent en fin de compte.
Ensuite, en utilisant JavaScript, les interactions mentionnées précédemment ont été ajoutées. Alors que HTML et CSS3 nous permettent de créer des transitions fluides et des animations de base, JavaScript introduit toutes les interactions avancées de l'utilisateur de la page. En utilisant JavaScript, nous ajouterons un menu déroulant, un curseur sur la page, une validation de formulaire, des transitions entre les sous-pages ou des animations avancées et des jeux 3D (par exemple, en utilisant Babylon-JavaScript). Données pour la logique en JavaScript du back-end de l'application, d'où la coopération front-end-développeur back-end.
Les postes de développeur front-end varient considérablement. Le travail d'un développeur front-end dans une agence interactive et créative, d'un développeur front-end dans une société de développement de logiciels, sera différent, et un travail différent pour une personne travaillant sur le développement front-end d'une start-up .
Un développeur front-end venant de découper des projets graphiques peut évoluer vers un développeur JavaScript, un programmeur Web traitant principalement de l'écriture de la logique d'application et des opérations JavaScript avancées. De plus, un développeur front-end (ainsi qu'un développeur back-end) doit souvent planifier l'architecture JavaScript de l'application et sélectionner consciemment des frameworks et des bibliothèques pour le projet.
Le développement front-end est-il facile ?
- Vous pouvez voir l'effet rapidement; contrairement à l'apprentissage du développement web/développement back-end, créer des morceaux de code même en HTML pur nous donne immédiatement des effets visuels, ce qui nous motive à continuer à travailler.
- Seuil d'entrée bas - relativement peu de compétences initiales sont requises pour commencer une carrière professionnelle dans un stage ou un poste junior au tout début.
- Beaucoup d'offres d'emploi pour les juniors, surtout à l'approche des vacances, et il y a beaucoup de stages d'été.
- Indépendance - nous pouvons nous occuper de la création de sites Web pour nous-mêmes, puis prendre des commandes en tant que pigiste. Après tout, dans le cadre de base, nous devrions pouvoir mettre en place des sites Web simples de A à Z.
De quoi avons-nous besoin pour le développement front-end ?
Voici la recette du succès. Pour créer un site internet, il vous faut :
HTML + CSS
Ce sont les ingrédients de base pour créer un site Web. HTML fournit la structure des sites Web - les éléments décrits, et CSS indique au navigateur à quoi ces éléments doivent ressembler. Une fois que vous avez maîtrisé HTML et CSS, vous pouvez recréer n'importe quelle conception (graphique) et la transformer en site Web.
Javascript
Un langage de développement frontal de programmation Web pour la création de sites Web. Grâce à JavaScript, vous ajoutez de l'interactivité à votre site Web, c'est-à-dire que vous développez des sites Web qui répondent aux actions des utilisateurs. Vous pouvez même créer des jeux. Nous vous recommandons de maîtriser au moins le code JavaScript de base pour comprendre le fonctionnement du langage ou la logique du langage de programmation Web. Ensuite, vous pouvez aller sur jQuery.
jQuery
Techniquement, ce n'est pas un langage mais une bibliothèque JavaScript. Comme un intermédiaire qui vous permet d'écrire du JavaScript plus facilement et plus rapidement. Vous entrez le code jQuery ; la bibliothèque s'inquiète pour vous et joue avec le traducteur pour transmettre le sens du JavaScript un peu compliqué au navigateur. Bien qu'aujourd'hui jQuery soit "un peu vieux", nous vous recommandons de l'apprendre "sur demande" il facilite l'apprentissage de la logique de programmation web et du Bootstrap (framework CSS utilisé) et apparaît toujours dans les offres d'emploi.
Cadres
Leur tâche est de simplifier le processus de création de sites Web et d'applications en fournissant des solutions toutes faites aux problèmes les plus courants. De plus, ils fournissent un modèle sur la façon de développer votre code de manière ordonnée. Pour commencer, nous suggérons de choisir un framework CSS, par exemple, Bootstrap (les autres options sont : Foundation, Pure, YAML CSS), puis d'ajouter l'un des frameworks JavaScript actuellement populaires : Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Gite
Ce n'est pas directement lié au codage Web, qui, nous le comprenons, est souvent retardé jusqu'à la toute fin. À tort, plus tôt vous commencez à utiliser Git, le système de contrôle de version, mieux c'est. C'est l'ordre que nous avons proposé. Bien sûr, vous pouvez le faire complètement différemment : ignorez jQuery et apprenez Bootstrap immédiatement après avoir maîtrisé les bases du HTML et du CSS ; cependant, nous vous conseillons de ne pas aller trop loin dans la simplification et de vous couper de la recherche de solutions écrites à la main, et de ne pas utiliser de préfabriqués à partir d'un framework ou d'apprendre des frameworks JavaScript avec à peine capable d'obtenir une ligne en JavaScript pur.
Par où commencer le développement front-end ?
Apprenez régulièrement et essayez d'appliquer chaque nouvelle compétence dans la pratique, même dans de minuscules morceaux de code avec un seul but : montrer ce que vous venez de maîtriser. Partagez-les sur le Web. Limitez vos groupes de motivation sur Facebook. Après seulement 3 heures de lecture d'histoires motivantes, vous n'êtes souvent pas 3 fois plus motivé. Vous avez généralement 3 heures de moins pour votre étude.
Observez le marché et lisez les exigences dans les offres d'emploi. Ils changent ! Nous écrivons ce message aujourd'hui et devrons probablement le mettre à jour dans un an à mesure que la technologie évolue. Une fois que vous aurez maîtrisé les bases : HTML CSS JavaScript, quelque chose de nouveau sera forcément à la mode : mettez à jour votre liste "à apprendre". Recherchez des ateliers gratuits (pour apprendre des mentors et établir des contacts intéressants simultanément) et un stage dans l'industrie dès que possible. Le travail se révélera être le meilleur professeur.
Qu'est-ce qu'un exemple de développement front-end ?
HTML + CSS
Trois sont probablement les sites les plus connus avec des cours de développement web front-end interactifs. Gratuits, bien organisés, ils transmettent très facilement les connaissances aux débutants. Ils organisent des cours interactifs dans le navigateur. Nous n'avons rien à installer chez nous, nous faisons juste le cours, et nos progrès se mesurent immédiatement.
Khan Academy, Codecademy et Homeschool
Khan Academy propose du matériel entièrement gratuit et a également la possibilité d'utiliser d'autres langages Web. Il s'agit d'une plate-forme éducative, pas seulement sur le développement Web. Vous pouvez effectuer diverses tâches, des éléments de base, notamment HTML et CSS, aux scripts JavaScript plus avancés.
Codecademy a beaucoup de choses gratuites et des chemins de développement frontaux prédéfinis intéressants qui ne sont disponibles que pour les utilisateurs professionnels.
Code School - à notre avis, le cours le plus organisé. Ils se composent de vidéos + une partie interactive avec des tâches de développement front-end. Le premier niveau de chaque cours est gratuit, mais malheureusement, vous devez payer pour le reste. Cependant, même les parties gratuites (généralement environ 1 heure) valent le détour.
Comment choisir un cours à suivre ?
Voir les trois plateformes Web. Les sujets se chevauchent, mais cela vaut la peine de parcourir certains sujets en double. Premièrement, la répétition consolide les connaissances, et deuxièmement, chaque plate-forme frontale a une approche légèrement différente de l'enseignement. Le choix t'appartient. Tant de gens veulent payer pour un cours mensuel de Bootcamp ou de développement Web, car ils ont tout gratuitement à portée de main. Rien d'inhabituel.
Le pire, c'est que nous avons beaucoup de matériaux et que nous voulons apprendre tout ce dont nous avons besoin rapidement, sans vérifier ni sélectionner - mettez tout sur le plateau et allez un peu plus loin que les matériaux de base. Par conséquent, nous comprenons que si vous n'avez pas le temps pour tous les cours frontaux et que la prise de décision n'est pas votre fort, consultez Khan Academy : Introduction au HTML CSS—Développement Web.
Javascript
Que serait notre cours de développement front-end sans utiliser JavaScript ? Les sites interactifs ci-dessus sont super. Ils ont des cours JavaScript pour nous - sympas, simples, malheureusement pas très complets, mais bons pour s'échauffer. Si vous avez déjà les bases du HTML et du CSS en tant que tels, vous n'avez pas besoin de commencer par les suggestions précédentes.
Pour débuter avec 9 petits exercices de développement en introduction : par JavaScript, vous pouvez construire sur les mêmes sujets dans Udacity : JavaScript Intro, puis (ou tout de suite) passer à un ensemble de tâches plus large : HTML / JavaScript : Création Web Interactif Pages.
jQuery
Une étape de plus sur notre voie frontale, mais extrêmement facultative. Actuellement, un cours de développement front-end peut se passer de jQuery. D'autant plus qu'il existe aujourd'hui de nombreuses nouvelles options intéressantes pour les développeurs front-end, nous avons examiné les offres d'emploi, et cela vaut toujours la peine d'avoir en stock.
Oui, Khan Academy et Codecademy ont des cours jQuery. Cependant, dans ce cas, je voudrais recommander un cours de développement front-end jQuery Pluralsight (anciennement Code School) d'une heure et entièrement gratuit.
Cadres d'apprentissage
À ce stade, vous pouvez choisir vous-même les matériaux front-end et évaluer leur adéquation à vos connaissances. En ce qui concerne le framework Bootstrap, la construction d'un site Web est basée sur une grille à 12 colonnes, et cette connaissance est fondamentale pour comprendre le reste dans la pratique. Bootstrap vous permet de créer rapidement des sites Web réactifs (RWD), c'est-à-dire adaptés aux appareils mobiles. Si vous préférez apprendre sous forme de tutoriel : Le cours bootstrap est disponible à la Code Academy, et avec Daily Web, vous créerez votre premier slider bootstrap en 30 minutes.
Framework JavaScript
Actuellement, un cours de développement frontal décent devrait certainement introduire les frameworks JavaScript actuellement utilisés et au moins en enseigner un. Vous pouvez trouver des cours interactifs avec des cadres sur Pluralsight (anciennement Code School), qui sont gratuits pendant 14 jours. Vous pouvez trouver une très riche collection de matériaux gratuits sur scotch.io. D'autre part, la désinscription où vous trouverez des cours de développement frontaux gratuits pour chaque framework est un sujet pour un article séparé.
Il y a beaucoup d'entre eux. Le choix est difficile et les connaître tous est impossible. Quel que soit votre choix de départ, respectez-le. Ne sautez pas de fleur en fleur car après une semaine d'apprentissage du développement web ; quelqu'un vous dira qu'un autre est meilleur. Apprenez le premier et écrivez une application Web simple dessus. Habituellement, les applications telles que les planificateurs, les listes de tâches et les nouvelles de classement sont recommandées pour les débutants. Tout ce dont vous avez besoin est le nom du framework et le nom de l'application Web que vous souhaitez créer.
Exemples de cours gratuits :
- AngularJS
- Angular 2+ (actuellement 6, mais 4/5 ne sont qu'une autre version de développement frontal)
- ReactJS
- Vue.js
- Ember.js
Est-ce la fin ? Pas! C'est un excellent début et une base solide pour le développeur junior front-end.
Quelle est la suite après ces cours ?
Commencez par travailler sur vos projets web. Comme nous l'écrivions au début, documentez votre travail dès les premières étapes de développement front-end, et mettez le code sur GitHub, même s'il est loin d'être idéal.
Vous voulez vous tester ?
La meilleure façon de consolider ce que vous avez appris est par la pratique. Passer par le cours front-end est une chose, mais travailler uniquement sur vos projets Web vous apprend à coder, à résoudre vous-même les problèmes. Créez un formulaire (page de destination) à travers lequel vous pouvez envoyer un e-mail à l'auteur de la page.
Créez votre site Web de cartes de visite - portfolio - pensez à utiliser JavaScript pour remplir le tableau avec une séquence de Fibonacci, votre curseur ou un simple jeu à partir de zéro. Vous pensez que vous avez déjà des compétences en codage mais pas de compétences graphiques, donc le développement que vous faites est "moche" ? Je vous en prie! Choisissez une conception graphique prête, par exemple, du Weekly Dev Challenge, et essayez de la créer.
Combien de temps faut-il pour apprendre les bases ?
Cela dépend de toi. La discipline est le plus important. La plupart des gens trouvent plus difficile d'apprendre un langage de programmation Web mais de prendre le temps de suivre des cours qui ne coûtent rien. Maîtriser les bases pour configurer votre premier site Web peut prendre environ 1 à 3 mois, selon votre niveau d'ambition dans le développement front-end.
Pour maîtriser JavaScript, j'ajouterais encore 3 mois d'apprentissage intensif. Je suppose que vous travaillez, vous consacrerez donc environ 5 à 10 heures par semaine à l'apprentissage, c'est-à-dire au moins 1 heure par jour. Vous ne deviendrez pas un spécialiste du front-end en six mois, mais c'est assez de temps pour créer une base pour un apprentissage ultérieur.
Rechercher de l'aide en ligne
Plus d'une fois en apprenant, vous rencontrerez des problèmes : Comment centrer un élément ? Pourquoi ce script ne fonctionne-t-il pas ? HTML et CSS sont différents sur Chrome que sur Firefox. Comment devenir un pro du développement front-end ?
C'est normal, mais ceux qui demandent ne se trompent pas.
- Google —demandez à oncle Google, de préférence en anglais.
- Stack Overflow - sera probablement le premier à afficher les réponses de Stack Overflow. Il s'agit d'un portail de développeurs Web où les utilisateurs publient des questions liées au langage de programmation Web, et d'autres (généralement des programmeurs Web plus expérimentés) essaient de vous donner une réponse sur le développement frontal. Les premières meilleures solutions sont des points, et l'auteur de la question peut marquer un commentaire qui a résolu son problème. Parfois, il existe plusieurs ou une douzaine de solutions, il vaut donc la peine de toutes les lire et de les vérifier chez vous. Si l'une des solutions vous a aidé, votez - donnez-lui une flèche vers le haut.
- Facebook — les groupes de développement front-end sur FB pour les débutants peuvent vous aider beaucoup, surtout lorsque vous ne savez pas comment poser des questions sur votre problème. Téléchargez un écran et votre code. Ne vous attendez pas à ce que quelqu'un l'écrive pour vous, mais les commentaires vous mèneront sûrement sur la bonne voie. Malheureusement, avec des questions trivialement simples, les gens écriront toujours quelque chose de désagréable - c'est difficile, soyez patient. Nous recommandons le groupe Web - le support de démarrage est le meilleur pour les questions liées aux start-ups, et les modérateurs s'assurent qu'il n'y a pas de haine.
- CanIUse - si votre problème est lié au fait que CSS ne fonctionne pas sur l'un de vos navigateurs, assurez-vous que ce que vous utilisez est pris en charge pour la version que vous vérifiez. De cette façon, vous éviterez les recherches longues et fastidieuses de problèmes de front-end fantômes.
Conclusion
Ainsi, dans cet article, vous en avez appris davantage sur le monde de l'informatique, et nous serions heureux si nous pouvions vous aider à vous orienter. Le monde du front-end est énorme et il peut être facile pour un débutant de s'y perdre, mais nous nous efforçons d'aider les gens à trouver le bon chemin. Mais notez également qu'en plus des langages Web traditionnels, il existe un langage de programmation Web sans code . Jusqu'à ce que les outils sans code soient largement disponibles, le développement d'applications Web était exclusivement effectué par des programmeurs Web.
Heureusement, le temps presse et maintenant, tout étudiant familiarisé avec le matériel peut créer son application Web ou sa page de destination. Après avoir appris les bases, même au niveau des connaissances, HTML et CSS, vous pouvez déjà trouver le travail de vos rêves. De nombreux scientifiques ont noté que le langage de programmation Web améliore les capacités humaines et contribue au développement des compétences non techniques. En fin de compte, c'est votre indépendance financière. Nous connaissons différents types du monde du front-end qui ont lancé leurs start-ups et fait des choses nécessaires pour le bien de notre planète.
Et, bien sûr, une telle approche présente des avantages :
- Facilité d'utilisation et grande puissance.
- Grande bibliothèque de modèles.
- Prend en charge la définition de divers paramètres.
Le langage de programmation sans code ou visuel est une nouvelle approche où vous n'avez pas à écrire de code à partir de zéro. Nous vous encourageons à utiliser des outils avec une interface graphique, qui est l'avenir du développement web. Les applications Web frontales traditionnelles sont des choses intéressantes, mais nous pensons que vous devez innover, donc notre produit peut vous être utile. Nous souhaitons sincèrement trouver le bon chemin vers la maîtrise du métier de programmeur. Ce chemin est épineux, mais si vous le maîtrisez, il vous satisfera toute la vie que vous avez passée à cette époque.
