• Zuhause
  • Artikel
  • Ein praktischer Leitfaden zum Erlernen der Frontend-Entwicklung für Anfänger
Veröffentlicht am 20-02-2019

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

Foto von Atharva Tulsi auf Unsplash

Ich begann meine Codierreise im Frühjahr 2018, etwas weniger als vor einem Jahr. Ich habe seitdem einige Programmierkenntnisse erworben, aber ich verstehe, dass es noch viel zu lernen gibt. Jedenfalls habe ich beschlossen, diese Tipps an einem zentralen 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, selbst zu lernen, gibt es viele Informationen im Internet und es ist schwer, den Kopf um alles zu legen. Es ist wichtig, einen strukturierten Plan zu haben und Zeit zu sparen, indem Sie von einer Ressource zu einer anderen springen.

Bitte beachten Sie, dass dies nur die ersten Schritte in das Front-End-Universum sind. Es wird Ihnen beim Einstieg helfen, 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, sonst wird es angegeben.
Foto von Mikito Tateisi auf Unsplash

Als Ausgangspunkt empfehle ich die Anmeldung bei freeCodeCamp. 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 dein Hauptpfad sein. Es ist eine strukturierte Übersicht über die Dinge, die Sie lernen sollten, und bietet eine gute Lernkurve.
  2. Übungen Sie sind mundgerechte Größe, so dass Sie das Tempo leicht halten können, indem Sie jeden Tag ein paar davon machen und Ihre Heatmap grün bleibt.
  3. Projekte. Nach Abschluss jedes Kapitels erstellen Sie 5 Projekte, um Ihre Zertifizierung zu erhalten. Ideal, um etwas Übung zu erlangen 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 austauschen und Inspiration finden.
  5. Es ist kostenlos. Geld kann für viele Menschen von entscheidender Bedeutung sein.
Pro-Tipp: Sie können ein Konto bei Twitter erstellen, sofern Sie noch kein Konto haben, und sich öffentlich der Herausforderung 100DaysOfCode anschließen. Der Grund ist einfach - es gibt viele Leute, die diese Herausforderung annehmen. Sie werden motiviert und unterstützt, und es hilft Ihnen, das Tempo zu halten. Ich kann es nur wärmstens empfehlen, sei nicht schüchtern und genieße die Community

Jetzt können wir loslegen!

Foto von Braden Collum auf Unsplash

Sich anpassendes Webdesign

Im ersten Abschnitt werden die Grundlagen zum Erstellen statischer Websites und zum Anwenden von Stilen beschrieben.

Die Grundlagen

Grundlegende HTML- und HTML5- und grundlegende CSS-Abschnitte sind die Grundlagen des modernen Internets. Applied Visual Design, Applied Accessibility und Responsive Web Design Principles vermitteln Ihnen die Grundlagen für das Schreiben guter Websites. Steigen Sie nicht und treten Sie nicht vorsichtig auf. Dies 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. Bevor Sie fortfahren, sollten Sie dieses kurze Handbuch ausfüllen, um einen Überblick über die verschiedenen 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, die heutigen Technologien zu kennen und zu schätzen.

CSS Flexbox

Ich habe mich in Flexbox wegen seiner Einfachheit und Kraft verliebt. Viele verschiedene Eigenschaften können Sie zunächst verwirren. Daher empfehle ich Ihnen, ein Spickzettel in der Nähe Ihres Computers zu platzieren, damit Sie sie immer leicht nachschlagen können. Setzen Sie für diesen interaktiven Flexbox-Spickzettel ein Lesezeichen.

Zum Schluss üben Sie das süchtig machende Flexbox Froggy-Spiel.

CSS-Raster

Das Grid ist fortgeschrittener und flexibler, aber in den meisten Fällen reicht Flexbox aus. Auf jeden Fall haben Sie ein weiteres mächtiges Werkzeug in Ihrem Arsenal. Vor allem, wenn es so einfach zu verstehen ist, wenn Sie Ihre Pflanzen in Grid Garden anbauen.

Trainieren

Bevor ich mit den letzten Projekten fortfahre, empfehle ich 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 einen Code-Editor auf Ihrem Computer und lernen Sie, wie Sie damit arbeiten.
  3. Lernen Sie die Grundlagen der Befehlszeile aus diesem Video von Wes Bos oder dem Shell Workshop on Udacity.
  4. Erfahren Sie, wie Sie Git in dieser Playlist von NetNinja verwenden.
  5. Holen Sie sich eine geführte Übung. Wählen Sie Projekte aus dieser Playlist von Traversy Media aus und codieren Sie sie mit. Bauen Sie sie auf, 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 Studienrepo auf Github hochladen.

Jetzt können Sie Ihre erste Zertifizierung erhalten!

Baue deine letzten Projekte und teile sie

Foto von Jake Ingle auf Unsplash

Javascript-Algorithmen und Datenstrukturen

Jetzt wissen Sie, wie Sie statische Websites erstellen, und es ist an der Zeit, JavaScript zu lernen.

Der JavaScript-Bereich von freeCodeCamp ist großartig, aber ich empfehle Ihnen dringend, javascript.info als zusätzliche Referenz anzusehen. Dies ist die beste Ressource, die umfassende Informationen für alles rund um JavaScript bietet.

Weitere Empfehlungen

  1. JavaScript Basics Course 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 zu Scrimba.
  4. Der objektorientierte JavaScript-Kurs von NetNinja war für mich sehr hilfreich.

Algorithmen

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

Als kleine Hilfe empfehle ich Ihnen, JavaScript Cardio Sessions von Traversy Media anzuschauen.

Für mehr Übung empfehle ich Ihnen dringend, sich bei CodeWars anzumelden und ein erstes Ziel zu setzen, 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 zu finden, gehen Sie zu Ihren Kontoeinstellungen und geben Sie # 100DaysOfCode in das Clan-Feld ein.

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

Nachdem Sie es geschlagen haben, kann ich das sagen…

… Jetzt wissen Sie, wie Sie mit JavaScript arbeiten!

Foto von Pankaj Patel auf Unsplash

Dinge zusammenhalten

Nun ist es an der Zeit, die Javascript30-Herausforderung von Wes Bos anzunehmen. Dies ist der beste Weg, um zu lernen, wie HTML, CSS und JavaScript zusammenarbeiten, Ihr Wissen über die Grundlagen verbessern und das DOM verstehen. Das Bauen dieser kleinen Projekte war eine tolle Erfahrung und macht mir wirklich Spaß!

Front-End-Bibliotheken

Von diesem Punkt an werden Sie zu einem echten Frontend-Entwickler

Bootstrap

Das beliebteste CSS-Framework. Erstellen Sie ein paar Websites zusammen mit Leitfäden auf YouTube. Gewöhnen Sie sich an das berühmte Spaltenraster von Bootstrap.

jQuery

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

Sass

Ich habe die CSS-Frameworks erst richtig verstanden, als ich ihre wirkliche Stärke sah. Ich wollte fortgeschrittene CSS-Techniken lernen und kaufte einen erstaunlichen Advanced CSS- und Sass-Kurs (bezahlt) von Jonas Schmedtmann. Sehr empfehlenswert, wenn Sie Ihre CSS-Kenntnisse verbessern und den Arbeitsablauf 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 großartige Wahl als erste JavaScript-Bibliothek zum Lernen.

Ehrlich gesagt ist es schwer zu verstehen, wie man es im freeCodeCamp-Format verwendet, da Sie nichts von Grund auf neu erstellen können und einige Dinge unter der Haube funktionieren. Nehmen Sie an einem Kurs über React und Redux teil und nehmen Sie sich Zeit, um ihre Ideen und Werkzeuge zu verstehen.

Meine persönlichen Favoriten:

  1. Komplettes React Tutorial (mit Redux) von NetNinja
  2. Reaktion für Anfänger (bezahlt) von Wes Bos
  3. React - The Complete Guide (bezahlt) von Academind

Ich hoffe, Sie freuen sich, Ihr neues Wissen für die Abschlussprojekte einsetzen zu können.

Jetzt kannst du alles bauen, was du willst

Foto von rawpixel auf Unsplash

Weiter bewegen

Sie sind jetzt ein echter Frontend-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 besteht darin, sich ein Portfolio zu erstellen und mehr Übung zu erhalten.

Hier sind einige Tipps für Sie, was Sie als Nächstes tun sollten:

  1. Ideen für ein Projekt erhalten Sie im Bereich Take Home-Projekte auf freeCodeCamp.
  2. Erstellen Sie ein Projekt zusammen mit einem Kurs, ändern Sie es und ergänzen Sie es, indem Sie neue Funktionen hinzufügen.
  3. Tackle D3.js und Node.js, um die nächsten FreeCodeCamp-Zertifizierungen zu erhalten!
  4. Lesen Sie Eloquent JavaScript und Sie wissen nicht, dass JS ein JavaScript-Ninja wird.
  5. Verbessere deinen Rang auf Codewars.
  6. Machen Sie sich mit diesem Kurs für Webdesign für Webentwickler einen Vorgeschmack auf fortgeschrittenes Webdesign.
  7. Halten Sie Ihr GitHub-Konto aktiv und versuchen Sie, zu Open Source beizutragen.

Wenn eine dieser Ressourcen für Sie nicht funktioniert, ist dies in Ordnung. Seien Sie nicht frustriert. Was für jemanden funktioniert, muss nicht unbedingt für jeden Einzelnen arbeiten.

Ich hoffe, dieser Leitfaden wird Ihnen beim Lernen helfen und hoffentlich Zeit sparen

Viel Glück!