Das umfassendste Ressourcen-Tutorial zu Github – alle am Front-End beteiligten Wissenssysteme

Front-End ist zweifellos die heißeste Technologie im Jahr 2016, ohne Ausnahme.

Verschiedene Front-End-MVC-Frameworks entstehen in endlosen, eckigen JS-, Vue- und React-Frameworks, und das Konzept der Front-End-Komponentenentwicklung ist tief in den Herzen der Menschen verwurzelt. Die Front-End-Gehälter sind bereits höher als die der mobilen Entwicklung.

Als persönlicher Webmaster ist es auch notwendig, Front-End-Design zu lernen. Erstens können Sie einige kleine Designprobleme selbst lösen und gleichzeitig Ihre eigene Ästhetik verbessern und das UI-Designniveau verbessern die Website.

Wesentliche Grundkenntnisse

Zusammenfassung der Front-End-Fähigkeiten In diesem Projekt werden
alle Wissensaspekte von Front-End-Ingenieuren detailliert erfasst. Nachdem Sie über grundlegende Fähigkeiten verfügen, können Sie die Lernrichtung finden
und Ihre Fähigkeiten und Kenntnisse verbessern.

frontend-dev-bookmarks ist eine von Ausländern zusammengefasste Front-End-Entwicklungsressource. Die Abdeckung ist sehr breit. Mit verschiedenen Wissenspunkten, Werkzeugen und Techniken ist es sehr umfassend.

Die folgenden grundlegenden Fähigkeiten sollten meiner Meinung nach auf der Einstiegsebene beherrscht werden:

• HTML4-, HTML5-Syntax, Tags, Semantik
• CSS2.1, CSS3-Spezifikation, kombiniert mit HTML, um verschiedene Layouts und Effekte zu erzielen
• Der durch Ecma-262 definierte Sprachkern von Javascript, natives Client-Javascript, DOM-Operationen, neue Funktionen von HTML5
• Jquery ist eine ausgereifte clientseitige Javascript-Bibliothek und wird empfohlen
• Eine serverseitige Sprache: Wenn Sie über Erfahrung in der serverseitigen Entwicklung verfügen, können Sie die Sprache verwenden, die Sie bereits kennen. Wenn Sie keine Erfahrung in der serverseitigen Entwicklung haben, können Sie Servlet wählen Wenn Sie damit nicht vertraut sind, können Sie PHP wählen, das einfache Anmelde- und Registrierungsfunktionen realisieren kann. Es reicht aus, die Front-End-Entwicklung zu unterstützen. Die grundlegendste Voraussetzung ist die Implementierung einfacher Funktionssimulationen ,
• HTTP

Nachdem Sie die oben genannten Grundkenntnisse beherrschen, können Sie schnell die Technologien erlernen, die Sie bei der Arbeit benötigen.

Grundlegende Entwicklungstools

Geeignete Tools können die Lerneffizienz effektiv verbessern, sich auf das Wissen selbst konzentrieren und Probleme schnell lokalisieren und
lösen. Die folgenden Front-End-Entwicklungstools sind meiner Meinung nach notwendig:

• Texteditor: Sublime Text wird empfohlen, unterstützt verschiedene Plug-Ins, Themen und Einstellungen und ist einfach zu verwenden
• Browser: Google Chrome wird empfohlen, er aktualisiert sich schnell und bietet sehr gute Unterstützung für verschiedene Frontend-Standards
• Debugging-Tools: Es wird empfohlen, die mit Chrome gelieferten Chrome-Entwicklungstools zu verwenden, mit denen Sie problemlos die DOM-Struktur und den DOM-Stil anzeigen, Debugging-Informationen über die Konsole ausgeben, Javascript debuggen und das Netzwerk anzeigen können. usw.
• Hilfswerkzeuge: PhotoShop zum Bearbeiten von Bildern, Auswählen von Farben, Messen von Größen mit Fireworks, Vergleichen von Größen mit AlloyDesigner und die oben genannten Chrome-Entwicklungstools,
• FQ Tools: Laterne, Gecko-Spaziergang

Lernmethoden und Lernziele

Methode:

1. Lesen Sie während der Einstiegsphase wiederholtChinesische Version klassischer Bücher, implementieren Sie jedes Beispiel im Buch und sehen Sie sich die Wirkung im Browser an
2. Sobald Sie über eine gewisse Grundlage verfügen, können Sie online nach verschiedenen Tutorials und Demos suchen, um mehr über die tatsächliche Verwendung verschiedener Funktionen und die Implementierung allgemeiner Funktionen zu erfahren
3. Lesen Sie die umfassenden und vollständigen Wissenspunkte zu HTML-, CSS- und Javascript-Standards
4. Lesen Sie die Blogs und Artikel von Front-End-Experten, um Ihr Wissensverständnis zu verbessern
5. Nutzen Sie Suchmaschinen sinnvoll

Ziel:

1. Merken Sie sich die wichtigen Konzepte in den vorherigen Wissenspunkten und gewinnen Sie Ihr eigenes Verständnis basierend auf Ihrer Lernerfahrung
2. Seien Sie mit den Implementierungsmethoden gängiger Funktionen vertraut, z. B. dem allgemeinen CSS-Layout, der Tab-Steuerung usw.

Erste Schritte

Im Folgenden finden Sie gute Bücher und Materialien für die Einführungsphase

1. Für HTML lesen Sie zuerst die Kapitel 1–9 von „HTML & CSS: Websites entwerfen und erstellen“ und dann die Kapitel 1–4 von „HTML5: Das fehlende Handbuch“.
2. CSS las zuerst „CSS: The Missing Manual“ und dann „CSS Definitive Guide“
3. Für Javascript lesen Sie zuerst „Javascript Advanced Programming“ und dann „Javascript Definitive Guide“
4. HTTPSiehe den endgültigen Leitfaden zu HTTP
5. Im gesamten Lernprozess müssen HTML, CSS und JavaScript an vielen Stellen miteinander kombiniert werden. Dies ist auch in der tatsächlichen Arbeit der Fall. Ein einfaches Funktionsmodul erfordert die Kombination der drei.
6. Praxis ist ein wichtiger Teil des Lernens. Bücher konzentrieren sich auf die Erläuterung von Wissenspunkten, und Beispiele reichen möglicherweise nicht aus. Daher müssen Sie Suchmaschinen verwenden, um einige einfache Tutorials zu finden und den Tutorials zu folgen, um Funktionen zu implementieren. Hier sind einige bessere Tutorial-URLs
   • Sie können nach schriftlichen Testinterviewfragen für Front-End-Campus-Rekrutierung von großen Unternehmen als Übungsfragen oder von anderen zusammengefassten Front-End-Interviewfragen und persönlich zusammengefassten Interviewfragen (mit Referenzantworten) suchen
   • http://code.tutsplus.com bietet verschiedene Tutorials
   • MDN bietet auch viele Tutorials und, was noch wichtiger ist, eine detaillierte Dokumentation. Wenn Sie eine bestimmte Funktion finden müssen, suchen Sie bei Google: xxx site:https://developer.mozilla.org
   • http://www.html5rocks.com/zh/ bietet auch viele hochwertige Tutorials
   • http://www.sitepoint.com/
   • http://alistapart.com/
7. Natives Javascript ist eine Fähigkeit, die beherrscht werden muss. Auf der Grundlage der Beherrschung von nativem Javascript wird empfohlen, über Kenntnisse in jQuery zu verfügen, was für die tatsächliche Arbeit sehr nützlich ist. Zu den Büchern in diesem Bereich gehören „Erlernen von jQuery“. zur offiziellen jQuery-Website
8. Erstellen Sie ein https://github.com/-Konto, um verschiedene Codes und Projekte zu speichern, die Sie normalerweise studieren.
9. Sobald Sie eine bestimmte Grundlage haben, können Sie einen persönlichen Blog einrichten, um die während des Lernprozesses aufgetretenen Probleme und Lösungen aufzuzeichnen, sodass Sie diese leicht überprüfen und auch anderen helfen können. Sie können auch zu http://www.cnblogs.com/ oder http://www.csdn.net/ gehen, um ein Konto zu registrieren, was bequem und praktisch ist
10. Verwenden Sie Google häufig, um nach englischsprachigen Informationen zu suchen. Wenn Sie Fragen haben, können Sie hier direkt suchen, indem Sie ein Konto registrieren Auch die Beantwortung von Fragen für andere kann eine große Hilfe sein, die persönlichen Fähigkeiten zu verbessern.
11. Nachdem Sie sich mit klassischen Büchern vertraut gemacht haben, können Sie den Link zum vorherigen Abschnitt über wesentliche Grundkenntnisse öffnen. Lesen Sie die entsprechenden Standards sorgfältig durch und beherrschen Sie das Wissen vollständig

Weiter verbessern

Nachdem die vorherige Grundlage geschaffen wurde, beginnt im Grunde das Frontend. Zu diesem Zeitpunkt hat möglicherweise jeder eine Lernrichtung im Sinn, wenn nicht.
Sie können sich auf die beiden im vorherigen Abschnitt über wesentliche Fähigkeiten erwähnten Projekte beziehen und einige davon für die Entwicklung und das Lernen auswählen. Hier sind einige schöne Aspekte:

• Grunt: Front-End-Automatisierungstool zur Verbesserung der Arbeitseffizienz
• weniger CSS: ausgezeichneter CSS-Präprozessor
• Bootstrap: Ausgezeichnetes CSS-Framework, sehr gut für Teams ohne Designer, perfekt in Kombination mit weniger
• Anforderungen: AMD-Standardmodullader, ein unverzichtbares Tool für den Front-End-Modularisierungstrend
• Node.js: JavaScript kann auch als Backend verwendet werden, und der Status von Front-End-Ingenieuren wird verbessert
• AngularJS: Ein gutes Tool für Single Page Application
• Mobile Web-Entwicklung: Mit der Beliebtheit von Smartphones holt der mobile Datenverkehr allmählich den PC-Datenverkehr ein
• Javascript-Speicherverwaltung: Sie müssen auf Speicherlecks achten, wenn Sie SPA über einen längeren Zeitraum ausführen
• Hochleistungs-JavaScript (Schnellere Webanwendungsschnittstellen erstellen)
• Best Practices zur Beschleunigung Ihrer Website: Wichtige Fähigkeiten

Einige persönliche Erfahrungen

LingyuCoders Lernerfahrung

Die Meister oben haben es so ziemlich zusammengefasst, also mache ich hier einfach ein bisschen Unsinn

####Werkzeuge

• Chrome-Entwicklungstools: Ein leistungsstarkes Tool für die Front-End-Entwicklung und das Debuggen, das sich auf mehrere Funktionen konzentriert:
  • Konsole (Unsinn)
  • Elemente: Anpassung des Elementstils, sehr häufig verwendet
  • Quellen: Fügen Sie Haltepunkte im Code hinzu, führen Sie das Debuggen in einem Schritt durch und zeigen Sie Objekte im Speicher während des Debuggens in einem Schritt an.
    • Ausdruck beobachten: Sehen Sie sich den Wert im aktuellen Speicher durch Ausdruck an
    • Aufrufstapel: Sehen Sie sich den Aufrufstapel an, aktivieren Sie Async, und Sie können den asynchronen Aufrufstapel sehen (dies ist sehr nützlich, insbesondere beim Debuggen von Ajax)
    • Bereichsvariablen: Variablen in der Bereichskette, sehr nützlich
  • Netzwerk: Erfassen Sie Pakete, um jede Anfrage anzuzeigen, sehr wichtig, notwendig für das gemeinsame Debuggen von Front-End und Back-End
  • Zeitleiste: Analysieren Sie Rendering, JS-Ausführung und andere Phasen, ein leistungsstarkes Tool zur Leistungsoptimierung
  • Emulation: Simulieren Sie eine mobile Umgebung, wichtig für die Entwicklung mobiler Seiten
  • Einige Plugins:
    • Liveload: Automatische Aktualisierung nach Änderung der Seite, kein Drücken von F5 erforderlich
    • Abmessungen: ein leistungsstarkes Tool zum Messen direkt auf der Seite
    • Livestyle: Der CSS-Stil wird nach der Änderung automatisch wirksam, eine Aktualisierung ist nicht erforderlich, und Elemente können nach der Änderung auch mit dem Code synchronisiert werden
    • Bildtool: Messung, Farbauswahl
    • UC-QR-Code: Unverzichtbar zum Debuggen und Scannen auf mobilen Endgeräten
    • pagespeed, YSlow: Plug-in zur Analyse und Optimierung der Seitenleistung
    • Mark Feixiang: Hervorragender Online-Markdown-Editor, schnell wöchentliche Berichte schreiben und Notizen machen
• sublime text2: bequeme Codierung, viele Plug-Ins, hohe Geschwindigkeit und gute Leistung
  • emmet: Unverzichtbar zur Verbesserung der HTML-Kodierungsgeschwindigkeit
  • Sublimelinter Lint und Hinweis in verschiedenen Sprachen: Codekorrektur
  • Einige Ausschnitte: Automatische Vervollständigung zur Verbesserung der Entwicklungseffizienz
• Intellij IDEA und WebStorm: Integrierte Entwicklungsumgebung, die verschiedene Funktionen integriert, die Entwicklung ist bequemer als großartig, kostet aber mehr Leistung
• Mark Men: Ein leistungsstarkes Tool zum Messen, Farbwählen und Markieren, die erste Software, die nach Erhalt des visuellen Entwurfs geöffnet wird
• GFW Fucker: Ich benutze Hongxing, wenn möglich, kaufe einen virtuellen Server, den ich als Leiter verwenden kann
• iHosts: Sehr ausgezeichnete Hosts-Verwaltungssoftware, einfach zu ändernde Hosts, unerlässlich für Entwicklung und Debugging
• Charles: Das beste Tool zur Paketerfassung und -analyse auf der Mac-Plattform
• Rythem: Die von AlloyTeam hergestellte Proxy-Paketerfassungssoftware ist sehr leicht, einfach zu installieren und einfach für die Entwicklung und das Debuggen mobiler Endgeräte (realer Maschinen) zu verwenden
• Wunderlist: Eine sehr gute Todo-Liste, die sehr praktisch ist, wenn es viele Aufgaben und Bedürfnisse gibt

####FÄHIGKEITEN
Tatsächlich gibt es neben JavaScript (einschließlich NodeJS), HTML und CSS viele Frontend-Fähigkeiten. Tatsächlich ist der Front-End-Skill-Tree sehr umfangreich. Ich kann nur einige auflisten, die ich während der Entwicklung gesehen habe.
#####Sprachgrundlagen
JavaScript:

• Bereichskette, Abschluss, Laufzeitkontext, dies
• Prototypenkette, Vererbung
• NodeJS-Grundlagen und allgemeine APIs

CSS:

• Selektor
• Browserkompatibilität und häufige Hacks
• CSS-Layoutmethoden und -prinzipien (Boxmodell, BFC, IFC usw.)
• CSS 3, wie Animation, Farbverlauf usw.

HTML:

• Semantische Tags

#####Erweitert
JavaScript:

• Asynchrone Steuerung (Promise, ES6-Generator, Async)
• Modulare Entwicklungsmethode (AMD, CMD, KMD usw.)
• Einige verwandte Kenntnisse über den JavaScript-Interpreter
  • Asynchrone IO-Implementierung
  • Müllabfuhr
  • Ereigniswarteschlange
• Häufig verwendete Frameworks und ihre Prinzipien
  • jQuery: Ein selektorbasiertes Framework, aber ich persönlich denke, dass es nicht als Toolbibliothek bezeichnet werden kann, da es keinen Modullademechanismus hat. Der Quellcode ist sehr gut zum Lesen und Studieren geeignet 🎜>
  MVVM-Frameworks wie AngularJS/Avalon: Fokus auf das Verständnis des Konzepts des MVVM-Musters selbst und der Implementierung der bidirektionalen Bindung sowie deren Entkopplung
  Unterstreichung: Hervorragende Tool-Bibliothek, leicht verständliche Implementierung häufig verwendeter Tool-Code-Snippets
  Polymer/React: Komponentenentwicklung, Blick in die Zukunft, Verständnis der Prinzipien der Komponentenentwicklung

CSS und HTML: Hauptsächlich die Funktionen von CSS3 und HTML5 sowie der Browser-Verarbeitungsprozess und die Zeichenprinzipien

DOM-Baum, CSSOM-Baum, Rendering-Baum-Konstruktionsprozess und Seiten-Rendering-Prozess
Blockierung beim Parsen von HTML, CSS und JavaScript
HTML5-bezogen
• SVG- und Vektorgrafikprinzipien
  Canvas-Entwicklungs- und Animationsprinzipien (Frame-Animation)
  Video und Audio
Flex-Box-Layout-Methode
Verwendung von Symbolschriftarten

Häufig verwendete NodeJs-Pakete:

Koa
Express
Unterstrich
asynchron
schlucken
grunzen
verbinden
Anfrage

Einige Ideen:

Responsives Web
Anmutiger Abbau, fortschreitende Verbesserung
don
• t make me think

Benutzerfreundlichkeit, Zugänglichkeit und Bedeutung der Webseite
SEO-Suchmaschinenoptimierung, verstehen Sie die Prinzipien von Suchmaschinen
Vorteile und Probleme von SPA

Leistungsoptimierung:

• Reduzieren Sie die Anzahl der Anfragen (Sprite, Combo)
• Machen Sie den Cache gut aus (Anwendungscache, HTTP-Cache, CDN, lokaler Speicher, Sitzungsspeicher, Memomodus)
• Reduzieren Sie den Selektorverbrauch (von rechts nach links), reduzieren Sie DOM-Operationen (Trennung von DOM und JavaScript-Interpreter)
• CSS-Reflow und Neuzeichnen

#####Projekt

• Versionsverwaltung: Git wird zuerst empfohlen. Wenn Sie Git verwendet haben, werden Sie SVN nie wieder verwenden wollen.
  • Git: Mechanismus zur lokalen Versionsverwaltung
  • SVN: Remote-Center-Versionsverwaltungsmechanismus
• Automatisierte Konstruktion: hauptsächlich Vorverarbeitung von weniger, Vorlagen, Kaffee usw. sowie Codekomprimierung und -zusammenführung
  • Gulp: auf Flows basierend aufgebaut, schnell und mit guter Modulqualität
  • Grunzen: Unabhängige Aufgabenkonstruktion, langsame Geschwindigkeit, schmerzhafte Konfiguration, hohe Flexibilität
• Vorverarbeitungs- und Vorlagen-Engine
  • weniger: einfache Syntax, aber eingeschränkte Funktionalität
  • Jade, EJS, Velocity und andere Template-Engines, jede hat ihre eigenen Stärken
  • Kaffee: Der Favorit der Python-Ingenieure, ich habe ihn noch nie benutzt
• Umgebungsaufbau: Hauptsächlich Zuordnung des Online-Codes zum lokalen und Starten eines Demo-Servers vor Ort. Was das Verspotten simulierter Daten betrifft, haben verschiedene Personen unterschiedliche Meinungen.
  • Lokaler Proxy: ihosts
• Automatisierte Tests: Wenn das Unternehmen relativ stabil ist, können automatisierte Tests verwendet werden, um Testvorfälle zu reduzieren. Wenn jedoch die Nachfrage hoch ist, sind die Kosten für die Wartung von Testfällen hoch und automatisierte Tests können den gegenteiligen Effekt haben.
  • Jasmin
  • Mokka
• Ökosystem
  • npm
  • Laube
  • spm
• Erstellen Sie einen eigenen Blog
  • Git-Seiten
  • hexo
  • jekyll

#####Zukunft

• Web Components: ein zukunftsorientierter Komponentenentwicklungsansatz
  • HTML-Vorlage
  • Shadow DOM
  • Benutzerdefinierte Elemente
  • HTML-Import
• Native Entwicklung mobiler Endgeräte: Dies ist auch etwas, das Sie verstehen müssen. In Zukunft werden sich Front-End-Ingenieure häufig mit Webview befassen, und sie müssen auch die native Entwicklung verstehen

#####Sonstiges
Manche Dinge lassen sich nicht durch einfaches Eintippen des Codes lösen. Als ich am Praktikum teilgenommen habe, habe ich das Gefühl, dass dies nicht der Fall ist

• Über das Geschäft nachdenken: Persönlich fehlt mir dieser Aspekt sehr, deshalb setze ich ihn ganz oben und denke mehr über das Geschäft nach, bevor ich schreibe
• Kommunikation und Kommunikationsfähigkeiten: Das Front-End muss sich gleichzeitig mit dem Projektmanager, dem Produkt, der Interaktion und dem Backend befassen. Eine schlechte Kommunikation führt zu viel Aufwand und verzögert das Projekt
• Wissensmanagement, Zeitmanagement: Gleichgewicht zwischen Input und Output, Output ist der beste Input. Wie man gut teilt, sich an der Community beteiligt, gut kommuniziert und gute Aufzeichnungen führt
• Lust auf neue Technologien und Mut zum Ausprobieren

####Einführungsbuch
Sie können mit dem Lesen von Büchern beginnen, aber beim Lesen von Büchern müssen Sie auch weiterhin auf neue Entwicklungen in der Technologie achten. Hier sind ein paar Bücher, die ich gut finde:

• „Advanced JavaScript Programming“: Es kann als Einführungsbuch verwendet werden, es ist aber auch ein Buch für Fortgeschrittene. Sie können die Grundlagen schnell erlernen und es erneut lesen, wenn Sie Fortschritte machen
• „The Definitive Guide to JavaScript“: Nicht für den Einstieg geeignet, aber notwendig. Wenn Sie etwas nicht verstehen, schauen Sie es sich einfach an, es ist sehr hilfreich.
• Wartbares JavaScript schreiben und:
• „Node.js Development Guide“: Ein gutes Einführungsbuch zu Nodejs
• „Einführung in Node.js in einfacher Sprache“: Buch für Fortgeschrittene in Nodejs, ein Muss
• „JavaScript Asynchronous Programming“: Verstehen Sie das Konzept der asynchronen JS-Programmierung
• „JavaScript Pattern“ und „JavaScript Design Pattern“: JavaScript-Codemuster und Designmuster, Entwicklungsdenken in JavaScript umwandeln, sehr gutes Buch
• „JavaScript Framework Design“: Während Sie das Rad verwenden, sollten Sie wissen, wie sich das Rad dreht. Es erklärt die Implementierung jedes Teils des Frameworks auf der Ebene des Quellcodes Lesen Sie es mit einem vorhandenen Framework

• Das bringt mich nicht zum Nachdenken》: Das Konzept des Webdesigns und das Verständnis des Benutzerverhaltens sind sehr gut《Don
„CSS Zen Garden“: ein bleibendes Werk, das auch die Konzepte des Webdesigns und Themen vermittelt, auf die beim Design geachtet werden muss
„Hochleistungs-JavaScript“ und „Hochleistungs-HTML5“: Bücher mit Schwerpunkt auf Leistung, bei denen es sich nicht nur um Leistungsoptimierung handelt, sondern auch um viele grundlegende Dinge, die es wert sind, gelernt zu werden
„HTML5 Canvas Core Technology“: Ein Buch, das ich gerade lese, ist sehr hilfreich für die Verwendung von Canvas, die Implementierung von Animationen und die Entwicklung eines Animations-Frameworks
„HTTP Authoritative Guide“: Grundlegende Kenntnisse im Zusammenhang mit dem HTTP-Protokoll, das häufig bei der Front-End-Entwicklung und beim Debuggen eine Rolle spielt
„Responsive Web Design“: Die Technologie an sich ist nicht schwierig, wichtig ist das Designkonzept responsiver Webseiten und der Mobile-First-Gedanke
"The Essence of JavaScript Language": Ein erfahrenes Buch, es ist auch ein gutes Buch zur Popularisierung des JavaScript-Entwicklungsdenkens, sehr gut für den Einstieg geeignet

####Einige gute Websites

• Github: Es gibt nicht viel zu sagen, lesen Sie mehr Quellcode anderer Leute, laden Sie mehr von Ihrem eigenen Quellcode hoch und lernen Sie von Experten aus der ganzen Welt
• codepen: Ein Muss, um die Schönheit des Frontends zu erleben, es gibt viele coole Effekte und hervorragende Plug-Ins
• echojs: Eine Website, um schnell neue JS-Informationen kennenzulernen
• Stackoverflow und Segmentfault: Grundsätzlich können dort alle möglichen Fragen beantwortet werden
• Google Web-Grundlagen: Jeder Artikel ist zum sorgfältigen Lesen geeignet
• Statische Dateien: CDN öffnen, einfach zu verwenden
• iconfont: Alibabas Vektor-Icon-Bibliothek, sehr gut, unterstützt CDN und unterstützt Projekte
• HTML5 rockt: Eine gute Website, auf der Sie Artikel zu vielen neuen Browserfunktionen und modernsten Technologien finden
• CSS-Tricks: Wie Sie CSS optimal nutzen und die neuen Funktionen von CSS kennenlernen, hier können Sie zufrieden sein
• JavaScript Secret Garden Ein Muss für JavaScript-Anfänger, sehr gut
• w3cplus: Eine Website für Front-End-Lernen, die Qualität der darin enthaltenen Artikel ist recht gut
• node school: eine gute Node-Lernwebsite
• Learn Git Branch: eine Git-Lernwebsite mit toller Interaktion
• Front-End Stew: Eine Community zum Teilen von Front-End-Artikeln mit vielen hervorragenden Artikeln
• Reguläre Ausdrücke: Ein sehenswertes Einführungs-Tutorial zu regulären Ausdrücken
• Ruan Yifengs Blog und Zhang Xinxus Blog: Abkürzungen, um bestimmtes Wissen schnell zu verstehen, aber wenn Sie tiefer graben müssen, benötigen Sie andere Ressourcen
• Blogs von verschiedenen Experten: Es gibt zu viele, daher werde ich keine vollständige Liste veröffentlichen.
• Offizielle Websites mit verschiedenen Vorschriften, falls Sie nicht wissen, wie man die Vorschriften liest

####Prozess
Ich habe früher Java SSH gemacht und bin mittendrin Front-End-Entwickler geworden, sodass meine Fähigkeiten relativ schwach waren und ich auf mehr Probleme stieß. Grundsätzlich können Sie damit beginnen, Bücher und Tutorials zur W3C School sowie einige Front-End-Blogs wie den Blog von Uncle Tom zu lesen. In der Vergangenheit habe ich nur jQuery verwendet und nicht viel in nativem js gelernt. Später habe ich nach und nach viele Tierbücher gelesen, wie zum Beispiel die Essenz der Sprache von erfahrenen Leuten. Ich habe aus diesen Büchern viel Wissen auf Sprachniveau gelernt. Aber das reicht offensichtlich nicht aus, deshalb gehe ich oft in die Community, um zu sehen, worüber alle reden, und schaue mir dann die relevanten Informationen an. Wenn ich interessiert bin, suche ich nach weiteren Informationen oder schreibe eine Demo. Dies ist die wichtigste Möglichkeit, CSS zu lernen. Später begann ich, den Blogs verschiedener Experten und einigen relativ ausführlichen Büchern sowie einigen neuen Kenntnissen und Frameworks mehr Aufmerksamkeit zu schenken, und übte weiterhin die Übermittlung von Codes an Github, wodurch ich auch viel Wissen lernte. Während des Praktikums war ich persönlich an der tatsächlichen Projektentwicklung beteiligt und lernte viele Konzepte und Denkweisen kennen, die ich in der Schule nicht lernen konnte, was ebenfalls eine große Hilfe war. Kein Reden mehr, ich werde Steine ​​bewegen und nach Angeboten fragen...

MrRaindrops Lernerfahrung

Auf Einladung von Qiu God möchte ich meine Front-End-Lernerfahrung hier nicht zusammenfassen. Die Zusammenfassung der Master ist bereits vorhanden Einige Links, die ich persönlich für nützlich halte, recherchieren einfach und teilen dann hauptsächlich die Probleme, auf die ich während des Front-End-Lernprozesses gestoßen bin, und die gewonnenen Erkenntnisse, wenn es FE-Anfängern helfen kann, damit anzufangen. Ich gehe davon aus, dass dies die Zielgruppe dieses Artikels ist. Am besten wäre es, wenn sie weniger Umwege machen und bei jedem Schritt wissen, in welche Richtung sie weitergehen. Eine Zusammenfassung und Weitergabe der Meister finden Sie unter FE-Learning, organisiert von Qiu God.

Lassen Sie mich zunächst sagen, dass jeder seine eigene Art haben kann, das Frontend zu lernen. Dieser Artikel dient nur als Referenz. Er ist etwas chaotisch, Sie können ihn also einfach lesen.

Herkunft

Ich bin durch Zufall in die Richtung gekommen, Spiele zu machen. Ich habe Spiele-Websites erstellt, mit kommerziellen Engines wie Unity und Unreal gespielt und an mehreren Spielprototypen herumgebastelt . , aber sobald ich als Forscher ins Labor kam, wurde ich direkt von meinem Tutor zum Schreiben einer Datenanzeigeseite auf Basis der Baidu Map API geschickt Großzügig, aber vorher habe ich nicht viel JS geschrieben und weiß nicht, wie man die Karten-API verwendet. Deshalb habe ich den „Javascript Authoritative Guide“ (Rhinoceros Book) gelesen und dabei auf den „Code“ verwiesen, den die Vorgänger von hinterlassen haben das Labor und schrieb schließlich alle Funktionen aus. Diese Seite gilt als meine Einführung in js und ist auch der Beginn meiner Front-End-Lernroute.

Wenn ich jetzt darüber nachdenke, muss ich mich, obwohl mir die Arbeit im Frontend zugeteilt wurde, immer noch auf das Interesse verlassen, damit ich es weiterhin gut machen kann. Natürlich ist Frontend ein interessantes technisches Gebiet, und Die Community ist jeden Tag sehr „beschäftigt“.

Projekt, nächstes Projekt

Ich persönlich denke, dass man sich in der Anfangsphase des Front-End-Lernens völlig von Büchern lösen und projektorientiert sein kann. Obwohl ich persönlich angefangen habe, aus dem Rhinoceros-Buch zu lesen, sollten Sie nicht wie ich sein, wenn Sie nicht genug Zeit haben oder das Lesen großer Bücher langweilig finden. Wenn Sie sich entscheiden, ein Buch zu lesen, ist es natürlich am besten, alle Beispiele im Buch zu befolgen. Ich hatte vor meinem Studium noch nie Kontakt zu js. Im April, bevor die Schule begann, erzählte mir mein Tutor direkt vom Baidu Map API-Projekt, und dann kamen verschiedene ERP- und Kartendatenanzeigen, obwohl es auf unterschiedliche Weise anders war , es war nicht dasselbe, aber es ist im Grunde alles Frontend-Arbeit. Ich habe auch SSH- und Android-Entwicklung gemacht. Können Sie glauben, dass ich der einzige bin, der das Frontend im gesamten Labor schreibt? Das Backend im Zeitalter von Rich Client SPA ist eine erholsame Schnittstelle, und die Menge an Code befindet sich im Wesentlichen im Frontend. Wie kann ich es so gut schreiben? Während dieser Zeit folgte ich dem Mentor, um Unternehmertum zu erleben, und ich Da wir jeden Tag von 19.00 bis 22.00 Uhr daran arbeiten, kann man von einer Phase schnellen Wachstums ausgehen.

Um eine Technologie zu beherrschen, müssen Sie zunächst ihren allgemeinen Rahmen beherrschen, sich eine Idee ausdenken, die umgesetzt werden kann, eine lauffähige Demo erstellen und dann deren Details verbessern. Wenn die Demo abgeschlossen ist, werden Sie ein Wahrnehmungsverständnis davon haben Wenn Sie es verstehen und das Buch noch einmal lesen, werden Sie viel mehr gewinnen. Ich fing an, von nativem js zu jquery, dann zu extjs und dann zu Angularjs zu schreiben. Von der vom Lehrer festgelegten Technologie bis hin zu meiner eigenen Technologieauswahl übte ich ein Projekt nach dem anderen, genau wie das Bekämpfen von Monstern und das Aktualisieren. Wenn Sie kein Projekt haben, macht es natürlich Spaß und ist erfüllend, ein eigenes Projekt zu erstellen und Ihre eigenen Ideen zu verwirklichen.

Sucht sammeln und Wissensmanagement

Front-End-Lernen hat die Eigenschaft, dass viele Dinge fragmentiert und verstreut sind und Sie sie selbst organisieren, zusammenfassen und zusammenfassen müssen. Vielen großen Meistern auf Weibo und Zhihu zu folgen dient nicht nur dazu, Klatsch und Tratsch anzuhören. Manchmal hinterlassen die Worte der großen Meister einen endlosen Nachgeschmack. Es ist sehr wahrscheinlich, dass ein Wort, das versehentlich erwähnt wird, zu Ihrem nächsten Lernziel wird. Sammeln Sie diese Informationen, nutzen Sie Google sinnvoll, stellen Sie Fragen und denken Sie nach. Genau wie die Sammlungselemente im Spiel ist auch Front-End-Lernen ein „Spiel“ voller Sammlungselemente, aber Sie benötigen ein Wissensmanagement-Tool, das als Inventar und Lager fungiert. Alle Experten, die ich kenne, sind Wissensmanagement Starker Benutzer von Werkzeugen. Ich habe zuvor oneNote verwendet, das zu diesem Zeitpunkt nicht an den Cloud-Speicher gebunden war. Jetzt verwende ich grundsätzlich Evernote und meine Notizen haben sich auf 1.200 angesammelt. Ich habe immer geplant, Delicious für Lesezeichen zu verwenden, da es auf Tag-Management basiert, aber es wurde noch nie verwendet. Natürlich stehen diese Tools nicht im Vordergrund, aber praktische Tools können Ihre Lerneffizienz verbessern. Das Wichtigste ist natürlich, jederzeit eine starke Lernlust aufrechtzuerhalten Ihr Ziel ist es, alles über das Frontend zu verstehen (natürlich nicht alles, denn schließlich ist Ihre Energie begrenzt, und realistisch gesehen ist dies unwahrscheinlich.

Folge Gott

Das scheint nicht sehr kontrollierbar zu sein ... Ich werde nicht näher auf den Chef eingehen. Es hängt bis zu einem gewissen Grad vom Glück ab. Allerdings ist es wichtig, mehr mit den Experten um Sie herum zu kommunizieren. Dieser Experte muss nicht sehr hochkarätig sein, aber er muss eine Leidenschaft für Technologie haben. Als ich im ersten Jahr der Graduiertenschule war, war ich sehr begeistert, als ich jeden Tag um 7 Uhr die Labortür betrat, und dann stellte ich fest, dass da ein Typ war, der früher als ich ankam. Später fand ich heraus, dass dieser Typ morgens ging und nachmittags zurückkam, und der Lehrer war daran gewöhnt. Es stellte sich heraus, dass dieser Typ die ganze Nacht wach blieb, um Code zu schreiben, und dann am Morgen wieder einschlief. Später besprach ich oft Probleme mit diesem Gott und jedes Mal hatte ich das Gefühl, dass meine Erfahrungspunkte stetig stiegen. Dann gibt es noch einen anderen Gott im Labor, den der All-Night-Gott vor ihm als „nur ein entfernter Zweiter, immer hinterherjagend, nie einholend“ beschrieb. Die Eigenschaften der beiden Götter sind, dass sie ein wenig wissen über alles, damit sie alles mit Ihnen besprechen können. Ich habe einen Leseplan für eine Weile erstellt, von C/C über VC/MFC bis hin zu Unix-Netzwerkprogrammierung. Am Ende habe ich Java Core Technology und den C#-Programmierleitfaden gesehen auf MSDN, und ich konnte sehr gut mit den Göttern reden.

Kurz gesagt, diese beiden Götter haben mich in eine Grube gezogen oder sind von einer Grube zur anderen gesprungen. Obwohl sich keiner der beiden Götter mit Front-End beschäftigt, gibt es immer Ähnlichkeiten zwischen den Technologien.

Lesen

Lesen Sie, lesen Sie mehr, lesen Sie gute Bücher. Ich habe in Liu Weipengs Blog eine Formel gesehen: Ihr erstes Monatsgehalt entspricht der Summe der Preise der Fachbücher, die Sie zuvor gekauft (gelesen) haben (Die hier genannten Fachbücher beziehen sich auf die klassischen und anerkannten gute Bücher Buch). Es scheint sinnlos, die Richtigkeit dieser Formel zu diskutieren, aber ihre Rationalität steht außer Zweifel, das heißt, lesen Sie mehr klassische Fachbücher. Das extremste Beispiel: Xu You von Google sagte an meiner Universität, er habe das gesamte TP312-Bücherregal in der Bibliothek gekehrt ... Für Front-End-Klassiker gibt es eine Liste der Front-End-Bücher, die ich gesammelt habe (falls welche fehlen). (Front-End-Klassiker, das ist in Ordnung) Bücher, hinterlassen Sie bitte eine Nachricht und lassen Sie es mich wissen. Wenn möglich, können Sie versuchen, diese Bücher in Vollzeit zu lesen. Wie bereits erwähnt, sind Front-End-Wissenspunkte lose, sammeln verstreute Wissenspunkte, lernen schnell aus Blogs usw. Dies ist nur ein Aspekt des Front-End-Lernens. Wenn Sie ein Wissenssystem tiefgreifend verstehen möchten, müssen Sie seine Besonderheiten verstehen Um ein systematisches Verständnis dafür zu entwickeln, ist das Lesen klassischer Bücher immer noch unerlässlich.

Ich habe das Rhinoceros-Buch von Anfang an zu Ende gelesen und dann einige andere klassische technische Bücher gelesen, die wenig mit dem Front-End zu tun hatten. Später wurde ich durch Laborprojekte und einige kleine Projekte, die ich durchführte, allmählich dazu Ich bin mit dem Front-End-Bereich vertrauter und habe „Javascript-Modus“, „Javascript-Entwurfsmuster“ und „Wartbares Javascript schreiben“ gelesen. Später habe ich etwas über Node gelernt und angefangen, damit einige Gadgets zu erstellen up and run“ und „Mongodb“. „The Authoritative Guide“, aber ich habe das Gefühl, dass ersteres eine Art Falle ist. Zu diesem Zeitpunkt war Pu Lings Buch „Ausführliche und einfache Erklärungen“ noch nicht erschienen. Als es herauskam, ging ich in die Bibliothek, um es auszuleihen und zu lesen Ich hatte das Gefühl, zu wenig gelesen zu haben und muss trotzdem mit Brush fortfahren (siehe Buchliste oben).

Positionierung des Frontends

Die Positionierung des Frontends hängt davon ab, welche Art von Wissen und Fähigkeiten Sie erwerben müssen, und bestimmt, worauf Sie in der technischen Welt besonders sensibel sein müssen. Wenn Sie der Meinung sind, dass es beim Frontend nur darum geht, Seiten zu schneiden und Interaktion und visuelle Anforderungen zu realisieren, dann befindet sich Ihr Verständnis des Frontends noch im Anfangsstadium. Während des Abschlussinterviews mit Alibaba habe ich dem Prüfer folgende Frage gestellt: Die Front-End-Technologie verändert sich mit jedem Tag, der Anwendungsbereich wird immer größer und die Standards werden immer umfangreicher. Es scheint, dass jeder Tentakel weit reichen kann . Wie gibt man der Frontpartie eine passende Position? Der Prüfer hat es für mich lange analysiert und es dann in einem Satz zusammengefasst: Es ist die Verbindung zwischen Benutzern und der Website, der Schöpfer der Benutzererfahrung (das ist nicht das ursprüngliche Wort, aber das ist die allgemeine Bedeutung). Mit anderen Worten, das ultimative Ziel des Frontends besteht tatsächlich darin, eine Benutzererfahrung zu schaffen und die Benutzererfahrung zu verbessern, wobei die Benutzererfahrung im Mittelpunkt steht . Unabhängig davon, ob Sie mit dem Interaktionsdesign, der Leistungsoptimierung oder der Verbesserung des Workflows zur Verbesserung der Workflow-Effizienz beginnen, geht es letztendlich um die Schaffung und Verbesserung des Benutzererlebnisses, und dies muss sich letztendlich im Benutzererlebnis widerspiegeln. Ich denke, diese Zusammenfassung ist sehr vernünftig (natürlich ist der Begriff „Benutzererfahrung“ zu weit gefasst und betrifft nicht nur die Kategorie der Front-End-Ingenieure. Beispielsweise verbessert die Optimierung eines Datenverarbeitungsprozesses bei der Entwicklung des Backends die Gesamtleistung , was auch für die Benutzer eine Verbesserung des Benutzererlebnisses darstellt.

Die heutigen Front-End-Ingenieure werden unweigerlich mit viel tiefergehenden Problemen in Kontakt kommen als mit dem Schneiden von Seiten, der Implementierung visueller Anforderungen und der Implementierung von Interaktionen in einer bestimmten Phase, wie z. B. Front-End-Automatisierung, Bildprogrammierung, Leistungsoptimierung usw ., und etwas weiter zurückschieben Es handelt sich um PHP/JSP/ASP/nodeJs. In der Vergangenheit gehörten Back-End-Vorlagen im Allgemeinen zur Back-End-Kategorie. Jetzt, mit der Entwicklung der Front-End-Architektur, werden Sie möglicherweise dazu aufgefordert Schreiben Sie Back-End-Vorlagencode, der die Verwendung von Back-End-Sprachen (PHP/Java/C# usw.) erfordert. Dies ist das sogenannte große Front-End (dies ist jedoch der Fall). Nicht im Widerspruch zur Positionierung des Frontends. Das große Frontend befasst sich immer noch mit den Teilen, die mit Benutzern in Kontakt kommen, und optimiert dennoch das Benutzererlebnis. Die vielleicht am weitesten verbreitete oder diskutierte Technologie ist Node. Tatsächlich kann jede dieser drei BAT-Unternehmen ausgewählt werden. Baidu verwendet mehr PHP und Alibaba verwendet mehr Node.

Onkel Yu erwähnte in seinem Blog, dass das sogenannte Full-End horizontal und der Full-Stack vertikal ist. Vollständiges Ende Das heißt, alle Terminals sind Front-Ends, da sie alle mit der Benutzererfahrung zusammenhängen und in direktem Kontakt mit den Benutzern stehen. Um sich an die Multi-Terminal-Entwicklung anzupassen, müssen Sie Ihr Wissen über die Android-Entwicklung und die iOS-Entwicklung auf der Grundlage von Web-Front-Ends erweitern. Aufgrund der Beliebtheit hybrider Entwicklungsmethoden sind die Fähigkeiten für die Verwendung der nativen Sprachentwicklung glücklicherweise nicht vorhanden -Tiefe. .

Full Stack gilt als der am besten geeignete Entwicklungstyp für Start-up-Unternehmen. Im Großen und Ganzen wird davon ausgegangen, dass er von der Entwicklung bis zum Betrieb und der Wartung reicht . Die meisten Leute werden sich wahrscheinlich nicht in diese Richtung entwickeln wollen. Wenn Sie in diesem Sinne ein Full-Stack-Entwickler werden möchten, müssen Sie meinen Artikel möglicherweise nicht lesen Full-Stack im engeren Sinne bezieht sich speziell auf die Verwendung der js-Sprache zum Schreiben vom Front-End bis zum Back-End, das auf NodeJs basiert. Das Front-End und das Back-End verfügen über eine einheitliche Sprache und ein einheitliches Programmiermodell und teilen sogar dasselbe Satz Code. Um mehr über die Full-Stack-Entwicklung zu erfahren, können Sie Yu Bos Artikel über Full-Stack-Ingenieure lesen.

Das Obige ist mein oberflächliches Verständnis des Front-Ends und der daraus abgeleiteten technischen Routen. Es ist sehr wichtig, ein Gebiet kennenzulernen und seine allgemeine Richtung und Trends zu verstehen. Wenn Sie außerdem ein umfassendes Verständnis der Front-End-Lernrichtung und des Karrierewachstumspfads erhalten möchten, wird empfohlen, diesen von Ba Chi zusammengefassten Front-End-Entwicklungsvortrag zu lesen.

Endlich

Stellen Sie ein paar hilfreiche Links für Front-End-Lernen und Interviews bereit:

• Front-End-Entwickler-Interview-Fragensammlung
• Zusammenfassung der Front-End-Fähigkeiten (JacksonTian)
• Eine weitere Übersichtstabelle für Front-End-Fähigkeiten
• Dinge zum Frontend (Buchliste)

Vorschläge von yiyizym im Byr-Forum

Im Vergleich zum Grunzen ist das Erlernen des Schluckens einfacher

Für SPA empfehlen wir backbone.js und backbone.marionette.js

FQ Machen Sie sich keine Sorgen, geben Sie einfach zehn Yuan aus, um rote Aprikosen im Wert von einem Monat zu kaufen.

Es ist kein Problem, diese Dinge zu lernen, nachdem man eine solide Grundlage gelegt hat.

HTML Es gibt nicht viel zu sagen, ich werde HTML5 lernen, wenn ich Zeit habe.

Css Versuchen Sie, die Dokumentation so oft wie möglich zu lesen, da viele chinesische Materialien unterschiedliche Meinungen haben und zu viel Lesen Sie verwirrt.

Es gibt eine Website, auf der Sie den Unterstützungsstatus von HTML/CSS-Tags und -Attributen in verschiedenen Browsern überprüfen können, was sehr nützlich ist.

Javascript Schauen Sie sich einfach JavaScript Advanced Programming an. Aber nachdem man so ein dickes Buch gelesen hat, wird man es vergessen. Hier ist ein guter Artikel zur Erläuterung der Kernkonzepte von JavaScript: Objekt/Prototypkette/Konstruktor/Ausführungskontext/Bereichskette/Abschluss/dies.

Wenn Sie Zeit haben, können Sie sich Ecmascript 6 ansehen, das voraussichtlich im Juni nächsten Jahres veröffentlicht wird. Auf der Website von Ruan Yifeng finden Sie einführende Informationen.

jquery verfügt über viele APIs, die leicht auf dieser Website zu finden sind. Nehmen Sie sich Zeit, um die Verwendung von JQuery Deferred herauszufinden.

Installieren Sie weitere Plug-Ins für Sublimetext, z. B. zur Überprüfung auf Codefehler, zum Erstellen neuer Verzeichnisdateien und zum Organisieren von Code.

Umfassende Kategorie

综合类	地址
前端知识体系	http://www.cnblogs.com/sb19871023/p/3894452.html
前端知识结构	https://github.com/JacksonTian/fks
Web前端开发大系概览	https://github.com/unruledboy/WebFrontEndStack
Web前端开发大系概览-中文版	http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
Web Front-end Stack v2.2	Web Front-end Stack v2.2
免费的编程中文书籍索引	https://github.com/justjavac/free-programming-books-zh_CN
前端书籍	https://github.com/dypsilon/frontend-dev-bookmarks
前端免费书籍大全	https://github.com/vhf/free-programming-books
前端知识体系	http://www.cnblogs.com/sb19871023/p/3894452.html
免费的编程中文书籍索引	https://github.com/justjavac/free-programming-books-zh_CN
智能社 - 精通JavaScript开发	http://study.163.com/course/introduction/224014.htm
重新介绍 JavaScript（JS 教程）	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
麻省理工学院公开课：计算机科学及编程导论	http://v.163.com/special/opencourse/bianchengdaolun.html
JavaScript中的this陷阱的最全收集--没有之一	http://segmentfault.com/a/1190000002640298
JS函数式编程指南	https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
JavaScript Promise迷你书（中文版）	http://liubin.github.io/promises-book
腾讯移动Web前端知识库	https://github.com/AlloyTeam/Mars
Front-End-Develop-Guide 前端开发指南	https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
前端开发笔记本	https://li-xinyang.gitbooks.io/frontend-notebook/content
大前端工具集 - 聂微东	https://github.com/nieweidong/fetool
前端开发者手册	https://dwqs.gitbooks.io/frontenddevhandbook/content

Einstiegsklasse

入门类	地址
前端入门教程	http://www.cnblogs.com/jikey/p/3613082.html
瘳雪峰的Javascript教程	http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
jQuery基础教程	http://www.imooc.com/view/11
前端工程师必备的PS技能——切图篇	http://www.imooc.com/view/506
结合个人经历总结的前端入门方法	https://github.com/qiu-deqing/FE-learning

Werkzeuge

Werkzeugklasse Adresse

工具类	地址
前端人的俱乐部	http://f2er.club/ 真可以解放你的收藏夹
如何优雅地使用Sublime Text	http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
新编码神器Atom使用纪要	http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
css sprite 雪碧图制作	http://www.imooc.com/learn/93
版本控制入门 – 搬进 Github	http://www.imooc.com/learn/390
Grunt-beginner前端自动化工具	http://www.imooc.com/learn/30
IntelliJ IDEA 简体中文专题教程	https://github.com/judasn/IntelliJ-IDEA-Tutorial
Webstorm,InterllIdea,Phpstorm	http://t.cn/8kZZ1Uy
SublimeText	https://github.com/jikeytang/sublime-text
Atom	https://atom.io
visual studio code	https://code.visualstudio.com

Club für Front-End-Leute

http://f2er.club/ kann Ihre Favoriten wirklich befreien So nutzen Sie Sublime Text elegant http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/# Nutzungsminuten des neuen Codierungsartefakts Atom http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/ CSS-Sprite-Sprite-Produktion http://www.imooc.com/learn/93 Erste Schritte mit der Versionskontrolle – Umstieg auf Github http://www.imooc.com/learn/390 Grunt-Anfänger-Frontend-Automatisierungstool http://www.imooc.com/learn/30 IntelliJ IDEA Spezial-Tutorial für vereinfachtes Chinesisch https://github.com/judasn/IntelliJ-IDEA-Tutorial Webstorm,InterllIdea,Phpstorm http://t.cn/8kZZ1Uy SublimeText https://github.com/jikeytang/sublime-text Atom https://atom.io Visual Studio-Code https://code.visualstudio.com Umfassende Effektsuchplattform

综合效果搜索平台	地址
JavaScript 资源大全中文版	https://github.com/jobbole/awesome-javascript-cn
100 超全的web开发工具和资源	https://xituqu.com/170.html
zoommyapp.com	http://zoommyapp.com/ 高质量图库
unsplash.com	https://unsplash.com/ 高质量图库
www.pinterest.com	https://www.pinterest.com/ 图库
New Old Stock	http://nos.twnsnd.co 复古风图库
效果网	http://www.jq22.com
花瓣网	http://huaban.com/
优美图	http://www.topit.me/
codepen	http://codepen.io/
摄图网	http://699pic.com/
常用的JavaScript代码片段	http://microjs.com

Umfassende Effektsuchplattform Adresse

Chinesische Version der JavaScript-Ressourcensammlung

https://github.com/jobbole/awesome-javascript-cn 100 umfassende Webentwicklungstools und -ressourcen https://xituqu.com/170.html zoommyapp.com http://zoommyapp.com/ Hochwertige Bildergalerie unsplash.com https://unsplash.com/ Hochwertige Bildergalerie www.pinterest.com https://www.pinterest.com/ Galerie Neuer alter Bestand http://nos.twnsnd.co Retro-Stil-Galerie Effektnetzwerk http://www.jq22.com Petals.com http://huaban.com/ Wunderschöne Bilder http://www.topit.me/ codepen http://codepen.io/ Fotonetzwerk http://699pic.com/ Häufig verwendete JavaScript-Code-Snippets http://microjs.com

周报类	地址
奇舞周刊	http://old.75team.com/weekly/
码农周刊	http://weekly.manong.io
WEB前端开发	http://www.css88.com
A JS tip per day!	http://www.jstips.co
腾讯全端 AlloyTeam	http://www.alloyteam.com/webdevelop/
平安科技移动开发二队技术周报	https://github.com/PaicHyperionDev/MobileDevWeekly

Team-Blog|Wöchentlicher Bericht Wöchentlicher Bericht Adresse QIWU WÖCHENTLICH http://old.75team.com/weekly/ Coder Weekly http://weekly.manong.io WEB-Frontend-Entwicklung http://www.css88.com Ein JS-Tipp pro Tag! http://www.jstips.co Tencent AlloyTeam http://www.alloyteam.com/webdevelop/ Technischer Wochenbericht des Ping An Technology Mobile Development Teams 2 https://github.com/PaicHyperionDev/MobileDevWeekly

Entwicklungszentrum

开发中心	地址
mozilla js参考	https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
chrome开发中心（chrome的内核已转向blink）	https://developer.chrome.com/extensions/api_index.html
safari开发中心	https://developer.apple.com/library/safari/navigation
microsoft js参考	https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
js秘密花园	http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
js秘密花园	http://bonsaiden.github.io/JavaScript-Garden/zh
w3help	http://www.w3help.org 综合Bug集合网站

Nodejs

Nodejs	地址
nodejs 篇幅比较巨大	http://liuqing.pw
Node.js 包教不包会	https://github.com/alsotang/node-lessons
篇幅比较少	http://www.rainweb.cn/article/category/Nodejs
node express 入门教程	http://www.w3cfuns.com/article-5598538-1-1.html
nodejs定时任务	http://my.oschina.net/u/568264/blog/193773
一个nodejs博客	http://60sky.com
【NodeJS 学习笔记04】新闻发布系统	http://www.cnblogs.com/yexiaochai/p/3536547.html
过年7天乐，学nodejs 也快乐	http://www.cnblogs.com/qqloving/p/3541099.html
七天学会NodeJS	https://github.com/nqdeng/7-days-nodejs
Nodejs学习笔记（二）--- 事件模块	http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
nodejs入门	http://www.cnblogs.com/liusuqi/p/3735491.html
angularjs nodejs	https://github.com/zensh/jsgen
从零开始nodejs系列文章	http://blog.fens.me/series-nodejs
理解nodejs	http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
nodejs事件轮询	http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop
node入门	http://www.nodebeginner.org/index-zh-cn.html
nodejs cms	http://ourjs.com/detail/53e1f281c5910a9806000001
Node初学者入门，一本全面的NodeJS教程	http://ourjs.com/detail/529ca5950cb6498814000005
NodeJS的代码调试和性能调优	http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line

Umfassende API

综合API	地址
javascripting	http://www.javascripting.com
各种流行库搜索	http://microjs.com
runoob.com-包含各种API集合	http://www.runoob.com
开源中国在线API文档合集	http://tool.oschina.net/apidocs
devdocs	http://devdocs.io 英文综合API网站

Ecmascript

Ecmascript	地址
Understanding ECMAScript 6 - Nicholas C. Zakas	https://leanpub.com/understandinges6/read
exploring-es6	https://leanpub.com/exploring-es6/read
exploring-es6翻译	https://github.com/es6-org/exploring-es6
exploring-es6翻译后预览	http://es6-org.github.io/exploring-es6
阮一峰 es6	http://es6.ruanyifeng.com
阮一峰 Javascript	http://javascript.ruanyifeng.com
ECMA-262，第 5 版	http://yanhaijing.com/es5
es5	http://es5.github.io

Js-Vorlage

Js template	地址
template-chooser	http://garann.github.io/template-chooser
artTemplate	https://github.com/aui/artTemplate
tomdjs	https://github.com/aui/tmodjs/blob/master/README.md
淘宝模板juicer模板	http://juicer.name/docs/docs_zh_cn.html
Fxtpl v1.0 繁星前端模板引擎	http://koen301.github.io/fxtpl
laytpl	http://laytpl.layui.com
mozilla - nunjucks	https://github.com/mozilla/nunjucks
Juicer	https://github.com/PaulGuo/Juicer
dustjs	http://akdubya.github.io/dustjs
etpl	http://ecomfe.github.io/etpl

HTML5(HTML)

HTML(HTML5)	地址
深入理解HTML5标签	https://segmentfault.com/a/1190000002695791
如何写出高效率的HTML	https://segmentfault.com/a/1190000002680822
HTML meta标签总结与属性使用介绍	https://segmentfault.com/a/1190000004279791
戏说HTML5	http://www.cnblogs.com/dojo-lzz/p/5059316.html

CSS3(CSS)

CSS Adresse CSS-Syntaxreferenz http://tympanus.net/codrops/css_reference

CSS	地址
CSS 语法参考	http://tympanus.net/codrops/css_reference
如何编写可维护的CSS	https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS3动画手册	http://isux.tencent.com/css3/index.html
腾讯css3动画制作工具	http://isux.tencent.com/css3/tools.html
志爷css小工具集合	http://linxz.github.io/tianyizone
css3 js 移动大杂烩	http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
bouncejs 触摸库	http://bouncejs.com
css3 按钮动画	http://fian.my.id/Waves
animate.css	http://daneden.github.io/animate.css
全局CSS的终结(狗带 [译]	http://www.alloyteam.com/2015/10/8536
browserhacks	http://browserhacks.com

So schreiben Sie wartbares CSS https://github.com/chadluo/CSS-Guidelines/blob/master/README.md CSS3-Animationshandbuch http://isux.tencent.com/css3/index.html Tencent CSS3-Animationsproduktionstool http://isux.tencent.com/css3/tools.html Zhiye CSS-Gadget-Sammlung http://linxz.github.io/tianyizone css3 js mobiles Sammelsurium http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb bouncejs Touch-Bibliothek http://bouncejs.com CSS3-Schaltflächenanimation http://fian.my.id/Waves animate.css http://daneden.github.io/animate.css Das Ende des globalen CSS (Hundegürtel [Übersetzung] http://www.alloyteam.com/2015/10/8536 Browserhacks http://browserhacks.com

Angularjs

Angularjs	地址
Angular.js 的一些学习资源	https://github.com/dolymood/AngularLearning
angularjs中文社区	http://angularjs.cn
Angularjs源码学习	http://www.cnblogs.com/xuwenmin888/p/3739096.html
Angularjs源码学习	http://www.ifeenan.com/?c=AngularJS
angular对bootstrap的封装	http://angular-ui.github.io/bootstrap
angularjs nodejs	https://cnodejs.org/topic/51404e0f069911196d2e3923
吕大豹 Angularjs	http://www.cnblogs.com/lvdabao/tag/AngularJs
AngularJS 最佳实践	http://www.infoq.com/cn/news/2013/02/angular-web-app
Angular的一些扩展指令	http://www.lovelucy.info/angularjs-best-practices.html
Angular数据绑定原理	https://github.com/Pasvaz/bindonce
一些扩展Angular UI组件	https://github.com/angular-ui
Ember和AngularJS的性能测试	http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
带你走近AngularJS - 基本功能介绍	http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
Angularjs开发指南	http://angular.duapp.com/docs/guide
Angularjs学习	http://www.cnblogs.com/amosli/p/3710648.html
不要带着jQuery的思维去学习AngularJS	http://www.rainweb.cn/article/angularjs-jquery.html
angularjs 学习笔记	http://wangjiatao.diandian.com/?tag=angularjs
angularjs 开发指南	http://www.angularjs.cn/T008
angularjs 英文资料	https://github.com/jmcunningham/AngularJS-Learning
angular bootstrap	http://angular-ui.github.io/bootstrap
angular jq mobile	https://github.com/opitzconsulting/jquery-mobile-angular-adapter
angular ui	http://mgcrea.github.io/angular-strap
整合jQuery Mobile AngularJS经验谈	http://www.tuicool.com/articles/7ZZVr2
有jQuery背景，该如何用AngularJS编程思想	http://blog.jobbole.com/46589/
AngularJS在线教程	http://each.sinaapp.com/angular
angular学习笔记	http://www.zouyesheng.com/angular.html

Reagieren

React	地址
react.js 中文论坛	http://www.react-china.org
react.js 官方网址	https://facebook.github.io/react/index.html
react.js 官方文档	https://facebook.github.io/react/docs/getting-started.html
react.js material UI	http://material-ui.com/#
react.js TouchstoneJS UI	http://touchstonejs.io
react.js amazeui UI	http://amazeui.org/react
React 入门实例教程 - 阮一峰	http://www.ruanyifeng.com/blog/2015/03/react.html
React Native 中文版	http://wiki.jikexueyuan.com/project/react-native
Webpack 和 React 小书 - 前端乱炖	http://www.html-js.com/article/Fakefish 3053
Webpack 和 React 小书 - gitbook	https://fakefish.github.io/react-webpack-cookbook
webpack	https://github.com/webpack/webpack
Webpack，101入门体验	http://html-js.com/article/3009
webpack入门教程	http://html-js.com/article/3113
基于webpack搭建前端工程解决方案探索	http://segmentfault.com/a/1190000003499526
React原创实战视频教程	http://www.piliyu.com

vue

vue	地址
Vue	http://cn.vuejs.org
Vue 论坛	http://forum.vuejs.org
Vue 入门指南	http://www.cnblogs.com/aaronjs/p/3660102.html
Vue 的一些资源索引	http://segmentfault.com/a/1190000000411057
awesome-vue	https://github.com/vuejs/awesome-vue

Mobile API

移动端API	地址
99移动端知识集合	https://github.com/jtyjty99999/mobileTech
移动端前端开发知识库	https://github.com/AlloyTeam/Mars
移动前端的一些坑和解决方法（外观表现）	http://caibaojian.com/mobile-web-bug.html
【原】移动web资源整理	http://www.cnblogs.com/PeunZhang/p/3407453.html
zepto 1.0 中文手册	http://mweb.baidu.com/zeptoapi
zepto 1.0 中文手册	http://www.html-5.cn/Manual/Zepto
zepto 1.1.2	http://www.css88.com/doc/zeptojs_api
zepto 中文注释	http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
jqmobile 手册	http://app-framework-software.intel.com/api.php
移动浏览器开发集合	https://github.com/maxzhang/maxzhang.github.com/issues
移动开发大杂烩	https://github.com/hoosin/mobile-web-favorites

jQuery

jQuery	地址
jQuery API 中文文档	http://www.jquery123.com
hemin 在线版	http://hemin.cn/jq
css88 jq api	http://www.css88.com/jqapi-1.9/on
css88 jqui api	http://www.css88.com/jquery-ui-api
学习jquery	http://learn.jquery.com
jquery 源码查找	http://james.padolsey.com/jquery
Web前端资源汇总(jQuery,Js,Css3等)	http://www.cnblogs.com/jihua/p/webfront.html

D3

D3	地址
d3 Tutorials	https://github.com/mbostock/d3/wiki/Tutorials
Gallery	https://github.com/mbostock/d3/wiki/Gallery
lofter	http://datavisual.lofter.com/post/40cf3a_188e535
iteye	http://alanland.iteye.com/blog/1878595
ruanyifeng	http://javascript.ruanyifeng.com/library/d3.html

Anforderungen

Requriejs	地址
Javascript模块化编程（一）：模块的写法	http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript模块化编程（二）：AMD规范	http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
Javascript模块化编程（三）：require.js的用法	http://www.ruanyifeng.com/blog/2012/11/require_js.html
RequireJS入门（一）	http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
RequireJS入门（二）	http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
RequireJS进阶（三）	http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
requrie源码学习	http://www.cnblogs.com/yexiaochai/p/3632580.html
requrie 入门指南	http://www.oschina.net/translate/getting-started-with-the-requirejs-library
requrieJS 学习笔记	http://www.cnblogs.com/yexiaochai/p/3214926.html
requriejs 其一	http://cyj.me/why-seajs/requirejs/
require backbone结合	http://www.cnblogs.com/yexiaochai/p/3221081.html

Seajs

Seajs	地址
seajs	http://seajs.org
seajs 中文手册	http://cyj.me/why-seajs/zh

Weniger, frech

Less,sass	地址
sass	http://www.w3cplus.com/sassguide
sass教程-sass中国	http://www.sass.hk
Sass 中文文档	http://sass.bootcss.com
less	http://less.bootcss.com

Abschlag

Markdown	地址
Markdown 语法说明 (简体中文版	http://wowubuntu.com/markdown
markdown入门参考	https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
gitbook	https://www.gitbook.com 国外的在线markdown可编辑成书
mdeditor	https://www.zybuluo.com/mdeditor 一款国内的在线markdown编辑器
stackedit	https://stackedit.io 国外的在线markdown编辑器，功能强大，同步云盘
mditor	http://bh-lay.github.io/mditor 一款轻量级的markdown编辑器
lepture-editor	https://github.com/lepture/editor
markdown-editor	https://github.com/jbt/markdown-editor
作业部落	https://www.zybuluo.com 功能强大，速度流畅，全平台同步

Kompatibilität

Kompatibilität	Adresse
ESMA-Kompatibilitätsliste	http://kangax.github.io/compat-table/es6
W3C CSS-Validierungsdienst	http://jigsaw.w3.org/css-validator/validator.html.zh-cn
caniuse	http://caniuse.com/#index
csscreator	http://csscreator.com/properties
Microsoft