Lernroute für Anfänger zur Beherrschung des Frontends

Front-End-Entwicklungsingenieur ist ein sehr neuer Beruf, der im Jahr 2005 im In- und Ausland wirklich Beachtung fand. Er bezieht sich auf die Abkürzung für Web-Front-End-Entwicklungsingenieur. Die Web-Frontend-Entwicklung hat sich aus der Kunst entwickelt, und der Name weist offensichtliche Merkmale dieser Zeit auf. In der Entwicklung des Internets, im Web 1.0-Zeitalter, war der Hauptinhalt der Website statisch und das Benutzerverhalten bei der Nutzung der Website bestand hauptsächlich aus Surfen. Mit der Weiterentwicklung des Internets sind Front-End-Entwicklungsingenieure zu einem sehr gefragten Talent auf dem Markt geworden. Viele Studenten, darunter auch diejenigen, die sich früher mit UI oder Java beschäftigt haben oder keine IT-Grundkenntnisse haben, möchten Frontend lernen. Das Bild unten ist eine Front-End-Lern-Mindmap, die im Internet weit verbreitet ist. Viele Anfänger sagten, dass ihnen schwindelig sei, nachdem sie diese dichten Wissenspunkte gesehen hatten. Tatsächlich ist Frontend ein weites Thema. Aber wenn Sie das Front-End lernen möchten, geraten Sie nicht in Panik. Obwohl es viele Inhalte gibt, müssen Sie sich keine Sorgen machen, dass Sie es Schritt für Schritt tun Frontend lernen!

Was genau müssen Sie also für die Frontend-Entwicklung lernen? Wie soll ich lernen? Als Nächstes zeigt Ihnen der Editor, wie Sie das Frontend von Grund auf erlernen.

1. Einführung in die Front-End-Entwicklung

In der Einstiegsphase müssen Sie zunächst die grundlegendsten Fähigkeiten erlernen: die statische Seitenproduktion von HTML basierend auf der Benutzeroberfläche realisieren Entwurfsentwurf. Dies erfordert, dass Sie HTML, CSS-Seitenlayout, Stilverschönerung und andere Fähigkeiten beherrschen.

In dieser Phase müssen Sie Folgendes lernen:

1. HTML+CSS-Grundlagen
Beherrschen Sie die Verwendung von HTML-Tags, Satzfähigkeiten, CSS-Layoutpositionierung, Stilverschönerung und Browserkompatibilität.
2. JavaScript-Grundlagen
Beherrschen Sie die grundlegende Syntax, Bedingungen, Anweisungen, Schleifen usw. von JS, lernen Sie gängige Algorithmen und verbessern Sie die Logik.
3. Häufig verwendete Front-End-Tools
wie Webstrom, Sublime, Dreamweaver usw. Das Beherrschen der Tastenkombinationseinstellungen und anderer Fähigkeiten kann die Entwicklungs- und Debugging-Effizienz schnell verbessern.
Die Lernschwierigkeit ist in dieser Phase relativ gering. Nachdem wir dies gelernt haben, können wir die Erstellung statischer Seiten bereits abschließen. Natürlich ist dies nur eine Einführung. Wenn Sie diese Fähigkeiten nutzen möchten, um einen Job zu finden, wird es trotzdem schwierig sein.

2. Elementare Front-End-Entwicklung

In der nächsten Phase ist es unser Ziel, die grundlegenden Anforderungen der Front-End-Entwicklungsbranche zu erfüllen und uns das Selbstvertrauen zu geben rausgehen und einen Job mit einem Monatsgehalt von mehr als 8.000 finden!

In dieser Phase müssen wir uns auf die Beherrschung dieser beiden Fähigkeiten konzentrieren:
1. Verwenden Sie jQuery, Bootstrap und andere Frameworks, um komplexe interaktive Funktionen und Effekte zu entwickeln.
für die Entwicklung mobiler Endgeräte.
Für den ersten Aspekt der Fähigkeit müssen Sie lernen:
1. Grundlegende JavaScript-Spezialeffekte
Kann gängige Webseiten-Spezialeffekte wie Bildkarussell, Drag & Drop, Lupe usw. realisieren.
2. jQuery-Grundlagen
Beherrschen Sie die Verwendung der allgemeinen APIs von jQuery und machen Sie sich mit dem Plug-in-Entwicklungsmechanismus von jQuery vertraut.
3. Bootstrap responsive
Beherrschen Sie den nativen responsiven Implementierungsmechanismus und können Sie das Rasterlayout und das responsive Layout in Bootstrap verwenden, um komplexe Seitenlayouts zu entwickeln.
4. AJAX-Grundlagen
Verstehen Sie die Prinzipien von AJAX vollständig und beherrschen Sie die Verwendung von AJAX in nativen JS- und jQuery-Methoden.
5. Beliebtes UI-Framework
Beherrschen Sie die Verwendung von jQueryUI, um schnell und effizient Seitenrenderingeffekte zu erzielen.
Nachdem Sie diese Fähigkeiten erlernt haben, können Sie selbstständig E-Commerce- und Unternehmenswebsites erstellen, gängige dynamische JS-Effekte implementieren und coole Effekte und komplexe Funktionen basierend auf jQuery, Bootstrap und anderen Frameworks implementieren!
Für den zweiten Aspekt der Entwicklung mobiler Endgeräte müssen Sie lernen:
1. Neue Funktionen von HTML5 und CSS3
Beherrschen Sie die Fähigkeiten zur Verwendung von HTML5 und CSS3 auf dem mobilen Endgerät.
2. Canvas-Grundlagen
Beherrschen Sie die grundlegende Zeichen-API von Canvas, damit Sie Canvas in Berichten und Werbeanzeigeeffekten anwenden und coole Anzeigeeffekte erzielen können.
3. Mobile Web Framework
kann mobile JS-Funktionen basierend auf jQuery Mobile/Zepto und anderen Frameworks entwickeln.
Beherrschen Sie diese beiden Fähigkeiten und Sie werden in der Lage sein, die grundlegenden Anforderungen an Front-End-Ingenieure auf dem Markt zu erfüllen. Laut Markt-Feedback-Daten beträgt das Gehalt im Allgemeinen 8.000-13.000 Yuan/Monat, also beeilen Sie sich und lernen Sie!

3. Fortgeschrittene Front-End-Entwicklung

Sie werden wissen, dass Sie eine Person mit Idealen und Ambitionen sind und sich nicht damit zufrieden geben, ein Junior-Front-End-Entwickler zu sein Ingenieur. Im nächsten Schritt werden wir den Weg des Fortschritts in der Frontend-Entwicklung einschlagen und unsere Fähigkeiten auf ein neues Niveau heben. Ebenso wird auch das Gehalt um eine Stufe steigen!

Wenn Sie jedoch ein Front-End-Neuling sind, gibt es möglicherweise einige Wissenspunkte, die Sie im folgenden Artikel noch nicht verwendet oder von denen Sie gehört haben. Keine Sorge, Sie können den Artikel zunächst speichern und ihn später verstehen.

Zurück zum Geschäft: In dieser Phase müssen wir uns auf die Beherrschung der folgenden zwei Aspekte konzentrieren:

1 Berücksichtigen Sie bei der Implementierung von Funktionen die Eleganz des Codes und konzentrieren Sie sich auf die Leistung und Wiederverwendbarkeit von der Code. ;
2. Verfügen Sie über ein tiefes Verständnis der Implementierungsprinzipien von Front-End-Frameworks und können Sie gängige Front-End-Komponenten entwickeln und rekonstruieren.

In dieser Phase müssen Sie das folgende Wissen erlernen:

1. Objektorientiertes Entwicklungsdenken
3. JavaScript-Abschlüsse, Bereichskette, Prototypenkette und andere erweiterte Funktionen
5 Das Prinzip der Kapselung des nativen JavaScript-Implementierungsframeworks
6. Das Prinzip der Kapselung des jQuery-Frameworks
7. Das Implementierungsprinzip des jQuery-Plug-Ins
Beherrschen Sie das Implementierungsprinzip des jQuery-Plug-Ins und verstehen Sie den Implementierungsmechanismus gründlich der beiden Erweiterungsmethoden des Plug-Ins.
8. Komponentenbasierte und modulare Entwicklung: SeaJS, RequireJS
Wenn Sie die oben genannten Fähigkeiten beherrschen, sind Sie in der Lage, komplexe Probleme und technische Schwierigkeiten zu lösen und komplexe Funktionen selbstständig zu entwerfen und zu entwickeln Module. Wenn Sie dieses Niveau erreichen, herzlichen Glückwunsch, können Sie den mittleren Bedarf der Front-End-Branche decken. Laut Markt-Feedback-Daten beträgt das Gehalt im Allgemeinen 13.000 bis 20.000 Yuan/Monat!

4. Fortgeschrittene Frontend-Entwicklung

Wenn ich das schreibe, ist sogar der Redakteur selbst begeistert, denn in der nächsten Phase ist unser Ziel: ein Full-Stack-Entwicklungsingenieur zu werden ! Full-Stack-Entwicklungsingenieure sind Experten, die sich sowohl im Front-End als auch im Back-End auskennen und Probleme schnell lokalisieren und lösen können, wenn sie auf sie stoßen! Laut Statistiken von Zhiyouji beträgt das Monatsgehalt von Full-Stack-Entwicklungsingenieuren in Peking bis zu 60 % zwischen 20.000 und 50.000, und es herrscht ein großer Mangel an Talenten!

Um zum Full-Stack-Entwicklungsingenieur befördert zu werden, müssen wir in dieser Phase die folgenden Dinge tun:

1. Wir müssen in der Lage sein, die Prinzipien und Implementierungsmuster gängiger Frameworks zu verstehen globale Perspektive auf das Frontend;

2, ein tiefes Verständnis des Entwicklungsmodells und der Technologieauswahl von mobilen Apps

3. Verstehen Sie die gängige Back-End-Technologie sowie die Methoden der Front-End- und Back-End-Zusammenarbeit und verstehen Sie sie aus einer globalen Perspektive. Den gesamten Lebenszyklus des Projekts.

Dementsprechend müssen Sie die folgenden Inhalte erlernen:

1. Webentwicklungs-Workflow-Framework: Yeoman/Grunt/Gulp/Bower usw.

Beherrschen Sie beliebte Front-End-Workflow-Tools, Sie können die Frontend-Entwicklung komfortabler und effizienter gestalten!

2. MVC/MVVM-Framework: AngularJS usw.

Beherrschen Sie den Front-End-MVC/MVVM-Framework-Implementierungsmechanismus, verstehen Sie das MVC-Entwicklungsmodell durch die Praxis von AngularJS und verstehen Sie die bidirektionale Datenbindung und andere verwandte Konzepte.
3. HTML5-Responsive-Framework
4. Beliebte UI-Frameworks: jQueryUI, EasyUI, ExtJS usw.
Beherrschen Sie die Kapselungsprinzipien gängiger UI-Frameworks und gewinnen Sie ein tiefes Verständnis für Komponentenentwicklungsideen durch Quellcode-Analyse .
5. Ionic, Angular
Beherrschen Sie das mobile Hybrid-Entwicklungsmodell und verstehen Sie den Gesamtprozess und den Implementierungsmechanismus der App-Entwicklung mit HTML5, CSS3 und JS durch die Kombination von Ionic und Angular.
6. React Native
Beherrschen Sie das Entwicklungsmodell von ReactNative auf dem mobilen Endgerät.
7. HTML5 Plus
8. Node.js Full-Stack-Entwicklung

Es zeigt sich, dass es wirklich nicht einfach ist, die Front-End-Entwicklung besser und professioneller zu gestalten. Dies ist das Merkmal der Front-End-Entwicklung und auch der Grund, warum viele Menschen verwirrt sind. Ein solch kompliziertes Wissenssystem macht es Anfängern schwer, mit dem Lernen zu beginnen, und Veteranen wissen oft nicht, was sie als nächstes lernen sollen. Daher hoffe ich, dass die oben genannte Front-End-Lernroute allen helfen kann.

Verwandte Empfehlungen:

Anforderungen für das Selbststudium von PHP von Grund auf

Der Wachstumspfad von PHP-Programmierern

HTML5-Lernroutenanalyse

Detaillierte Erläuterung der Lern-Roadmap für Webentwickler 2017

Web-Front-End-Lernroute: Wie um damit anzufangen, DIV+CSS von Grund auf zu lernen