Wie man ein Front-End-Entwickler wird: Fertigkeiten und Ressourcen [2023]

Wie würde es Ihnen gefallen, in einem weltweit führenden Unternehmen zu arbeiten und gleichzeitig etwas durch schöne Front-End-Entwicklung zu bewirken?

Die Nachfrage nach außergewöhnlichen Künstlern im modernen Web ist groß, und dieser Leitfaden zeigt Ihnen, wie Sie damit anfangen können.

Und da Menschen, die in der Softwarebranche arbeiten, zu den am besten bezahlten Personen gehören, lohnt es sich, diese neue Fähigkeit zu erlernen. Man kann nie wissen, ob sich daraus nicht sogar eine Karriere für Sie ergibt.

Der erste Teil dieses Leitfadens ist der Beantwortung dringender Fragen zur Frontend-Entwicklung gewidmet. Wenn Sie über Verantwortlichkeiten, Gehälter und andere Aspekte eines Front-End-Entwicklers Bescheid wissen, können Sie den zweiten Teil überspringen. Der zweite Teil dieses Leitfadens ist den Ressourcen, Tutorials und Tipps gewidmet.

Was ist Front-End-Entwicklung?

Unter Front-End-Webentwicklung versteht man die Verwendung von HTML, CSS und JavaScript zur Erstellung einzigartiger Webanwendungen. Apps wie Websites, mobile Websites, aber auch mobile Apps und Progressive Webanwendungen.

Sie können es auch so sehen: Jede Website, die Sie besuchen, einschließlich dieser, wurde in irgendeiner Weise von einem Front-End-Entwickler erstellt. Zumindest auf der Client-Seite.

Das Frontend ist zwar einer der zugänglichsten Wege in der Website-Entwicklung, kann aber auch eine der größten Herausforderungen sein.

Die Technologie zur Erstellung von Websites ändert sich ständig, was bedeutet, dass die Entwickler ihre Fähigkeiten regelmäßig an die neuesten Praktiken anpassen müssen. Für einen Anfänger kann das mühsam sein, aber nach ein oder zwei Jahren solider Entwicklungspraxis wird es besser.

Kann man kostenlos Front-End-Entwicklung lernen?

Das können Sie auf jeden Fall!

Es wird immer einfacher, die Webentwicklung zu erlernen, vor allem dank des enormen Zustroms an neuen Ressourcen, Tutorials und Open-Source-Projekten.

Projekte wie freeCodeCamp helfen Millionen von Menschen, ihre ersten Programme zu schreiben. Und die freeCodeCamp Blog ist voll von spannenden Artikeln nicht nur über Frontend, sondern auch über andere Aspekte der Webentwicklung. Es lohnt sich, ein Lesezeichen zu setzen!

Auch wenn die Prämisse dieses Leitfadens darin besteht, Ihnen zu helfen, kostenlos zu lernen, dürfen wir die Vorteile von bezahlten Kursen nicht außer Acht lassen.

Es gibt jede Menge Start-ups, die sich an entschlossene Menschen wenden, und wir stellen Ihnen einige tolle Kursplattformen vor, bei denen Sie am Ende sogar ein Zertifikat erhalten.

Wie hoch ist das durchschnittliche Gehalt für einen Front-End-Entwickler?

Ein Front-End-Entwickler mit vorheriger Erfahrung kann mit einem Gehalt von mehr als $100.000 pro Jahr wenn Sie in den Vereinigten Staaten leben.

Das ist keine schlechte Zahl!

Junior-Entwickler können damit rechnen, dass sie zwischen $60.000 und mehr.

Und die Gehälter in Europa scheinen auch recht vernünftig zu sein; Deutschland hat durchschnittlich $50.000 pro Jahr.

Erwähnenswert ist, dass die Popularität der Fernarbeit hat sich in den letzten Jahren explosionsartig entwickelt, was bedeutet, dass die Entwickler danach streben, ihr Gehalt auf internationaler Ebene anzugleichen. Ein Grund mehr, sich zu überlegen, Front-End-Entwickler zu werden!

Wie findet man einen Job als Front-End-Entwickler?

Eigentlich sollte ein Job das letzte sein, worüber man spricht. Zuerst müssen Sie sich die Fähigkeiten aneignen und dann über mögliche Chancen nachdenken. Da dieser Beitrag aber als Leitfaden aufgebaut ist, können Sie jederzeit zurückkommen und diesen Abschnitt als Referenz verwenden.

Hier finden Sie eine Liste der beliebtesten Jobbörsen für Front-End-Entwickler:

• Authentische Jobs
• GitHub Jobs
• CSS-Tricks Jobbörse
• Stack Overflow-Jobs
• RemoteOK
• Entfernungsfreundliche Startups
• Arbeitsnomaden
• Jobspresso
• Hacker News Einstellung

Dies ist eine etwas verkürzte Liste von Websites, die Empfehlungen für die Suche nach Ihrem nächsten Front-End-Job bieten. Andere Alternativen, die Sie haben, sind, an einem persönlichen Projekt zu arbeiten, in der Hoffnung, es profitabel zu machen, oder Ihre Zeit damit zu verbringen freiberufliche Tätigkeiten.

Ressourcen: Wo man anfangen kann.

Bei den folgenden Ressourcen geht es um die ersten Schritte. Wir verfolgen dabei einen relativ linearen Ansatz. Und zwar aus dem einfachen Grund, dass es da draußen eine enorme Menge an Ressourcen gibt.

Um Ihnen einen schnellen Einstieg zu ermöglichen, konzentrieren wir uns auf Plattformen und Front-End-Tools, die in den modernen Workflow eingebunden sind. So können Sie die grundlegende bis mittlere Kodiersyntax erlernen und gleichzeitig die Tools verstehen, die den Arbeitsablauf eines modernen Entwicklers bestimmen.

Es wird dringend empfohlen, dass Sie sich Zeit für diese Ressourcen nehmen, da sie Sie auf die Kurse und Tutorien im zweiten Teil dieses Leitfadens vorbereiten werden.

Codecademy

Wenn Sie auch nur ein paar Minuten damit verbringen, nach Ressourcen für das Erlernen von Code zu suchen, dann wird Codecademy zweifellos einer Ihrer ersten Treffer sein. Diese Lernplattform ist sehr bekannt und hat in den letzten sieben Jahren mehr als 100 Millionen Menschen geholfen.

Zu dieser Zeit war Codecademy mit seiner dynamischen und interaktiven Programmierschnittstelle ziemlich revolutionär. Und während viele dem gleichen Weg folgten, hat Codecademy eine beständige Erfolgsbilanz vorzuweisen.

Heutzutage kann man nach Abschluss des Kurses ein Zertifikat erhalten, und viele haben dieses Zertifikat genutzt, um eine Stelle in einem Unternehmen zu bekommen. Erstinbetriebnahmeund das als Junior-Entwickler.

Die ganze Zeit über gibt es das Argument, dass Codecademy nicht genug ist.

Vom Standpunkt eines erfahrenen Entwicklers aus gesehen ist diese Plattform vielleicht zu einfach. Aber wenn Sie nur über Front-End-Entwicklung zu lernen, dann gibt es nichts befriedigender als die Befolgung von Schritt für Schritt Anweisungen mit Echtzeit-Ergebnisse.

Codecademy bietet Kurse zu HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL und Java an.

CSS-Layout lernen

Als Front-End-Entwickler werden Sie einen angemessenen Teil Ihrer Zeit mit der Arbeit am Layout verbringen. Das Layout ist die Leinwand, auf der Sie eine Website strukturieren. Dieser Blogtext befindet sich innerhalb eines Zeiledie Teil eines größeren Projekts ist Container.

Und das gilt für alle Webseiten-Designs. Mit Learn CSS Layout erhalten Sie ein grundlegendes Verständnis dafür, wie Container und Zeilen funktionieren und wie Sie Inhalte genau dort positionieren können, wo Sie sie haben möchten.

Weitere Tools, die Sie untersuchen können, sind Flexbox-Frosch für Flexbox Grundlagen und Gitternetz Garten für Raster Fundamentaldaten.

Das Layout ist ein ziemlich wichtiges Thema, das Sie verstehen müssen, also nehmen Sie sich ein paar Stunden Zeit, um tief in Ihre Layout-Erfahrung einzutauchen. Der beste Weg zum Lernen ist die Praxis.

Bootstrap

Sobald Sie wissen, wie Layouts funktionieren, ist es an der Zeit, einige konkrete Experimente durchzuführen. Natürlich können Sie versuchen, eine benutzerdefinierte Benutzeroberfläche als erstes Projekt zu entwickeln, aber das könnte Sie eher abschrecken als ermutigen, weiterzumachen.

Sie müssen sich also mit einem oder zwei Frameworks vertraut machen. Ein Framework ist ein einfacher Weg, um mit jeder Art von Webentwicklung zu beginnen. Sie erhalten die Werkzeuge und die Dokumentation, um vom ersten Tag an interaktive Websites zu erstellen. Und eines der besten Frameworks, die es gibt, ist Bootstrap.

Bootstrap wird im gesamten Web intensiv genutzt und ist zweifellos eines der beliebtesten Frontend-Frameworks der Welt.

Ein guter Prozentsatz der Websites, die Sie täglich besuchen, verwendet Bootstrap-Funktionen.

Eine der fantastischen Eigenschaften von Bootstrap ist wie schnell Sie loslegen können. Die Dokumentationsseiten sind voll mit Beispielen und Anwendungsfällen. Und das Beste ist, dass das Bootstraps-Layoutsystem mit Blick auf responsives Design entwickelt wurde. Ihre Bootstrap-basierten Websites sind also automatisch mobilfreundlich.

Und wenn Ihnen gefällt, was Bootstrap zu bieten hat, finden Sie hier weitere Ressourcen zu beliebten Front-End-Frameworks:

• 10 beste JavaScript-Frameworks, die Sie kennen sollten
• 10 beste CSS-Frameworks für Front-End-Entwickler

Front-End-Checkliste

Trotz der Technologie, die Sie zur Erstellung Ihrer Websites verwenden, müssen Sie bestimmte Regeln und Vorschriften einhalten. Natürlich kann man sich entscheiden, solche Anforderungen zu ignorieren, aber das geht auf Kosten der Benutzerfreundlichkeit und der digitalen Kompatibilität.

Front-End Checklist ist ein hervorragendes Tool, bei dem Sie Ihre Website-URL angeben können und die Plattform Ihre Website auf bewährte Praktiken bei der Front-End-Entwicklung prüft. Dabei wird unter anderem geprüft, ob Sie Ihre Bilder optimiert oder ob Sie die besten SEO-Praktiken befolgen.

Sie sollten diese App so lange nutzen, wie Sie brauchen, um zu verstehen, was die modernen Anforderungen an professionelle Websites und Apps sind. Außerdem ist die nicht aufdringliche und reibungslose Benutzeroberfläche ein absolutes Vergnügen, damit zu arbeiten.

Vue.js

Vue.js ist ein großartiges Beispiel dafür, wie eine kleine Idee/ein kleines Konzept zu einem der bekanntesten Dinge der Welt werden kann. In der Tat hat Vue.js die Front-End-Gemeinschaft im Sturm erobert.

Dieses progressive Framework hilft Entwicklern, mit HTML und JavaScript beeindruckende Benutzeroberflächen zu erstellen.

Der Rahmen wird vollständig von der Gemeinschaft getragen - sowohl finanziell als auch in Bezug auf die Entwicklung.

Es ist das perfekte Beispiel dafür, wie Open-Source zusammenkommen und Großes bewirken kann. Und als Front-End-Entwickler sollten Sie sich mehr mit folgenden Themen beschäftigen Open-Source und warum es wichtig ist.

Hier sind einige sehr empfehlenswerte Lektüre über Vue.js:

• Vue.js Tutorial für Anfänger
• Eine kuratierte Liste großartiger Dinge im Zusammenhang mit Vue.js
• Vue JS - Der vollständige Leitfaden

Und zu guter Letzt, schauen Sie sich die verschiedenen Projekte an, die mit Vue.js auf der Vue.js Schaufenster Website.

Front-End-Grundlagen

Alles, was wir uns bisher angeschaut haben, war größtenteils kostenlos und quelloffen. Alles, was Sie brauchen, ist, dass Sie sich Erhabener Textund schon sind Sie auf dem besten Weg, mit dem Frontend zu experimentieren - und das sollten Sie auch tun! Das Lesen von Tutorials und Framework-Dokumentation ist nur die halbe Miete.

Das eigentliche Lernen findet in Ihrem Texteditor und im Browser statt. Der einzige Nachteil dieses Ansatzes ist, dass er nicht ganz systematisch ist. Sie arbeiten im "Free-for-all"-Modus, und die Ergebnisse hängen von Ihrer Fähigkeit ab, sich zu disziplinieren.

Es sei denn, Sie entscheiden sich, zu investieren, und mit investieren meine ich, eine symbolische Summe auszugeben, um eines der Front-End-Bücher von Ein Buch für sich. Diese Jungs sind einige der besten in der Branche, und Veteranen Front-End-Entwickler immer wieder empfehlen ihre Bücher.

Im Bereich der Frontend-Grundlagen gibt es ein Buch über SVG, CSS, HTML, JavaScript und Sass, das den perfekten Ausgangspunkt für moderne Frontend-Workflows darstellt.

GitHub

GitHub ist Ihr digitales Büro für alles, was mit Coding und Entwicklung zu tun hat. Es ist die größte Open-Source-Plattform der Welt, auf der die meisten der weltweit beliebtesten Frameworks und Tools zu finden sind.

Mit GitHub können Sie Ihre Projekte hosten und andere Personen dazu einladen, ihre Beiträge einzureichen. Und Sie können selbst Beiträge zu anderen Projekten einreichen.

Sie können auch GitHub und alles, was es zu bieten hat, erkunden. GitHub beherbergt zum Beispiel die berühmten Awesome-Listen, bei denen es sich um umfangreiche Sammlungen von Tutorials, Ressourcen, Tools und anderen Dingen für bestimmte Frameworks und Technologien handelt.

Z.B., Tolle Front-End-Liste mit aktuellen Informationen über die neuesten Entwicklungen im Bereich Frontend und dessen Entwicklung.

Stapelüberlauf

Stack Overflow hat den berüchtigten Ruf, die strengste Q&A-Programmierseite der Welt zu sein. Und es ist wirklich so.

Die Benutzer von Stack Overflow nehmen Fragen, die nicht recherchiert oder richtig analysiert wurden, nicht auf die leichte Schulter. Das mag zwar unangenehm sein, trägt aber dazu bei, ein starkes Gefühl der Zielstrebigkeit zu erzeugen.

Jedes Mal, wenn ein Nutzer eine Antwort auf eine Frage einreicht, können andere Nutzer diese Antwort hochstufen. Am Ende erhält man mehrere "verifizierte" Antworten, die die Fragen der Nutzer umfassend beantworten. Auf diese Weise bleibt die Hierarchie der Website klar und konsistent.

Als Anfänger in der Frontend-Entwicklung sollten Sie Stack Overflow nutzen, um bestimmte Themen zu verstehen, aber auch, um Fragen zu stellen, wenn Sie müssen. Für die meisten Anfängerthemen sollten Sie jedoch in der Lage sein, innerhalb von Sekunden prägnante Antworten zu finden.

Tutorials und Kurse: Das Ökosystem in den Griff bekommen.

Der erste Abschnitt war ausschließlich den Ressourcen und Plattformen gewidmet, die Ihnen den Einstieg erleichtern sollen. Sie sollten für jede Ressource, die wir aufgelistet haben, eine angemessene Zeit einplanen, damit Sie ein Gefühl dafür bekommen, was Sie von der Frontend-Entwicklung erwarten können.

Wenn Sie das alles erledigt haben, können Sie sich Tutorials und Kursen zuwenden. Dabei handelt es sich um strenger organisierte Ressourcen, bei denen der Schwerpunkt auf dem Lernen liegt.

Wir möchten darauf hinweisen, dass einige der folgenden Kurse nicht zur freien Verfügung stehen. Wir versichern Ihnen jedoch, dass die folgenden Empfehlungen absolut erstklassig sind.

Darüber hinaus können Sie auf Plattformen wie Frontend Masters alle Technologien kennen lernen, die in den erfolgreichsten Start-ups der Welt eingesetzt werden.

Das Ziel dieses Beitrags ist es nicht, die Frontend-Entwicklung als Hobby zu fördern, sondern Ihnen greifbare Ressourcen an die Hand zu geben, damit Sie auf dem Weg sind, aus all Ihrem Lernen eine Karriere zu machen.

MDN-Webdokumente

MDN (Mozilla Developer Network) wird auf die eine oder andere Weise Ihre Bekanntschaft machen. Diese Webdokumentationsplattform ist ganz der Förderung der Funktionsweise des Webs gewidmet. Hier können Sie mehr über Entwickler-Tools, Web-Technologien und die Web-Entwicklung selbst erfahren.

Wenn Sie nach spezifischen Informationen zu CSS oder HTML suchen, erscheint bei Google und anderen Suchmaschinen oft MDN als erstes Ergebnis. Die Anleitungen, Spezifikationen und allgemeinen Erkenntnisse sind so strukturiert, dass sie für Frontend-Entwickler sinnvoll sind.

edX Front-End-Kurse

Wie bereits in diesem Leitfaden erwähnt, ist das Befolgen eines strengen Lehrplans ein sehr linearer Weg, um zu lernen und sich anzupassen. Und um mit den Kursen zu beginnen, müssen Sie sich ansehen, was edX zu bieten hat. Sie können nicht nur Zertifikate nach Abschluss erhalten, sondern auch in Ihrem eigenen Tempo lernen.

edX Kurse sind gründlich strukturiert, wobei der Schwerpunkt darauf liegt, den Studierenden die Grundlagen der einzelnen Kursthemen zu vermitteln. Zurzeit können Sie Technologien wie JavaScript, HTML5, CSS3 und mehr erlernen.

Wenn Sie das vollständige Front-End-Zertifikat erwerben möchten, müssen Sie eine bescheidene Investition von $500 tätigen - dafür erhalten Sie aber auch direkten Zugang zu den Kursleitern und mehr. Zahlreiche Unternehmen haben edX genutzt, um ihre Mitarbeiter in dieses spezielle Programm einzuschreiben.

Frontend-Meister

Frontend Masters ist vergleichbar mit einem Bootcamp. Die Kurse, die Sie auf dieser Plattform finden, sind extrem gründlich, mit Schwerpunkt auf langen Inhalten und projektorientiertem Lernen.

Hier können Sie über Technologien wie React, Vue, Angular, Node.js und vieles mehr lernen. Die Produktionsqualität ist extrem hochwertig, so dass Sie eine ähnliche Erfahrung wie in einem echten Bootcamp-Kurs machen können.

Als registrierter Nutzer können Sie Ihre Fortschritte auf der Lernen Sie Seite. Auf dieser Seite können Sie Ihren Lernfortschritt verfolgen, indem Sie die Prozentsätze für jede einzelne Technologie, aber auch die Prozentsätze für ganze Stapel anzeigen. Auf diese Weise können Sie sich auf unterhaltsame Weise motivieren.

Und nicht zuletzt wird ein abgeschlossener Frontend-Master-Kurs in Ihrem Lebenslauf von Ihrem Arbeitgeber nicht unbemerkt bleiben.

Eierkopf

Egghead ist der oben genannten Plattform sehr ähnlich, zeichnet sich aber durch straffere und komprimierte Lektionen aus. Zum Beispiel ist die Lektion "Dynamische Listen in Flutter mit ListViews erstellen" nur 2 Minuten lang, obwohl sie genug Lernmaterial bietet, um das Konzept wirklich zu verstehen.

Egghead bietet Tutorials und Kurse zu Frameworks, Bibliotheken, Sprachen, Tools und Plattformen. Möchten Sie etwas über mobile Entwicklung lernen? Kein Problem, Egghead hat Kursmaterial für iOS, Android und andere Plattformen.

Der Jahrespreis beträgt bescheidene $250, aber dafür erhalten Sie Zugang zu allen Kursen und Tutorials auf der Website. Außerdem können Sie jede Lektion mit anderen Community-Mitgliedern diskutieren. Die Investition lohnt sich auf jeden Fall!

CSS-Tricks

Chris Coyier ist eine absolute Legende in der CSS-Community. Er ist nicht nur seit über einem Jahrzehnt bei CSS-Tricks dabei, sondern auch der Mitbegründer von CodePen - eine beliebte Code-Sharing-Plattform für Webentwickler.

Eine Sache, auf die Sie sich bei CSS-Tricks verlassen können, ist, dass die Seite ständig aktualisiert wird und Beiträge zu aktuellen Themen und Technologien veröffentlicht werden. So können Sie mit den Tutorials, die von vielen Autoren der Website zur Verfügung gestellt werden, Ihre Kenntnisse schnell erweitern.

Kurz gesagt, es ist eine nützliche Seite, die Sie in Ihren Lesezeichen behalten und einmal am Tag besuchen sollten. Nicht nur die Tutorials selbst, sondern auch die Empfehlungen, die sie begleiten, sind von großem Wert für Sie.

Schottisch

Scotch ist sowohl eine Lernressource als auch ein Ort für die neuesten Ereignisse in der Webentwicklung. Die Seite gibt es seit 2014 und hat neben Tausenden von kostenlosen Webentwicklungs-Tutorials eine enorme Fangemeinde angehäuft.

Die schottischen Autoren konzentrieren sich stark auf Technologien wie Vue, React, Laravel, Angular, JavaScript, Node.js und dergleichen. Und glauben Sie nicht, dass es sich um ein paar abgekupferte Tutorials handelt.

In den meisten Fällen werden Sie reale und greifbare Anwendungen entwickeln. Möchten Sie z. B. lernen, wie man einen Twitter-Klon mit Vue und Adonis erstellt? Kein Problem, melden Sie sich einfach für den kostenlosen Kurs an, und schon sind Sie dabei.

Eine wunderbare Seite, die ich allen neuen und bestehenden Frontend-Entwicklern nur empfehlen kann!

Tipps: Wenn es keinen Kampf gibt, gibt es auch keinen Fortschritt.

Da Sie es bis hierher geschafft haben, sollten Sie sich einige der folgenden Tipps zu Gemüte führen. Der Frontend-Bereich ist zwar eine lukrative Berufswahl, aber die Lernkurve ist ziemlich steil, und es bereitet Ihnen Kopfschmerzen, sich mit dem aktuellen Zeitplan vertraut zu machen.

Doch für die vielen Möglichkeiten, die sich Ihnen bieten, lohnt sich der harte Kampf!

Lernen Sie mit Augenmaß.

Warum wollen Sie programmieren lernen? Willst du einen besseren Job bekommen? Möchten Sie kreative Websites erstellen? Finden Sie Ihren Grund heraus, denn er wird sich als nützlich erweisen. Er wird Ihnen in jenen Tagen, ja sogar Wochen, nützlich sein, in denen Sie mit dem Kopf gegen die Wand schlagen und sich fragen, ob es das alles wert ist.

Finde deinen Stamm.

Sie sollten zumindest ein paar Kontakte zu Gleichgesinnten knüpfen, und wenn möglich sogar zu Mentoren. Als ich mir ein Pascal-Buch von einem CS-Lehrer an meiner alten Schule auslieh, war er super freundlich und offen für die Idee, mir bei Problemen zu helfen, die ich haben könnte. Ziehen Sie einen ähnlichen Weg in Erwägung, indem Sie entweder eine lokale Gemeinschaft oder andere Entwickler in Online-Communities finden. Es ist viel einfacher zu lernen, wenn jemand mit dem Finger zeigt, wo man suchen muss.

Vermeiden Sie es, alles zu lernen.

Legen Sie sich nicht die Last auf, alles wissen zu müssen. Wenn es um das Frontend geht, ist es mehr als genug, mit HTML5 und CSS3 zu beginnen. JavaScript ist wie das Sahnehäubchen auf dem Kuchen. Seien Sie also vorsichtig mit der Menge an Zuckerguss, denn Sie könnten sich aufblähen! Wenn Sie sich mit den Grundlagen vertraut gemacht haben, können Sie sich in neue Bereiche, Themen und Frameworks einarbeiten. Kleine und kompakte Lernhäppchen sind hier der Schlüssel.

Wenn Sie mehr erfahren möchten, lesen Sie dieser Beitrag von Ali Spittel wo sie mehr als 25 Tipps für neue Entwickler gibt.

Rausgehen

Worauf warten Sie noch? Gehen Sie raus und mit dem Lernen beginnen! Schauen Sie alle paar Monate in diesem Leitfaden zur Frontend-Entwicklung nach, um neue Updates und Tipps zu erhalten.

Viel Glück!