100 days of code frontend
1.0.0
Hinweis: Diese Ressource ist alt! Ich werde dieses Repository bis Ende Juli 2021 archivieren, da ich der Meinung bin, dass viele der Empfehlungen hier für das Lernen von Front-End-Webentwicklung im Jahr 2021 veraltet sind.
Bitte unterstützen Sie dieses Repo, indem Sie ihm einen Stern oben auf der Seite geben, und folgen Sie mir für weitere Ressourcen!
Möchten Sie mehr über Frontend -Entwicklung erfahren? Halten:
Dies ist ein etwas einfühlsamer Lehrplan für das Lernen von Front-End-Entwicklung während #100daysofCode. Da es eine breite Palette von Front-End-Entwicklungsthemen abdeckt, kann es eher als einen Kurs im "Umfrage" -Stil als als tiefe Eintauchung in einen Bereich betrachtet werden. Im Idealfall ist Ihr Imbiss aus dem Abschluss dieses Lehrplans eine gewisse Vertrautheit mit jedem Thema und der Fähigkeit, bei Bedarf in Zukunft problemlos tiefer in jedem Bereich zu tauchen.
Dieser Lehrplan wurde von Kamran Ahmeds modernen Frontend -Entwickler -Roadmap erheblich beeinflusst. Bitte überprüfen Sie es-es ist ausgezeichnet.
Hinweis : Ich weiß, dass Front-End-Entwicklung viele Menschen für viele Menschen viele verschiedene Dinge bedeutet! Wenn Sie ein Front-End-Entwickler sind und der Meinung sind, dass dieser Leitfaden verbessert werden könnte, teilen Sie es mir bitte mit, indem Sie ein Problem aufwerfen, wie im Abschnitt mit beitragender Abschnitt beschrieben. Danke schön!
Dank einiger unglaublicher Mitwirkender wurde dieser Lehrplan in die folgenden Sprachen übersetzt!
Das zugrunde liegende Prinzip dieses Repositorys ist Timeboxing. Wenn Sie in der Vergangenheit in der Vergangenheit versucht haben, Webentwicklung oder ähnliche Fähigkeiten zu erlernen, haben Sie wahrscheinlich erlebt, dass Sie ein Kaninchenloch zu einem bestimmten Thema unterwegs haben. Dieses Repository zielt darauf ab, jeder Technologie eine bestimmte Anzahl von Tagen zuzuweisen, und ermutigt Sie, zum nächsten zu wechseln, sobald diese Anzahl der Tage abgelaufen ist.
Es wird erwartet, dass jeder bei Beginn dieser Herausforderung auf einem anderen Maß an Kompetenz ist, und das ist in Ordnung. Anfänger und fachkundige Front-End-Entwickler können in jedem dieser Bereiche von der Zeitbox-Praxis profitieren.
Die empfohlenen täglichen Aktivitäten sind wie folgt:
Im Folgenden finden Sie einige Informationen zu jedem Thema im Lehrplan sowie einige Ideen/Anleitungen darüber, was für jeden zu tun ist. Inspiration für Projekte neben diesem Lehrplan finden Sie im Abschnitt "Projektideen".
Im Rahmen des Timeboxing -Prinzips ist es in Ordnung, wenn Sie nicht alle Elemente in den Abschnitten "Lernbereiche und Ideen" durchkommen. Sie sollten sich stattdessen darauf konzentrieren, das Beste aus der Anzahl der zugewiesenen Tagen für jeden Bereich herauszuholen und dann weiterzumachen.
Hypertext Markup Language (HTML) ist die Standard -Markup -Sprache zum Erstellen von Webseiten und Webanwendungen. Mit Cascading Style Sheets (CSS) und JavaScript bildet es eine Triade von Eckpfeiler -Technologien für das World Wide Web. Webbrowser empfangen HTML -Dokumente von einem Webserver oder von lokalem Speicher und rendern die Dokumente in Multimedia -Webseiten. HTML beschreibt die Struktur einer Webseite semantisch und enthielt ursprünglich Hinweise für das Erscheinungsbild des Dokuments. (Quelle: Wikipedia)
HTML ist wirklich die Grundlage für die Webentwicklung. Selbst in den von JavaScript-basierten Frameworks schreiben Sie am Ende HTML in der einen oder anderen Form.
Cascading Style Sheets (CSS) ist eine Style Sheet -Sprache, die zur Beschreibung der Präsentation eines Dokuments, das in einer Markup -Sprache wie HTML geschrieben wurde, verwendet wird. CSS ist neben HTML und JavaScript eine Eckpfeiler -Technologie des World Wide Web. CSS wurde entwickelt, um die Trennung von Präsentation und Inhalten einschließlich Layout, Farben und Schriftarten zu ermöglichen. Diese Trennung kann die Zugänglichkeit in den Inhalten verbessern, mehr Flexibilität und Steuerung in der Spezifikation der Präsentationsmerkmale bieten, mehrere Webseiten ermöglichen, die Formatierung zu teilen, indem die relevanten CSS in einer separaten .CSS -Datei angegeben und die Komplexität und Wiederholung im Strukturinhalt verringert werden. (Quelle: Wikipedia)
CSS ist ein weiterer wesentlicher Bestandteil der Webentwicklung. Während es hauptsächlich zum Stil und Position von HTML -Elementen verwendet wird, ist es zunehmend zu dynamischeren Aufgaben (z. B. Animationen) in der Lage geworden, die einst von JavaScript behandelt werden würde.
<style> Tags<link>JavaScript, oft als JS abgekürzte, ist eine hochrangige, interpretierte Programmiersprache, die der ECMAScript-Spezifikation entspricht. Es ist eine Sprache, die auch als dynamisch, schwach typisiert, prototypbasiert und Multi-Paradigma charakterisiert ist. Neben HTML und CSS ist JavaScript eine der drei Kerntechnologien des World Wide Web. JavaScript ermöglicht interaktive Webseiten und ist somit ein wesentlicher Bestandteil von Webanwendungen. Die überwiegende Mehrheit der Websites nutzt es und alle großen Webbrowser verfügen über eine dedizierte JavaScript -Engine, um sie auszuführen. (Quelle: Wikipedia)
JavaScript ist in der Front-End-Welt immer wichtiger geworden. Während es einst hauptsächlich verwendet wurde, um die Seiten dynamisch zu machen, ist es jetzt die Grundlage vieler Front-End-Frameworks. Diese Frameworks erledigen viele Aufgaben, die früher vom Back-End behandelt wurden (z. B. Routing und Anzeigen verschiedener Ansichten).
<script> Tag und PlatzierungJQuery ist eine schnelle, kleine und featurereiche JavaScript-Bibliothek. Es macht Dinge wie das HTML-Dokument durchquert und Manipulation, Ereignishandhabung, Animation und Ajax viel einfacher mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat JQuery die Art und Weise verändert, wie Millionen von Menschen JavaScript schreiben. (Quelle: jQuery.com)
Nachdem Sie einige Zeit mit einfacher (auch "Vanille" JavaScript bezeichnet haben, finden Sie möglicherweise einige Aufgaben etwas umständlich, insbesondere diejenigen, die sich auf den Zugriff auf und die Manipulation von HTML -Elementen beziehen. JQuery war für eine ganze Weile die Anlaufstelle für diese Art von Aufgaben, die in verschiedenen Browsern einfacher und konsistent wurden. Heutzutage ist JQuery aufgrund von Fortschritten in Vanille -JavaScript, CSS und neueren JavaScript -Frameworks nicht unbedingt "obligatorisches" Lernen (wir werden uns später mit Frameworks ansehen). Trotzdem wäre es vorteilhaft, sich ein wenig Zeit zu nehmen, um etwas zu lernen und es auf ein kleines Projekt anzuwenden.
Responsive Web Design (RWD) ist ein Ansatz für das Webdesign, mit dem Webseiten auf einer Vielzahl von Geräten und Fenstern oder Bildschirmgrößen gut abschneiden. Jüngste Arbeiten berücksichtigen auch die Proximität der Betrachter als Teil des Betrachtungskontexts als Erweiterung für RWD. Inhalte, Design und Leistung sind auf allen Geräten erforderlich, um die Benutzerfreundlichkeit und Zufriedenheit zu gewährleisten. Eine mit RWD entwickelte Site passt das Layout an die Betrachtungsumgebung an, indem flüssige, proportionale Gitter, flexible Bilder und CSS3-Medienabfragen eine Erweiterung der @media-Regel verwendet werden. (Quelle: Wikipedia)
Bei Responsive Webdesign geht es darum, Webanwendungen auf allen Gerätearten ordnungsgemäß aussehen und funktionieren. Ein schnelles und schädliches Beispiel wäre, dass eine Website sowohl in einem Desktop-Webbrowser als auch in einem Mobiltelefonbrowser ordnungsgemäß aussehen und funktionieren sollte. Ein Verständnis des reaktionsschnellen Designs ist für jeden Front-End-Entwickler von entscheidender Bedeutung!
Die Zugänglichkeit von Web ist die integrative Praxis, sicherzustellen, dass es keine Hindernisse gibt, die die Interaktion mit oder auf den Zugriff auf Websites im World Wide Web durch Menschen mit Behinderungen verhindern. Wenn Websites korrekt entworfen, entwickelt und bearbeitet werden, haben im Allgemeinen alle Benutzer gleichermaßen Zugriff auf Informationen und Funktionen. (Quelle: Wikipedia)
Barrierefreiheit, oft als A11Y geschrieben, ist eines der wichtigsten Themen in der Front-End-Webentwicklung, aber es scheint oft einen kurzen Schrumpf zu bekommen. Das Erstellen von zugänglichen Webanwendungen ist nicht nur ethisch solide, sondern macht auch viel geschäftlicher Sinn angesichts des zusätzlichen Publikums, das Ihre Anwendungen anzeigen kann, wenn sie zugänglich sind.
Git ist ein kostenloses und open -Source -Distributed -Versionskontrollsystem, das alles von kleinen bis sehr großen Projekten mit Geschwindigkeit und Effizienz abwickelt. (Quelle: git-scm.com)
Version/Codekontrolle ist ein wesentlicher Bestandteil des Toolkits eines Webentwicklers. Es gibt eine Reihe verschiedener Versionskontrollsysteme, aber Git ist im Moment bei weitem am weitesten verbreitet. Sie können (und sollten!) Sie es verwenden, um Ihre Projekte zu verfolgen, wie Sie lernen!
Node.js ist eine open-source-plattformübergreifende JavaScript-Laufzeitumgebung, die JavaScript-Code außerhalb eines Browsers ausführt. JavaScript wird in erster Linie für clientseitige Skripts verwendet, in denen Skripte, die in JavaScript geschrieben wurden, in die HTML einer Webseite eingebettet sind und die clientseitig von einer JavaScript-Engine im Webbrowser des Benutzers ausführen. Mit node.js können Entwickler JavaScript verwenden, um Befehlszeilen-Tools zu schreiben und serverseitig zu skriptieren-rund um die serverende Skripts-Seite, um dynamische Webseiteninhalte zu erstellen, bevor die Seite an den Webbrowser des Benutzers gesendet wird. Infolgedessen stellt Node.js ein Paradigma "JavaScript überall" dar, das die Entwicklung von Webanwendungen um eine einzelne Programmiersprache vereint, anstatt verschiedene Sprachen für serverseitige und clientseitige Skripte. (Quelle: Wikipedia)
Während Node.js in der Regel als Back-End-Lösung bezeichnet wird, wird er häufig verwendet, um die Front-End-Entwicklung zu unterstützen. Dies geschieht auf verschiedene Arten, einschließlich Dingen wie Ausführen von Build -Tools, Tests und Linie (alle bald abgedeckt!). Node Package Manager (NPM) ist eine weitere großartige Funktion des Knotens und kann verwendet werden, um Abhängigkeiten Ihres Projekts zu verwalten (dh Code -Bibliotheken, auf die Ihr Projekt möglicherweise stützt - JQuery ist ein Beispiel!).
SASS ist eine Erweiterung von CSS, die der Grundsprache Macht und Eleganz verleiht. Sie können Variablen, verschachtelte Regeln, Mixins, Inline-Importe und mehr mit einer vollständig CSS-kompatiblen Syntax verwenden. SASS hilft dabei, große Stylesheets gut organisiert zu halten und kleine Stylesheets schnell zum Laufen zu bringen, insbesondere mit Hilfe der Kompassstil-Bibliothek. (Quelle: Sass-Lang.com)
Mit Sass können Sie CSS auf programmatischere Weise schreiben. Wenn Sie einige CSS gemacht haben, haben Sie möglicherweise bemerkt, dass Sie am Ende viele Informationen wiederholen-zum Beispiel denselben Farbcode angeben. In SASS können Sie Dinge wie Variablen, Schleifen und Nisting verwenden, um Redundanz zu verringern und die Lesbarkeit zu erhöhen. Nachdem Sie Ihren Code in SASS geschrieben haben, können Sie ihn schnell und einfach zu regulärem CSS kompilieren.
* Einige Alternativen: Foundation, Bulma, materialisieren
Bootstrap ist ein kostenloses und Open-Source-Front-End-Frontwork für die Entwicklung von Websites und Webanwendungen. Es enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten sowie optionale JavaScript-Erweiterungen. (Quelle: Wikipedia)
Es gibt viele Optionen zum Auslegen, Styling und Dynamik Ihrer Webanwendung. Sie werden jedoch feststellen, dass Sie mit einem Framework enorm helfen, einen Vorsprung zu erhalten. Bootstrap ist ein solches Framework, aber es ist definitiv weit entfernt von der einzigen Option! Ich empfehle, sich mit einem solchen Framework vertraut zu machen, aber es ist weitaus wichtiger, HTML, CSS und JavaScript -Grundlagen zu erfassen, als sich in einen Framework zu verwickeln.
Die Block-, Element-, Modifikator -Methodik (allgemein als BEM bezeichnet) ist eine beliebte Namenskonvention für Klassen in HTML und CSS. Das vom Team von Yandex entwickelte Ziel ist es, den Entwicklern zu helfen, die Beziehung zwischen HTML und CSS in einem bestimmten Projekt besser zu verstehen. (Quelle: CSS-tricks.com)
Es ist wichtig zu wissen, dass Namens- und Organisationssysteme wie BEM existieren und warum sie verwendet werden. Machen Sie hier einige Nachforschungen an, aber auf Anfängerebene würde ich nicht empfehlen, dem Thema zu viel Zeit zu widmen.
Gulp ist ein Toolkit zur Automatisierung von schmerzhaften oder zeitaufwändigen Aufgaben in Ihrem Entwicklungsworkflow, sodass Sie aufhören können, herumzuspielen und etwas zu bauen. (Quelle: gulpjs.com)
In der modernen Front-End-Entwicklung müssen Sie häufig Aufgaben wie Bündelung, Verschieben von Dateien und Injektion von Referenzen in HTML-Dateien automatisieren. Gulp ist ein Tool, mit dem Sie diese Dinge tun können!
build -Unterverzeichnis einIm Kern ist WebPack ein statischer Modul -Bundler für moderne JavaScript -Anwendungen. Wenn Webpack Ihre Anwendung verarbeitet, erstellt es intern ein Abhängigkeitsgraphen, in dem jedes Modul Ihr Projekt benötigt und ein oder mehrere Bündel generiert wird. (Quelle: webpack.js.org)
Stellen Sie sich vor, Sie haben ein großes Webentwicklungsprojekt mit verschiedenen Entwicklern, die an vielen verschiedenen Aufgaben arbeiten. Anstatt alle in denselben Dateien zu arbeiten, möchten Sie sie möglicherweise so weit wie möglich modularisieren. WebPack hilft, dies zu aktivieren, indem Ihr Team modular funktionieren und dann Zeit für die Erstellung der Anwendung erstellen lässt. Webpack hält alles zusammen: HTML, CSS/SASS, Javascript, Bilder usw. WebPack ist nicht der einzige Modulbundler, aber es scheint derzeit der Front-Händler zu sein.
Eslint ist ein Open -Source -JavaScript -Lining -Dienstprogramm, das ursprünglich im Juni 2013 von Nicholas C. Zakas erstellt wurde. Die Code -Linie ist eine Art statische Analyse, die häufig verwendet wird, um problematische Muster oder Code zu finden, die sich nicht an bestimmte Stilrichtlinien hält. Es gibt Code -Linter für die meisten Programmiersprachen, und Compiler integrieren manchmal das Leinen in den Kompilierungsprozess. (Quelle: Eslint.org)
Das Leinen ist ein fantastisches Tool für Codequalität, Lesbarkeit und Konsistenz. Wenn Sie einen Linter verwenden, können Sie Syntax und Formatierfehler fangen, bevor sie zur Produktion gehen. Sie können Linter manuell ausführen oder sie in Ihren Build-/Bereitstellungsprozess aufnehmen.
* Einige Alternativen: Vue, Angular, Ember
React (auch als React.js oder ReactJs bekannt) ist eine JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen. Es wird von Facebook und einer Community einzelner Entwickler und Unternehmen gepflegt. React kann als Basis bei der Entwicklung von einseitigen oder mobilen Anwendungen verwendet werden. Komplexe React -Anwendungen erfordern normalerweise die Verwendung zusätzlicher Bibliotheken für die staatliche Verwaltung, das Routing und die Interaktion mit einer API. (Quelle: Wikipedia)
Front-End-JavaScript-Frameworks stehen an der Spitze der modernen Front-End-Entwicklung. Ein wichtiges Imbiss hier ist, dass React, obwohl es unglaublich beliebt ist, nur eine Bibliothek für den Aufbau von Benutzeroberflächen ist, während Frameworks wie Vue und Angular das Ziel sind, mehr voll zu sein. Wenn Sie beispielsweise eine Anwendung mit in React erstellen, die zu verschiedenen Ansichten übergehen muss, müssen Sie so etwas wie react-router einbringen.
create-react-app ist ein bequemes Instrument zum Gerüst neuer React-Projekte.Redux ist ein vorhersehbarer Zustandsbehälter für JavaScript -Apps. Es hilft Ihnen, Anwendungen zu schreiben, die sich konsequent verhalten, in verschiedenen Umgebungen (Client, Server und Native) ausgeführt werden und einfach zu testen sind. Darüber hinaus bietet es ein großartiges Entwicklererlebnis, z. (Quelle: Redux.js.org)
Wenn Sie immer größere und größere Front-End-Anwendungen erstellen, werden Sie feststellen, dass es schwierig ist, den Anwendungszustand zu pflegen: Dinge wie der Benutzer, der angemeldet ist, wer der Benutzer ist und im Allgemeinen in der Anwendung vor sich geht. Redux ist eine großartige Bibliothek, mit der Sie eine einzige Statusquelle beibehalten können, auf der Ihre Anwendung ihre Logik stützen kann.
Jest ist ein entzückender JavaScript -Test -Framework mit Schwerpunkt auf Einfachheit. Es funktioniert mit Projekten mit: Babel, TypeScript, Knoten, React, Angular, Vue und mehr! (Quelle: jestjs.io)
Es ist sehr wichtig, automatisierte Tests für Ihre Front-End-Projekte einzurichten. Durch das Einrichten automatisierter Tests können Sie zukünftige Änderungen mit Vertrauen vornehmen-wenn Sie Änderungen vornehmen und Ihre Tests noch bestehen, werden Sie sich ziemlich wohl fühlen, dass Sie keine vorhandenen Funktionen gebrochen haben. Es gibt zu viele Test -Frameworks, um sie aufzulisten. Scherz ist einfach eines meiner Favorties.
create-react-app verwendet haben, ist der Scherz bereits konfiguriert.* Alternative: Fluss
TypeScript ist eine Open-Source-Programmiersprache, die von Microsoft entwickelt und gepflegt wurde. Es ist eine strenge syntaktische Superset von JavaScript und fügt der Sprache eine optionale statische Typisierung hinzu. TypeScript ist für die Entwicklung großer Anwendungen und Transkompilien zu JavaScript ausgelegt. Da TypeScript ein Supersatz von JavaScript ist, sind vorhandene JavaScript -Programme auch gültige Typscript -Programme. TypeScript kann verwendet werden, um JavaScript-Anwendungen sowohl für die clientseitige als auch für die serverseitige Ausführung (node.js) zu entwickeln. (Quelle: Wikipedia)
JavaScript wird dynamisch typisiert. Es ist jedoch eine häufige Überzeugung, dass die statische Typisierung (dh anhand von Variablentypen, Klassen, Schnittstellen im Voraus) sowohl klarer ist als auch die Wahrscheinlichkeit von Defekten/Fehlern verringert. Unabhängig davon, wie Sie sich zu diesem Thema fühlen, ist es wichtig, zumindest ein Gefühl für eine statisch typische Version von JavaScript wie TypeScript zu bekommen. Beachten Sie, dass TypeScript mit JavaScript kompiliert, damit es von Browsern interpretiert werden kann (dh Browser interpretieren Typen nicht nativ).
Next.js ist ein minimalistisches Framework für servergerenderte React-Anwendungen. (Quelle: Next.js - React Server Side Rendering Right erledigt)
Jetzt werden wir fortgeschritten! Inzwischen haben Sie eine React (oder Vue oder Winkel-) Anwendung erstellt, die im Browser ziemlich viel Arbeit leistet. Aus verschiedenen Gründen (z. B. SEO, Bedenken hinsichtlich der Kundenleistung) möchten Sie möglicherweise, dass Ihre Front-End-Anwendung eher auf dem Server als auf dem Client gerendert wird. Hier kommt ein Framework wie Next.js ins Spiel.
Diese Liste soll Ihnen das Front-End-Ökosystem ein breites Engagement geben, aber es ist einfach unmöglich, jedes einzelne Thema zu treffen, ganz zu schweigen von den unzähligen Tools in jedem Bereich! Wenn Sie glauben, dass ich etwas sehr Wichtiges verpasst habe, sehen Sie sich den Abschnitt an, um zu sehen, wie Sie diesen Leitfaden verbessern können.
Wenn Sie durch #100daySofCode voranschreiten, möchten Sie, dass Sie ein oder mehrere Projekte, auf die Sie Ihr neues Wissen anwenden können. In diesem Abschnitt versuche ich, einige Projektideen anzugeben, die Sie verwenden können. Alternativ werden Sie ermutigt, Ihre eigenen Projektideen zu entwickeln, da diese Ideen interessiert und Sie mehr motivieren können.
Im Allgemeinen habe ich die folgenden Ressourcen für die Entwicklung von Lernsoftware von unschätzbarem Wert gefunden:
Wenn Sie meinen Beitrag zu irgendetwas möchten, können Sie sich gerne mit mir auf Twitter verbinden, und ich werde mein Bestes tun, um zu versuchen, Hilfe anzubieten. Wenn Sie der Meinung sind, dass es ein Problem mit dem Lehrplan gibt oder eine Empfehlung hat, finden Sie im folgenden Abschnitt.
Wenn Sie die hier geleistete Arbeit zu schätzen wissen, können Sie erheblich beitragen, indem Sie das Wort über dieses Repository verbreiten, einschließlich Dingen wie:
Dies ist eine laufende Arbeit und ich schätze jede Hilfe bei der Aufrechterhaltung dieser Wissensbasis sehr!
Wenn Sie zu diesem Repository beitragen, besprechen Sie bitte zunächst die Änderung, die Sie über ein Problem vornehmen möchten, bevor Sie eine Änderung vornehmen. Andernfalls ist es sehr schwierig, Ihren Vorschlag zu verstehen, und kann möglicherweise dazu führen, dass Sie viel Arbeit in eine Veränderung leisten, die nicht verschmolzen wird.
Bitte beachten Sie, dass alle, die an diesem Projekt beteiligt sind, entweder versuchen zu lernen oder zu helfen-bitte seien Sie nett!
