Get best of the week

Wenn ich heute Frontend unterrichtet hätte. Anfängertipps

Mein Weg in der Webentwicklung begann vor 5 Jahren. In dieser Zeit habe ich viele Technologien ausprobiert und mich in den letzten 3 Jahren in Richtung Frontend entwickelt.

In diesem Artikel möchte ich klar darlegen, welche Technologien ein Anfänger lernen muss, und Methoden für ihre Entwicklung austauschen. Der Leitfaden richtet sich an Personen, die ihre ersten Schritte in der Webentwicklung unternehmen, und darin werde ich versuchen, das Wesentliche jeder Technologie im Detail zu erläutern. Auch am Ende werde ich Ihnen sagen, wohin Sie als nächstes gehen sollen.

Sie möchten also Frontend-Entwickler werden. Was wird dafür benötigt?

HTML, CSS, Javascript lernen

HTML und CSS


Diese beiden Technologien sind für das Site-Layout erforderlich. Layout ist eine Anordnung von Text, Bildern, Schaltflächen und anderen Oberflächenelementen auf einer Seite.

Mit HTML können wir diese Elemente hinzufügen und beschreiben. Anfangs sind sie roh und haben ein normales Erscheinungsbild. Um den Stil zu ändern, wird CSS verwendet. Hier können Sie Farbe, Größe, Position und Dutzende anderer Parameter für das Erscheinungsbild des Elements angeben.

Website ohne CSS und damit

Wie man meistert


Zunächst sollten Sie den Übersichtsartikel oder das Video zu diesen Technologien lesen. Sie verstehen also ihre Essenz.

Dann ist das Layout am bequemsten zu lernen und in der Praxis zu verbessern. Probieren Sie Layout-Layouts für Seiten oder einzelne Elemente aus. Sie können auch versuchen, den Seitenlayoutprozess auf Youtube zu betrachten und nach dem Autor zu wiederholen.

Zunächst wird es schwierig, und Sie müssen häufig zu Google gehen, um ein anderes Problem zu lösen. Mit der Zeit werden Sie jedoch lernen, schnell die richtige HTML-Struktur und die erforderlichen CSS-Eigenschaften für das Layout des Elements in Ihrem Kopf zu finden.

Woher bekommen Sie Ideen und Layouts für das Layout?


Ich habe Dribbble und CollectUI verwendet , kann aber auch nach Behance und One Page Love gesucht werden .

Sie können auch echte Layouts aus UI Store Design übernehmen . Ich empfehle Layouts von Figma, as Es wird von vielen Designern verwendet, und in Zukunft werden Sie höchstwahrscheinlich damit arbeiten. Es ist auch kostenlos und funktioniert im Browser.

Bild

Javascript


Diese Sprache beginnt mit der Programmierung im Web. Sie können Elemente auf der Seite verwalten, die Interaktion mit der Benutzeroberfläche beschreiben und steuern.

Wenn wir eine Seite mit HTML und CSS erstellt haben, ist JavaScript für den dynamischen Teil der Seite verantwortlich: Animationen, Datenanzeige, Verarbeitung von Aktionen und vieles mehr.

Warum brauche ich es?


Ein einfaches Beispiel. Angenommen, es gibt eine Seite, auf der Sie auf Knopfdruck ein modales Fenster anzeigen müssen. HTML und CSS ermöglichen es uns, das Layout der Seite selbst und des modalen Fensters zu erstellen. Diese Technologien können jedoch den Klick auf eine Schaltfläche nicht erfassen und verarbeiten.
Hier brauchen wir JavaScript. Damit beschreiben wir das Verhalten auf der Seite. Im Code meinen wir: Wenn der Benutzer auf die Schaltfläche geklickt hat, müssen Sie das modale Fenster anzeigen.

Hier ist ein Beispiel für eine solche Implementierung mit jQuery :



Mit JavaScript können Sie fast jede Operation auf der Seite ausführen. Die Funktionen sind jedoch nicht auf das Browserfenster beschränkt. Mit der Node.js- Plattform kann diese Sprache für die Serverentwicklung , das Erstellen von Projekten und vieles mehr verwendet werden. In Zukunft benötigen Sie dies, um mit großen Projekten zu arbeiten, die auf Webpack basieren . Ich rate Ihnen jedoch, zuerst zu lernen, wie man die Sprache im Browser verwendet.

Wie man meistert


Am besten lernen Sie auf learn.javascript.ru . Dies ist eine großartige Ressource, die sowohl für Anfänger als auch für fortgeschrittene Entwickler eine Wissensbasis darstellt.

Hier ist es wichtig, die Grundlagen von JavaScript selbst sowie die Funktionen seiner Funktionsweise im Browser zu verstehen. Wenn Ihnen einige Themen zu kompliziert erscheinen (z. B. Prototypen ), können Sie sie überspringen und später wiederkommen.

Lassen Sie sich nicht zu sehr von der JavaScript-Theorie allein mitreißen. Ich empfehle Ihnen, sich gleichzeitig mit dem Lernen und Schreiben einfacher Skripte zu versuchen. Sie können auch versuchen, andere Teile des Codes in Codepen zu analysieren .

Bild

Lernen Sie nach und nach neue Plugins und Bibliotheken. Eines der beliebtesten und am einfachsten zu verstehenden ist jQuery.. Es ist viel einfacher, mit dem Inhalt der Seite zu interagieren, und es kann auf einer grundlegenden Ebene schnell gemeistert werden.

Im Großen und Ganzen greifen Sie in Ihren Projekten häufig auf Bibliotheken von Drittanbietern zurück. Um besser zu verstehen, wie dies gemacht wird, empfehle ich, die Daten mit Luxon zu formatieren oder ein Karussell über Owl Carousel zu erstellen .

Was weiter?


Mit Grundkenntnissen in HTML, CSS und JavaScript können Sie eine schöne Landing Page erstellen und die Seiten eines Online-Shops oder Blogs gestalten. Ich rate Ihnen, dies zu tun, um Ihr Wissen in der Webentwicklung zu festigen.

Im Großen und Ganzen kann fast jede Schnittstelle auf diesen Technologien geschrieben werden. Die Frage ist nur, welche Besonderheiten die von Ihnen entwickelte Anwendung hat. Je größer und komplexer es ist, desto mehr verschiedene Bibliotheken, Plugins und Technologien benötigen Sie, um die Aufgabe zu bewältigen.

Bild

Ich empfehle , sich mit Frontend Roadmap vertraut zu machen . Hier sind die Schnittstellenentwicklungstechnologien, die Sie in Zukunft benötigen werden.

In Zukunft werden Sie wahrscheinlich an reaktiven Frameworks wie React oder Vue interessiert sein .. Um Anwendungen darauf zu erstellen , lernen Sie Webpack und um den Layoutprozess zu beschleunigen, lernen Sie die Präprozessoren PUG und SASS . Oder vielleicht möchten Sie tiefer in die Grafik eintauchen und lernen, wie man mit D3 oder WebGL arbeitet .

Wie Sie bereits verstanden haben, ist das Frontend in der Webentwicklung sehr vielseitig und reich an verschiedenen Technologien für völlig unterschiedliche Aufgaben. Lernen, probieren, experimentieren und genießen Sie es, schöne und bequeme Benutzeroberflächen für jeden Zweck zu erstellen. Dafür lieben wir das Frontend.


PS Ich habe jede Technologie in diesem Artikel mit einem Link zu Dokumentation oder Anwendungsbeispielen begleitet. Sie können sich mit ihnen vertraut machen, um ein besseres Verständnis der Webentwicklung zu erhalten.

More articles:


All Articles