Wie würde es Ihnen gefallen, bei weltweit führenden Unternehmen zu arbeiten und gleichzeitig durch schöne Front-End-Entwicklung etwas zu bewirken?
Es besteht eine große Nachfrage nach außergewöhnlichen Künstlern des modernen Webs, und dieser Leitfaden zeigt Ihnen, wie Sie anfangen können.
Und da die Leute, die in der Software arbeiten, zu den am besten belohnten Personen gehören, lohnt es sich, diese neue Fähigkeit zu erlernen. Man weiß nie, es könnte sich irgendwann zu einer Karriere für Sie entwickeln.
Der erste Abschnitt dieses Leitfadens widmet sich der Beantwortung dringender Fragen zur Front-End-Entwicklung. Wenn Sie sich mit Verantwortlichkeiten, Gehältern und anderen Aspekten eines Frontend-Entwicklers auskennen, können Sie den 2. Teil überspringen. Der zweite Abschnitt dieses Handbuchs ist Ressourcen, Tutorials und Tipps gewidmet.
Inhaltsverzeichnis
Was ist Frontend-Entwicklung?
Front-End-Webentwicklung ist die Praxis, HTML, CSS und JavaScript zu verwenden, um einzigartige Web-Apps zu erstellen. Apps wie Websites, Mobile Websites, aber auch Mobile Apps u Progressive Web-Apps.
Sie können es sich auch so vorstellen, dass jede Website, die Sie durchsuchen, einschließlich dieser, in irgendeiner Weise von einem Front-End-Entwickler erstellt wurde. Zumindest auf Client-Seite.
Was früher umfangreiche Tools und Frameworks erforderte, kann jetzt mit nativen Spezifikationen durchgeführt werden.
Das Front-End ist zwar einer der zugänglichsten Wege in der Website-Entwicklung, kann aber auch einer der schwierigsten sein.
Die Technologie zur Erstellung von Websites ändert sich ständig, was bedeutet, dass Entwickler ihre Fähigkeiten regelmäßig an die neuesten Praktiken anpassen müssen. Es kann für einen Anfänger ermüdend sein, wird aber nach ein oder zwei Jahren solider Entwicklungspraxis besser.
Kann man Front-End-Entwicklung kostenlos lernen?
Das können Sie absolut!
Es wird viel einfacher, Webentwicklung zu erlernen, vor allem dank des enormen Zustroms neuer Ressourcen, Tutorials und Open-Source-Projekte.
Projekte wie freeCodeCamp helfen Millionen von Menschen, Code für 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. Bookmarken lohnt sich!
Sieht kompliziert aus? Mit Übung wird es einfacher!
Während die Prämisse dieses Leitfadens darin besteht, Ihnen beim kostenlosen Lernen zu helfen, können wir die Vorteile kostenpflichtiger Kurse nicht übersehen.
Es gibt viele Startups da draußen, die sich an das entschlossene Publikum richten, und wir werden einige erstaunliche Kursplattformen hervorheben, die Ihnen am Ende sogar ein Zertifikat verleihen.
Was ist das Durchschnittsgehalt für Frontend-Entwickler?
Ein Front-End-Entwickler mit Vorerfahrung kann damit rechnen, mehr als 100.000 US-Dollar pro Jahr mit nach Hause zu nehmen, wenn er in den Vereinigten Staaten lebt.
Das ist keine schlechte Nummer!
Junior-Entwickler können davon ausgehen, dass sie ab 60.000 US-Dollar und mehr mit nach Hause nehmen.
Und die Gehälter in Europa scheinen auch recht vernünftig zu sein; Deutschland hat durchschnittlich 50.000 $ pro Jahr.
Bemerkenswert ist das die Beliebtheit von Fernarbeit ist in den letzten Jahren explodiert, was bedeutet, dass Entwickler versuchen, ihre Bezahlung auf breiter Front an internationale Standards anzugleichen. Dies ist eher der Grund, darüber nachzudenken, Frontend-Entwickler zu werden!
Wie finde ich einen Job als Frontend-Entwickler?
Technisch gesehen sollte ein Job das letzte sein, worüber man spricht. Zuerst müssen Sie die Fähigkeiten anhäufen und dann über mögliche Möglichkeiten nachdenken. Da dieser Beitrag jedoch als Leitfaden strukturiert ist, können Sie jederzeit zurückkommen und diesen Abschnitt als Referenz überprüfen.
Remote-Jobs nehmen in einem beispiellosen Tempo zu. Denn wer mag nicht die Idee, von zu Hause aus oder noch besser direkt vom Strand aus zu arbeiten?
Hier ist eine Liste der beliebtesten Jobbörsen für Frontend-Entwickler:
Dies ist eine etwas verkürzte Liste von Websites, die Empfehlungen für die Suche nach Ihrem nächsten Front-End-Job enthalten. Andere Alternativen, die Sie haben, sind, an einem persönlichen Projekt zu arbeiten, in der Hoffnung, es rentabel zu machen, oder Ihre Zeit mit freiberuflichen Auftritten zu verbringen.
Ressourcen: Wo anfangen.
In den folgenden Ressourcen geht es um den Einstieg. Wir gehen in dieser Hinsicht relativ linear vor. Und das aus dem einfachen Grund, dass es da draußen eine enorme Menge an Ressourcen gibt.
Damit Sie schnell loslegen können, liegt unser Fokus auf Plattformen und Front-End-Tools, die sich in den modernen Workflow einfügen. Infolgedessen können Sie die grundlegende bis fortgeschrittene Codierungssyntax erlernen und gleichzeitig die Tools verstehen, die den Arbeitsablauf moderner Entwickler steuern.
Es wird dringend empfohlen, dass Sie sich mit diesen Ressourcen Zeit nehmen, da sie Sie auf die Kurse und Tutorials im zweiten Teil dieses Handbuchs vorbereiten.
Codeakademie
Wenn Sie auch nur ein paar Minuten damit verbringen, nach Ressourcen zum Erlernen des Programmierens zu suchen, wird Codecademy zweifellos einer Ihrer ersten Treffer sein. Diese Learn-to-Code-Plattform ist bekannt und hat in sieben Jahren über 100 Millionen Menschen geholfen.
Damals war die Codecademy mit ihrer dynamischen und interaktiven Programmierschnittstelle ziemlich revolutionär. Und während viele den gleichen Weg eingeschlagen haben, hat Codecademy eine beständige Erfolgsbilanz vorzuweisen.
Heutzutage können Sie nach Abschluss ein Zertifikat erhalten, und viele haben dieses Zertifikat verwendet, um sich einen Job in einem Top-Level-Startup zu sichern. als Junior-Entwickler nicht weniger.
Die ganze Zeit gibt es das Argument, dass Codecademy nicht ausreicht.
Aus Sicht eines erfahrenen Entwicklers ist diese Plattform sicher zu einfach. Aber wenn Sie nur etwas über die Front-End-Entwicklung lernen, gibt es nichts Befriedigenderes, als Schritt-für-Schritt-Anweisungen mit Echtzeit-Ergebnissen zu befolgen.
Codecademy bietet Kurse zu HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL und Java an.
Lernen Sie CSS-Layout
Als Frontend-Entwickler verbringen Sie eine angemessene Zeit mit der Arbeit am Layout. Das Layout ist die Leinwand, auf der Sie eine Website strukturieren. Dieser Blogtext wird innerhalb einer Zeile positioniert, die Teil eines größeren Containers ist.
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.
Zusätzliche Tools, die Sie erkunden können, sind Flexbox Frosch zum Flexbox Grundlagen u Gittergarten zum Netz Grundlagen bzw.
Das Layout ist ein ziemlich wichtiges Thema, das es zu verstehen gilt. Verbringen Sie also ein paar Stunden damit, tief in Ihre Layout-Erfahrung einzutauchen. Am besten lernt man durch Übung.
Bootstrap
Sobald Sie verstehen, wie Layouts funktionieren, ist es an der Zeit, einige konkrete Experimente durchzuführen. Sicher, Sie können weitermachen und versuchen, als erstes Projekt eine benutzerdefinierte Benutzeroberfläche zu entwickeln, aber das könnte Sie eher abschrecken, als Sie dazu ermutigen, weiterzumachen.
Sie müssen sich also mit ein oder zwei Frameworks vertraut machen. Ein Framework ist eine einfache Möglichkeit, mit jeder Art von Webentwicklung zu beginnen. Sie erhalten die Tools und die Dokumentation, um vom ersten Tag an mit dem Erstellen interaktiver Websites zu beginnen. Und eines der besten, die es je gemacht haben, ist Bootstrap.
Erstellen Sie mit der weltweit beliebtesten Front-End-Komponentenbibliothek reaktionsschnelle, Mobile-First-Projekte im Web. Bootstrap ist ein Open-Source-Toolkit für die Entwicklung mit HTML, CSS und JS.
Bootstrap wird im gesamten Web stark genutzt und ist ohne Zweifel eines der beliebtesten Front-End-Frameworks der Welt.
Verdammt, ein guter Prozentsatz der Websites, die Sie täglich besuchen, verwenden einige Bootstrap-Funktionen.
Eines der fantastischen Dinge an Bootstrap ist wie schnell Sie loslegen können. Die Dokumentationsseiten sind voll von Beispielen und Anwendungsfällen. Und das Beste ist, dass das Bootstraps-Layoutsystem auf responsives Design ausgelegt ist. Ihre Bootstrap-basierten Websites sind also automatisch für Mobilgeräte optimiert.
Und wenn Ihnen gefällt, was Bootstrap zu bieten hat, finden Sie hier zusätzliche Ressourcen zu beliebten Front-End-Frameworks:
Front-End-Checkliste
Trotz der Technologie, die Sie zum Erstellen Ihrer Websites verwenden, müssen Sie dennoch bestimmte Regeln und Vorschriften befolgen. Natürlich kann man sich dafür entscheiden, solche Anforderungen zu ignorieren, aber auf Kosten der Benutzererfahrung und der digitalen Kompatibilität.
Die Front-End-Checkliste ist ein hervorragendes Tool, mit dem Sie Ihre Website-URL angeben können, und die Plattform überprüft Ihre Website auf Best Practices in der Front-End-Entwicklung. Dazu gehört die Überprüfung, ob Sie Ihre Bilder optimiert haben oder ob Sie die besten SEO-Praktiken befolgen.
Sie sollten diese App so lange ausprobieren und verwenden, bis Sie verstanden haben, was die modernen Anforderungen an professionelle Websites und Apps sind. Außerdem ist es ein absolutes Vergnügen, mit der nicht aufdringlichen und reibungslosen Benutzeroberfläche zu arbeiten.
Vue.js
Vue.js ist ein großartiges Beispiel, das zeigt, wie eine kleine Idee/ein Konzept zu einem der bekanntesten Dinge der Welt heranwachsen kann. Tatsächlich hat Vue.js die Front-End-Community im Sturm erobert.
Dieses fortschrittliche Framework hilft Entwicklern, erstaunliche Benutzeroberflächen mit HTML und JavaScript zu erstellen.
Das Framework wird vollständig von der Community unterstützt – sowohl auf der Finanz- als auch auf der Entwicklungsseite.
Es ist das perfekte Beispiel dafür, wie Open Source zusammenkommen und großartige Dinge möglich machen kann. Und als Frontend-Entwickler sollten Sie sich mehr darüber informieren Open-Source und warum es wichtig ist.
Hier sind einige sehr empfehlenswerte Lektüren zu Vue.js:
Und last but not least, sehen Sie sich die verschiedenen Projekte an, die mit Vue.js auf der erstellt wurden Vue.js-Showcase Webseite.
Front-End-Grundlagen
Alles, was wir uns bisher angesehen haben, war größtenteils kostenlos und Open Source. Alles, was Sie brauchen, ist, sich selbst zu greifen Erhabener Text, und Sie können auf dem besten Weg zu Front-End-Experimenten sein, und Sie sollten es unbedingt sein! Das Lesen von Tutorials und Framework-Dokumentationen 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 vollständig systematisch ist. Sie arbeiten im Free-for-all-Modus, und die Ergebnisse können je nach Ihrer Fähigkeit, sich selbst zu disziplinieren, variieren.
Es sei denn, Sie entscheiden sich zu investieren, und mit investieren meine ich, eine symbolische Summe auszugeben, um eines der Front-End-Bücher zu kaufen Ein Buch auseinander. Diese Jungs gehören zu den Besten der Branche, und erfahrene Front-End-Entwickler empfehlen ihre Bücher immer wieder.
Der Abschnitt Front-End-Grundlagen enthält ein Buch über SVG, CSS, HTML, JavaScript und Sass, das der perfekte Ausgangspunkt für moderne Front-End-Workflows ist.
GitHub
GitHub ist Ihr digitales Büro für alles, was mit Codierung und Entwicklung zu tun hat. Es ist die größte Open-Source-Plattform der Welt und Heimat der meisten der weltweit beliebtesten Frameworks und Tools.
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. Auf GitHub befinden sich beispielsweise die berühmten Awesome-Listen, bei denen es sich um riesige Sammlungen von Tutorials, Ressourcen, Tools und anderen Dingen für bestimmte Frameworks und Technologien handelt.
Z.B, Fantastische Front-End-Liste Dazu gehören aktuelle Informationen über die neuesten Dinge, die man über das Front-End wissen muss, und wohin es geht.
Paketüberfluss
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. Und obwohl sich das abstoßend anfühlen mag, hilft es, ein starkes Zielbewusstsein zu schaffen.
Sie sehen, wann immer ein Benutzer eine Antwort auf eine Frage einreicht, können andere Benutzer sich melden und diese Antwort positiv bewerten. Am Ende erhalten Sie mehrere „verifizierte“ Antworten, die die Fragen der Benutzer gründlich beantworten. Dadurch bleibt die Hierarchie der Seite klar und konsistent.
Als Anfänger im Front-End-Entwickler möchten Sie Stack Overflow verwenden, um bestimmte Themen zu verstehen, aber auch um Fragen zu stellen, wenn Sie müssen. Für die meisten Anfängersachen sollten Sie jedoch in der Lage sein, innerhalb von Sekunden prägnante Antworten zu finden.
Tutorials & Kurse: Das Ökosystem in den Griff bekommen.
Der erste Abschnitt war ausschließlich Ressourcen und Plattformen gewidmet, die Ihnen den Einstieg erleichtern. Sie sollten für jede von uns aufgelistete Ressource eine angemessene Zeit aufwenden, damit Sie ein tatsächliches Gefühl dafür bekommen, was Sie von der Front-End-Entwicklung erwarten können.
Sobald Sie das alles getan haben, können Sie sich auf Tutorials und Kurse konzentrieren. Dies sind strenger organisierte Ressourcen mit einem starken Schwerpunkt auf Lernen.
Die Front-End-Entwicklung ist eine Sammlung von Tools, Frameworks, Bibliotheken, Testsoftware und vielem mehr. Lassen Sie sich jedoch nicht vom schieren Umfang erschrecken!
Es ist erwähnenswert, dass einige der folgenden Kurse nicht kostenlos verfügbar sind. Wir versichern Ihnen jedoch, dass die folgenden Empfehlungen absolut erstklassig sind.
Darüber hinaus werden Sie auf Plattformen wie Frontend Masters mit allen Technologien vertraut gemacht, die in den erfolgreichsten Startups der Welt verwendet werden.
Das Ziel dieses Beitrags ist es nicht, die Frontend-Entwicklung als Hobby zu fördern, sondern Ihnen handfeste Ressourcen an die Hand zu geben, damit Sie sich auf den Weg machen können, aus all Ihrem Lernen eine Karriere aufzubauen.
MDN-Webdokumentation
MDN (Mozilla Developer Network) wird Sie auf die eine oder andere Weise kennenlernen. Diese Web-Dokumentationsplattform widmet sich ausschließlich der Förderung der Funktionsweise des Webs. Hier können Sie sich über Entwicklertools, Webtechnologien und die Webentwicklung selbst informieren.
Wenn Sie in CSS oder HTML nach bestimmten Angaben suchen, erscheint MDN häufig als erstes Ergebnis bei Google und anderen Suchmaschinen. Die Leitfäden, Spezifikationen und allgemeinen Einblicke sind so strukturiert, dass sie für Front-End-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 nach Abschluss nicht nur Zertifikate erhalten, sondern auch in Ihrem bevorzugten Tempo lernen.
edX-Kurse sind gründlich strukturiert, mit einem klaren Schwerpunkt darauf, den Schülern zu helfen, die Grundlagen jedes Kursthemas zu verstehen. Im Moment können Sie Technologien wie JavaScript, HTML5, CSS3 und mehr erlernen.
Wenn Sie das vollständige Front-End-Zertifikat erhalten möchten, müssen Sie eine bescheidene Investition von 500 US-Dollar tätigen – aber dies gibt Ihnen auch direkten Zugang zu den Kursleitern und mehr. Zahlreiche Unternehmen haben edX verwendet, um ihre Mitarbeiter für dieses spezielle Programm anzumelden.
Frontend-Master
Frontend Masters ähnelt einem Bootcamp-Erlebnis. Die Kurse, die Sie auf dieser Plattform finden, sind äußerst gründlich und legen den Schwerpunkt auf langfristige Inhalte und projektorientiertes Lernen.
Hier erfahren Sie mehr über Technologien wie React, Vue, Angular, Node.js und vieles mehr. Die Produktionsqualität ist äußerst hochwertig, so dass Sie ein ähnliches Erlebnis wie in einem echten Bootcamp-Kurs genießen können.
Als registrierter Benutzer können Sie Ihren Fortschritt auf der verfolgen Lernen Seite. Diese Seite verfolgt Ihren Lernfortschritt und zeigt Prozentsätze für jede Technologie einzeln, aber auch Prozentsätze für ganze Stacks. Es ist eine unterhaltsame Art, sich selbst zu motivieren.
Last but not least wird der Abschluss eines Frontend-Masters-Kurses in Ihrem Lebenslauf von Ihrem Arbeitgeber nicht unbemerkt bleiben.
Egghead
Egghead ist der oben genannten Plattform sehr ähnlich, zeichnet sich jedoch durch festere und komprimiertere Lektionen aus. Zum Beispiel dauert die Lektion „Dynamische Listen in Flutter mit ListViews erstellen“ nur 2 Minuten, obwohl sie Ihnen genug Lernmaterial bietet, um das Konzept wirklich zu verstehen.
Egghead bietet Tutorials und Kurse zu Frameworks, Bibliotheken, Sprachen, Tools und Plattformen. Möchten Sie mehr über die mobile Entwicklung erfahren? Kein Problem, Egghead hat Kursmaterial für iOS, Android und andere Plattformen.
Der jährliche Preis beträgt bescheidene 250 $, aber dies gewährt Ihnen Zugang zu jedem einzelnen Kurs und Tutorial, das auf der Website zu finden ist. Sie können jede Lektion auch mit anderen Community-Mitgliedern besprechen. Die Investition lohnt sich!
CSS-Tricks
Chris Coyier ist eine absolute Legende in der CSS-Community. Er hält nicht nur seit über einem Jahrzehnt mit CSS-Tricks Schritt, sondern ist auch 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 es ständig aktualisiert wird und Geschichten basierend auf aktuell angesagten Themen und Technologien veröffentlicht werden. Infolgedessen können Sie Ihre Fähigkeiten schnell erweitern, indem Sie die Tutorials verwenden, die von vielen Autoren der Website bereitgestellt werden.
Kurz gesagt, es ist eine nützliche Seite, die Sie in Ihren Lesezeichen aufbewahren und einmal am Tag überprüfen können. Sie werden einen immensen Wert aus den Tutorials selbst ziehen, aber auch aus den Empfehlungen, die sie begleiten.
Scotch
Scotch ist sowohl eine Lernressource als auch ein Ort für die neuesten Ereignisse in der Webentwicklung. Die Seite besteht seit 2014 und hat neben Tausenden von kostenlosen Tutorials zur Webentwicklung eine enorme Fangemeinde angehäuft.
Scotch-Autoren konzentrieren sich stark auf Technologien wie Vue, React, Laravel, Angular, JavaScript, Node.js und dergleichen. Und denken Sie auch nicht, dass dies irgendwelche gefälschten Tutorials sind.
In den meisten Fällen werden Sie echte und greifbare Apps erstellen. Möchten Sie zB lernen, wie man einen Twitter-Klon für Vue und Adonis erstellt? Kein Problem, melden Sie sich einfach für den kostenlosen Kurs an, und schon sind Sie fertig.
Wunderbare Seite und ich kann sie nicht genug für neue und bestehende Front-End-Entwickler empfehlen!
Tipps: Wenn es keinen Kampf gibt, gibt es keinen Fortschritt.
Da Sie es so weit geschafft haben, können Sie sich auch einige der folgenden Tipps gönnen. Während Front-End eine lukrative Berufswahl ist, beinhaltet es eine ziemlich steile Lernkurve und ziemlich viel Kopfschmerzen, während Sie sich mit dem aktuellen Zeitplan beschäftigen.
Nichtsdestotrotz, für das Niveau der Möglichkeiten, die Sie anziehen können – es ist den harten Kampf wert!
Lernen Sie im Rahmen des Zumutbaren.
Warum lernst du programmieren? Möchten Sie einen besseren Job bekommen? Möchten Sie kreative Websites erstellen? Finden Sie Ihren Grund heraus, denn er wird sich als nützlich erweisen. Es wird sich in jenen Tagen, sogar Wochen, als nützlich erweisen, wenn Sie mit dem Kopf gegen eine Wand schlagen – und sich fragen, ob sich das überhaupt lohnt.
Finden Sie Ihren Stamm.
Sie sollten zumindest ein paar Verbindungen zu Gleichgesinnten und, wenn möglich, sogar zu Mentoren knüpfen. Als ich mir ein Pascal-Buch von einem CS-Lehrer an meiner alten Schule ausliehen wollte, war er super freundlich und offen für die Idee, mir bei allen möglichen Problemen zu helfen. Ziehen Sie einen ähnlichen Weg in Betracht, indem Sie entweder eine lokale Community finden oder andere Entwickler in Online-Communities finden. Es ist viel einfacher zu lernen, wenn jemand mit dem Finger darauf zeigt, wo Sie hinschauen müssen.
Vermeide es, alles zu lernen.
Legen Sie nicht die Last auf sich, 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 i-Tüpfelchen, also seien Sie vorsichtig, wie viel Sahnehäubchen Sie bekommen, denn Sie könnten sich aufblähen! Nachdem Sie sich mit den Grundlagen vertraut gemacht haben, erkunden Sie neue Bereiche, Themen und Frameworks. Kleine und kompakte Lernhäppchen sind hier der Schlüssel.
Wenn Sie mehr erfahren möchten, lesen Sie diesen Beitrag von Ali Spittel wo sie mehr als 25 Tipps für neue Entwickler teilt.
Geh da raus
Worauf wartest du? Geh raus und fang an zu lernen! Stellen Sie sicher, dass Sie alle paar Monate in diesem Leitfaden zur Front-End-Entwicklung nach neuen Updates und Tipps suchen.
Viel Glück!