Ein praktischer Leitfaden zum Erlernen der Frontend-Entwicklung für Anfänger

Ich habe meine Codierungsreise im Frühjahr 2018 begonnen, vor etwas weniger als einem Jahr. Seitdem habe ich einige Programmierkenntnisse erworben, aber ich verstehe, dass es noch viel mehr zu lernen gibt. Wie auch immer, ich habe mich entschlossen, diese Tipps an einem einzigen Ort zu sammeln, um zukünftigen Entwicklern auf ihrem Weg zu helfen. Dieser Artikel ist der Leitfaden, den ich zu Beginn meiner Reise gerne gefunden hätte.

Bevor es losgeht

Wenn Sie sich entschieden haben, alleine zu lernen, gibt es im Internet viele Informationen und es ist schwierig, sich um alles zu kümmern. Es ist wichtig, einen strukturierten Plan zu haben und keine Zeit zu verschwenden, indem Sie von einer Ressource zur nächsten springen.

Bitte beachten Sie, dass dies nur die ersten Schritte in das Front-End-Universum sind. Es wird Ihnen den Einstieg erleichtern, ist jedoch nicht als vollständige Anleitung gedacht.

Bitte beachten Sie als Haftungsausschluss, dass die folgenden Ressourcen keine Werbung sind. Ich erwähne sie, weil sie mir irgendwann geholfen haben und ich sie persönlich empfehle. Die meisten von ihnen sind kostenlos, ansonsten wird es angegeben.

Als Ausgangspunkt empfehle ich, sich bei freeCodeCamp anzumelden.Und ich werde den Rest auf ihren Lehrplan stützen. Ich halte es aus verschiedenen Gründen für eine großartige Ressource:

  1. Lehrplan. Dies kann Ihr Hauptweg sein. Es ist eine gut strukturierte Übersicht über die Dinge, die Sie lernen sollten, und bietet eine gute Lernkurve.
  2. Übungen. Sie sind mundgerecht, sodass Sie problemlos Schritt halten können, indem Sie jeden Tag ein paar davon machen und Ihre Heatmap grün halten.
  3. Projekte. Nach Abschluss jedes Kapitels erstellen Sie 5 Projekte, um Ihre Zertifizierung zu erhalten. Es ist ideal, um etwas Übung zu bekommen und Ihr Wissen zu festigen.
  4. Gemeinschaft. Es ist mehr als nur eine Lernplattform. Es gibt ein Forum, einen Blog und einen YouTube-Kanal, in dem Entwickler verschiedener Ebenen ihr Wissen teilen und sich inspirieren lassen.
  5. Es ist kostenlos. Geld kann für viele Menschen von entscheidender Bedeutung sein, und hier werden Sie auf keinen Fall etwas anderes als Zeit ausgeben.
Pro-Tipp: Sie können ein Konto auf Twitter erstellen , falls Sie noch kein Konto haben, und sich öffentlich für das Konto engagieren100DaysOfCodeHerausforderung. Der Grund ist einfach - es gibt viele Menschen, die diese Herausforderung annehmen. Sie erhalten Motivation und Unterstützung und können das Tempo halten. Ich kann es nur empfehlen, nicht schüchtern sein und die Community genießen ?

Jetzt können wir loslegen! ?

Sich anpassendes Webdesign

Der erste Abschnitt enthält die Grundlagen zum Erstellen statischer Sites und zum Anwenden von Stilen auf diese.

Die Grundlagen

Grundlegendes HTML und HTML5undGrundlegende CSS-Abschnitte sind die Grundlagen des modernen Internets. Angewandtes visuelles Design, angewandte Barrierefreiheit und Responsive Web Design-Prinzipienwird Ihnen die Grundlagen des Schreibens guter Websites beibringen. Beeilen Sie sich nicht und treten Sie vorsichtig vor, das sind die Hauptbausteine ​​Ihres Wissens.

Sie können Ihr Studium mit einem großartigen Leitfaden zu Interneting Is Hard ergänzen.

Als Nächstes lernen Sie leistungsstarke Layouttechniken wie CSS Flexbox und CSS Grid kennen . Bevor Sie fortfahren, füllen Sie diese kurze Anleitung aus, um einen Überblick über verschiedene Layouttechniken zu erhalten, die vor der Flexbox-Grid-Ära verwendet wurden. Es ist unwahrscheinlich, dass Sie sie jemals verwenden müssen, aber es ist immer gut, sich der Technologien, die wir heute haben, bewusst zu sein und sie zu schätzen.

CSS Flexbox

Ich habe mich wegen seiner Einfachheit und Kraft in Flexbox verliebt. Viele verschiedene Eigenschaften können Sie zunächst verwirren. Mein Vorschlag ist daher, einen Spickzettel in der Nähe Ihres Computers anzubringen, damit Sie sie jederzeit leicht nachschlagen können. Setzen Sie außerdem ein Lesezeichen für diesen interaktiven Flexbox-Spickzettel.

Und schließlich üben Sie, indem Sie die süchtig machende Flexbox Froggy spielenSpiel. ?

CSS-Raster

Das Grid ist fortschrittlicher und flexibler, aber in den meisten Fällen reicht Flexbox völlig aus. Wie auch immer, Sie werden ein weiteres mächtiges Werkzeug in Ihrem Arsenal haben. Vor allem, wenn es so einfach zu verstehen ist, wenn Sie Ihre Pflanzen in Grid Garden anbauen.?

Trainieren

Bevor Sie mit den endgültigen Projekten fortfahren, empfehle ich Ihnen Folgendes:

  1. Erstellen Sie ein Konto bei Codepen . Es ist ein cooler Spielplatz für das Frontend, auf dem Sie Ihre Projekte erstellen, Ihre Schnipsel testen und üben können.
  2. Installieren Sie aCode-Editorauf Ihrem Computer und lernen, wie man damit arbeitet.
  3. In diesem Video lernen Sie die Grundlagen der Befehlszeile kennenvon Wes Bos oder dem Shell Workshop on Udacity.
  4. Erfahren Sie, wie Sie Git in dieser Wiedergabeliste von NetNinja verwenden.
  5. Holen Sie sich eine geführte Übung. Wählen Sie Projekte aus dieser Wiedergabeliste von Traversy Media aus und codieren Sie sie mit. Bauen Sie sie, bis Sie sich sicher fühlen. Es wäre großartig, wenn Sie bereits einen Code-Editor und eine Versionskontrolle verwenden und Ihre Arbeit in ein spezielles Studien-Repo auf Github hochladen würden.

Jetzt können Sie Ihre erste Zertifizierung erhalten! ?

Bauen Sie Ihre endgültigen Projekte und teilen Sie sie?

Javascript-Algorithmen und Datenstrukturen

Jetzt wissen Sie, wie man statische Websites erstellt, und es ist Zeit, JavaScript zu lernen.

Der JavaScript-Bereich von freeCodeCamp ist großartig, aber ich rate Ihnen dringend, sich javascript.info anzusehenals zusätzliche Referenz. Dies ist die beste Ressource, die umfassende Informationen zu allen Themen rund um JavaScript bietet.

Weitere Empfehlungen

  1. JavaScript-Grundkurs von Beau Carnes, wenn Sie visuelle Anleitungen bevorzugen.
  2. In Bezug auf den neuen Standard für JavaScript sind meine Favoriten die großartigen Kurse ES6 für alle! (bezahlt) von Wes Bos und Modern JavaScript von Beau Carnes.
  3. Kurs für reguläre Ausdrücke auf Scrimba.
  4. Der objektorientierte JavaScript-Kurs von NetNinja war für mich sehr hilfreich.

Algorithmen

Dies ist mein Lieblingsteil der Zertifizierung. Ich erinnere mich, wie herausfordernd sie waren, als ich gerade anfing, sie zu lösen. Ich könnte den ganzen Tag über mögliche Lösungen nachdenken. Dies ist eine großartige Möglichkeit, JavaScript zu lernen und wie ein Programmierer zu denken.

Als kleine Hilfe rate ich Ihnen, sich JavaScript Cardio Sessions von Traversy Media anzusehen.

Für mehr Übung empfehle ich Ihnen dringend, sich bei CodeWars anzumelden und ein erstes Ziel festzulegen , um 6kyu zu erreichen . Dies ist sehr hilfreich, da Sie bei jeder Herausforderung die Lösungen anderer Personen durchsehen und neue Tricks, Ansätze und Ideen entdecken können.

Um andere 100DaysOfCode-Herausforderer einschließlich mir zu finden, gehen Sie zu Ihren Kontoeinstellungen und geben Sie # 100DaysOfCode in das Feld Clan ein.

Bevor Sie mit den endgültigen Projekten fortfahren, müssen Sie auf den endgültigen Chef, die Registrierkasse, vorbereitet sein. ?

Nachdem du es geschafft hast, kann ich das sagen ...

… Jetzt wissen Sie, wie man mit JavaScript arbeitet! ?

Dinge zusammenhalten

Jetzt ist es Zeit, die Javascript30-Herausforderung von Wes Bos anzunehmen. Auf diese Weise können Sie am besten lernen, wie HTML, CSS und JavaScript zusammenarbeiten, Ihre Grundlagenkenntnisse verbessern und das DOM verstehen. Das Bauen dieser kleinen Projekte war eine großartige Erfahrung und hat mir wirklich Spaß gemacht!

Front-End-Bibliotheken

Von diesem Punkt an werden Sie ein echter Front-End-Entwickler?

Bootstrap

Das beliebteste CSS-Framework. Erstellen Sie einige Websites zusammen mit Anleitungen auf YouTube. Gewöhnen Sie sich an das berühmte Spaltenraster-Layout von Bootstrap.

jQuery

Obwohl einige Leute sagen, dass jQuery tot ist, ist es immer hilfreich, wenn die Lösung in reinem JavaScript skurril ist und die Verwendung eines JS-Frameworks zu viel ist. Dies wird ein weiteres großartiges Werkzeug in Ihrem Arsenal sein. Erstellen Sie damit ein paar kleine Apps zum Üben.

Sass

Ich habe CSS-Frameworks erst richtig erkannt, als ich ihre wahre Leistungsfähigkeit erkannte. Ich wollte fortgeschrittene CSS-Techniken lernen und kaufte mir ein erstaunliches fortgeschrittenes CSS und SassKurs (bezahlt) von Jonas Schmedtmann. Sehr zu empfehlen, wenn Sie Ihre CSS-Kenntnisse verbessern und den Workflow verstehen möchten. Ich bin immer noch froh, dass ich es gefunden habe.

Reagieren & Redux

Dies ist der Hauptteil des Abschnitts Front-End-Bibliotheken. React ist eine gute Wahl als erste JavaScript-Bibliothek, die Sie lernen können.

Ehrlich gesagt ist es schwer zu verstehen, wie man im Format von freeCodeCamp damit arbeitet, da man nichts von Grund auf neu erstellen kann und einige Dinge unter der Haube funktionieren. Nehmen Sie also an einem Kurs zu React und Redux teil und nehmen Sie sich Zeit, um deren Ideen und Tools zu verstehen.

Meine persönlichen Favoriten:

  1. Komplettes React Tutorial (mit Redux)von NetNinja
  2. Reagieren Sie für Anfänger (bezahlt) von Wes Bos
  3. Reagieren - Der vollständige Leitfaden (bezahlt) von Academind

Ich hoffe, Sie freuen sich darauf, Ihr neues Wissen für die Abschlussprojekte einzusetzen.

Jetzt können Sie alles bauen, was Sie wollen ?

Weiter gehen

Sie sind jetzt ein echter Front-End-Entwickler und verfügen über genügend Fähigkeiten, um großartige Webanwendungen zu erstellen. Vielleicht sind Sie neugierig, was als nächstes zu tun ist, und die Antwort ist so einfach wie "Bauen, bauen, bauen!" . Ihre aktuelle Aufgabe ist es, ein Portfolio für sich selbst zu erstellen und mehr Übung zu bekommen.

Hier sind einige Tipps für Sie, was als nächstes zu tun ist:

  1. Holen Sie sich Ideen für ein Projekt in derProjekte mit nach Hause nehmenAbschnitt über freeCodeCamp.
  2. Erstellen Sie ein Projekt zusammen mit einem Kurs und ändern und verbessern Sie es, indem Sie neue Funktionen hinzufügen.
  3. Bewältigen Sie D3.js und Node.js, um die nächsten freeCodeCamp-Zertifizierungen zu erhalten!
  4. Lesen Sie Eloquent JavaScript undSie kennen JS nichtein JavaScript-Ninja werden.
  5. Verbessere deinen Rang bei Codewars.
  6. Holen Sie sich einen Vorgeschmack auf fortschrittliches Webdesign in diesem Webdesign für WebentwicklerKurs.
  7. Halten Sie Ihr GitHub-Konto aktiv und versuchen Sie, einen Beitrag zu Open Source zu leisten.

Wenn eine dieser Ressourcen für Sie nicht funktioniert, ist sie in Ordnung. Seien Sie nicht frustriert, was für jemanden funktioniert, muss nicht unbedingt für jede einzelne Person funktionieren.

Ich hoffe, dieser Leitfaden hilft Ihnen beim Lernen und spart Ihnen hoffentlich Zeit.

Viel Glück!