Front-End-Lernpfad

Was ist ein Front-End-Ingenieur?

Kurz gesagt: Ein Front-End-Ingenieur nutzt Webtechnologien wie HTML/CSS/JavaScript, um mit Designern zusammenzuarbeiten, um Benutzeroberflächen zu implementieren, Daten mit Back-End-Ingenieuren zu verbinden und Positionen in der Entwicklung von Webanwendungen zu besetzen.

Entwicklungstools

Design-Software

Die wichtigste Aufgabe eines Front-End-Ingenieurs besteht darin, die Entwurfszeichnungen des Designers zu schneiden und in Code zu übersetzen. Daher müssen wir einige grundlegende Vorgänge der Entwurfssoftware und Methoden zum Schneiden von Zeichnungen erlernen.

• Photoshop ist die am weitesten verbreitete Designsoftware. Die meisten Menschen müssen es erlernen.
  • Grundlegende PS-Kenntnisse für Front-End-Ingenieure – Bildausschnitt
• Sketch ist leicht und leistungsstark und schneidet Bilder schnell und effizient, eine Mac-App, die für das UI-Design entwickelt wurde
  • Tutorial zum Skizzenschneiden

Herausgeber

Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen. Es gibt viele Editoren und IDEs, aber hier empfehle ich nur die besten zwei.

• Sublime Text ist der attraktivste Editor mit verschiedenen Plug-Ins, die einfach zu verwenden sind
  • Konfiguration und Verwendung
• Webstorm ist eine leistungsstarke Front-End-Entwicklungs-IDE, die Studenten kostenlos nutzen können

Codeverwaltung

Sie müssen nicht nur lernen, Code zu schreiben, sondern auch lernen, Ihren Code zu verwalten. Bei der Arbeit kann es vorkommen, dass Sie Code selbst bereitstellen müssen, indem Sie ihn ständig ändern, iterieren und umgestalten. Natürlich müssen Sie auch die Versionskontrollsoftware beherrschen.

• Linux müssen Sie die grundlegendsten Vorgänge wie das Öffnen, Verschieben und Kopieren von Dateien in der Befehlszeile erlernen
  • Die 20 am häufigsten verwendeten Befehle unter Linux
  • Brother Niaos Linux Private Kitchen – Grundlagen
• Git ist eine Versionskontrollsoftware, die Sie beim Schreiben von Code verwenden müssen. Sie können sie schnell erlernen, nachdem Sie begonnen haben.
  • Erste Schritte mit Git, die selbst ein Affe verstehen kann

Testtools

Vorschau und Debugging sind beim Schreiben von Frontend-Code die meiste Zeit, in der zwischen dem Editor und dem Browser gewechselt wird.

• Chrome Dev Tools Google-Browser-Entwicklungstools. Wenn Sie eine Vorschau Ihrer Front-End-Seite anzeigen und Fehler beheben möchten, müssen Sie hierher gehen

Grundkenntnisse

• HTML
  • Erste Schritte mit HTML von MDN
  • 30-minütiger HTML-Schnellstart
• CSS
  • MDNs CSS-Einführungs-Tutorial
  • CSS-Layout lernen
• JavaScript
  • JavaScript-Tutorial für Neulinge
  • Einführung in JavaScript auf MOOC.com
• Web
  • Was passiert, wenn Sie google.com in Ihren Browser eingeben und die Eingabetaste drücken?
  • Einführung in das Internetprotokoll

Mittlere Kenntnisse

• HTML5
  • MDNs HTML5-Einführungs-Tutorial
  • Erste Schritte mit HTML5 im NetEase Cloud Classroom
• CSS3
  • CSS3-Tutorial für Neulinge
  • Gitbook CSS3-Tutorial
• Styleguide
  • Tencent alloteam Front-End-Code-Spezifikationen
  • Baidu ecomfe Front-End-Code-Spezifikationen
  • Google HTML/CSS-Styleguide
  • Google JavaScript Style Guide
• Responsives Design
  • Responsive Design-Leitfaden
  • Adaptives Webdesign – Ruan Yifeng
  • Was ist responsives Webdesign? Wie geht es weiter?
• Webanimation
  • CSS-Animation
  • Canvas-Animations-Tutorial
  • Lernen Sie, Animationen in JavaScript zu erstellen
• Bootstrap
  • Bootstrap-Tutorial für Anfänger
  • MOOC.com spielt mit Bootstrap
• jQuery
  • jQuery-Tutorial für Neulinge
  • Grundlagen von jQuery auf MOOC.com
• Ajax
  • JQuery Ajax-Schnellstart
  • jQuery Ajax vollständige Analyse

Erweiterte Kenntnisse

• w3c-Standard
  • Dokumente zur Webplattform
• ECMA6
  • Einführung in ECMAScript6 von Ruan Yifeng
• Testen
  
  • Erkundung automatisierter FEX-Frontend-Tests
  • Testing Framework Mocha Beispiel-Tutorial
  • Karma und Jasmine automatisierten Unit-Tests
• Automatisierte Erstellung
  
  • Streaming-Automatisierungs-Build-Tool Gulp
  • Front-End-Engineering-Konstruktionstool fis
  • Webprojekt-Gerüstgenerierungstool Yeoman
    • Verwenden Sie Yeoman und AngularJS, um Webanwendungen zu erstellen
• Modul-/Paketverwaltung
  
  • npm
    • Einführung in die Verwendung von npm
    • Erstellen Sie schnell eine Node.js-Entwicklungsumgebung und beschleunigen Sie npm
  • Sea.js
    • Erste Schritte mit Sea.js in 5 Minuten
  • ErforderlichJS
  • ES6-Modul
• Präprozessor
  
  • Haml
    • Tutorial
    • HTML-Code-Abkürzung: Emmet und Haml
  • Sass
    • Erste Schritte mit Sass
  • TypeScript
    • TypeScript-Handbuch (chinesische Version)
• Rahmen
  • Reagieren
    • Beispiel-Tutorial „Erste Schritte“
  • Vue
    • vue.js-Tutorial
  • Eckig

Serverseitig

• Nodejs
  • Erste Schritte mit Node
  • NodeJS in 7 Tagen lernen
• MongoDB
  • NodeJS interagiert mit MongoDB

Fertigkeitskarte

• StuQ-Fertigkeitskarte
• Frontend-Wissensstruktur

Online-Ressourcen

• Große Front-End-Navigation
• Frontend-Sachen
• Frontend-Verzeichnis
• Fragen zum Frontend-Interview

Online-Tutorial

• Tutorial für Neulinge
• Geek Academy Wiki
• Mozilla Developer Network
• Front-End-Web-Entwicklung auf Treehouse
• Lernen Sie, fortgeschrittenes HTML/CSS zu programmieren

Online-Bücher

• Front-End-Entwicklerhandbuch
• Front-End-Datenbank
• Frontend-Notizbuch

Empfohlene Bücher

• Grundlagen
  
  • Ausführliche Erklärung von HTML, CSS und XHTML
  • Design und Erstellung von HTML- und CSS-Websites
  • Pro Git chinesische Version
  • Brother Birds Linux-Privatkochen
• Mittelstufe
  
  • Head-First-HTML5-Programmierung
  • Der endgültige Leitfaden für JavaScript
  • Die Essenz der JavaScript-Sprache
  • Interaktive JavaScript- und jQuery-Web-Frontend-Entwicklung
  • Eine einfache Erklärung von Ajax
• Erweitert
  
  • Erweiterte Programmierung mit JavaScript
  • Erweiterte HTML5-Programmierung
  • Der ultimative Leitfaden zu CSS
  • Ausführliche Erklärung von Node.js