Der absolute Leitfaden für Anfänger zum Erlernen der Webentwicklung im Jahr 2018

Versuchen Sie, Webentwicklung zu lernen, sind sich aber nicht sicher, wo Sie anfangen sollen?

Sie haben wahrscheinlich bereits versucht, in Google nach Informationen zu suchen, und es gibt viele Ressourcen. Aber viele von ihnen enthalten viel zu viele Informationen.

Im Moment brauchen Sie nur die Grundlagen der Webentwicklung - eine allgemeine Erklärung mit einigen Anweisungen, wie Sie als Nächstes vorgehen müssen.

Und genau deshalb habe ich diesen einfachen Leitfaden dazu geschrieben, wie man ein Webentwickler wird.

Wenn Sie ein Anfänger-Programmierer sind, ist dieser Leitfaden für Sie!

In diesem Handbuch wird Folgendes behandelt:

  • Eine Erläuterung der Grundbereiche der Webentwicklung,
  • Ein Überblick über Programmiersprachen und Frameworks,
  • Und empfohlene Ressourcen, die Ihnen beim Lernen helfen.

Es richtet sich an Anfänger und bietet hilfreiche Links und Informationen, mit denen Sie einen Vorsprung für Ihre eigene Forschung erhalten.

Hier ist, was wir durchmachen werden.

Inhaltsverzeichnis

* Sprungverbindungen eingeschlossen, also können Sie herum überspringen, wenn Sie wünschen!

Teil 1: Wir beginnen mit den Grundlagen:

  • Was Webentwicklung ist: Erklären, was tatsächlich passiert, wenn Sie eine Website in Ihren Browser laden.
  • HTML, CSS und JavaScript: die Grundlage jeder Website.
  • Hilfreiche Tools: Verwenden von Code-Editoren und Git
  • Was ist Front-End und Back-End?

Teil 2: Dann werden wir uns mit fortgeschritteneren Front-End-Fähigkeiten befassen:

  • Responsive Design: Stellen Sie sicher, dass Ihre Website auf Computern, Tablets und Handys gut aussieht.
  • Grunt, Gulp und WebPack: Verwenden Sie Build-Tools, um einige Arbeiten für Sie zu erledigen!
  • Eine Einführung in JavaScript-Front-End-Frameworks: React, Vue und Angular

Teil 3: Gefolgt von Backend-Kenntnissen:

  • Eine Übersicht über die am häufigsten verwendeten Back-End-Sprachen und deren Aufbau.
  • Eine kurze Einführung in Datenbanken und welche Datenbanksprachen Sie lernen sollten.
  • Die Grundlagen zum Einrichten einer Website auf einem Server.

Epilog: Lernressourcen

  • Eine kurze Liste empfohlener Online-Kurse, Tutorials und Bücher.

Bevor wir nun alles über Websites durchgehen ... fangen wir mit Ihnen an!

Was ist Ihr oberstes Ziel beim Erlernen des Codierens?

Stephen R. Covey behauptet in seinem Buch "Die 7 Gewohnheiten hochwirksamer Menschen", dass man "mit dem Ende beginnen muss, um erfolgreich zu sein".

Denken Sie über Ihre eigenen Gründe nach, warum Sie mit dem Codieren anfangen wollen ... Welches Ziel streben Sie an?

Was ist Ihr Endziel?

Suchen Sie ein lustiges Hobby, eine berufliche Veränderung, einen flexiblen Job, bei dem Sie näher an Ihrer Familie sein können?

Ihr gesamter Ansatz für die Webentwicklung sollte darauf ausgerichtet sein, diesen einen Traum zu verwirklichen.

Sie können sogar versuchen, Ihr Ziel aufzuschreiben und es an einem Ort zu platzieren, an dem Sie es jeden Tag sehen werden, z. B. auf Ihrem Badezimmerspiegel oder neben Ihrem Computer.

Behalten Sie bei der Durcharbeitung dieses Artikels Ihr Ziel im Hinterkopf und lassen Sie es bestimmen, welche Entscheidungen Sie treffen: Welche Sprachen sollen gelernt werden, auch wie sollen Sie lernen?

Beginnen wir mit den Grundlagen!

Teil 1: Die Grundlagen

Das mag offensichtlich erscheinen, aber ich werde es trotzdem sagen:

Bei der Webentwicklung dreht sich alles um das Erstellen von Websites.

Eine Website kann eine einfache einseitige Website oder eine unglaublich komplexe Webanwendung sein.

Wenn Sie es im Web in einem Browser anzeigen können, hat dies mit der Webentwicklung zu tun.

Hier ist eine einfache Erklärung, wie Websites im Internet funktionieren:

  1. Bei Websites handelt es sich im Grunde genommen um eine Reihe von Dateien, die auf Computern gespeichert sind, die als Server bezeichnet werden.
  2. Server sind Computer, auf denen Websites gehostet werden. Dies bedeutet, dass sie die Websitedateien speichern. Diese Server sind mit dem riesigen Netzwerk verbunden, das als World Wide Web (um die Umgangssprache der 90er Jahre zu verwenden) oder dem Internet bezeichnet wird.
  3. Browser sind Programme, die Sie auf Ihrem Computer ausführen. Sie laden die Website-Dateien über Ihre Internetverbindung. Ihr Computer wird auch als Client bezeichnet, der eine Verbindung zum Server herstellt.

Weitere Lektüre

  • Wie funktioniert das Internet? - Mozilla Developer Network
  • Was ist der Unterschied zwischen Webseite, Website, Webserver und Suchmaschine? - Mozilla Developer Network

Die 3 Komponenten, aus denen jede Website besteht

Wie oben erwähnt, bestehen Websites aus Dateien, hauptsächlich HTML-, CSS- und JavaScript-Dateien.

Schauen wir uns jeden einzelnen genauer an:

HTML oder HyperText Markup Language

HTML ist die Grundlage aller Websites. Dies ist der Hauptdateityp, der beim Betrachten einer Website in Ihren Browser geladen wird.

Sie können eine sehr einfache Website erstellen, indem Sie nur HTML und keine anderen Dateitypen verwenden.

Es wird nicht sehr interessant aussehen, aber das ist das Minimum, das Sie für eine Website benötigen, um eine Website zu sein.

(Wenn Sie an den Grundlagen von HTML interessiert sind, können Sie ein Video- / Blog-Tutorial lesen, das ich dazu habe.)

CSS oder Cascading Style Sheets

Ohne CSS sieht eine Website so ansprechend aus wie ein Word-Dokument.

Mit CSS können Sie Farben aller Art, ansprechende Schriftarten und Layouts der Website ganz nach Ihren Wünschen hinzufügen.

Sie können sogar Animationen hinzufügen und Formen zeichnen, indem Sie erweitertes CSS verwenden.

JavaScript

JavaScript ist eine Programmiersprache, mit der Sie mit Elementen auf der Website interagieren und sie bearbeiten können.

Während CSS HTML Stil verleiht, sorgt JavaScript für Interaktivität und macht eine Website dynamischer.

Sie können beispielsweise JavaScript verwenden, um beim Klicken auf eine Schaltfläche an den oberen Rand der Seite zu scrollen, oder um eine Diashow mit Schaltflächen zu erstellen, mit denen Sie durch die Bilder navigieren können.

Um mit HTML-, CSS- und JavaScript-Dateien arbeiten zu können, müssen Sie ein Programm auf Ihrem Computer verwenden, das als Code-Editor bezeichnet wird.

Was uns zum nächsten Punkt bringt:

Welchen Code-Editor sollten Sie verwenden?

Dies ist eine sehr häufige Frage, insbesondere wenn Sie gerade erst anfangen.

Der beste Code-Editor für Sie hängt in hohem Maße davon ab, welche Art von Code Sie schreiben.

Wenn Sie hauptsächlich HTML, CSS und JavaScript verwenden, können Sie den Code in Windows Notepad oder TextEdit für Macs eingeben, wenn Sie dies möchten.

Aber was würde das für einen Spaß machen?

Code-Editor-Programme wie Sublime oder VS Code verfügen über zahlreiche Funktionen, die das Codieren lediglich vereinfachen.

Mit ihnen können Sie mehrere Textzeilen nach rechts oder links einrücken und den Text auf unterschiedliche Weise hervorheben, je nachdem, in welcher Sprache die Datei vorliegt.

Beispiel für die Syntaxhervorhebung in VS Code

Für Back-End-Sprachen (wir werden in einem späteren Abschnitt darauf eingehen) benötigen Sie einen leistungsstärkeren Code-Editor namens IDE (Integrated Development Environment). IDEs verfügen über Funktionen, mit denen Sie Ihren Code debuggen und kompilieren (verarbeiten) können.

Hier sind einige beliebte Code-Editoren:

VS-Code: Diese leichtgewichtige Version von Visual Studio, der Haupt-IDE von Microsoft, ist nur ein paar Jahre alt, aber aufgrund ihrer Geschwindigkeit, Benutzerfreundlichkeit und leistungsstarken Funktionen unglaublich beliebt. VS Code ist mein persönlicher Editor der Wahl, daher bin ich möglicherweise eher voreingenommen iased

Atom: Erstellt von GitHub und beworben als "hackbarer Texteditor". Atom ist ein beliebter Editor. Eine der Hauptstärken ist die Anpassbarkeit. Sie können Pakete und Designs installieren, die dem Programm Funktionen hinzufügen.

Sublime: Ein äußerst beliebtes Programm, das es schon eine Weile gibt. Wie bei Atom können Sie Pakete und Themes installieren, und es hat auch eine schnelle Leistung. Im Gegensatz zu den beiden anderen Editoren kostet eine Sublime-Lizenz 70 US-Dollar (der Test ist jedoch kostenlos).

Ich würde empfehlen, einige oder alle dieser Editoren zu Vergleichszwecken auszuprobieren. Wählen Sie dann eine aus und bleiben Sie dabei, um die Funktionen und Tastenkombinationen zu lernen.

Versionskontrolle

Jetzt haben Sie Ihren Code-Editor und beginnen, Code zu schreiben.

Was passiert jedoch, wenn Sie einen Fehler in Ihrem Code machen und die Tastenkombination Strg-Z eine Million Mal drücken, um den Vorgang rückgängig zu machen? Wie geht's?

Die Antwort lautet: Versionskontrolle!

Die Versionskontrolle ist wie das Speichern von Punkten für Ihre Codedateien.

Wenn Sie vermuten, dass Sie im Begriff sind, Codeänderungen vorzunehmen, die alles kaputt machen könnten, können Sie einen neuen Speicherpunkt (Commit) erstellen.

Wenn Sie dann Ihre Website beschädigen, können Sie Ihren Code auf den vorherigen Stand zurücksetzen.

Es kann ein Lebensretter sein, wenn Sie jemals einen Fehler machen, den Sie unbedingt rückgängig machen müssen.

Versionskontrolle klingt großartig! Wie funktioniert es?

Bei der Verwendung eines Versionskontrollsystems (VCS) werden Ihre Codedateien und der gesamte Änderungsverlauf in einem so genannten Repository gespeichert.

Normalerweise verwenden Sie ein Repository pro Website oder Projekt.

Anschließend speichern Sie Ihr Repository online in einem so genannten zentralen Repository und speichern eine Version auf Ihrem Computer in einem lokalen Repository.

Während Sie Änderungen an Ihrem Computer vornehmen, können Sie Commits erstellen und diese dann in das zentrale Repository übertragen.

Dieser Prozess ermöglicht es Ihnen, dass mehrere Personen an demselben Satz von Code arbeiten und sogar dieselben Dateien ändern.

Git ist momentan das beliebteste VCS

Das Hauptversionskontrollsystem ist heutzutage Git. Sein Hauptkonkurrent ist Subversion (SVN), ein älteres System.

Die überwiegende Mehrheit der Bootcamps und Tutorials für die Codierung verwendet jedoch Git. Daher empfehle ich Ihnen, dies zu lernen.

Weitere Lektüre

  • Schnelles Tutorial zu den Grundlagen der Verwendung von Git
  • Ausführliche Anleitung zur Verwendung von GitHub

Wenn wir uns nun mit den tatsächlichen verwendeten Sprachen und Frameworks befassen, werden wir Begriffe verwenden, auf die Sie wahrscheinlich bereits gestoßen sind: Front-End und Back-End.

Im Frontend dreht sich alles darum, wie die Website optisch aussieht.

Sarah Maes über GIPHY

Das Front-End (oder clientseitig) bezieht sich auf das, was vom Browser des Benutzers geladen wird, auch als Client bezeichnet.

Dies wäre das HTML und CSS, über das wir zu Beginn gesprochen haben. Ursprünglich war JavaScript nur eine Front-End-Sprache, aber heutzutage können Sie JavaScript auch als serverseitige oder Back-End-Sprache verwenden.

Bei der Front-End-Arbeit geht es vor allem darum, die Website gut aussehen zu lassen.

Darüber hinaus muss die Site so gestaltet werden, dass sie für den Benutzer sinnvoll ist (auch als UX oder User Experience bezeichnet).

Wenn Sie gerne Ihr CSS optimieren, um sicherzustellen, dass die Website pixelgenau ist, und subtile JavaScript-Animationen hinzufügen, die dem Benutzer dabei helfen, dann werden Sie wahrscheinlich Spaß an der Front-End-Entwicklung haben.

Im Backend dreht sich alles um Funktionalität und darum, dass alles funktioniert.

Während es im Frontend um das Erscheinungsbild und das visuelle Verhalten der Website geht, geht es im Backend darum, alles hinter den Kulissen zum Laufen zu bringen.

Wenn Sie in der Back-End-Entwicklung arbeiten, erledigen Sie Aufgaben wie das Verarbeiten von Anforderungen an den Server und die Datenbank.

Einige Beispiele für Back-End-Arbeiten wären das Speichern der Daten, wenn jemand ein Formular auf der Kontaktseite ausfüllt, oder das Abrufen von Daten, um Blog-Posts in einer bestimmten Kategorie anzuzeigen, die der Benutzer angefordert hat.

Back-End-Arbeiten können auch das Einrichten der Website auf einem Server, die Bereitstellung und das Einrichten von SQL-Datenbanken umfassen.

Wenn Ihnen die Idee, alle funktionalen Teile einer Website einzurichten, Spaß macht, können Sie Back-End-Arbeit genießen!

Beide Seiten zusammenfügen

Die Namen Front-End und Back-End sind entstanden, weil das Front-End das ist, was Sie in Ihrem Browser sehen können.

Und das Back-End ist der Teil, den Sie nicht sehen können, aber er bewältigt einen Großteil des hohen Aufwands und der Funktionalität, die dem Front-End helfen.

Sie können sich das Front-End als die Storefront eines Unternehmens vorstellen, den einzigen Teil, den die meisten Kunden sehen werden. Das Back-End ist wie die Produktions-, Vertriebs- und Betriebszentren, die den Geschäftsbetrieb unterstützen.

Beide dienen getrennten Funktionen, die gleichermaßen wichtig sind.

Frontend, Backend oder Full Stack?

Bei der Webentwicklung können Sie sich nur auf das Front-End oder nur auf das Back-End konzentrieren. Oder Sie können beides erledigen, was als Full-Stack-Entwicklung bezeichnet wird.

Worauf Sie sich konzentrieren, sollte hauptsächlich von zwei Dingen abhängen:

  • Ihre persönliche Präferenz: Nicht jeder mag sowohl das Frontend als auch das Backend.
  • Verfügbarkeit von Jobs: Durchsuchen Sie Ihre lokalen Joblisten und nehmen Sie an lokalen Coding-Meetups teil, um ein Gefühl dafür zu bekommen, welche Arten von Jobs es gibt.

Erwähnenswert ist, dass Sie als Full-Stack-Entwickler marktfähiger werden, wenn Sie sowohl das Front-End als auch das Back-End mögen.

Es ist sinnvoll - je mehr Technologien Sie verwenden können, desto mehr Aufgaben können Sie ausführen.

Stack Overflow berichtete in seiner Umfrage 2017 unter Nutzern, dass 63,7% als Full-Stack-, 24,4% als Back-End- und 11,9% als Front-End-Entwickler identifiziert wurden:

Quelle: Umfrage zum Stapelüberlauf 2017

Dies wird jedoch wiederum stark vom Unternehmen abhängen. Einige Unternehmen setzen möglicherweise Full-Stack-Entwickler ein, während andere das Backend und das Frontend aufteilen.

Einige haben auch ihre Front-End-Entwickler in Design, wo die Entwickler das Front-End der Anwendung entwerfen und bauen.

Teil 2: Bringen Sie Ihre Front-End-Fähigkeiten zum Leuchten

Sobald Sie die Grundlagen von HTML, CSS und JavaScript verstanden haben, können Sie im Front-End erweiterte Kenntnisse erwerben.

In diesem Abschnitt werden Vorgehensweisen und Tools beschrieben, mit denen Sie als Webentwickler marktfähigere Fähigkeiten aufbauen können.

Responsive Design ist ein Muss in dieser mobilfreundlichen Welt

Als es Websites zum ersten Mal gab, gab es nur eine Möglichkeit, sie anzuzeigen: auf Ihrem Computer.

Smartphones und mobile Daten gab es noch nicht. Beim Erstellen einer Website mussten Sie sich nur darum kümmern, wie sie auf Ihrem Computer aussah.

Laut Statcounter.com verwenden derzeit mehr Menschen ihre Telefone als ihre Desktop-Computer, um im Internet zu surfen.

Wir müssen also sicherstellen, dass alle unsere Websites funktionieren und vom größten Monitor bis zum kleinsten Telefon gut aussehen.

Diese Vorgehensweise wird als responsives Design bezeichnet. Das wird so genannt, weil das Design auf jedes Gerät reagieren kann, das es anzeigt.

Sie können testen, wie ansprechend eine Website ist, indem Sie die Breite Ihres Browserfensters manuell ändern und feststellen, wie das Design bei großen und kleinen Breiten aussieht.

Das Erstellen einer reaktionsschnellen Website erfordert viel Planung in der Entwurfsphase, um zu berücksichtigen, wie alles auf allen Geräten aussehen wird. In der Webentwicklungsphase werden Medienabfragen verwendet, um zu steuern, welche CSS-Eigenschaften bei bestimmten Breiten verwendet werden.

Mithilfe von Frameworks können Sie schnell eine reaktionsfähige Website erstellen

Wie Sie sich vorstellen können, ist das Codieren des gesamten CSS einer responsiven Website sehr aufwändig.

Wenn Sie nicht viel zusätzliche Zeit sparen können, können Sie ein responsives Framework wie Bootstrap oder Zurb Foundation verwenden.

Beispiel einer Seite, die Sie mit Bootstrap erstellen können

Das Schöne an diesen Frameworks ist, dass sie mit benutzerdefiniertem CSS und JavaScript vorinstalliert sind. Sie haben viel Arbeit für Sie geleistet, indem sie Elemente wie Überschriften und Schaltflächen vorab gestaltet haben.

Sie enthalten auch JavaScript-Komponenten (im Wesentlichen kleine Plugins) wie modale Popup-Fenster und Navigationsleisten.

Da Sie etwas verwenden, das bereits getestet wurde, wird das Erstellen Ihrer Website erheblich vereinfacht. Die einzige Einschränkung ist, dass Sie nicht zu sehr von Frameworks abhängig werden sollten.

Es gibt keinen Ersatz dafür, zu wissen, wie man eine reaktionsfähige Website von Grund auf erstellt.

Weitere Lektüre

  • Beispiele für Responsive Design von Designmodo.com
  • Responsive Web Design Basics von Google
  • Bootstrap 4 Tutorial von W3Schools
  • Tutorials der Zurb Foundation

Sass erspart Ihnen Zeit und Kopfschmerzen beim Schreiben von CSS

Sobald Sie die Grundlagen von CSS verstanden haben, würde ich anfangen, Sass zu lernen, weil es einfach fantastisch ist.

Es ist sogar im Namen! Sass steht für "Syntactically Awesome Style Sheets" und wird auf seiner Website als "Erweiterung von CSS" beschrieben.

Es macht das Schreiben Ihrer CSS-Stile viel einfacher, intuitiver und schneller.

Versteh mich nicht falsch, CSS ist großartig. Aber wenn Sie damit anfangen, werden Sie feststellen, dass reguläres Vanille-CSS ziemlich langweilig werden kann. Und wenn Sie nicht so gut organisiert sind, wie Sie Ihre Stile schreiben, können Ihre CSS-Stile schnell frustrierend durcheinander geraten.

Was Sass tut, gibt Ihnen mehr Macht und Kontrolle.

Hier einige Beispiele, wie Sass Ihnen das Leben erleichtern wird:

  • Mixins: Anstatt den CSS-Code für bestimmte Elemente millionenfach zu kopieren und einzufügen, können Sie Mixins verwenden. Sie können eine Reihe von Stilen für ein Element nur einmal schreiben und so oft wiederverwenden, wie Sie möchten.
  • Verschachtelung: Anstatt alle übergeordneten Klassen eines bestimmten Stils zu schreiben, können Sie alle untergeordneten Klassen in den Stilen des übergeordneten Stils verschachteln. Dies spart auch viel Doppelarbeit.
Hier ist ein Beispiel für die Verwendung der Verschachtelung in Sass.

Kurz gesagt, mit Sass sparen Sie Zeit und Ärger. Es ist die Mühe wert, es zu lernen!

Weitere Lektüre

  • Erste Schritte mit Sass
  • Sass Basics

Ein Hinweis: Da der Browser keine Sass-Dateien selbst lesen kann, müssen Sie Ihre Sass-Dateien in CSS kompilieren.

Dazu müssen Sie ein sogenanntes Build-Tool verwenden und es auf Ihrem Computer ausführen.

Das bringt uns zum nächsten Abschnitt….

Worum geht es bei all diesen Build-Tools überhaupt?

Sie haben wahrscheinlich einen oder mehrere der folgenden Begriffe gehört: "npm", "Webpack", "Grunt", "Gulp", "Bower", "Yarn" ... die Liste wird ziemlich lang!

Diese Tools werden oft als Build-Tools, Task-Läufer, Task-Manager oder "Was muss ich jetzt installieren ?!"

Einige Werkzeuge erledigen Ihre Grunzarbeit (Wortspiel beabsichtigt!) Für Sie

Build-Tools wie Grunt, Gulp und Webpack werden häufig verwendet, um einige der folgenden Aufgaben auszuführen:

  • Verarbeitung von Sass-Dateien in CSS
  • Verketten (Kombinieren) mehrerer CSS-Dateien oder mehrerer JavaScript-Dateien zu einer großen CSS- oder JavaScript-Datei.
  • Minimieren (Komprimieren) von CSS-, JavaScript- und sogar Bilddateien
  • Automatisches Aktualisieren Ihres Browsers mit dem aktualisierten CSS- oder JavaScript-Code

Klar, viele dieser Aufgaben könnten Sie selbst von Hand erledigen.

Aber jedes Mal, wenn Sie eine kleine CSS- oder JavaScript-Änderung vornehmen, müssen Sie dies immer wieder tun.

Welches Build-Tool sollten Sie verwenden?

Momentan übernimmt Webpack das Feld, aber Grunt und Gulp sind noch im Einsatz.

Ich würde auf jeden Fall Webpack lernen, aber es könnte nicht schaden, entweder Grunzen oder Gulp zu lernen (Gulp ist schneller und scheint ein bisschen einfacher in Betrieb zu sein).

Andere Tools installieren Pakete (Plugins) für Sie

Um all diese Aufgaben ausführen zu können, müssen Sie in der Regel Plugins oder Pakete herunterladen und installieren.

Hier bietet sich ein Tool wie npm (Node Package Manager), Bower oder Yarn an. Mit diesen Tools können Sie Pakete schnell auf Ihrem Computer installieren, indem Sie Befehle in die Befehlszeile Ihres Computers eingeben.

Im Grunde genommen handelt es sich um Tools, mit denen Sie mehr Tools erhalten!

Da npm momentan der dominierende Paketmanager ist, sollten Sie unbedingt lernen, wie man es benutzt.

Bower war eines der ersten Tools zum Verwalten von Paketen, ist jedoch offiziell veraltet. Die Entwickler von Bower.io empfehlen nun die Verwendung von Yarn.

Yarn ist ein sehr npm-ähnliches Tool, das von Google, Facebook und anderen entwickelt wurde und verspricht, einige der Probleme, die npm hat, zu beheben.

Zwar ist Yarn in der Minderheit, aber ich würde dennoch empfehlen, es auszuprobieren, da es an Beliebtheit zu gewinnen scheint.

Weitere Lektüre

  • So richten Sie Webpack +2.0 von Grund auf neu ein
  • Javascript Tooling - Die Entwicklung und Zukunft von JS- und Front-End-Build-Tools
  • NPM vs Garn Spickzettel

Jeder liebt JavaScript-Frameworks

Sie haben wahrscheinlich bemerkt, dass viele JavaScript-Frameworks, -Bibliotheken, -Toolkits usw. in Umlauf gebracht werden. Diese Namen enden alle mit ".JS?"

Lassen Sie uns zunächst einen Schritt zurücktreten und definieren, was ein JavaScript-Framework ist.

Je nachdem, mit wem Sie sprechen, sind die Begriffe Framework, Bibliothek und / oder Toolkit möglicherweise nicht austauschbar. (Es wird noch diskutiert.)

Aber es sind alles Werkzeuge, die überraschenderweise einen Teil der Arbeit für Sie erledigen.

Ein Framework ist eine vorgefertigte Struktur, auf der Sie aufbauen.

Im Allgemeinen ist ein Framework ein System von Arbeitsteilen, die von einer anderen Person erstellt wurden.

Um das Framework zu verwenden, installieren Sie es in Ihren eigenen Website-Dateien. Anschließend arbeiten Sie an dieser vorhandenen Struktur und fügen sie hinzu, um das zu erreichen, was Sie tun möchten.

Die Verwendung eines Gerüsts ist wie der Kauf eines Einfamilienhauses, das alle strukturellen Komponenten (Fundament, Rahmen, Dach) enthält, jedoch nicht vollständig ist.

Sie müssen immer noch hineingehen und das Wasser und den Strom anschließen sowie Schränke aufstellen, die Wände streichen und dekorieren.

Einige Beispiele für JavaScript-Front-End-Frameworks sind React, Vue und Angular.

Eine Bibliothek besteht aus einer Reihe vorgefertigter Werkzeuge, die Sie Ihrer eigenen Struktur hinzufügen.

Im Vergleich dazu ist eine Bibliothek eine Sammlung einzelner Komponenten, die Sie in Ihr eigenes System integrieren können.

Dies ist der Hauptunterschied zwischen Frameworks und Bibliotheken:
Während Frameworks vorgefertigte Strukturen sind, sind Bibliotheken keine Struktur für sich. Sie bieten zusätzliche Funktionen für vorhandene Systeme.

Um die Hausbau-Analogie fortzusetzen, können Sie sich Bibliotheken wie Geräte vorstellen, die Sie zu Ihrem Haus hinzufügen möchten.

Maschinen wie Öfen, Duschen und Klimaanlagen haben unterschiedliche Funktionen, aber Sie müssen sie in einem vorhandenen Haus installieren, damit sie nützlich sind.

Ein Beispiel für eine Bibliothek, die die obige Kategorisierung verwendet, ist jQuery.

jQuery ist eine JavaScript-Bibliothek, die keine eigene Struktur aufweist, sondern über 300 verschiedene Funktionen verfügt, die Sie verwenden können.

Auch diese Definitionen sind nicht jedermanns Sache.

React und jQuery kategorisieren sich als Bibliotheken, und Angular und Vue bezeichnen sich selbst als Frameworks.

Für mein persönliches Verständnis ist es jedoch hilfreich, die Tools in diese beiden allgemeinen Gruppen von Frameworks (Systemen) und Bibliotheken (Tools) zu unterteilen.

Was uns zu unserem nächsten Punkt bringt ...

Die großen drei in JavaScript-Frameworks: Angular, React und Vue

Anfang 2010 gab es eine Explosion von Frameworks, die mit ".js" endeten, fast jeden Monat eine neue.

Als wir uns jedoch 2020 nähern, hat sich das Feld aufgeräumt und wir haben die drei großen Gewinner: Angular, React und Vue.

JavaScript-Frameworks haben vielleicht als Trend begonnen, aber sie sind definitiv hier, um zu bleiben.

Angular, React und Vue wachsen, und JavaScript selbst ist derzeit äußerst beliebt - es ist die am häufigsten verwendete Technologie in der jährlichen Umfrage von Stack Overflow.

Darüber hinaus veröffentlicht Stack Overflow Technologietrends basierend auf der Anzahl der Fragen, die pro Monat gestellt werden.

Sie sehen, dass Angular das größte Volumen aufweist und sowohl Angular als auch React im vergangenen Jahr ein ziemlich starkes Wachstum verzeichneten.

Quelle: Stapelüberlauf - JavaScript Framework-Trends

Die Umfrage zum Zustand von JavaScript zeigt, dass React in Bezug auf die Anzahl der Entwickler, die es verwendet und geliebt haben, führend ist, während Angular nicht so interessant zu sein scheint und nicht so viel Interesse an der Wiederverwendung hat.

Vue hat eine geringere tatsächliche Auslastung, ist jedoch führend in Bezug auf eine Technologie, die Entwickler in Zukunft ausprobieren möchten. Es ist also möglich, dass Vue in den nächsten Jahren zu einem größeren Player wird.

Ich denke jedoch, dass alle drei, zumindest für die nächsten paar Jahre, zusammenbleiben.

TL, DR: Welches Framework soll ich gerade lernen?

Es kommt darauf an - wenn Sie einen Vollzeitjob als Webentwickler anstreben, würde ich in Ihren lokalen Stellenangeboten nachsehen, welches Framework anscheinend am häufigsten erwähnt wird.

Wenn Sie gerade erst ohne dieses spezielle Ziel lernen, ist Vue ein guter Ausgangspunkt für Anfänger. Es ist leicht und gut dokumentiert.

Ich persönlich würde jedoch nicht nur Vue lernen. Es wäre eine gute Idee, Ihrem Toolbelt je nach Belieben entweder "Reagieren" oder "Winkel" hinzuzufügen.

Weitere Lektüre

  • Beste JavaScript Frameworks, Bibliotheken und Tools für 2017
  • Das Noob-Handbuch zur Auswahl eines JavaScript-Frameworks

Teil 3: Kommen wir zum Backend

Welche Sprache solltest du zuerst lernen?

Es gibt eine Menge Back-End-Sprachen. Viele von ihnen gibt es schon eine ganze Weile, manche schon bevor es das Internet gab!

Dies kann es schwierig machen, die Sprache auszuwählen, mit der Sie beginnen möchten. Um Ihre Auswahl einzugrenzen, empfehle ich, die folgenden Grundsätze bei Ihrer Entscheidung anzuwenden:

  • Wählen Sie eine Sprache, die lernbar ist: Sie hat eine angemessene Lernkurve, ist gut dokumentiert und / oder verfügt über ein gutes Online-Support-System.
  • Wählen Sie eine Sprache, die für Ihre späteren Karriereziele relevant ist.
  • Wählen Sie eine Sprache, die Spaß macht. Das Erlernen der Webentwicklung ist schwierig genug - es macht keinen Sinn, sich zu zwingen, eine Sprache zu lernen, die Ihnen wirklich nicht gefällt.
Eine wichtige Sache, die Sie beachten sollten, ist, dass Sie nicht jede Sprache lernen müssen.
Wenn Sie ein Anfänger sind, würde ich Ihnen dringend empfehlen, sich zuerst auf eine Sprache zu konzentrieren.

Alle Programmiersprachen haben einige gemeinsame Prinzipien.

Sie können beispielsweise eine for-Schleife in JavaScript, PHP, C # und Python schreiben.

Sobald Sie die grundlegenden Prinzipien der Programmierung in Ihrer Muttersprache gelernt haben, ist es einfacher, diese Konzepte in andere Sprachen zu übertragen.

Ich hoffe, dies nimmt etwas Druck von der Auswahl Ihrer ersten Back-End-Sprache, um zu lernen learn

Werfen wir einen Blick auf einige der beliebtesten Back-End-Sprachen.

Java

Java ist eine stabile Sprache, die sehr verbreitet ist und schon lange existiert. Es hat seit 2001 den ersten Platz im TIOBE-Index inne.

Quelle: Ben Putano auf Stackify.com

Darüber hinaus belegt Java in der Rangliste der am häufigsten verwendeten Sprachen von Stack Overflow den dritten Platz und hat die zweithöchsten getaggten Fragen zu Stack Overflow.

Quelle: Häufigste Programmiersprachen, Stack Overflow Developer Survey 2017

Viele große Technologieunternehmen verwenden Java auf ihren Websites: Google, YouTube, Facebook, Amazon und Twitter.

Ein Grund dafür ist, dass Java schnell ist und für große Websites skaliert werden kann. Es ist auch eine konsistente Sprache, die eine einfachere Wartung für langfristige Projekte ermöglicht.

Twitter wurde ursprünglich mit Ruby on Rails erstellt. 2015 mussten sie jedoch in der Lage sein, ihr enormes Wachstum zu unterstützen. Deshalb wechselten sie zu Scala, einer Sprache, die auf der Java Virtual Machine ausgeführt wird.

C # (C Sharp)

C # wurde von Microsoft als Konkurrent zu Java entwickelt. Sie können sehen, dass C # im Jahr 2009 einen Höhepunkt in den Stack Overflow-Trends erreicht hat und seitdem rückläufig ist.

Quelle: Stack Overflow-Trends für Back-End-Sprachen

Aber ich würde C # noch nicht zählen.

Es ist eine leistungsstarke, objektorientierte Sprache mit der dritthöchsten Anzahl von Stack Overflow-Tags. Im Dezember 2017 belegte Stackify bei der Recherche zu den gefragtesten Sprachen in der Stellenausschreibung in der Tat den dritten Platz.

Quelle: Ben Putano auf Stackify.com

C # wird in einer Vielzahl von Anwendungen verwendet, z. B. in Windows-Desktopanwendungen und in der Android-Programmierung.

Dank der Unity-Spiele-Engine wird es auch in der Spieleentwicklung häufig verwendet. Wenn Sie sich für Android oder die Entwicklung von Spielen interessieren, ist C # eine großartige Möglichkeit, dies zu lernen.

Node.js

Wie bereits erwähnt, war JavaScript in den letzten fünf Jahren die am häufigsten verwendete Sprache für Stack Overflow-Benutzer.

Vieles davon hat mit Node.js zu tun, die 2017 die Liste der am häufigsten verwendeten Frameworks und Bibliotheken anführten.

Quelle: Häufigste Frameworks und Bibliotheken, Stack Overflow Developer Survey 2017

Node.js, das selbst als "JavaScript-Laufzeit" bezeichnet wird, ist im Grunde genommen JavaScript, das im Back-End ausgeführt wird.

Es sollte ursprünglich als effizientere Alternative zum Apache-HTTP-Server dienen. Seit seiner Veröffentlichung im Jahr 2009 hat die Nutzung von Node.js aufgrund seines schnellen und leichten Charakters stetig zugenommen.

Knotenentwickler verwenden beim Erstellen von Webanwendungen häufig das Express-Framework. Express.js ist ein "minimalistisches Webframework" für Node.js.

Durch die Verwendung von Node und Express im Back-End und Angular oder React im Front-End können Sie ein Full-Stack-JavaScript-Entwickler sein.

Dieser Stack oder eine Kombination von Technologien ist derzeit sehr beliebt, insbesondere bei Startups.

Python

Python kam 1991 zum ersten Mal auf die Bühne und ist für viele Programmierstudenten eine häufige „Muttersprache“.

Aufgrund seiner Lesbarkeit und der Verwendung englischer Stichwörter wird es allgemein als leicht zu erlernende Sprache angesehen.

Es gibt einige Python-Frameworks, die Sie verwenden können:

  • Django (vorgefertigte Features, mehr Schnickschnack) und
  • Flasche (minimaler und flexibler).

Die Popularität von Python hat in den letzten Jahren stark zugenommen. Zum jetzigen Zeitpunkt belegt es Platz 4 im TIOBE-Index.

Und im Jahr 2017 belegte es laut dem Bericht über das Berichtsjahr 2017 den zweiten Platz bei der Anzahl der Pull-Anfragen für GitHub.

Quelle: Ben Putano auf Stackify.com

Stack Overflow berichtete im vergangenen September, dass Datenwissenschaft, maschinelles Lernen und akademische Forschung zum großen Teil den Grund für dieses schnelle Wachstum darstellen.

Auch wenn Sie kein Datenwissenschaftler sind, wird die Fähigkeit, mit Daten zu arbeiten und diese zu bearbeiten, zu einer nützlichen Fähigkeit.

Alexus Strong von der Code Academy schreibt:

"Python spricht diejenigen von uns an, die nicht über technische Kenntnisse verfügen, weil es die Datenanalyse […] in greifbare Nähe rückt."

Wenn Sie auf Data Science oder maschinelles Lernen neugierig sind, ist Python möglicherweise eine sehr gute Wahl, da diese Bereiche in den kommenden Jahren wahrscheinlich erweitert werden.

Rubin

Ruby wurde erstmals 1995 veröffentlicht. Zu Beginn des Jahrtausends, als das Start-up Basecamp das Framework Ruby on Rails erfand, bekam es viel Aufmerksamkeit.

In Kombination mit Rubys anfängerfreundlicher Syntax und Lesbarkeit ermöglichte Rails das schnelle und einfache Erstellen von Web-Apps.

Ruby on Rails erfreute sich wachsender Beliebtheit und wurde zum bevorzugten Rahmen für Startups. (Codepen.io, GitHub und Shopify verwenden alle Ruby on Rails.)

Ruby war jedoch nie einer der Heavy Hitter. Letztes Jahr belegte es sowohl in den am häufigsten verwendeten Sprach-Rankings von Stack Overflow als auch im TIOBE-Index den zehnten Platz.

Außerdem lässt sich Ruby on Rails nicht sehr gut skalieren, was dazu führt, dass diese Startups schließlich zu anderen Sprachen wechseln, wenn sie wirklich groß werden (wie Twitter, das auf Java umstellt, wie oben erwähnt).

Möglicherweise führt es nicht die Rangliste an, aber Ruby könnte dennoch eine gute Wahl für das Erlernen Ihrer Muttersprache sein.

Wenn Sie sich für die Startup-Welt interessieren oder Ihr geografisches Gebiet viele Ruby-Jobs bietet, würde ich in Betracht ziehen, Ruby und Ruby on Rails zu lernen.

PHP

PHP ist eine Sprache, die viele Leute gerne hassen.

Trotz der Vielzahl von Quora-Fragen, in denen gefragt wird, ob PHP tot ist, bleibt die Tatsache bestehen, dass PHP heute die am häufigsten verwendete Back-End-Sprache ist.

Untersuchungen von W3Techs.com haben ergeben, dass 83% aller Websites PHP verwenden. (Die nächsthöhere Sprache, ASP.NET, umfasst nur 14%.)

Quelle: W3Techs.com

Content Management Systeme (CMS) sind ein Hauptgrund für den großen Marktanteil von PHP. Die drei wichtigsten CMS - WordPress, Joomla und Drupal - sind alle mit PHP erstellt.

WordPress selbst hat den Löwenanteil des CMS-Marktes und macht 29,5% aller Websites aus.

Wenn Sie gerne damit arbeiten, kann die WordPress-Entwicklung ein guter Schwerpunkt für das Anpassen von Websites und das Erstellen von Plugins oder Themen sein.

Zusätzlich zu Content-Management-Systemen verfügt PHP über einige Frameworks, die die Entwicklung einfacher und schneller machen. Laravel, ein Framework, das 2011 herauskam, ist derzeit das beliebteste.

Weitere Lektüre

  • Ein Leitfaden für Anfänger zur Back-End-Entwicklung (Upwork.com)
  • Serverseitige Webframeworks (Mozilla Developer Network)
  • Was ist die beste Programmiersprache für mich?

Arbeiten mit Daten und Datenbanken

Quelle: Sherchle über GIPHY

Datenbanken können einschüchternd wirken, wenn Sie mit ihnen nicht vertraut sind.

Wenn Sie jedoch darüber nachdenken, haben Sie wahrscheinlich irgendwann mit Daten in Ihrem eigenen Leben gearbeitet und diese verwendet.

Wenn Sie jemals Excel zum Organisieren von Daten verwendet oder ein Diagramm erstellt haben, um Ihre Ziele zu verfolgen, haben Sie eine ähnliche (wenn auch viel einfachere) Funktion ausgeführt wie Datenbanken.

Was muss ich lernen, um mit Datenbanken umzugehen?

Zum Glück müssen Sie nicht viele verschiedene Sprachen lernen. Die Hauptdatenbanksprache ist SQL (ausgesprochene Fortsetzung).

SQL (Structured Query Language) wurde in den 1970er Jahren von IBM erstellt und wird in relationalen Datenbanken verwendet.

Mit dem relationalen Modell können Daten in Zeilen und Spalten strukturiert werden (vergleichbar mit einer Excel-Tabelle).

Jede Spalte ist für eine bestimmte Art von Daten bestimmt, und es kann erforderlich sein, dass die Daten korrekt formatiert sind. Jede Zeile oder jeder Datensatz enthält zusätzlich zu den Spalten- oder Feldwerten eine eindeutige ID oder einen eindeutigen Schlüssel.

Sie können dies unten sehen:

Eine einfache Tabelle, ähnlich wie Daten in einer Tabelle gespeichert werden. Die Spalte Miete würde numerische Werte erfordern.

Die Datensätze werden dann in mehreren Sammlungen gespeichert, die als Tabellen bezeichnet werden. Und eine Sammlung von Tabellen (unter anderem) bildet das gesamte Datenbankschema oder die Struktur.

Die Haupttypen von SQL-Datenbanksystemen sind:

  • MySQL (verwendet für PHP und Open Source-Anwendungen)
  • Microsoft SQL Server (im Allgemeinen für .NET-Anwendungen verwendet)
  • PostgreSQL (Open Source)

NoSQL

Obwohl SQL der dominierende Datenbanktyp ist, gibt es einen anderen Typ: NoSQL (d. H. Nicht-SQL). Wie der Name schon sagt, sind NoSQL-Datenbanken in gewisser Weise anders als herkömmliche SQL-Datenbanken.

NoSQL ist nicht relational und erzwingt nicht denselben Strukturtyp wie SQL. Stattdessen können Sie jede Art von Daten in einem freieren, flexibleren Systemtyp speichern.

Dies führt zu viel schnelleren Prozessen und ermöglicht eine bessere Skalierung für große, komplexe Anwendungen. Der Nachteil ist, dass Sie auf Datenkonsistenz verzichten.

Craig Buckler von Sitepoint schreibt:

NoSQL ist flexibler und fehlerverzeihender, aber die Möglichkeit, Daten überall zu speichern, kann zu Konsistenzproblemen führen.

NoSQL wurde in den 2000er Jahren immer beliebter, da große Technologieunternehmen wie Facebook und Amazon eine schnelle Möglichkeit zur Manipulation und Speicherung von Daten benötigten.

MongoDB ist das am häufigsten verwendete NoSQL-System. Die anderen Top-Typen laut Hackernoon sind Cassandra, Elasticsearch und Couchbase.

SQL vs NoSQL?

Möglicherweise stoßen Sie auf Diskussionen darüber, ob NoSQL SQL ersetzt oder welches besser ist. Die Wahrheit ist, dass beide Arten von Datenbanken ihre Stärken und Schwächen haben.

Wie alles andere wird sich die richtige Wahl je nach Projekt und Auftrag ändern. Persönlich würde ich empfehlen, die Grundlagen von SQL und NoSQL zu erlernen.

Weitere Lektüre

  • Geschichte von SQL - TheBalance.com
  • SQLCourse.com - kostenloses Online-Tutorial zu SQL
  • SQL vs NoSQL Unterschied - XplentyBlog
  • NoSQL erklärt - MongoDB

Erstellen von Websites auf Servern

Wie eingangs erwähnt, handelt es sich bei Servern lediglich um Computer, auf denen Website-Dateien und andere Ressourcen wie Datenbanken gespeichert sind.

Damit eine Website im Internet öffentlich zugänglich ist, muss sie auf einem Server installiert sein.

Hier sind einige Dinge, mit denen Sie arbeiten müssen, um eine Live-Website zu erstellen:

Domainname und SSL-Zertifikat

Domain-Namen sind die Adressen der Website, z. B. Google.com, Wikipedia.org oder Dartmouth.edu.

Um eine zu erhalten, müssen Sie eine verfügbare auswählen und diese dann bei einem Domainnamen-Registrar wie Namecheap.com oder Google Domains erwerben.

Diese Unternehmen registrieren die Domains bei ICANN (Internet Corporation for Assigned Names and Numbers).

ICANN ist eine zentralisierte Organisation, die die Bereiche DNS (Domain Name System) und IP (Internet Protocol) des globalen Internets überwacht und verwaltet.

Zusätzlich zum Domainnamen sollten Sie auch ein SSL-Zertifikat (Secure Sockets Layer) für Ihre Domain erhalten. SSL verschlüsselt den Datenverkehr auf Ihrer Website und schützt Sie so vor Cyberangriffen.

Webhost-Serverraum

Sobald Sie Ihren Domain-Namen bei AwesomeStupendousAmazingSite.com haben, müssen Sie Serverplatz erwerben.

Es gibt verschiedene Arten von Webhosting-Plänen:

  • Gemeinsame Server: Die günstigste Option kann zwischen ein paar US-Dollar und 12 bis 20 US-Dollar pro Monat liegen. Wie es sich anhört, teilen Sie Ihren Serverraum mit anderen "Nachbarn" der Website. Der Vorteil ist die Erschwinglichkeit und der Nachteil sind langsamere Geschwindigkeiten und mögliche Ausfallzeiten, wenn Sie Ihre Nutzung für den Monat überschreiten. Beliebte Hosts sind SiteGround, Bluehost und WP Engine.
  • Cloud-Server: Cloud-Hosting ist eine relativ neue Option. Es besteht aus einem System mit einer großen Anzahl physischer Server, deren Ressourcen alle gemeinsam genutzt werden. Jeder einzelne "Mandant" erhält dann einen virtuellen Server, der Ressourcen aus dem gemeinsamen Pool abruft. Dieses Setup bietet mehr Flexibilität für die Bandbreite und kann sehr schnell skaliert werden. Ein Unternehmen, Digital Ocean, befasst sich ausschließlich mit Cloud-Servern. Die Preise hängen von Ihren Serverspezifikationen ab und können von ein paar US-Dollar pro Monat bis zu fast 1000 US-Dollar reichen.
  • VPS (Virtual Private Servers): VPS ähneln dem Cloud-Hosting, da jeder Mandant seinen eigenen virtuellen Server hat und alle Mandanten einen physischen Server gemeinsam nutzen. Dies ist besser als Shared Hosting, da Sie einen eigenen Teil der Serverressourcen erhalten. Diese Option ist etwas teurer und kostet laut BlueHost zwischen 20 und 60 US-Dollar pro Monat.
  • Dedizierte Server: Diese Server stellen Ihnen einen vollständigen physischen Server zur Verfügung. Wie Sie sich vorstellen können, ist diese Option die leistungsstärkste, aber auch die teuerste. Es handelt sich häufig auch um verwaltete Server, dh das Unternehmen führt Wartungsarbeiten durch und erledigt andere Aufgaben für Sie. Dedicated Hosting kostet Sie in der Regel ein paar bis ein paar hundert Dollar pro Monat, je nach SiteGround-Preis.

Servereinrichtung und Wartung

Sobald Sie Ihren Domain-Namen und den Server-Speicherplatz haben, müssen Sie Ihre Site auf dem Server einrichten.

Dazu müssen Sie Ihren Domain-Namen an die eindeutige IP-Adresse Ihres Servers richten, Ihre Website-Dateien und die Datenbank (falls erforderlich) einrichten und andere Konfigurationen vornehmen.

Wie viel Arbeit Sie leisten müssen, hängt von der Art des Serverplans ab, den Sie von Ihrem Webhost gekauft haben. Die einfachsten gemeinsamen Pläne werden häufig mit Ein-Klick-Funktionen geliefert, mit denen WordPress, Drupal oder andere Websites automatisch für Sie installiert werden.

Andere Server wie Digital Ocean sind sehr klein und erfordern, dass Sie alles manuell einrichten.

Bereitstellen von Dateien auf Ihrem Server

Sie fragen sich möglicherweise, wie Sie Dateien von Ihrem eigenen Computer auf Ihren Server übertragen können. Dies können Sie mit einem Protokoll erreichen, bei dem es sich im Grunde um eine Methode zum Transportieren von Dateien oder anderen Daten zu und von einem Server handelt.

Randnotiz:
HTTP, die Art und Weise, wie Ihr Browser Websites lädt, ist ebenfalls ein Protokoll - HTTP steht für Hypertext Transfer Protocol.

Der einfachste Weg ist die Verwendung eines Protokolls namens FTP (File Transfer Protocol). Es wird jedoch nicht mehr empfohlen, FTP zu verwenden, da es nicht sicher (verschlüsselt) ist.

Heutzutage verwenden die meisten Menschen sicherere Protokolle: FTPS (FTP über SSL) oder SFTP (Secure SHell FTP).

Damit FTP / SFTP funktioniert, müssen Sie ein Konto auf Ihrem Server erstellen. Anschließend stellen Sie unter Verwendung der IP-Adresse des Servers und eines Benutzernamens und Kennworts zur Authentifizierung eine Verbindung zum Server her.

Um Dateien über FTP / SFTP zu übertragen, können Sie Programme wie Filezilla oder CyberDuck verwenden. Diese haben eine grafische Benutzeroberfläche (GUI), die das Hochladen und Herunterladen von Dateien auf und von Ihrem Computer und Ihrem Server relativ einfach macht.

Bereitstellungstools

Wie Sie sich vorstellen können, kann es mühsam werden, Dateien jedes Mal manuell auf Ihren Server hochzuladen, wenn Sie eine kleine Codeänderung vornehmen. Außerdem kann es verwirrend werden, wenn mehrere Personen an derselben Datei arbeiten und gleichzeitig hochladen.

Glücklicherweise können Sie Bereitstellungen einrichten, die mit Ihrem Git-Repository verknüpft sind.

Das Bereitstellungstool speichert Ihre FTP / SFTP-Einstellungen. Wenn Sie beispielsweise eine Änderung in Git in Ihren Master-Zweig übertragen, überträgt das Tool die Dateien für Sie. Auf diese Weise müssen Sie sich nicht merken, welche Dateien Sie geändert haben, wodurch die Anzahl der Fehler, die Sie machen, verringert wird.

Für komplexere Websites mit einem Team aus mehreren Personen gibt es erweiterte Bereitstellungstools und -systeme, mit denen Sie Ihre Bereitstellungen strukturierter gestalten können.

Diese Systeme gehen über den Rahmen dieses Artikels hinaus, enthalten jedoch Vorgehensweisen wie die kontinuierliche Integration.

Weitere Lektüre

  • Registrierungsprozess für Domainnamen - WHOIS
  • 8 Beliebte Arten von Web-Hosting-Diensten - TheBalance.com
  • 6 besten FTP-Clients - WP-Anfänger
  • Kontinuierliche Integration vs. kontinuierliche Bereitstellung vs. kontinuierliche Bereitstellung - Atlassian

Glückwunsch!!

Du hast es geschafft!

Bevor wir nun mit der Ressourcenliste fortfahren, beachten Sie bitte, dass der folgende Abschnitt einige Affiliate-Links enthält. Das heißt, ich erhalte eine kleine Provision von der Firma, wenn Sie über den Link einkaufen.

Auf einfache Weise können Sie das Schreiben dieser Art von Artikeln ohne zusätzliche Kosten für sich selbst unterstützen. (Ich habe auch Links aufgenommen, die keine Partner sind, wenn Sie dies vorziehen.)

Epilog: Empfohlene Lernressourcen

Wie Sie sicher wissen, gibt es eine Menge Ressourcen, mit denen Sie Code lernen können.

Ich habe hier einige der beliebtesten und empfohlenen Online-Tutorials, Bücher und andere Ressourcen aufgeführt.

Komplette Webentwicklungskurse

Es gibt einige Online-Kurse, die alle oder alle Bereiche der Webentwicklung abdecken.

Wenn Sie nicht herumspringen und sich nur auf einen Ort konzentrieren möchten, um alles zu lernen, empfehle ich Folgendes:

freeCodeCamp ist eine gemeinnützige Organisation, die aufstrebenden Webentwicklern eine kostenlose Schulung anbietet.

Ihr Lehrplan besteht aus einem umfassenden Satz von Kursen, die vom Front-End bis zum Back-End (mit Node und Express) und mehr reichen!

Viele Menschen haben nach der Teilnahme an freeCodeCamp einen Vollzeitjob bekommen. Sie können auch über GitHub zu Open Source-Projekten beitragen.

Einer der Hauptvorteile von freeCodeCamp ist, dass es sehr auf die Community ausgerichtet ist, mit Message Boards und Facebook-Gruppen, sodass Sie beim Lernen viel Unterstützung erhalten.

Sie können einige Bewertungen von freeCodeCamp auf Quora und Reddit lesen.

Colt Steeles Web Developer Bootcamp (Affiliate-Link / Nicht-Affiliate-Link)

Colt ist ein ehemaliger Coding Bootcamp Instructor, der ein komplettes Bootcamp für einen Bruchteil des Preises anbieten wollte.

Aus gutem Grund hat er einen der beliebtesten und am besten bewerteten Kurse für Webentwickler auf Udemy entwickelt.

Sein Kurs führt Sie von den Grundlagen bis zur Full-Stack-Entwicklung (mit Node und Express als Back-End), mit viel Inhalt und wird regelmäßig aktualisiert.

Sie können die Bewertungen seines Kurses auf der Udemy-Seite sowie in einem freeCodeCamp-Forumsbeitrag lesen.

Udacity bietet sowohl kostenlose Kurse als auch kostenpflichtige Programme namens Nanodegrees an.

Die Nanodegrees bauen auf den kostenlosen Kursen auf - es handelt sich um intensive (12-stündige / wöchentliche) Programme, in denen Sie Portfolio-Projekte aufbauen und mehr Community-Interaktion und -Unterstützung erhalten.

Sie sind nicht billig und kosten derzeit 199 US-Dollar pro Monat. Die Fertigstellung kann zwischen 6 und 10 Stunden dauern.

Wenn Sie interessiert sind, finden Sie hier einige Rezensionen zu den Nanodegree-Programmen von Udacity bei Quora und Hacker News.

Andere Ressourcen

Team Treehouse ist eine sehr beliebte Website zum Erlernen der Codierung. Sie haben keine kostenlosen Inhalte, verwenden jedoch ein Abonnementmodell.

Treehouse bietet gestaffelte monatliche Tarife an (derzeit 25 USD oder 55 USD pro Monat) und Sie können unbegrenzt an Kursen teilnehmen.

Sie können Ihre Mitgliedschaft sogar pausieren, wenn Sie eine Pause für ein paar Monate einlegen möchten, und diese später fortsetzen, wenn Sie dazu bereit sind.

Neben einzelnen Kursen bieten sie auch strukturierte Tracks wie Java Web Development oder Front-End Web Development, die Sie durch eine Reihe ausgewählter Kurse führen.

Udemy (Affiliate-Link / Nicht-Affiliate-Link)

Udemy ist eine der größten Online-Lernplattformen und bietet Kurse nicht nur für das Programmieren, sondern auch für andere Bereiche für Profis und Hobbyisten an.

Sie zahlen für jeden Kurs einzeln und es gibt regelmäßige Verkäufe, bei denen der Kurs zwischen 10 und 20 US-Dollar liegt.

Aufgrund der großen Anzahl von Kursen und Lehrern ist die Qualität natürlich unterschiedlich. Sie sollten also vor dem Kauf recherchieren.

Ich empfehle, Bewertungen und Beurteilungen sowohl auf der Udemy-Kursseite als auch an anderer Stelle online zu überprüfen.

Wes Bos ist ein Webentwicklungslehrer, der einige sehr beliebte Kurse erstellt hat.

Ein Kurs, den ich auf jeden Fall ausprobieren möchte, ist JavaScript30 (Affiliate-Link / Nicht-Affiliate-Link). Dies ist seine kostenlose 30-Tage-Vanille (dh keine Frameworks oder Bibliotheken) JavaScript-Codierungs-Herausforderung.

Er hat auch Premium-Kurse zu React, Node und fortgeschrittenem JavaScript auf seiner Website.

Wenn Sie neugierig sind, finden Sie hier einige Bewertungen seiner Kurse auf Reddit und im freeCodeCamp-Forum.

Microsoft Virtual Academy (MVA) bietet eine Sammlung kostenloser Online-Kurse, die von C # und Python bis zu SQL Server und anderen Bereichen wie der Spieleentwicklung reichen.

Einige ihrer beliebtesten Kurse sind Einführung in die Programmierung mit Python, C # Fundamentals und SQL Database Fundamentals.

Hier finden Sie einige Bewertungen von MVA-Kursen auf Reddit und LinkedIn.

SoloLearn hat einen einzigartigen Ansatz zum Erlernen des Codierens: Sie können nicht nur von ihrer Website, sondern auch von ihren kostenlosen mobilen Apps lernen.

Einige ihrer beliebtesten Kurse sind Python, C ++ und Java.

Sie haben auch ein Message Board vom Typ StackOverflow, das sehr aktiv bei Fragen und Diskussionen ist.

Wenn Sie neugierig sind, können Sie sich einige Rezensionen zu SoloLearn auf Reddit und Quora ansehen.

Bücher

Wenn Sie gerne aus Büchern lernen oder einige als Nachschlagewerke haben möchten, finden Sie hier eine kurze Liste von Büchern, von denen ich dachte, dass sie für Anfänger geeignet sind.

Einige davon sind kostenlos und können online gelesen werden, andere sind traditionelle Papierbücher.

HTML und CSS von Jon Duckett
(Affiliate-Link / Nicht-Affiliate-Link)

JavaScript und JQuery von Jon Duckett
(Affiliate-Link / Nicht-Affiliate-Link)

Jon Ducketts Bücher sind wahrscheinlich die beliebtesten Bücher für Anfänger-Webentwickler.

Es handelt sich nicht nur um einfache Lehrbücher, sondern um schön gestaltete Bücher, in denen anhand von Fotos und Illustrationen Codierungskonzepte vermittelt werden.

Das Front-End Developer Handbook ist ein kostenloses Online-Buch von Frontend Masters, das von Cody Lindley geschrieben wurde.

Es wird jährlich aktualisiert und kann als Leitfaden für den Stand der Front-End-Webentwicklung mit neuen Informationen, Ressourcen, Trends und Tools in Bezug auf das Gebiet betrachtet werden.

Eloquent JavaScript ist ein Einsteigerbuch zum Thema Programmierung, das sich auf JavaScript konzentriert.

Sie können es kostenlos online auf der Website lesen, die über ein übersichtliches Konsolentool verfügt, mit dem Sie den Code während des Lesens schreiben und testen können.

Wenn Sie eine physische Kopie wünschen, ist das Buch auch bei Amazon erhältlich (Affiliate-Link / Non-Affiliate-Link).

Gedanken schließen

Ist es möglich, sich Webentwicklung mit Online-Ressourcen beizubringen? Ich glaube die Antwort ist ja.

Es wird jedoch überhaupt nicht einfach sein. Es ist schwierig, etwas zu lernen und zu beherrschen, und das Erlernen von Code ist nicht anders.

In diesem Sinne, wenn Sie diesen Weg gehen möchten, hier einige Ratschläge:

Konzentriert bleiben.

Wenn Sie alleine lernen, kann es sehr verlockend sein, von einem Tutorial zum nächsten zu springen. Besonders wenn du anfängst, Straßensperren zu treffen.

Dies kann jedoch zu einem sehr oberflächlichen Lernen führen, wenn Sie tatsächlich ein tieferes Wissen über Fähigkeiten entwickeln müssen.

Versuchen Sie, bei dem Kurs / Buch zu bleiben, an dem Sie gerade arbeiten, es sei denn, es gefällt Ihnen wirklich nicht. Wenn Sie die Straßensperren überwinden, können Sie das Material besser verstehen.

Und je mehr scheinbar unmögliche Probleme Sie angehen, desto mehr werden Sie sich an Herausforderungen gewöhnen.

Jeder Kurs ist einfach der erste Schritt auf Ihrer Lernreise.

Wenn Sie nur ein Tutorial oder einen Kurs besuchen, bedeutet dies nicht, dass Sie zum Zeitpunkt Ihres Abschlusses ein Meister sind. Sie müssen viele Male lernen und üben, bevor Sie es wirklich wirklich „verstehen“.

Versuchen Sie, ein zweites Mal durch ein Tutorial zu gehen oder dasselbe Material mit einem anderen Kurs oder Buch zu lernen.

Sie werden sehen, wie verschiedene Leute dasselbe Konzept erklären, und es kann helfen, das Wissen besser in Ihrem Gehirn zu halten.

Und natürlich gibt es keinen Ersatz für praktische Erfahrungen.

Versuchen Sie beim Lernen, die erlernten Fähigkeiten selbst zu üben. Erstellen Sie zufällige Projekte, erstellen Sie kostenlos eine Website für einen Freund oder eine gemeinnützige Organisation. Je öfter Sie ein Problem lösen, desto besser werden Sie es verstehen.

Danke fürs Lesen!

Ich hoffe wirklich, dass Sie diesen Artikel hilfreich fanden!

Fühlen Sie sich frei, unten einen Kommentar mit Gedanken oder Feedback zu hinterlassen.

Wenn Sie gerade Webentwicklung lernen, würde ich auch gerne Folgendes hören:

  • Was ist Ihr oberstes Ziel, und
  • Das größte Problem, auf das Sie beim Lernen gestoßen sind.

Mehr wollen? Andere Artikel, die ich geschrieben habe und an denen Sie interessiert sein könnten:

Wie man nicht an der Kodierung saugt

Das Erlernen von Code ist wie das Erlernen einer Fremdsprache

Möchten Sie das Programmieren lernen? Ich schreibe auf meiner Website coder-coder.com über Codierung und Produktivität.

Melde dich hier an, um E-Mails über neue Artikel zu erhalten.