Anfänger-Roadmap zur Webentwicklung

Die Roadmap für Anfänger enthält alle Grundlagen für die Webentwicklung. Wir werden jeden Schritt durchgehen - von der Ermittlung des zu verwendenden Code-Editors bis hin zum JavaScript-Framework oder der Back-End-Sprache, die Sie verwenden können. Außerdem enthalten wir Links zu Ressourcen, in denen Sie diese Fähigkeiten erlernen können.

Tatsache ist, wenn Sie gerade erst anfangen, müssen Sie im Moment nur die Grundlagen wissen. Sie müssen wirklich nicht von Anfang an jede einzelne Technologie, jedes Tool oder jede Sprache kennen. (Du wirst diese Brücke überqueren, wenn du dazu kommst, glaub mir!)

Am Ende dieses Handbuchs haben Sie ein Verständnis für die Grundlagen der Webentwicklung, welche Fähigkeiten Sie kennen müssen und wo Sie sie finden können!

1: Was ist Webentwicklung? Wie Websites funktionieren, Front-End vs. Back-End, Code-Editor‌‌

2: Grundlegendes Frontend: HTML, CSS und JavaScript‌‌

3: Tools : Paketmanager, Build-Tools, Versionskontrolle‌‌

4a: Zusätzliches Frontend: Sass, responsives Design, JavaScript-Frameworks‌‌

4b: Grundlegendes Backend: Server- und Datenbankverwaltung, Programmiersprache

In dieser Roadmap empfehle ich, die Schritte 1, 2 und 3 der Reihe nach auszuführen. Je nachdem, ob Sie sich auf mehr Front-End oder Back-End konzentrieren möchten, können Sie die Schritte 4a oder 4b in beliebiger Reihenfolge ausführen.

Ich persönlich halte es für eine gute Idee für Front-End-Webentwickler, zumindest ein bisschen Back-End zu kennen und umgekehrt. Wenn Sie zumindest die Grundlagen beider kennen, können Sie herausfinden, ob Ihnen Front-End oder Back-End besser gefallen?

Sie können auch die aktualisierte Version dieses Artikels in meinem Blog lesen!

1: Was ist Webentwicklung?

Bevor wir uns mit der eigentlichen Codierung befassen, werfen wir zunächst einen Blick auf einige allgemeine Informationen zur Webentwicklung: Funktionsweise von Websites, Unterschied zwischen Front- und Back-End und Verwendung eines Code-Editors.

Wie funktionieren Websites?

Alle Websites sind im Grunde genommen nur eine Reihe von Dateien, die auf einem Computer gespeichert sind, der als Server bezeichnet wird. Dieser Server ist mit dem Internet verbunden. Sie können diese Website dann über einen Browser (wie Chrome, Firefox oder Safari) auf Ihren Computer oder Ihr Telefon laden. Ihr Browser wird in dieser Situation auch als Client bezeichnet .

Jedes Mal, wenn Sie im Internet sind, erhalten und laden Sie (der Client) Daten (wie Katzenbilder) vom Server und senden Daten zurück an den Server ( Laden von Moar-Katzenbildern! ) zwischen dem Client und dem Server ist die Basis des Internets.

Alles, worauf Sie in Ihrem Browser zugreifen können, hat ein Webentwickler erstellt. Einige Beispiele sind Websites und Blogs für kleine Unternehmen auf der einfacheren Seite bis hin zu sehr komplexen Web-Apps wie AirBnb, Facebook und Twitter.

Was ist der Unterschied zwischen Frontend und Backend?

Die Begriffe "Front-End", "Back-End" und "Full-Stack" -Webentwickler beschreiben, mit welchem ​​Teil der Client / Server-Beziehung Sie arbeiten.

"Frontend" bedeutet, dass Sie sich hauptsächlich mit der Kundenseite befassen. Es wird als "Front-End" bezeichnet, da es im Browser angezeigt wird. Umgekehrt ist das „Back-End“ der Teil der Website, den Sie nicht wirklich sehen können, der jedoch einen Großteil der Logik und Funktionalität übernimmt, die erforderlich sind, damit alles funktioniert.

Eine Möglichkeit, darüber nachzudenken, besteht darin, dass die Front-End-Webentwicklung wie der „Front-of-House“ -Teil eines Restaurants ist. Es ist der Bereich, in dem Kunden das Restaurant sehen und erleben - die Inneneinrichtung, die Sitzgelegenheiten und natürlich das Essen.

Auf der anderen Seite ist die Back-End-Webentwicklung wie der Back-of-House-Teil des Restaurants. Hier werden Lieferungen und Lagerbestände verwaltet, und der Prozess zur Herstellung der Lebensmittel findet statt. Hinter den Kulissen gibt es viele Dinge, die die Kunden nicht sehen werden, aber sie werden das Endprodukt erleben (und hoffentlich genießen) - ein köstliches Essen!

Abgesehen von lustigen Illustrationen erfüllen sowohl die Front- als auch die Back-End-Webentwicklung unterschiedliche, aber sehr wichtige Funktionen.

Verwenden eines Code-Editors

Wenn Sie eine Website erstellen, ist das wichtigste Tool, das Sie verwenden, Ihr Code-Editor oder Ihre IDE (Integrated Development Environment). Mit diesem Tool können Sie das Markup und den Code schreiben, aus denen die Website besteht.

Es gibt einige gute Optionen, aber der derzeit beliebteste Code-Editor ist VS Code. VS Code ist eine leichtere Version von Visual Studio, der Haupt-IDE von Microsoft. Es ist schnell, kostenlos, einfach zu bedienen und kann mit Themen und Erweiterungen angepasst werden.

Andere Code-Editoren sind Sublime Text, Atom und Vim.

Wenn Sie gerade erst anfangen, würde ich empfehlen, VS Code zu lesen, den Sie von der Website herunterladen können.

Nachdem wir einige der umfassenderen Konzepte der Webentwicklung behandelt haben, gehen wir nun näher auf das Front-End ein.

2: Grundlegendes Frontend

Das Front-End einer Website besteht aus drei Dateitypen: HTML, CSS und JavaScript. Diese Dateien werden auf der Clientseite in den Browser geladen.

Schauen wir uns jeden einzelnen genauer an.

HTML

HTML oder HyperText Markup Language ist die Grundlage aller Websites. Dies ist der Hauptdateityp, der in Ihren Browser geladen wird, wenn Sie sich eine Website ansehen. Die HTML-Datei enthält den gesamten Inhalt der Seite und verwendet Tags, um verschiedene Arten von Inhalten zu kennzeichnen.

Sie können beispielsweise Tags verwenden, um Überschriften, Absätze, Listen mit Aufzählungszeichen, Bilder usw. zu erstellen. HTML-Tags selbst haben einige Stile angehängt, aber sie sind ziemlich einfach, wie Sie es in einem Word-Dokument sehen würden.

CSS

Mit CSS oder Cascading Style Sheets können Sie diesen HTML-Inhalt so gestalten, dass er schön und ausgefallen aussieht. Sie können Farben und benutzerdefinierte Schriftarten hinzufügen und die Elemente Ihrer Website so gestalten, wie Sie möchten. Sie können sogar Animationen und Formen mit CSS erstellen!

CSS hat viel Tiefe, und manchmal neigen die Leute dazu, es zu beschönigen, damit sie zu Dingen wie JavaScript übergehen können. Ich kann jedoch nicht überschätzen, wie wichtig es ist, zu verstehen, wie ein Design mithilfe von CSS in ein Website-Layout konvertiert wird. Wenn Sie sich auf Front-End spezialisieren möchten, ist es wichtig, über wirklich solide CSS-Kenntnisse zu verfügen.

JavaScript

JavaScript ist eine Programmiersprache, die für die Ausführung im Browser entwickelt wurde. Mit JavaScript können Sie Ihre Website dynamisch gestalten, dh sie reagiert auf unterschiedliche Eingaben des Benutzers oder anderer Quellen.

Sie können beispielsweise eine Schaltfläche "Nach oben" erstellen, mit der der Benutzer, wenn er darauf klickt, wieder nach oben scrollen kann. Oder Sie können ein Wetter-Widget erstellen, das das heutige Wetter basierend auf dem Standort des Benutzers in der Welt anzeigt.

Insbesondere wenn Sie Ihre Fähigkeiten später mit einem JavaScript-Framework wie React entwickeln möchten, werden Sie mehr verstehen, wenn Sie sich die Zeit nehmen, zuerst reguläres Vanille-JavaScript zu lernen. Es macht wirklich Spaß, eine Sprache zu lernen, und Sie können so viel damit anfangen!

Wo man HTML, CSS und JavaScript lernt

Ich werde oft gefragt, wo man am besten Codieren lernen kann, und ich werde ihnen normalerweise einige der folgenden Ressourcen nennen. Außerdem habe ich in meinem Blog eine ausführlichere Liste der besten Kurse zum Erlernen der Webentwicklung - vielleicht finden Sie sie hilfreich!

Hinweis : Einige der folgenden Links (die zu bezahlten Kursen und Büchern) sind Affiliate-Links. Dies bedeutet, dass ich eine Provision erhalte, wenn Sie diese ohne zusätzliche Kosten für sich selbst kaufen. Auf diese Weise können Sie mich bei der Erstellung hilfreicher Ressourcen wie dieser unterstützen!

freeCodeCamp

Einer meiner Lieblingsorte ist freeCodeCamp. Es ist ein Online-Coding-Bootcamp, das gemeinnützig und völlig kostenlos ist! Ich liebe diese Option, denn wenn Sie ein Anfänger sind und nicht ganz sicher sind, ob das Codieren für Sie geeignet ist, können Sie mit geringem Druck und ohne Risiko feststellen, ob es Ihnen gefällt.

Ein Nachteil von freeCodeCamp ist, dass sie zwar einen unglaublichen Lehrplan mit einer integrierten Codierungsumgebung haben, aber keine strukturierten Videos als Teil davon haben.

Wenn Sie also wirklich gerne aus Videos lernen, finden Sie hier einige andere Optionen:

Team Baumhaus

Team Treehouse ist eine Premium-Online-Lernplattform, die auf Videos basiert und über mehrere Tracks verfügt, denen Sie folgen können. Sie haben sogar ein Online-Tech-Degree-Programm, das einem Online-Bootcamp ähnelt, das Sie in 4-5 Monaten abschließen können.

Leider ist Treehouse nicht kostenlos, aber je nach Budget gibt es unterschiedliche Monats- oder Jahrespläne. Sie haben eine kostenlose 7-Tage-Testversion, damit Sie sehen können, ob es Ihnen gefällt, und ich kann Ihnen auch einen Deal geben, bei dem Sie 100 US-Dollar von einem Jahr ihres Basisplans erhalten. Wenn Sie ziemlich sicher sind, dass Sie in die Webentwicklung einsteigen möchten, ist Team Treehouse ein großartiger Ort zum Lernen.

Wenn Sie eher ein Fan von einmaligen Videokursen sind, gibt es einige kostenlose und kostenpflichtige Optionen:

Wes Bos

Wes Bos bietet kostenlose Kurse zum Erlernen von Flexbox, CSS Grid und JavaScript an. Ich habe gerade seinen CSS Grid-Kurs durchlaufen und er war sehr gründlich und hat auch Spaß gemacht. Wes ist ein großartiger Lehrer!

Udemy

Udemy ist eine Online-Lernplattform mit vielen großartigen Kursen. Einer, der Ihnen besonders gefallen könnte, ist der Advanced CSS- und Sass-Kurs von Jonas Schmedtmann - dieser kostenpflichtige Kurs behandelt CSS-Grid, Flexbox, Responsive Design und andere CSS-Themen!

Youtube

Es gibt auch eine Menge kostenloser Video-Ressourcen auf YouTube:

Traversy Media, wahrscheinlich der größte Webentwicklungskanal, bietet einen HTML-Crashkurs und einen CSS-Crashkurs an.

DesignCourse, ein Kanal, der sich auf Webdesign und Front-End konzentriert, bietet auch ein HTML- und CSS-Tutorial für.

Und freeCodeCamp hat einen eigenen YouTube-Kanal mit Videos wie einem Learn JavaScript-Kurs und anderen ausführlichen Kursen.

Bücher und Artikel zur Webentwicklung

Wenn Sie eher eine lesende Person sind, kann ich Folgendes nur empfehlen:

Die unglaublich beliebten Jon Duckett-Bücher zu HTML & CSS sowie JavaScript & jQuery. Diese Bücher sind überhaupt keine dichten, gewöhnlichen Lehrbücher. Sie sind wunderschön gestaltet, sehr gut geschrieben und haben viele Fotos und Bilder, um das Material zu lehren.

Eloquent JavaScript ist ein weiteres Buch, das ich wirklich mag. Sie können es kostenlos auf ihrer Website lesen oder eine Papierkopie bei Amazon kaufen, wenn Sie physische Bücher mögen. Ich habe dieses selbst und ich mag es wirklich!

Wenn Sie weitere Buchempfehlungen sehen möchten, lesen Sie meinen Beitrag zu empfohlenen Büchern zum Erlernen der Webentwicklung.

Und zu guter Letzt sind einige Websites mit großartigen Artikeln und anderen Ressourcen:

  • Mozilla Developer Network
  • CSS-Tricks
  • Smashing Magazine

3: Werkzeuge

Kommen wir jetzt zu einigen anderen Front-End-Technologien. Wie bereits erwähnt, sind HTML, CSS und JavaScript die Grundbausteine ​​der Front-End-Webentwicklung. Zusätzlich zu ihnen gibt es einige andere Tools, die Sie lernen möchten.

Paketmanager

Paketmanager sind Online-Sammlungen von Software, von denen ein Großteil Open Source ist. Jede als Paket bezeichnete Software steht Ihnen zur Installation und Verwendung in Ihren eigenen Projekten zur Verfügung.

Sie können sie wie Plugins betrachten - anstatt alles von Grund auf neu zu schreiben, können Sie hilfreiche Dienstprogramme verwenden, die andere bereits geschrieben haben.

Der beliebteste Paketmanager heißt npm oder Node Package Manager. Sie können jedoch auch einen anderen Manager namens Yarn verwenden. Beide sind gute Optionen zum Wissen und Verwenden, obwohl es wahrscheinlich am besten ist, mit npm zu beginnen.

Wenn Sie mehr erfahren möchten, können Sie diesen Artikel über die Grundlagen der Verwendung von npm lesen.

Tools erstellen

Modulbündler und Build-Tools wie Webpack, Gulp oder Parcel sind ein weiterer wesentlicher Bestandteil des Front-End-Workflows.

Grundsätzlich führen diese Tools Aufgaben und Prozessdateien aus. Sie können sie verwenden, um Ihre Sass-Dateien in CSS zu kompilieren, Ihre ES6-JavaScript-Dateien für eine bessere Browserunterstützung auf ES5 zu übertragen, einen lokalen Webserver auszuführen und viele andere hilfreiche Aufgaben auszuführen.

Gulp , technisch gesehen ein Task Runner, verfügt über eine Reihe von npm-Paketen, mit denen Sie Ihre Dateien kompilieren und verarbeiten können.

Webpack ist ein super leistungsfähiger Bundler, der alles kann, was Gulp kann, und noch mehr. Es wird eine Menge in JavaScript-Umgebungen verwendet, insbesondere mit JavaScript-Frameworks (auf die wir gleich noch eingehen werden). Ein Nachteil von Webpack ist, dass es viel Konfiguration erfordert, um in Betrieb zu gehen, was frustrierend sein kann.

Parcel ist ein neuerer Bundler wie Webpack, der jedoch sofort vorkonfiguriert ist, sodass Sie ihn buchstäblich in wenigen Minuten zum Laufen bringen können. Und Sie müssen sich nicht so viele Gedanken über die Konfiguration machen.

Persönlich verwende ich Gulp gerne für meine eigenen Front-End-Workflows, in denen ich nur meine Sass- und JavaScript-Dateien kompilieren und nicht zu viel anderes tun möchte.

Hilfreiche Links

Wenn Sie sich für Gulp oder Parcel interessieren, habe ich Tutorials für beide:

  • Verwenden von Gulp 4 in Ihrem Workflow
  • Kurzanleitung zum Paket

Wenn Sie mehr über Webpack erfahren möchten, sehen Sie sich die folgenden YouTube-Videos an:

  • Crashkurs in Webpack von DesignCourse
  • 10-teilige Serie über Webpack von Colt Steele

Versionskontrolle

Die Versionskontrolle (auch als Quellcodeverwaltung bezeichnet) ist ein System, das jede Codeänderung verfolgt, die Sie in Ihren Projektdateien vornehmen. Sie können sogar zu einer vorherigen Änderung zurückkehren, wenn Sie einen Fehler machen. Es ist fast so, als hätten Sie unendlich viele Speicherpunkte für Ihr Projekt, und ich sage Ihnen, es kann ein großer Lebensretter sein.

Das beliebteste Versionskontrollsystem ist ein Open-Source-System namens Git. Mit Git können Sie alle Ihre Dateien und deren Änderungsverlauf in Sammlungen speichern, die als Repositorys bezeichnet werden.

Möglicherweise haben Sie auch von GitHub gehört, einem Online-Hosting-Unternehmen von Microsoft, in dem Sie alle Ihre Git-Repositorys speichern können.

Um Git und GitHub zu lernen, bietet GitHub.com einige Online-Anleitungen, die erklären, wie Sie arbeiten. Traversy Media hat auch ein YouTube-Video, in dem erklärt wird, wie Git funktioniert.

4a: Zusätzliches Frontend

Sobald Sie die Grundlagen des Frontends kennen, gibt es einige weitere Zwischenfähigkeiten, die Sie lernen möchten. Ich empfehle, dass Sie sich Folgendes ansehen: Sass, responsives Design und ein JavaScript-Framework.

Sass

Sass ist eine Erweiterung von CSS, die Schreibstile intuitiver und modularer macht. Es ist ein wirklich mächtiges Werkzeug. Mit Sass können Sie Ihre Stile zur besseren Organisation in mehrere Dateien aufteilen, Variablen zum Speichern von Farben und Schriftarten erstellen und Mixins und Platzhalter verwenden, um Stile einfach wiederzuverwenden.

Selbst wenn Sie nur einige der grundlegenden Funktionen wie das Verschachteln verwenden, können Sie Ihre Stile schneller und mit weniger Kopfschmerzen schreiben.

Weitere Informationen zu Sass finden Sie in diesem Scotch.io-Tutorial sowie in einem YouTube-Video von Dev Ed.

Sich anpassendes Design

Responsive Design stellt sicher, dass Ihre Stile auf allen Geräten - Desktops, Tablets und Mobiltelefonen - gut aussehen. Zu den Kernpraktiken des Responsive Design gehören die Verwendung einer flexiblen Größenanpassung für Elemente sowie die Verwendung von Medienabfragen, um Stile für bestimmte Geräte und Breiten anzuvisieren.

Anstatt Ihren Inhalt auf eine statische Breite von 400 Pixel festzulegen, können Sie beispielsweise eine Medienabfrage verwenden und den Inhalt auf dem Desktop auf 50% und auf Mobilgeräten auf 100% einstellen.

Das Erstellen Ihrer Websites mit reaktionsschnellem CSS ist heutzutage ein Muss, da der mobile Datenverkehr in vielen Fällen den Desktop-Datenverkehr übertrifft.

Weitere Informationen zum reaktionsschnellen Design und zur Reaktionsfähigkeit Ihrer Websites finden Sie in diesem Artikel. Ich mache auch Live-Coding-Streams auf meinem YouTube-Kanal, wo ich eine Website von Grund auf neu erstelle und die Zuschauer mir in Echtzeit Fragen stellen können!

JavaScript-Frameworks

Sobald Sie die Grundlagen von Vanille-JavaScript beherrschen, möchten Sie möglicherweise eines der JavaScript-Frameworks erlernen (insbesondere, wenn Sie ein Full-Stack-JavaScript-Entwickler sein möchten).

Diese Frameworks werden mit vorgefertigten Strukturen und Komponenten geliefert, mit denen Sie Apps schneller erstellen können, als wenn Sie von vorne anfangen würden.

Derzeit haben Sie drei Hauptoptionen: Reagieren, Winkel und Vue.

React (technisch gesehen eine Bibliothek) wurde von Facebook erstellt und ist derzeit das beliebteste Framework. Sie können mit dem Lernen beginnen, indem Sie auf die React.js-Website gehen. Wenn Sie an einem Premium-React-Kurs interessiert sind, bieten sowohl Tyler McGinnins als auch Wes Bos großartige Kurse an.

Angular war das erste große Framework und wurde von Google erstellt. Es ist immer noch sehr beliebt, obwohl es kürzlich von React übertroffen wurde. Sie können Angular auf ihrer Website lernen. Gary von DesignCourse hat auch einen Angular-Crashkurs auf YouTube.

Vue ist ein neueres Framework, das von Evan You, einem ehemaligen Angular-Entwickler, erstellt wurde. Es ist zwar kleiner als React und Angular, wächst jedoch schnell und wird auch als einfach und unterhaltsam angesehen. Sie können damit auf der Vue-Website loslegen.

Welchen Rahmen sollten Sie lernen?

Sie fragen sich jetzt vielleicht: "Ok, welches Framework ist das beste?"

Die Wahrheit ist, sie sind alle gut. In der Webentwicklung gibt es fast nie eine einzige Wahl, die zu 100% die beste Wahl für jede Person und jede Situation ist.

Ihre Wahl wird höchstwahrscheinlich von Ihrem Job abhängen oder einfach davon, welchen Sie am liebsten nutzen. Wenn Ihr Endziel darin besteht, einen Job zu finden, versuchen Sie herauszufinden, welcher Rahmen in potenziellen Stellenangeboten am häufigsten vorkommt.

Machen Sie sich nicht zu viele Gedanken darüber, welches Framework Sie wählen sollen. Es ist wichtiger, dass Sie die Konzepte dahinter lernen und verstehen. Sobald Sie ein Framework gelernt haben, ist es auch einfacher, andere zu lernen (ähnlich wie bei Programmiersprachen).

Fahren wir jetzt mit unserem letzten Abschnitt fort: Back-End-Webentwicklung!

4b: Grundlegendes Backend

Das Back-End oder die Serverseite der Webentwicklung besteht aus drei Hauptkomponenten: dem Server, einer serverseitigen Programmiersprache und der Datenbank.

Server

Wie eingangs erwähnt, ist der Server der Computer, auf dem alle Website-Dateien, die Datenbank und andere Komponenten gespeichert sind.

Herkömmliche Server werden unter Betriebssystemen wie Linux oder Windows ausgeführt. Sie gelten als „zentralisiert“, da alles - die Website-Dateien, der Back-End-Code und die Daten - zusammen auf dem Server gespeichert werden.

Heutzutage gibt es auch serverlose Architekturen, bei denen es sich um eine dezentralere Art der Einrichtung handelt. Diese Art von Anwendung teilt diese Komponenten auf und nutzt Drittanbieter, um sie zu verarbeiten.

Trotz des Namens benötigen Sie immer noch einen Server, um zumindest Ihre Website-Dateien zu speichern. Einige Beispiele für Anbieter ohne Server sind AWS (Amazon Web Services) oder Netlify.

Serverlose Setups sind beliebt, da sie schnell und kostengünstig sind und Sie sich keine Gedanken über die Serverwartung machen müssen. Sie eignen sich hervorragend für einfache statische Websites, für die keine herkömmliche serverseitige Sprache erforderlich ist. Für sehr komplexe Anwendungen ist das herkömmliche Server-Setup möglicherweise die bessere Option.

Um mehr über serverlose Setups zu erfahren, verfügt Netlify über einen informativen Blog-Beitrag, der Sie durch alle Schritte zum Einrichten einer statischen Website mit Bereitstellung führt.

Programmiersprache

Auf dem Server müssen Sie eine Programmiersprache verwenden, um die Funktionen und die Logik für Ihre Anwendung zu schreiben. Der Server kompiliert dann Ihren Code und übermittelt das Ergebnis an den Client zurück.

Beliebte Programmiersprachen für das Web sind PHP, Python, Ruby, C # und Java. Es gibt auch eine Form von serverseitigem JavaScript - Node.js, eine Laufzeitumgebung, in der JavaScript-Code auf dem Server ausgeführt werden kann.

Es gibt auch Frameworks, die Sie mit jeder dieser serverseitigen Sprachen verwenden können. Genau wie die Front-End-JavaScript-Frameworks sind diese Back-End-Frameworks hilfreiche Tools, mit denen sich Web-Apps viel schneller erstellen lassen.

Schauen wir uns eine Liste der am häufigsten verwendeten Programmiersprachen für die Webentwicklung an:

C #

C # wurde als Microsoft-Konkurrent zu Java entwickelt. Es wird verwendet, um Web-Apps mit dem .NET-Framework und der Spieleentwicklung zu erstellen, und kann sogar zum Erstellen mobiler Apps verwendet werden.

Orte zum Lernen C #: ‌‌C # Programming Yellow Book von Rob Miles‌‌C # Grundlagen zu Udemy

Java

Java ist eine der beliebtesten Programmiersprachen und wird sowohl in Web-Apps als auch zum Erstellen von Android-Apps verwendet.

Orte, an denen Sie Java lernen können: ‌‌University of Helsinki's MOOC‌‌Der vollständige Java-Entwicklerkurs zu Udemy

Node.js

Node.js ist eine sehr beliebte Technologie (laut der Entwicklerumfrage von Stack Overflow aus dem Jahr 2019). Eines ist zu beachten: Es handelt sich technisch gesehen nicht um eine serverseitige Sprache, sondern um eine Form von JavaScript, die auf dem Server mithilfe des Express.js-Frameworks ausgeführt wird.

Orte zum Lernen von Node.js: ‌‌Node.js Tutorial durch Programmieren mit Mosh‌‌Learn Node von Wes Bos

PHP

PHP ist die Sprache, die WordPress unterstützt. Dies ist daher möglicherweise eine gute Wahl, wenn Sie glauben, dass Sie mit Websites für kleine Unternehmen arbeiten, da viele von ihnen WordPress verwenden. Sie können auch Web-Apps mit dem Laravel-Framework erstellen.

Orte, an denen Sie PHP lernen können: ‌‌Einführung in PHP durch mmtuts‌‌PHP von Edwin Diaz auf Udemy

Python

Python erfreut sich wachsender Beliebtheit, insbesondere da es in der Datenwissenschaft und beim maschinellen Lernen eingesetzt wird. Es wird auch als gut angesehen, da seine Syntax einfacher ist als in einigen anderen Sprachen. Wenn Sie Web-Apps erstellen möchten, können Sie die Django- oder Flask-Frameworks verwenden.

Orte, an denen Sie Python lernen können: ModernDas Modern Python 3 Bootcamp von Colt Steele auf Udemy‌‌LearnPython.org

Rubin

Ruby ist eine andere Sprache, deren Syntax als fu zum Lernen angesehen wird. Sie können Web-Apps mit dem Framework Ruby on Rails erstellen.

Orte, an denen man Ruby lernen kann: heDas Odin-Projekt‌‌Ruby on Rails Tutorial von Michael Hartl

Genau wie bei den JavaScript-Frameworks gibt es keine der besten Programmiersprachen. Ihre Wahl sollte entweder auf Ihrem persönlichen Interesse und Ihren Vorlieben sowie auf potenziellen Jobs beruhen. Machen Sie also ein wenig Nachforschungen darüber, welche Wahl für Sie eine gute Wahl sein könnte .

Datenbanken

In Datenbanken speichern Sie, wie der Name schon sagt, Informationen für Ihre Website. Die meisten Datenbanken verwenden eine Sprache namens SQL (ausgesprochen "Fortsetzung"), die für "Structured Query Language" steht.

In der Datenbank werden Daten in Tabellen mit Zeilen gespeichert, die komplexen Excel-Dokumenten ähneln. Anschließend können Sie Abfragen in SQL schreiben, um Daten zu erstellen, zu lesen, zu aktualisieren und zu löschen.

Die Datenbank wird auf dem Server unter Verwendung von Servern wie Microsoft SQL Server auf Windows-Servern und MySQL für Linux ausgeführt.

Es gibt auch NoSQL-Datenbanken, in denen die Daten im Gegensatz zu herkömmlichen Tabellen in JSON-Dateien gespeichert werden. Eine Art von NoSQL-Datenbank ist MongoDB, die häufig mit React-, Angular- und Vue-Anwendungen verwendet wird.

Einige Beispiele für die Verwendung von Daten auf Websites sind:

Wenn Sie ein Kontaktformular auf Ihrer Website haben, können Sie das Formular so erstellen, dass jedes Mal, wenn jemand das Formular sendet, seine Daten in Ihrer Datenbank gespeichert werden.

Sie können sich auch in der Datenbank anmelden und Logik in der serverseitigen Sprache schreiben, um die Anmeldungen zu überprüfen und zu authentifizieren.

Einige Ressourcen zum Erlernen der Grundlagen von SQL sind:

  • Das komplette SQL Bootcamp von Jose Portilla auf Udemy
  • SQLBolt

Einige Tipps, mit denen Sie…

Danke fürs Lesen! Ich hoffe aufrichtig, dass dieser Leitfaden Ihnen hilft, die Webentwicklung zu erlernen.

Ein paar Tipps, die ich habe, wenn Sie Autodidakt sind:

  1. Versuchen Sie nicht, alles auf einmal zu lernen. Wählen Sie jeweils eine Fertigkeit aus, die Sie lernen möchten.
  2. Springen Sie nicht von Tutorial zu Tutorial. Während Sie lernen, können Sie verschiedene Ressourcen überprüfen, um festzustellen, welche Ihnen am besten gefällt. Aber noch einmal, wählen Sie eine aus und versuchen Sie, sie vollständig zu durchlaufen.
  3. Wisse, dass das Erlernen der Webentwicklung eine langfristige Reise ist. Trotz der Geschichten, die Sie vielleicht von Leuten gelesen haben, die in 3 Monaten von null auf einen Webentwickler-Job gewechselt sind, würde ich mehr auf 1 bis 2 Jahre abzielen, um arbeitsbereit zu werden, wenn Sie von vorne beginnen.
  4. Nur einen Videokurs anzusehen oder ein Buch zu lesen, macht Sie nicht automatisch zu einem Experten. Das Erlernen des Materials ist nur der erste Schritt. Wenn Sie aktuelle Websites und Projekte erstellen (auch nur Demos für sich selbst), können Sie Ihr Lernen wirklich festigen.

Viel Glück beim Erlernen der Webentwicklung! Wenn Sie an mehr interessiert sind, lesen Sie diesen Artikel in meinem Blog: Lernen Sie die Webentwicklung als absoluter Anfänger.

Willst du mir folgen?

Ich poste Mini-Tipps zur Webentwicklung auf Instagram und Twitter und erstelle Codierungs-Tutorial-Videos auf YouTube!