Parcours d'apprentissage pour débutants pour maîtriser le front-end

L'ingénieur de développement front-end est un métier très nouveau. Il a vraiment commencé à attirer l'attention au niveau national et même international en 2005. Il fait référence à l'abréviation d'ingénieur de développement Web front-end. Le développement frontal Web est né de l'art et le nom présente des caractéristiques évidentes de l'époque. Dans l'évolution d'Internet, à l'ère du Web 1.0, le contenu principal du site Web était statique et le comportement de l'utilisateur lors de l'utilisation du site Web était principalement la navigation. Avec le développement d'Internet, les ingénieurs de développement front-end sont devenus des talents très recherchés sur le marché. De nombreux étudiants, y compris ceux qui ont travaillé dans l'interface utilisateur, Java ou n'ont aucune connaissance de base en informatique, souhaitent apprendre le front-end. L'image ci-dessous est une carte mentale d'apprentissage frontale largement diffusée sur Internet. De nombreux débutants ont déclaré avoir eu le vertige après avoir vu ces points de connaissances denses. En effet, le front-end est un vaste sujet. Mais si vous souhaitez apprendre le front-end, pas de panique. Même s'il y a beaucoup de contenu, il y a des traces à suivre. Tant que vous y allez étape par étape, vous n'avez pas à craindre de ne pas y parvenir. pour apprendre le front-end !

Alors, que devez-vous apprendre exactement pour le développement front-end ? Comment dois-je apprendre ? Ensuite, l'éditeur vous apprendra comment apprendre le front-end à partir de zéro.

1. Introduction au développement front-end

Au stade d'entrée, vous devez d'abord acquérir les compétences les plus élémentaires : réaliser une production de pages statiques HTML basées sur l'interface utilisateur. projet de conception. Cela nécessite que vous maîtrisiez le HTML, la mise en page CSS, l'embellissement du style et d'autres compétences.

À ce stade, vous devez apprendre :

1. Les bases de HTML+CSS
Maîtriser l'utilisation des balises HTML, les compétences en matière de composition, le positionnement de la mise en page CSS, l'embellissement du style et la compatibilité des navigateurs. .
2. Bases de JavaScript
Maîtrisez la syntaxe de base, les conditions, les instructions, les boucles, etc. de JS, apprenez les algorithmes courants et améliorez la logique.
3. Outils frontaux couramment utilisés
tels que Webstrom, Sublime, Dreamweaver, etc. La maîtrise de ses paramètres de touches de raccourci et d'autres compétences peut rapidement améliorer l'efficacité du développement et du débogage.
La difficulté d'apprentissage à ce stade est relativement faible. Après avoir appris cela, nous pouvons déjà terminer la production de pages statiques. Bien sûr, ce n’est qu’une introduction. Si vous souhaitez utiliser ces compétences pour trouver un emploi, ce sera quand même difficile.

2. Développement front-end élémentaire

Dans la prochaine étape, notre objectif est de répondre aux exigences de base de l'industrie du développement front-end et de nous donner la confiance sortir et trouver un travail avec un salaire mensuel de plus de 8 000 !

À ce stade, nous devons nous concentrer sur la maîtrise de ces deux capacités :
1. Utiliser jQuery, Bootstrap et d'autres frameworks pour développer des fonctions et des effets interactifs complexes
2. pour le développement final mobile.
Pour le premier aspect de la capacité, vous devez apprendre :
1. Effets spéciaux JavaScript de base
Peut réaliser des effets spéciaux de page Web courants tels que le carrousel d'images, le glisser-déposer, la loupe, etc.
2. Notions de base de jQuery
Maîtrisez l'utilisation des API communes de jQuery et familiarisez-vous avec le mécanisme de développement de plug-ins de jQuery.
3. Bootstrap responsive
Maîtrisez le mécanisme d'implémentation responsive natif et soyez capable d'utiliser la mise en page en grille et la mise en page responsive dans Bootstrap pour développer des mises en page complexes.
4. Les bases d'AJAX
Comprendre parfaitement les principes d'AJAX, et maîtriser l'utilisation d'AJAX dans les méthodes natives JS et jQuery.
5. Framework d'interface utilisateur populaire
Maîtrisez l'utilisation de jQueryUI pour obtenir rapidement et efficacement des effets de rendu de page.
Après avoir acquis ces compétences, vous serez capable de créer de manière indépendante des sites Web de commerce électronique et d'entreprise, d'implémenter des effets dynamiques JS courants et d'implémenter des effets sympas et des fonctions complexes basées sur jQuery, Bootstrap et d'autres frameworks !
Pour le deuxième aspect du développement d'un terminal mobile, vous devez apprendre :
1. Nouvelles fonctionnalités de HTML5 et CSS3
Maîtriser les compétences d'utilisation de HTML5 et CSS3 sur le terminal mobile.
2. Bases de Canvas
Maîtrisez l'API de dessin de base de Canvas, afin de pouvoir réaliser l'application de Canvas dans les rapports et les effets d'affichage publicitaire, et obtenir des effets d'affichage sympas.
3. Le framework Web mobile
peut développer des fonctions JS mobiles basées sur jQuery Mobile/Zepto et d'autres frameworks.
Maîtrisez ces deux compétences et vous serez en mesure de répondre aux exigences de base des ingénieurs front-end du marché. Selon les données des retours du marché, le salaire est généralement de 8 000 à 13 000 yuans/mois, alors dépêchez-vous et étudiez !

3. Développement front-end avancé

Vous saurez que vous êtes une personne avec des idéaux et des ambitions, et vous ne vous contenterez pas d'être un front-end junior. ingénieur de développement final. Dans la prochaine étape, nous nous engagerons sur la voie du progrès dans le développement front-end et élèverons nos capacités à un autre niveau. De même, le salaire augmentera également d’un niveau !

Cependant, si vous êtes un novice en front-end, il se peut qu'il y ait certains points de connaissances que vous n'avez pas utilisés ou dont vous n'avez pas entendu parler dans l'article suivant. Ne vous inquiétez pas, vous pouvez d'abord enregistrer l'article et le comprendre plus tard.

De retour aux affaires, à ce stade, nous devons nous concentrer sur la maîtrise des deux aspects suivants :

1 Lors de la mise en œuvre des fonctions, considérer l'élégance du code et se concentrer sur la performance et la réutilisabilité de. le code. ;
2. Avoir une compréhension approfondie des principes de mise en œuvre des frameworks front-end et être capable de développer et de reconstruire des composants front-end communs.

A ce stade, vous devez acquérir les connaissances suivantes :

1. Pensée de développement orientée objet
2. JavaScript orienté objet
3. Fermetures JavaScript, chaîne de portée, chaîne de prototypes et autres fonctionnalités avancées
4. Le principe de l'encapsulation du framework d'implémentation JavaScript natif
6. Le principe d'encapsulation du framework jQuery
7. Le principe d'implémentation du plug-in jQuery
Maîtrisez le principe d'implémentation du plug-in jQuery et comprenez en profondeur le mécanisme d'implémentation des deux méthodes d'extension du plug-in.
8. Développement modulaire et basé sur des composants : SeaJS, RequireJS
Si vous maîtrisez les compétences ci-dessus, vous aurez la capacité de résoudre des problèmes complexes et des difficultés techniques, et serez capable de concevoir et de développer de manière indépendante des fonctionnalités complexes. modules. Si vous atteignez ce niveau, félicitations, vous pouvez répondre aux besoins intermédiaires de l'industrie front-end. Selon les données des retours du marché, le salaire est généralement de 13 000 à 20 000 yuans/mois !

4. Développement front-end avancé

En écrivant ceci, même l'éditeur lui-même est enthousiasmé, car dans la prochaine étape, notre objectif est : devenir un ingénieur de développement full-stack ! Les ingénieurs de développement full-stack sont le genre d’experts qui maîtrisent le front-end et le back-end, et qui peuvent rapidement localiser et résoudre les problèmes lorsqu’ils les rencontrent ! Selon les statistiques de Zhiyouji, le salaire mensuel des ingénieurs de développement full-stack à Pékin atteint 60 % entre 20 000 et 50 000, et il y a une grave pénurie de talents !

Pour être promu ingénieur de développement full-stack, nous devons faire les choses suivantes à ce stade :

1 Être capable de comprendre les principes et les modèles de mise en œuvre des frameworks populaires à partir d'un. perspective globale sur le front-end ;

2, avoir une compréhension approfondie du modèle de développement et de la sélection technologique des applications mobiles
3. Être familier avec la solution full-stack de Node.js ; Comprendre la technologie back-end traditionnelle et les méthodes de collaboration front-end et back-end, et être capable de les comprendre dans une perspective globale sur l'ensemble du cycle de vie du projet.

En conséquence, vous devez apprendre le contenu suivant :

1. Cadre de workflow de développement Web : Yeoman/Grunt/Gulp/Bower, etc.

Maîtriser les outils de workflow front-end populaires, vous pouvez Rendre le développement front-end plus pratique et efficace !

2. Framework MVC/MVVM : AngularJS, etc.
Maîtrisez le mécanisme de mise en œuvre du framework MVC/MVVM frontal, comprenez en profondeur le modèle de développement MVC grâce à la pratique d'AngularJS et comprenez la liaison de données bidirectionnelle et autres. notions connexes.
3. Framework réactif HTML5
4. Frameworks d'interface utilisateur populaires : jQueryUI, EasyUI, ExtJS, etc.
Maîtrisez les principes d'encapsulation des frameworks d'interface utilisateur courants et acquérez une compréhension approfondie des idées de développement de composants grâce à l'analyse du code source. .
5. Ionic, Angular
Maîtrisez le modèle de développement hybride mobile et comprenez le processus global et le mécanisme de mise en œuvre du développement d'applications à l'aide de HTML5, CSS3 et JS grâce à la combinaison d'Ionic et d'Angular.
6. React Native
Maîtriser le modèle de développement de ReactNative sur le terminal mobile.
7. HTML5 Plus
8. Développement full-stack Node.js

On voit que si vous voulez rendre le développement front-end meilleur et plus professionnel, ce n'est vraiment pas facile. C'est la caractéristique du développement front-end, et c'est aussi la raison pour laquelle beaucoup de gens sont confus. Un système de connaissances aussi compliqué fait qu’il est difficile pour les novices de commencer à apprendre, et pour les vétérans, ils ne savent souvent pas quoi apprendre ensuite. J'espère donc que le parcours d'apprentissage frontal ci-dessus pourra aider tout le monde.

Recommandations associées :

Exigences pour l'auto-apprentissage PHP à partir de zéro

Le chemin de croissance des programmeurs PHP

Analyse du parcours d'apprentissage HTML5

Explication détaillée de la feuille de route d'apprentissage des développeurs Web 2017

Parcours d'apprentissage Web front-end : comment pour commencer Apprendre DIV+CSS à partir de zéro