Wie möchten Sie in weltweit führenden Unternehmen arbeiten und gleichzeitig durch eine schöne Front-End-Entwicklung Wirkung erzielen?
Es besteht eine große Nachfrage nach außergewöhnlichen Künstlern des modernen Web, und dieser Leitfaden zeigt Ihnen, wie Sie beginnen 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 in Betracht zu ziehen. Man weiß nie, es könnte schließlich zu einer Karriere für Sie werden.
Der erste Abschnitt dieses Handbuchs ist der Beantwortung dringender Fragen zur Front-End-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 Abschnitt dieses Handbuchs ist Ressourcen, Tutorials und Tipps gewidmet.
Was ist Frontend-Entwicklung?
Bei der Front-End-Webentwicklung werden HTML, CSS und JavaScript verwendet, um einzigartige Web-Apps zu erstellen. Apps wie Websites, Mobile Websites, aber auch Mobile Apps und Progressive Web Apps.
Sie können sich das auch so vorstellen: Jede Website, die Sie durchsuchen, einschließlich dieser, wurde auf irgendeine Weise von einem Front-End-Entwickler erstellt. Zumindest auf der Client-Seite.
Während Front-End einer der am besten zugänglichen Pfade in der Website-Entwicklung ist, kann es auch einer der herausforderndsten sein.
Die Technologie zum Erstellen von Websites ändert sich ständig, sodass Entwickler ihre Fähigkeiten regelmäßig an die neuesten Praktiken anpassen müssen. Es kann für Anfänger lästig sein, wird aber nach ein oder zwei Jahren solider Entwicklungspraxis besser.
Können Sie die Front-End-Entwicklung kostenlos lernen?
Sie können absolut!
Das Erlernen der Webentwicklung wird viel einfacher, 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 das kostenlosCodeCamp Blog ist voll von spannenden Artikeln nicht nur über Front-End, sondern auch über andere Aspekte der Webentwicklung. Es lohnt sich, ein Lesezeichen zu setzen!
Die Prämisse dieses Handbuchs ist, dass Sie kostenlos lernen können. Wir können jedoch die Vorteile von kostenpflichtigen Kursen nicht übersehen.
Es gibt viele Startups, die sich um die entschlossene Menge kümmern, und wir werden einige erstaunliche Kursplattformen hervorheben, die Ihnen am Ende sogar ein Zertifikat geben.
Was ist das durchschnittliche Gehalt für einen Front-End-Entwickler?
Ein Front-End-Entwickler mit Vorkenntnissen kann damit rechnen, mehr als mit nach Hause zu nehmen $ 100,000 pro Jahr wenn Sie in den Vereinigten Staaten leben.
Das ist keine schlechte Nummer!
Junioren Entwickler können erwarten, überall mit nach Hause zu nehmen $ 60,000 und höher.
Und die Gehälter in Europa scheinen auch ziemlich vernünftig zu sein; Deutschland hat durchschnittlich 50,000 USD pro Jahr.
Bemerkenswert ist das die Popularität der Fernarbeit ist in den letzten Jahren explodiert, was bedeutet, dass Entwickler versuchen, ihre Bezahlung auf breiter Front an internationale Standards anzupassen. Dies ist eher der Grund, ein Front-End-Entwickler zu werden!
Wie finde ich einen Job als Front-End-Entwickler?
Technisch gesehen sollte ein Job das Letzte sein, worüber gesprochen wird. 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ückkehren und diesen Abschnitt als Referenz überprüfen.
Hier ist eine Liste der beliebtesten Jobbörsen für Front-End-Entwickler:
- Authentische Jobs
- GitHub-Jobs
- CSS-Tricks Stellenbörse
- Stapelüberlaufjobs
- FernbedienungOK
- Remote-freundliche Startups
- Arbeitende Nomaden
- Jobspresso
- Einstellung von Hacker-Nachrichten
Dies ist eine etwas komprimierte Liste von Websites, die Empfehlungen für die Suche nach Ihrem nächsten Front-End-Job geben. 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 Auftritte.
Resources: Where to start.
In den folgenden Ressourcen geht es um den Einstieg. In dieser Hinsicht verfolgen wir einen einigermaßen linearen Ansatz. Und 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 sich in den modernen Workflow einfügen. Infolgedessen können Sie die grundlegende bis mittlere Codierungssyntax erlernen und gleichzeitig die Tools verstehen, die den Workflow des modernen Entwicklers steuern.
Es wird dringend empfohlen, dass Sie sich mit diesen Ressourcen Zeit nehmen, da sie Sie auf Kurse und Tutorials im zweiten Teil dieses Handbuchs vorbereiten.
Codecademy
Wenn Sie auch nur ein paar Minuten damit verbringen, nach Ressourcen zum Erlernen des Codierens zu suchen, ist die Codecademy zweifellos einer Ihrer ersten Treffer. Diese Code-Learn-Plattform ist bekannt und hat in sieben Jahren über 100 Millionen Menschen bedient.
Zu dieser Zeit war die Codecademy mit ihrer dynamischen und interaktiven Codierungsschnittstelle ziemlich revolutionär. Und während viele den gleichen Weg gingen, hat die Codecademy eine konsistente Erfolgsbilanz geführt.
Heutzutage können Sie nach Abschluss ein Zertifikat erhalten, und viele haben dieses Zertifikat verwendet, um sich einen Job in einem zu sichern Start auf höchster Ebene;; als Junior-Entwickler nicht weniger.
Die ganze Zeit gibt es das Argument, dass Codecademy nicht genug ist.
Aus Sicht eines erfahrenen Entwicklers ist diese Plattform vielleicht zu einfach. Wenn Sie jedoch nur etwas über die Front-End-Entwicklung lernen, gibt es nichts Befriedigenderes, als Schritt für Schritt Anweisungen mit Echtzeitergebnissen zu befolgen.
Codecademy bietet Kurse zu HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL und Java an.
Lernen Sie das CSS-Layout
Als Front-End-Entwickler werden Sie eine angemessene Zeit mit dem Layout verbringen. Das Layout ist die Leinwand, auf der Sie eine Website strukturieren. Dieser Blog-Text befindet sich in a Reihe, die Teil eines größeren ist Container.
Und das gilt für alle Webseiten-Designs. Mit Learn CSS Layout erhalten Sie ein grundlegendes Verständnis der Funktionsweise von Containern und Zeilen sowie der Positionierung von Inhalten genau dort, wo Sie sie möchten.
Zusätzliche Tools, die Sie erkunden können, sind Flexbox Frosch aufgrund Flexbox Grundlagen und Gittergarten aufgrund Gitter Grundlagen.
Das Layout ist ein ziemlich wichtiges Thema. Nehmen Sie sich also ein paar Stunden Zeit, um tief in Ihr Layout einzutauchen. Der beste Weg zu lernen ist durch Übung.
Bootstrap
Sobald Sie verstanden haben, wie Layouts funktionieren, ist es 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 davon abhalten, mehr als nur zu ermutigen, fortzufahren.
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 einer der besten, die es je getan haben, ist Bootstrap.
Bootstrap wird im gesamten Web häufig verwendet und ist ohne Zweifel eines der beliebtesten Front-End-Frameworks der Welt.
Heck, 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 voller Beispiele und Anwendungsfälle. Und das Beste ist, dass das Bootstraps-Layoutsystem auf reaktionsschnelles Design ausgelegt ist. Ihre Bootstrap-basierten Sites werden also automatisch erstellt mobile-friendly.
Und wenn Ihnen das Angebot von Bootstrap gefällt, finden Sie hier zusätzliche Ressourcen zu gängigen Front-End-Frameworks:
- 10 besten JavaScript-Frameworks, die Sie kennen sollten
- 10 besten CSS-Frameworks für Front-End-Entwickler
Front-End-Checkliste
Trotz der Technologie, mit der Sie Ihre Websites erstellen, müssen Sie bestimmte Regeln und Vorschriften einhalten. Natürlich kann man solche Anforderungen ignorieren, jedoch 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. Die Plattform überprüft Ihre Website auf Best Practices bei der Front-End-Entwicklung. Dies beinhaltet die Überprüfung, ob Sie haben optimierte deine Bilder oder ob Sie die besten SEO-Praktiken befolgen.
Sie sollten versuchen, diese App so lange zu verwenden, bis Sie wissen, welche modernen Anforderungen an professionelle Websites und Apps gestellt werden. Außerdem ist die nicht aufdringliche und reibungslose Benutzeroberfläche ein absolutes Vergnügen bei der Arbeit.
Vue.js
Vue.js ist ein großartiges Beispiel, das zeigt, wie aus einer kleinen Idee / einem kleinen Konzept eines der bekanntesten Dinge der Welt werden kann. In der Tat 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 finanzieller als auch auf entwicklungspolitischer Seite.
Es ist das perfekte Beispiel dafür, wie Open Source zusammenkommen und großartige Dinge bewirken kann. Und als Front-End-Entwickler sollten Sie mehr darüber lernen Open Source und warum es wichtig ist.
Hier sind einige sehr empfohlene Lektüren auf 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 sehen Sie sich die verschiedenen Projekte an, die mit Vue.js 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 zu schnappen Sublime Text, und Sie können auf dem besten Weg zum Front-End-Experimentieren sein, und das sollten Sie 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 ganz systematisch ist. Sie arbeiten im Free-for-All-Modus, und die Ergebnisse können von Ihrer Fähigkeit abhängen, sich selbst zu disziplinieren.
Sofern Sie sich nicht für eine Investition entscheiden, möchte ich eine symbolische Summe ausgeben, um eines der Front-End-Bücher von zu kaufen Ein Buch auseinander. Diese Jungs gehören zu den besten der Branche, und erfahrene Front-End-Entwickler empfehlen ihre Bücher wiederholt.
Der Abschnitt Front-End-Grundlagen enthält ein Buch über SVG, CSS, HTML, JavaScript und Sass, das der perfekte Ausgangspunkt für modernes Front-End ist workflows.
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, auf der sich die meisten der weltweit beliebtesten Frameworks und Tools befinden.
Mit GitHub können Sie Ihre Projekte hosten und andere Personen zur Einreichung ihrer Beiträge begrüßen. Und Sie können selbst Beiträge zu anderen Projekten einreichen.
Sie können auch GitHub und alles, was es zu bieten hat, erkunden. In GitHub befinden sich beispielsweise die berühmten Awesome-Listen, die umfangreiche Sammlungen von Tutorials, Ressourcen, Tools und anderem für bestimmte Frameworks und Technologien enthalten.
Z.B, Fantastische Front-End-Liste Dazu gehören aktuelle Informationen zu den neuesten Informationen zum Front-End und zu dessen Ausrichtung.
Stapelüberlauf
Stack Overflow hat den berüchtigten Ruf, die strengste Q & A-Programmierseite der Welt zu sein. Und das ist wirklich so.
Die Benutzer von Stack Overflow stellen keine leichten Fragen, die nicht recherchiert oder richtig analysiert wurden. Und obwohl dies abstoßend wirken mag, hilft es, ein starkes Sinngefühl zu schaffen.
Sie sehen, wann immer ein Benutzer eine Antwort auf eine Frage sendet, können sich andere Benutzer 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 Site klar und konsistent.
Als Anfänger-Front-End-Entwickler möchten Sie Stack Overflow verwenden, um bestimmte Themen zu verstehen, aber auch Fragen zu stellen, wenn Sie müssen. Für die meisten Anfänger sollten Sie jedoch in der Lage sein, innerhalb von Sekunden präzise Antworten zu finden.
Tutorials & Courses: Getting a grip on the ecosystem.
Der erste Abschnitt war ausschließlich Ressourcen und Plattformen gewidmet, die Ihnen den Einstieg erleichtern. Sie sollten eine angemessene Zeit für jede von uns aufgeführte Ressource aufwenden, damit Sie ein Gefühl dafür bekommen, was Sie von der Front-End-Entwicklung erwarten können.
Sobald Sie dies alles getan haben, können Sie Ihre Aufmerksamkeit auf Tutorials und Kurse richten. Hierbei handelt es sich um streng organisierte Ressourcen mit einem starken Schwerpunkt auf dem Lernen.
Es ist erwähnenswert, dass einige der folgenden Kurse nicht kostenlos zur Verfügung stehen. Wir versichern Ihnen jedoch, dass die folgenden Empfehlungen absolut top sind.
Darüber hinaus werden Sie mit Plattformen wie Frontend Masters mit allen Technologien vertraut gemacht, die in den erfolgreichsten Startups der Welt verwendet werden.
Das Ziel dieses Beitrags ist nicht, die Front-End-Entwicklung als Hobby zu fördern, sondern Ihnen greifbare Ressourcen zur Verfügung zu stellen, damit Sie auf dem Weg sind, aus all Ihrem Lernen eine Karriere aufzubauen.
MDN-Webdokumente
MDN (Mozilla Developer Network) wird Ihre Bekanntschaft auf die eine oder andere Weise machen. Diese Webdokumentationsplattform widmet sich ausschließlich der Förderung der Funktionsweise des Webs. Hier erfahren Sie mehr über Entwicklertools, Webtechnologien und die Webentwicklung.
Wenn Sie in CSS oder HTML nach bestimmten Details suchen, wird häufig MDN als erstes Ergebnis bei Google und anderen Suchmaschinen angezeigt. Die Anleitungen, Spezifikationen und allgemeinen Erkenntnisse 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 hat anzubieten. Sie können nach Abschluss nicht nur Zertifikate erhalten, sondern auch in Ihrem bevorzugten Tempo lernen.
Die edX-Kurse sind gründlich strukturiert, wobei der Schwerpunkt eindeutig darauf liegt, den Studenten zu helfen, die Grundlagen der einzelnen Kursthemen zu verstehen. Im Moment können Sie Technologien wie JavaScript, HTML5, CSS3 und mehr lernen.
Wenn Sie das vollständige Front-End-Zertifikat erhalten möchten, müssen Sie eine bescheidene Investition von 500 US-Dollar tätigen - dies gibt Ihnen jedoch auch direkten Zugang zu den Kursleitern und mehr. Zahlreiche Unternehmen haben edX verwendet, um ihre Mitarbeiter für dieses spezielle Programm einzuschreiben.
Frontend-Master
Frontend Masters ähnelt einem Bootcamp-Erlebnis. Die Kurse, die Sie auf dieser Plattform finden, sind äußerst gründlich, wobei der Schwerpunkt auf Langforminhalten und projektorientiertem Lernen liegt.
Hier erfahren Sie mehr über Technologien wie React, Vue, Angular, Node.js und vieles mehr. Die Produktionsqualität ist extrem hoch, so dass Sie eine ähnliche Erfahrung wie in einem tatsächlichen Bootcamp-Kurs genießen können.
Als registrierter Benutzer können Sie Ihren Fortschritt auf dem verfolgen Mehr erfahren Seite. Diese Seite verfolgt Ihren Lernfortschritt und zeigt Prozentsätze für jede Technologie einzeln, aber auch Prozentsätze für ganze Stapel. Es macht Spaß, sich selbst zu motivieren.
Last but not least wird es von Ihrem Arbeitgeber nicht unbemerkt bleiben, dass ein Frontend-Masterstudiengang in Ihrem Lebenslauf abgeschlossen ist.
Eierkopf
Egghead ist der oben erwähnten Plattform sehr ähnlich, zeichnet sich jedoch durch festere und komprimiertere Lektionen aus. Zum Beispiel dauert die Lektion "Erstellen dynamischer Listen in Flattern mit ListViews" nur 2 Minuten, obwohl Sie genug Lernmaterial erhalten, 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 bietet Kursmaterial für iOS, Android und andere Plattformen.
Der jährliche Preis beträgt bescheidene 250 US-Dollar. Damit erhalten Sie jedoch Zugriff auf jeden einzelnen Kurs und jedes Tutorial auf der Website. Sie können jede Lektion auch mit anderen Community-Mitgliedern besprechen. Die Investition lohnt sich!
CSS-Tricks.
Chris Coyer ist eine absolute Legende in der CSS-Community. Er hat nicht nur über ein Jahrzehnt mit CSS-Tricks Schritt gehalten, 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 sie ständig aktualisiert werden und Geschichten basierend auf aktuell aktuellen Themen und Technologien veröffentlicht werden. Auf diese Weise können Sie Ihre Fähigkeiten mithilfe der von vielen Autoren der Website bereitgestellten Tutorials schnell erweitern.
Kurz gesagt, es ist eine nützliche Website, um Ihre Lesezeichen zu speichern und einmal am Tag zu überprüfen. Sie werden einen immensen Nutzen aus den Tutorials selbst ziehen, aber auch aus den Empfehlungen, die dazu gehören.
Scotch
Scotch ist ebenso eine Lernressource wie ein Ort für die neuesten Ereignisse in der Webentwicklung. Die Website besteht seit 2014 und hat neben Tausenden von kostenlosen Tutorials zur Webentwicklung eine enorme Fangemeinde.
Scotch-Autoren konzentrieren sich stark auf Technologien wie Vue, React, Laravel, Angular, JavaScript, Node.js und dergleichen. Und denken Sie auch nicht, dass dies einige Nachahmungs-Tutorials sind.
Zum größten Teil werden Sie echte und greifbare Apps erstellen. Beispiel: Möchten Sie lernen, wie Sie einen Twitter-Klon Vue und Adonis erstellen? Kein Problem, melden Sie sich einfach für den kostenlosen Kurs an und schon sind Sie fertig.
Wunderbare Seite und kann es nicht genug für neue und bestehende Front-End-Entwickler empfehlen!
Tips: If there is no struggle, there is no progress.
Da Sie es bis hierher 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 viele Kopfschmerzen, während Sie Ihren Kopf um die aktuelle Zeitachse wickeln.
Nichtsdestotrotz können Sie für das Niveau der Möglichkeiten anziehen – es lohnt sich den mühsamen Kampf!
Lerne im Rahmen der Vernunft.
Warum lernst du programmieren? Möchten Sie einen besseren Job bekommen? Möchten Sie kreative Websites erstellen? Finden Sie Ihren Grund heraus, denn es wird nützlich sein. Es wird in jenen Tagen, sogar Wochen nützlich sein, wenn Sie Ihren Kopf gegen eine Wand schlagen und sich fragen, ob sich irgendetwas davon lohnt.
Finde deinen Stamm.
Sie sollten zumindest ein paar Kontakte zu Gleichgesinnten und nach Möglichkeit sogar zu Mentoren knüpfen. Als ich mir ein Pascal-Buch von einem CS-Lehrer an meiner alten Schule ausgeliehen habe, war er super freundlich und offen für die Idee, mir bei allen Problemen zu helfen, die ich haben könnte. Ziehen Sie einen ähnlichen Weg in Betracht, indem Sie entweder eine lokale Community finden oder andere Entwickler in Online-Communitys finden. Es ist viel einfacher zu lernen, wenn jemand mit dem Finger darauf zeigt, wo Sie suchen müssen.
Vermeiden Sie es, alles zu lernen.
Legen Sie sich nicht die Last auf, alles wissen zu müssen. Wenn es um das Frontend geht, reicht ein Start mit HTML5 und CSS3 mehr als aus. JavaScript ist wie das Sahnehäubchen auf dem Kuchen, 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 Dieser Beitrag von Ali Spittel Dort teilt sie mehr als 25 Tipps für neue Entwickler.
Get out there
Worauf wartest du? Geh raus und Fang an zu lernen! Schauen Sie alle paar Monate in diesem Leitfaden zur Front-End-Entwicklung nach, um neue Updates und Tipps zu erhalten.
Viel Glück!
