Webentwicklungstools haben in nur wenigen Jahren einen langen Weg zurückgelegt. Dank dieses Fortschritts können wir die Leistungsfähigkeit hoch getesteter Bibliotheken nutzen, um unseren Workflow zu verbessern und von größeren Möglichkeiten in Bezug auf responsives Design zu profitieren. Darüber hinaus können wir dank ständig verbesserter Versionskontrollsysteme Dinge gemeinsam aufbauen. Von Browser-Add-Ons und Plugins bis hin zu Prozessoren, die Ihren Code optimieren, gab es noch nie so viele Möglichkeiten, großartige Webanwendungen zu erstellen.

Aber da die Anzahl der Webentwicklungstools fast täglich zunimmt, kann es manchmal entmutigend sein, die beste Software zu finden, um die Arbeit zu erledigen. Um Ihnen zu helfen, haben wir eine Liste der wichtigsten Tools für die Frontend-Entwicklung erstellt, um Ihnen den Einstieg zu erleichtern. Wenn Sie daran interessiert sind, etwas bestimmtes herauszufinden, Wählen Sie es einfach aus der folgenden Liste aus.Ich habe mich sehr gefreut, als ich das erste Mal hier war.js

Nicht scharf auf das Lesen? Dann schauen Sie sich das Video unten an, in dem einer unserer Kursspezialisten über die Tools spricht.

1. Sublime Text

Beginnen wir mit den Grundlagen: ein erstklassiger Code-Editor – einer, der eine gut gestaltete, super effiziente und ultraschnelle Benutzeroberfläche bietet. Es gibt mehrere, die dies gut machen, aber das wohl beste (und beliebteste) ist Sublime Text.Das Erfolgsgeheimnis von Sublime, das von einem Ein-Mann-Entwicklungsteam kunstvoll betrieben wird, liegt in der Vielzahl von Tastaturkürzeln des Programms – wie der Möglichkeit, gleichzeitig zu bearbeiten (dieselben interaktiven Änderungen an mehreren ausgewählten Bereichen vorzunehmen) sowie schnelle Navigation zu Dateien, Symbolen und Linien. Und wenn Sie jeden Tag mehr als 8 Stunden mit Ihrem Editor verbringen, summieren sich diese kostbaren Sekunden, die für jeden Prozess gespeichert werden, wirklich …

Sie können mit Sublime in diesem kostenlosen Webentwicklungs-Tutorial mit dem Codieren beginnen (keine Anmeldung erforderlich).

2. Chrome Developer Tools

Wäre es nicht großartig, wenn Sie HTML und CSS in Echtzeit bearbeiten oder JavaScript debuggen könnten, während Sie eine gründliche Leistungsanalyse Ihrer Website anzeigen?

Mit den integrierten Chrome-Entwicklertools von Google können Sie genau das tun. Gebündelt und sowohl in Chrome als auch in Safari verfügbar, ermöglichen sie Entwicklern den Zugriff auf die Interna ihrer Webanwendung. Darüber hinaus kann eine Palette von Netzwerk-Tools helfen, Ihre Ladeabläufe zu optimieren, während eine Zeitleiste Ihnen ein tieferes Verständnis dafür gibt, was der Browser zu einem bestimmten Zeitpunkt tut.

Google veröffentlicht alle sechs Wochen ein Update – schauen Sie sich also die Website sowie den YouTube-Kanal von Google Developers an, um Ihre Fähigkeiten auf dem neuesten Stand zu halten.

3. jQuery

JavaScript wurde lange Zeit von Entwicklern als essentielle Front-End-Sprache angesehen, obwohl es nicht ohne Probleme ist: Gespickt mit Browser-Inkonsistenzen, bedeutete seine etwas komplizierte und unnahbare Syntax, dass die Funktionalität oft litt.

Das war bis 2006, als jQuery – eine schnelle, kleine, plattformübergreifende JavaScript-Bibliothek zur Vereinfachung des Front-End–Prozesses – auf den Markt kam. Durch die Abstraktion vieler Funktionen, die Entwickler normalerweise selbst lösen müssen, ermöglichte jQuery einen größeren Spielraum für das Erstellen von Animationen, das Hinzufügen von Plug-Ins oder sogar das Navigieren in Dokumenten.Und es ist eindeutig erfolgreich – jQuery war mit Abstand die beliebteste JavaScript-Bibliothek in Existenz im Jahr 2015, mit der Installation auf 65% der Top 10 Millionen am höchsten frequentierten Websites im Web.

4. GitHub

Es ist der schlimmste Albtraum eines jeden Entwicklers – Sie arbeiten an einer neuen Projektfunktion und vermasseln es. Geben Sie Versionskontrollsysteme (VCS) ein – und genauer gesagt GitHub.

Wenn Sie Ihr Projekt mit dem Dienst ausrollen, können Sie alle vorgenommenen Änderungen anzeigen oder sogar zu Ihrem vorherigen Status zurückkehren (lästige Fehler gehören der Vergangenheit an). Der Repository-Hosting-Service bietet auch eine reichhaltige Open-Source-Entwicklungsgemeinschaft (die die Zusammenarbeit zwischen Teams so einfach wie möglich macht) sowie mehrere andere Komponenten wie Bug-Tracking, Feature-Requests, Task-Management und Wikis für jedes Projekt.Viele Arbeitgeber werden nach ausgefeilten Git-Fähigkeiten suchen, also ist jetzt der perfekte Zeitpunkt, sich anzumelden – und es ist eine großartige Möglichkeit, sich zu engagieren und von den Besten mit einer Vielzahl von Open-Source-Projekten zu lernen.

5. Twitter Bootstrap

Sind Sie es leid, dasselbe Styling für einen Container einzugeben? Wie wäre es mit diesem Knopf, der immer wieder auftaucht? Sobald Sie anfangen, Front-End-Anwendungen regelmäßig zu erstellen, werden Sie die gleichen Muster bemerken.UI-Frameworks sind ein Versuch, diese Probleme zu lösen, indem sie die gemeinsamen Elemente in wiederverwendbare Module abstrahieren – was bedeutet, dass Entwickler die Elemente neuer Anwendungen schnell und einfach gerüsten können.

Das am weitesten verbreitete dieser Frameworks ist Bootstrap, ein umfassendes UI-Paket, das vom Twitter-Team entwickelt wurde. Mit Tools zum Normalisieren von Stylesheets, zum Erstellen modaler Objekte, zum Hinzufügen von JavaScript-Plugins und einer Vielzahl anderer Funktionen kann Bootstrap die Menge an Code (und Zeit), die zum Erstellen Ihres Projekts benötigt wird, drastisch reduzieren.

6. Kantig.js

HTML ist normalerweise der Eckpfeiler der Toolbox eines Frontend-Entwicklers, aber es hat einen schwerwiegenden Fehler, den viele für einen schwerwiegenden Fehler halten: Es wurde nicht für die Verwaltung dynamischer Ansichten entwickelt.

Hier kommt AngularJS, ein Open-Source-Webanwendungsframework, ins Spiel. AngularJS wurde von Google entwickelt und ermöglicht es Ihnen, die HTML-Syntax Ihrer Anwendung zu erweitern, was zu einer ausdrucksstärkeren, lesbareren und schnell zu entwickelnden Umgebung führt, die sonst nicht mit HTML allein erstellt werden könnte.Das Projekt ist nicht ohne seine Kritiker: Einige glauben, dass diese Art der Datenbindung für einen chaotischen, nicht getrennten Code sorgt, aber wir denken immer noch, dass es eine unschätzbare Fähigkeit ist, in Ihrem Front-End-Kit zu haben.

7. Sass

Web-Dev-Tools, die Zeit sparen, sind dein bester Freund und eines der ersten Dinge, die du über Code lernst, ist, dass er TROCKEN sein muss („Wiederhole dich nicht“). Das zweite, was Sie wahrscheinlich lernen werden, ist, dass CSS normalerweise nicht sehr TROCKEN ist.

Betreten Sie die Welt des CSS-Präprozessors, eines Tools, mit dem Sie wartbaren, zukunftssicheren Code schreiben und gleichzeitig die Menge an CSS reduzieren können, die Sie schreiben müssen (trocken halten).

Vielleicht am beliebtesten unter ihnen ist Sass, ein acht Jahre altes Open-Source-Projekt, das das Genre der modernen CSS-Präprozessoren ziemlich definiert hat. Obwohl es anfangs etwas schwierig ist, sich damit auseinanderzusetzen, wird die Kombination von Variablen, Verschachtelungen und Mixins von Sass beim Kompilieren einfaches CSS rendern, was bedeutet, dass Ihre Stylesheets lesbarer und (vor allem) TROCKENER sind.

Fazit

Wenn Sie die Idee haben, diese Frontend-Tools zu erlernen und sich auf eine 7-monatige Reise zum Webentwickler zu begeben, empfehle ich Ihnen, sich den neuen Full-Stack-Webentwicklungskurs von CareerFoundry anzusehen. Es wurde entwickelt, um Ihnen die wichtigsten Frontend-Technologien von Grund auf beizubringen, bevor Sie mit begehrten Fähigkeiten in der JavaScript-Entwicklung ausgestattet werden. Sie werden mit zwei erfahrenen Entwicklern für Online-Mentoring und Tutorship gepaart, und es gibt eine Jobgarantie: Wenn Sie innerhalb von 6 Monaten nach Ihrem Abschluss keinen Job als Webentwickler bekommen, erhalten Sie Ihr Geld zurück. Kontaktieren Sie noch heute einen Karriereberater, um mehr zu erfahren und unserer ersten vollständigen Kohorte beizutreten.