In der modernen Welt wollen immer mehr Menschen das Programmieren lernen, ohne zu wissen, wo sie anfangen sollen, aber gleichzeitig ist die IT-Branche das, wovon sie träumen, weil es heutzutage in Mode ist, Webprogrammierer zu sein. Für viele Menschen ist es der erste Schritt in diese wundersame Welt, wie z. B. Webentwickler oder Junior-Frontend-Entwickler, grundlegende Frontend-Entwicklung. Irgendwo muss man jedoch anfangen, bevor man seinen Traumjob findet. Hier ist ein Einsteiger-Wissensbuch für Sie, um einige Antworten zu erhalten: Gibt es einen kostenlosen Kurs für Frontend-Entwickler? Wie Sie online selbstständig lernen, wo Sie Lernmaterialien zum Beherrschen von HTML, CSS und JavaScript finden. Wenn Sie sich mit HTML und CSS auskennen, können Sie sich bereits jetzt auf die Stelle als Weblayout-Designer bewerben.
Was sind die Grundlagen der Frontend-Entwicklung?
Der Einstieg in die Welt der Webprogrammierung kann für brandneue Leute schwierig sein. So viele Konzepte klingen seltsam und werden in der Schreibphase problematisch. Wie schreibt man: Softwareentwickler oder Frontend-Entwickler? Vielleicht ein Front-End-Entwickler oder eher ein Front-End-Software-Ingenieur? Am gebräuchlichsten ist jedoch der Bindestricheintrag. Front-End-Entwickler – die Person, die für den visuellen Teil der Anwendung verantwortlich ist (was wir sehen, wir = Benutzer der Website).
Üblicherweise arbeitet der Frontend-Entwickler mit einem Grafikdesigner (Webdesigner) zusammen, der für das grafische Design sorgt. Häufig haben Frontend-Entwickler die Möglichkeit, mit einem UX-Designer zusammenzuarbeiten, der einen Prototyp der Interaktionen vorschlägt und erstellt, die auf den Websites stattfinden. Die Rolle der Front-End-Entwickler besteht darin, alles zusammenzufügen. Es wird allgemein gesagt, dass ein Front-End-Entwickler die Aufgabe hat, ein Grafikdesign zu schneiden – das Design in kleinere Teile zu unterteilen und Websites (HTML und CSS) zu programmieren, die Benutzer letztendlich verwenden.
Anschließend wurden mithilfe von JavaScript die zuvor erwähnten Interaktionen hinzugefügt. Während HTML und CSS3 es uns ermöglichen, reibungslose Übergänge und grundlegende Animationen zu erstellen, führt JavaScript alle erweiterten Seiten-Benutzer-Interaktionen ein. Mithilfe von JavaScript werden wir ein Dropdown-Menü, einen Schieberegler auf der Seite, Formularvalidierung, Übergänge zwischen Unterseiten oder erweiterte Animationen und 3D-Spiele (z. B. mithilfe von Babylon-JavaScript) hinzufügen. Daten für die Logik in JavaScript aus dem Back-End der Anwendung, daher die Front-End-Kooperation – Back-End-Entwickler.
Die Positionen der Front-End-Entwickler sind sehr unterschiedlich. Die Arbeit eines Frontend-Entwicklers in einer interaktiven und kreativen Agentur, eines Frontend-Entwicklers in einem Softwareentwicklungsunternehmen wird anders aussehen, und ein anderer Job für eine Person, die an der Frontend-Entwicklung eines Start-ups arbeitet .
Ein Front-End-Entwickler aus dem Schneiden von Grafikprojekten kann sich zu einem JavaScript-Entwickler entwickeln – einem Webprogrammierer, der sich hauptsächlich mit dem Schreiben von Anwendungslogik und fortgeschrittenen JavaScript-Operationen befasst. Darüber hinaus muss ein Frontend-Entwickler (wie auch ein Backend-Entwickler) häufig die JavaScript-Architektur der Anwendung planen und bewusst Frameworks und Bibliotheken für das Projekt auswählen.
Ist die Front-End-Entwicklung einfach?
- Sie können den Effekt schnell sehen; Im Gegensatz zum Erlernen der Webentwicklung/Backend-Entwicklung erhalten wir beim Erstellen von Codestücken selbst in reinem HTML sofort visuelle Effekte, die uns zum Weiterarbeiten motivieren.
- Niedrige Einstiegsschwelle – für den Berufseinstieg in ein Praktikum oder eine Juniorposition sind von Anfang an relativ wenige Frontend-Kenntnisse erforderlich.
- Viele Jobangebote für Junioren – gerade in den Ferien und viele Sommerpraktika.
- Unabhängigkeit – wir können uns selbst um die Erstellung von Websites kümmern und dann als Freelancer Aufträge einholen. Schließlich sollen wir im Grundumfang einfache Webseiten von A bis Z aufbauen können.
Was brauchen wir für die Frontend-Entwicklung?
Hier ist das Erfolgsrezept. Um eine Website zu erstellen, benötigen Sie:
HTML + CSS
Dies sind die Grundzutaten für den Aufbau einer Website. HTML stellt die Struktur von Websites bereit – die beschriebenen Elemente, und CSS teilt dem Browser mit, wie diese Elemente aussehen sollen. Sobald Sie HTML und CSS beherrschen, können Sie jedes (grafische) Design nachbauen und in eine Website verwandeln.
JavaScript
Eine Frontend-Entwicklungssprache für die Webprogrammierung zum Erstellen von Websites. Dank JavaScript fügen Sie Ihrer Website Interaktivität hinzu, dh Sie entwickeln Websites, die auf Benutzeraktionen reagieren. Sie können sogar Spiele bauen. Wir empfehlen, zumindest den grundlegenden JavaScript-Code zu beherrschen, um zu verstehen, wie die Sprache funktioniert oder die Logik der Webprogrammiersprache. Dann können Sie zu jQuery gehen.
jQuery
Technisch gesehen ist es keine Sprache, sondern eine JavaScript-Bibliothek. Wie ein Vermittler, mit dem Sie JavaScript einfacher und schneller schreiben können. Sie geben den jQuery-Code ein; Die Bibliothek macht sich Sorgen um Sie und spielt mit dem Übersetzer, um die Bedeutung des etwas komplizierten JavaScripts an den Browser weiterzugeben. Obwohl jQuery heute „ein bisschen alt“ ist, empfehlen wir, es „auf Anfrage“ zu lernen, es erleichtert das Erlernen von Webprogrammierlogik und Bootstrap (verwendetes CSS-Framework) und taucht immer noch in Stellenangeboten auf.
Rahmen
Ihre Aufgabe ist es, den Prozess der Erstellung von Websites und Anwendungen zu vereinfachen, indem sie vorgefertigte Lösungen für die häufigsten Probleme bereitstellen. Darüber hinaus bieten sie ein Muster, wie Sie Ihren Code auf ordentliche Weise entwickeln können. Für den Anfang empfehlen wir, ein CSS-Framework auszuwählen, z. B. Bootstrap (andere Optionen sind: Foundation, Pure, YAML CSS), und dann eines der derzeit beliebten JavaScript-Frameworks hinzuzufügen: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Dies steht nicht in direktem Zusammenhang mit der Webcodierung, die unserer Meinung nach oft bis zum Ende verschoben wird. Fälschlicherweise ist es umso besser, je früher Sie mit der Verwendung von Git, dem Versionskontrollsystem, beginnen. Dies ist die von uns vorgeschlagene Reihenfolge. Natürlich können Sie es auch ganz anders machen: jQuery überspringen und Bootstrap sofort lernen, nachdem Sie die Grundlagen von HTML und CSS gemeistert haben; Wir raten Ihnen jedoch, bei der Vereinfachung nicht zu weit zu gehen und sich von der Suche nach handgeschriebenen Lösungen abzugrenzen und keine Fertigteile aus einem Framework zu verwenden oder JavaScript-Frameworks zu lernen, mit denen Sie in reinem JavaScript kaum eine Zeile verstehen können.
Wo fange ich mit der Frontend-Entwicklung an?
Lernen Sie regelmäßig und versuchen Sie, jede neue Fertigkeit in der Praxis anzuwenden, sogar in winzigen Codestückchen mit nur einem Zweck – um zu zeigen, was Sie gerade beherrschen. Teilen Sie sie im Internet. Schränken Sie Ihre Motivationsgruppen auf Facebook ein. Nach nur 3 Stunden Motivationsgeschichten lesen ist man oft nicht 3 mal motivierter. Sie haben in der Regel 3 Stunden weniger Zeit für Ihr Studium.
Beobachten Sie den Markt und lesen Sie die Anforderungen in Stellenangeboten. Sie verändern sich! Wir schreiben diesen Beitrag heute und werden ihn wahrscheinlich in einem Jahr aktualisieren müssen, wenn sich die Technologie ändert. Sobald Sie die Grundlagen beherrschen: HTML CSS JavaScript, wird etwas Neues bestimmt im Trend liegen – aktualisieren Sie Ihre Lernliste. Suchen Sie so schnell wie möglich nach kostenlosen Workshops (um von Mentoren zu lernen und gleichzeitig interessante Kontakte zu knüpfen) und einem Industriepraktikum. Der Job wird sich als der beste Lehrer erweisen.
Was ist ein Front-End-Entwicklungsbeispiel?
HTML + CSS
Drei sind wahrscheinlich die bekanntesten Websites mit interaktiven Web-Frontend-Entwicklungskursen. Kostenlos, gut organisiert, vermitteln sie Anfängern sehr leicht Wissen. Sie halten interaktive Kurse im Browser ab. Wir müssen zu Hause nichts installieren, wir machen einfach den Kurs und unser Fortschritt wird sofort gemessen.
Khan Academy, Codecademy und Homeschool
Die Khan Academy verfügt über völlig kostenlose Materialien und hat auch die Möglichkeit, andere Websprachen zu verwenden. Dies ist eine Bildungsplattform, nicht nur über Webentwicklung. Sie können verschiedene Aufgaben durchgehen, von grundlegenden Elementen, einschließlich HTML und CSS, bis hin zu fortgeschritteneren JavaScript-Skripten.
Codecademy bietet viele kostenlose Inhalte und interessante vorgefertigte Frontend-Entwicklungspfade, die nur professionellen Benutzern zur Verfügung stehen.
Code School - unserer Meinung nach der am besten organisierte Kurs. Sie bestehen aus Videos + einem interaktiven Teil mit Frontend-Entwicklungsaufgaben. Die erste Stufe jedes Kurses ist kostenlos, aber leider müssen Sie für den Rest bezahlen. Aber auch die kostenlosen Teile (meist ca. 1 Stunde) sind einen Blick wert.
Wie wähle ich einen Kurs aus?
Sehen Sie sich alle drei Webplattformen an. Die Themen überschneiden sich, aber es lohnt sich, einige doppelte Themen durchzugehen. Erstens festigt die Wiederholung das Wissen, und zweitens hat jede Front-End-Plattform einen etwas anderen Ansatz zum Unterrichten. Es ist deine Entscheidung. So viele Leute möchten für ein monatliches Bootcamp oder einen Webentwicklungskurs bezahlen, da sie alles kostenlos zur Hand haben. Nichts Ungewöhnliches.
Das Schlimmste ist, dass wir viele Materialien haben und alles, was wir brauchen, schnell lernen wollen, ohne zu prüfen oder auszuwählen – alles auf das Tablett bekommen und einen Schritt weiter gehen als die Grundmaterialien. Daher verstehen wir, dass, wenn Sie keine Zeit für alle Front-End-Kurse haben und das Treffen von Entscheidungen nicht Ihre Stärke ist, Khan Academy: Introduction to HTML CSS – Web Development besuchen.
JavaScript
Was wäre unser Front-End-Entwicklungskurs ohne die Verwendung von JavaScript? Die interaktiven Seiten oben sind großartig. Sie haben JavaScript-Kurse für uns – nett, einfach, leider nicht sehr umfassend, aber gut zum Aufwärmen. Wenn Sie bereits über die Grundlagen von HTML und CSS verfügen, müssen Sie nicht mit den vorherigen Vorschlägen beginnen.
Beginnen Sie mit 9 kurzen Entwicklungsübungen in der Einführung: Mit JavaScript können Sie auf den gleichen Themen in Udacity aufbauen: JavaScript Intro, dann (oder gleich) zu einem größeren Aufgabenbereich übergehen: HTML / JavaScript: Interactive Web erstellen Seiten.
jQuery
Ein weiterer Schritt auf unserem Frontend-Weg, aber extrem optional. Aktuell kommt eine Frontend-Entwicklung natürlich ohne jQuery aus. Gerade weil es heute viele spannende neue Optionen für Frontend-Entwickler gibt, haben wir uns Stellenangebote angeschaut, und es lohnt sich immer noch, sie auf Lager zu haben.
Ja, Khan Academy und Codecademy haben jQuery-Kurse. In diesem Fall würde ich jedoch empfehlen, einen einstündigen und völlig kostenlosen Front-End-Entwicklungskurs von jQuery Pluralsight (ehemals Code School) auszuprobieren.
Lernrahmen
In dieser Phase können Sie selbst Frontend-Materialien auswählen und deren Eignung nach Ihrem Wissen beurteilen. Wenn es um das Bootstrap-Framework geht, basiert der Aufbau einer Website auf einem 12-Spalten-Raster, und dieses Wissen ist grundlegend, um den Rest in der Praxis zu verstehen. Mit Bootstrap können Sie schnell responsive Websites (RWD) erstellen – also angepasst für mobile Geräte. Wenn Sie lieber in Form eines Tutorials lernen: Den Bootstrap-Kurs gibt es bei Code academy, und mit Daily Web erstellen Sie Ihren ersten Bootstrap-Slider in 30 Minuten.
Frameworks JavaScript
Derzeit sollte ein ordentlicher Frontend-Entwicklungskurs sicherlich die aktuell verwendeten JavaScript-Frameworks vorstellen und zumindest eines vermitteln. Auf Pluralsight (ehemals Code School) finden Sie interaktive Kurse mit Frameworks, die 14 Tage lang kostenlos sind. Auf scotch.io finden Sie eine sehr umfangreiche Sammlung kostenloser Materialien. Andererseits ist das Abbestellen, wo Sie kostenlose Frontend-Entwicklungskurse für jedes Framework finden, ein Thema für einen separaten Beitrag.
Es gibt viele von ihnen. Die Auswahl ist schwierig, und sie alle kennenzulernen, ist unmöglich. Womit Sie beginnen möchten, bleiben Sie einfach dabei. Springen Sie nicht von Blume zu Blume, denn nach einer Woche des Lernens der Webentwicklung; jemand wird dir sagen, dass ein anderer besser ist. Lernen Sie die erste und schreiben Sie eine einfache Webanwendung darauf. Normalerweise werden Anwendungen wie Planer, To-do-Listen und Rangnachrichten für den Anfang empfohlen. Sie benötigen lediglich den Namen des Frameworks und den Namen der Webanwendung, die Sie erstellen möchten.
Beispiele für kostenlose Kurse:
- AngularJS
- Angular 2+ (derzeit 6 – aber 4/5 sind nur eine weitere Frontend-Entwicklungsversion)
- ReagierenJS
- Vue.js
- Ember.js
Ist es das Ende? Nicht! Dies ist ein hervorragender Start und eine solide Grundlage für den Junior Frontend Developer.
Wie geht es nach diesen Kursen weiter?
Beginnen Sie mit der Arbeit an Ihren Webprojekten. Wie wir eingangs geschrieben haben, dokumentieren Sie Ihre Arbeit von den allerersten Frontend-Entwicklungsschritten an und stellen Sie den Code auf GitHub, auch wenn er alles andere als ideal ist.
Sie wollen sich selbst testen?
Der beste Weg, das Gelernte zu festigen, ist durch Übung. Den Front-End-Kurs zu durchlaufen ist eine Sache, aber nur die Arbeit an Ihren Webprojekten lehrt Sie zu programmieren – um Probleme selbst zu lösen. Erstellen Sie ein Formular (Zielseite), über das Sie dem Autor der Seite eine E-Mail senden können.
Erstellen Sie Ihre Visitenkarten-Website - Portfolio - denken Sie darüber nach, JavaScript zu verwenden, um die Tabelle mit einer Fibonacci-Folge, Ihrem Schieberegler oder einem einfachen Spiel von Grund auf zu füllen. Denken Sie, Sie haben bereits Programmierkenntnisse, aber keine Grafikkenntnisse, sodass die Entwicklung, die Sie durchführen, "hässlich" ist? Gern geschehen! Wählen Sie ein fertiges Grafikdesign aus, z. B. aus der Weekly Dev Challenge, und versuchen Sie, es zu erstellen.
Wie lange dauert es, die Grundlagen zu lernen?
Es hängt von dir ab. Disziplin ist das Wichtigste. Die meisten Menschen finden es schwieriger, eine Webprogrammiersprache zu lernen, als sich die Zeit zu nehmen, Kurse zu belegen, die nichts kosten. Die Beherrschung der Grundlagen zur Einrichtung Ihrer ersten Website kann etwa 1-3 Monate dauern, je nachdem, wie ambitioniert Sie in der Frontend-Entwicklung sind.
Um JavaScript zu beherrschen, würde ich weitere 3 Monate hartes Lernen hinzufügen. Ich gehe davon aus, dass Sie berufstätig sind, also werden Sie etwa 5-10 Stunden pro Woche dem Lernen widmen, dh mindestens 1 Stunde pro Tag. Frontend-Spezialist wird man in sechs Monaten zwar nicht, aber genug Zeit, um sich eine Basis für weiteres Lernen zu schaffen.
Suchen Sie im Internet nach Hilfe
Mehr als einmal werden Sie beim Lernen Probleme haben: Wie zentriert man ein Element? Warum funktioniert dieses Skript nicht? HTML und CSS sehen in Chrome anders aus als in Firefox. Wie wird man ein Profi in der Frontend-Entwicklung?
Das ist normal, aber wer fragt, irrt nicht.
- Google – fragen Sie Onkel Google, vorzugsweise auf Englisch.
- Stack Overflow – wird wahrscheinlich der erste sein, der Antworten von Stack Overflow anzeigt. Es ist ein Portal für Webentwickler, auf dem Benutzer Fragen zu Webprogrammiersprachen stellen und andere (normalerweise erfahrenere Webprogrammierer) versuchen, Ihnen eine Antwort zur Frontend-Entwicklung zu geben. Die erstgenannten besten Lösungen sind Punkte, und der Autor der Frage kann einen Kommentar markieren, der sein Problem gelöst hat. Manchmal gibt es mehrere oder ein Dutzend Lösungen, daher lohnt es sich, sie alle zu lesen und bei Ihnen vor Ort zu überprüfen. Wenn Ihnen eine der Lösungen geholfen hat, stimmen Sie ab – geben Sie einen Aufwärtspfeil.
- Facebook – Front-End-Entwicklungsgruppen auf FB für Anfänger können Ihnen sehr helfen, besonders wenn Sie nicht wissen, wie Sie nach Ihrem Problem fragen sollen. Laden Sie einen Bildschirm und Ihren Code hoch. Erwarten Sie nicht, dass jemand es für Sie schreibt, aber die Kommentare werden Sie sicherlich auf den richtigen Weg führen. Leider schreiben die Leute bei trivial einfachen Fragen immer etwas Unangenehmes – es ist schwierig, seien Sie geduldig. Wir empfehlen die Webgruppe – der Startsupport eignet sich am besten für Fragen rund um Start-ups und Moderatoren sorgen dafür, dass es keinen Hass gibt.
- CanIUse – Wenn Ihr Problem damit zusammenhängt, dass CSS in einem Ihrer Browser nicht funktioniert, vergewissern Sie sich, dass das, was Sie verwenden, von der Version unterstützt wird, die Sie überprüfen. Auf diese Weise vermeiden Sie lange und mühsame Suchen nach Ghost-Frontend-Problemen.
Fazit
In diesem Artikel haben Sie also mehr über die IT-Welt erfahren, und wir würden uns freuen, wenn wir Ihnen bei der Orientierung behilflich sein könnten. Die Front-End-Welt ist riesig und für Anfänger kann es leicht sein, sich darin zu verlieren, aber wir konzentrieren uns darauf, Menschen dabei zu helfen, den richtigen Weg zu finden. Beachten Sie aber auch, dass es zusätzlich zu den traditionellen Websprachen eine No-Code-Webprogrammiersprache gibt. Bis codefreie Tools allgemein verfügbar wurden, wurde die Entwicklung von Webanwendungen ausschließlich von Webprogrammierern durchgeführt.
Glücklicherweise läuft die Zeit davon, und jetzt kann jeder Student, der sich mit dem Material auskennt, seine Webanwendung oder Zielseite erstellen. Nach dem Erlernen der Grundlagen, auch auf den Wissensstufen HTML und CSS, finden Sie bereits Ihren Traumjob. Viele Wissenschaftler haben festgestellt, dass die Webprogrammiersprache die menschlichen Fähigkeiten verbessert und zur Entwicklung von Soft Skills beiträgt. Das ist am Ende Ihre finanzielle Unabhängigkeit. Wir kennen verschiedene Typen aus der Front-End-Welt, die ihre Start-ups gegründet und notwendige Dinge zum Wohle unseres Planeten getan haben.
Und natürlich hat ein solches Vorgehen Vorteile:
- Benutzerfreundlichkeit und große Leistung.
- Große Vorlagenbibliothek.
- Unterstützt die Einstellung verschiedener Parameter.
No-Code oder visuelle Programmiersprache ist ein neuer Ansatz, bei dem Sie keinen Code von Grund auf neu schreiben müssen. Wir empfehlen Ihnen, Tools mit einer grafischen Oberfläche zu verwenden, die die Zukunft der Webentwicklung darstellt. Herkömmliche Front-End-Webanwendungen sind coole Sachen, aber wir denken, dass Sie innovativ sein müssen, also könnte unser Produkt für Sie nützlich sein. Wir möchten aufrichtig den richtigen Weg finden, um den Beruf eines Programmierers zu meistern. Dieser Weg ist dornig, aber wenn du ihn meisterst, wird er dich dein ganzes Leben lang zufrieden stellen, das du in dieser Zeit verbracht hast.
