Lernen und Hilfe erhalten

Lassen Sie uns direkt fortfahren und über effektives Lernen nachdenken.

Es ist interessant zu bedenken, dass Ihr Gehirn auf zwei Hauptarten Dinge lernt – fokussiertes und diffuses Lernen:

• Fokussiertes Lernen ist das, was Sie eher traditionell mit akademischen Fächern verbinden. Sie konzentrieren sich intensiv auf ein spezifisches Thema und lösen die spezifischen Probleme, die es mit sich bringt. Sie konzentrieren sich auf einen engen Bereich.
• Diffuses Lernen hat mehr mit höherem Denken über einen breiteren Bereich zu tun. Sie lassen Ihr Gehirn weiter umherschweifen und scheinbar zufällige Verbindungen zwischen verschiedenen Dingen herstellen. Dies ist eher die Art von Denken, die Sie beim Duschen oder während einer Kaffeepause tun.

Aus den Studien, die Neurowissenschaftler über die Gehirnaktivität durchgeführt haben, haben wir erfahren, dass man nicht wirklich beide Arten des Lernens – oder des Denkens – gleichzeitig anwenden kann. Welche sollten Sie also wählen? Sie könnten denken, dass fokussiertes Lernen besser zum Studieren geeignet ist, aber in Wirklichkeit sind beide sehr wichtig.

Fokussiertes Denken ist großartig, um sich tief auf spezifische Themen zu konzentrieren, tiefgehende Problemstellungen zu lösen und Ihre Beherrschung der erforderlichen Techniken zu verbessern – die neuronalen Bahnen in Ihrem Gehirn zu stärken, in denen diese Informationen gespeichert sind. Es ist jedoch nicht sehr gut darin, ein Verständnis für "das große Ganze" zu erlangen und neue neuronale Bahnen zu öffnen, wenn Sie versuchen, neue Themen zu verstehen oder neue Probleme zu lösen, denen Sie bisher nicht begegnet sind.

Dafür brauchen Sie diffuses Denken. Dies ist das Gegenteil von Fokussierung – Sie lassen Ihr Gehirn durch eine breitere Landschaft wandern, auf der Suche nach Verbindungen, die Sie vorher nicht hatten, und berühren neue Dinge (oder neue Kombinationen von Dingen), auf die Sie später fokussieren können, um sie zu stärken und wirklich zu verstehen, was sie bedeuten.

Deshalb ist es in der Regel gut, zunächst einige einführende Materialien zu lesen, um ein höheres Verständnis eines Bereichs zu erlangen, bevor Sie in die spezifischen Details eintauchen.

Es erklärt auch, warum Sie manchmal bei einem Problem wirklich hängenbleiben, die Antwort aber herausfinden, wenn Sie eine Kaffeepause (oder einen Spaziergang) machen. Sie könnten:

1. Wissen, wie man Problem A mit Werkzeug A behebt.
2. Wissen, wie man Problem B mit Werkzeug B behebt.
3. Nicht wissen, wie man Problem C behebt.

Angenommen, Sie konzentrieren sich eine Weile auf Problem C und sind frustriert, weil Sie nicht wissen, wie Sie es lösen können. Nach einem Spaziergang an der frischen Luft könnte es gut sein, dass Sie, während Ihr Geist wandert, plötzlich eine Verbindung zwischen Werkzeug A und Werkzeug B herstellen und erkennen, dass Sie sie zusammen verwenden können, um Problem C zu lösen! Es ist nicht immer so einfach, aber es ist auch erstaunlich, wie oft dies passiert. Dies unterstreicht auch die Bedeutung regelmäßiger Pausen, wenn Sie vor dem Computer lernen.

Es lohnt sich auch, die verschiedenen Arten von Lernmaterialien zu betrachten, die verfügbar sind, um zu sehen, welche für Sie am effektivsten sind.

Textartikel

Im Internet finden Sie viele geschriebene Artikel, die Ihnen Webdesign beibringen. Wie der größte Teil dieses Kurses zum Beispiel. Einige der Artikel werden Tutorials sein, um Ihnen eine bestimmte Technik oder ein wichtiges Konzept beizubringen (wie "lernen Sie, wie man einen Videoplayer erstellt" oder "Lernen Sie das CSS-Boxmodell"), und einige der Artikel werden Referenzmaterial sein, damit Sie Details nachschlagen können, die Sie vergessen haben (wie "Wie lautet die Syntax der CSS-background-Eigenschaft?").

MDN Web Docs ist sehr gut für beide Arten von Inhalten – der Bereich, in dem Sie sich derzeit befinden, ist großartig, um Techniken und Konzepte zu lernen, und wir haben auch mehrere riesige Referenzsektionen, in denen Sie jede Syntax, die Sie nicht erinnern können, nachschlagen können.

Es gibt auch mehrere andere großartige Ressourcen im Web, von denen wir einige unten erwähnen werden.

Videos

Es gibt auch eine Reihe von Websites, die Videolerninhalte bieten. YouTube ist eine offensichtliche, mit Kanälen wie Mozilla Layout Land, MozillaDeveloper und Google ChromeDevelopers, die viele nützliche Videos bereitstellen. Viele Menschen bevorzugen Textartikel für ein tiefergehendes Lernen und Referenzmaterial und Videos für schnelle Erklärungen von Konzepten und neuen Features, aber es liegt wirklich an Ihnen, woraus Sie am liebsten lernen. Es gibt hier keine richtige oder falsche Antwort.

Interaktive Code-Spielplätze

Vielleicht sind Sie die Art von Person, die minimalen Anweisungen bevorzugt und lieber direkt einsteigen und mit Code spielen möchte. Dies ist ebenfalls ein vernünftiger Ansatz, und einige Lernseiten neigen dazu, ihn zu bevorzugen. Codecademy zum Beispiel ist eine Lernseite, bei der die Tutorials hauptsächlich aus interaktiven Code-Editoren bestehen, in denen Sie direkt Code schreiben müssen, um zu sehen, ob das gewünschte Ergebnis erzielt wurde.

Viele MDN-Web-Dokumentationsseiten bieten ebenfalls interaktive Beispiele, in denen Sie den Code ändern und sehen können, wie sich das Live-Ergebnis ändert, und das Beispiel im MDN Playground erkunden. Und es ist auch nichts Falsches daran, Ihre eigenen Code-Beispiele auf Ihrem Computer oder in einem Online-Code-Editor wie JSFiddle, CodePen oder Glitch zu erstellen. Tatsächlich werden Sie im Verlauf dieses Kurses dazu aufgefordert, dies zu tun!

Es ist eine gute Idee, einen Plan zu erstellen, um Ihnen zu helfen, das zu erreichen, was Sie durch Ihr Lernen erreichen wollen.

Eine Zielaussage

Es klingt albern, aber warum nicht mit einem einzigen Satz beginnen, der sagt, was Sie erreichen wollen? Die folgenden haben unterschiedliche Umfänge, sind jedoch alle realistisch und erreichbar:

• Ich möchte in zwei Jahren ein professioneller Webentwickler werden.
• Ich möchte genug lernen, um eine Website für meinen örtlichen Amateur-Tennisverein zu erstellen.
• Ich möchte HTML und CSS lernen, damit ich meine Arbeitsrolle erweitern kann, um die Inhalte auf unserer Unternehmenswebsite zu aktualisieren.

Die folgenden sind nicht ganz so vernünftig:

• Ich möchte von einem völligen Anfänger zu einem Senior-Webentwickler in drei Monaten werden.
• Ich möchte mein eigenes Unternehmen gründen und ein soziales Netzwerk aufbauen, das in zwei Jahren Facebook übertrifft.

Was benötigen Sie, um dorthin zu gelangen?

Sobald Sie Ihr Ziel erarbeitet haben, ist es eine gute Idee, zu recherchieren, was Sie benötigen, um das Ziel zu erreichen. Zum Beispiel:

Materialien, die ich benötige:

• Ein Computer
• Internetzugang
• Stifte und Papier

Kenntnisse, die ich benötige:

• Wie man HTML, CSS, JavaScript und zugehörige Tools und Best Practices verwendet, um Websites und Webanwendungen zu erstellen (damit können wir Ihnen definitiv helfen!).
• Wie man eine Domain erhält, Hosting nutzt und sie verwendet, um eine Website oder Anwendung online zu stellen.
• Wie man ein kleines Unternehmen leitet.
• Wie man mein Unternehmen bewirbt und Kunden anzieht.

Wie viel Zeit und Geld kostet es?

Schätzen Sie die Zeit und die Kosten ein, um diese Dinge zu bekommen. Falls Sie arbeiten müssen, um das nötige Geld für die Materialien zu verdienen, dann muss die Zeit dafür mit eingeplant werden. Sobald Sie eine Zeitabschätzung haben, können Sie beginnen, einen Plan um Ihr Leben herum zu erstellen.

Wie viele Stunden pro Woche muss ich einplanen?

Sobald Sie wissen, was zu tun ist und wie lange es dauern wird, können Sie beginnen, einen Plan zu schreiben, um Ihr Ziel zu erreichen. Es kann so einfach sein wie:

"Es wird mich 500 Stunden kosten, um das Wissen zu erlangen, das ich benötige, und ich habe ein Jahr dafür. Wenn ich von 2 Wochen Urlaub ausgehe, muss ich 10 Stunden pro Woche daran arbeiten. Ich habe abends und am Wochenende Zeit, also werde ich meine Zeit darum herum planen."

Wie viel Zeit Sie darauf verwenden können, hängt natürlich von Ihren Umständen ab. Wenn Sie zur Schule gehen, haben Sie wahrscheinlich weitaus mehr freie Zeit als wenn Sie arbeiten und Kinder versorgen müssen. Es ist weiterhin möglich, Ihre Ziele zu erreichen, aber Sie müssen realistisch sein, wie schnell Sie dies tun können.

Wenn Sie einen Universitäts- oder Hochschulkurs zur Webentwicklung machen, ist der Großteil dieser Planung für Sie erledigt - Glückspilz!

Wenn Sie einen wöchentlichen Zeitplan erarbeitet haben, sollten Sie aufzeichnen, was Sie jede Woche schaffen – entweder in einer einfachen Tabelle oder sogar in einem Notizheft!

Außerdem könnte es eine gute Idee sein, einige Zwischenziele auszuarbeiten, um den Überblick über Ihre Fortschritte einfacher zu behalten. Zum Beispiel:

• HTML- und CSS-Grundlagen bis Sommer gelernt
• JavaScript-Grundlagen bis Dezember gelernt
• Beispiel-Webprojekt bis nächsten April erstellt
• usw.

Denken Sie immer daran, wie viel Fortschritt Sie machen und passen Sie Ihren Plan an, wenn es nötig ist.

Es ist schwer, motiviert zu bleiben, besonders wenn Sie versuchen, eine komplexe Fähigkeit wie Programmierung oder Webentwicklung zu lernen. Folgend einige Tipps, um motiviert zu bleiben und weiter zu arbeiten:

• Versuchen Sie, Ihre Arbeitsumgebung so produktiv wie möglich zu machen. Schaffen Sie sich einen bequemen Schreibtisch und Stuhl zum Arbeiten an, sorgen Sie dafür, dass Sie genügend Licht haben, um zu sehen, was Sie tun, und versuchen Sie, Dinge einzubeziehen, die Ihnen helfen, sich zu konzentrieren (z.B. sanfte Musik, Düfte, was auch immer Sie brauchen). Versuchen Sie nicht, in einem Raum mit Ablenkungen zu arbeiten – zum Beispiel einem laufenden Fernseher, während Ihre Freunde Fußball schauen! Lassen Sie auch Ihr Handy aus dem Raum – die meisten Menschen werden häufig von ihrem Handy abgelenkt, daher sollten Sie es woanders lassen.
• Machen Sie regelmäßig Pausen. Es ist nicht gut für Ihre Motivation, stundenlang ohne Pause zu arbeiten, besonders wenn Sie es schwer finden oder bei einem Problem festhängen. Das führt nur zu Frustration. Es ist oft besser, eine Pause zu machen, sich eine Weile zu bewegen, dann mit einem Getränk zu entspannen, bevor Sie an die Arbeit zurückkehren. Und wie wir bereits gesagt haben, kann das diffuse Lernen, das Sie in dieser Zeit tun, oft helfen, eine Lösung für das Problem zu finden, dem Sie gegenüberstehen. Es ist auch körperlich schlecht, zu lange ohne Pause zu arbeiten; zu lange auf einen Monitor zu schauen, kann Ihren Augen schaden, und zu langes Stillsitzen kann schlecht für Ihren Rücken oder Ihre Beine sein. Wir würden empfehlen, alle 60 bis 90 Minuten eine Pause von 15 Minuten einzulegen.
• Essen, Bewegung und Schlaf. Ernähren Sie sich gesund, treiben Sie regelmäßig Sport und sorgen Sie dafür, dass Sie genug Schlaf bekommen. Das klingt offensichtlich, aber es ist leicht zu vergessen, wenn man wirklich ins Programmieren vertieft ist. Planen Sie diese wesentlichen Dinge in Ihren Zeitplan ein und sorgen Sie dafür, dass Sie nicht mehr Lernzeit anstatt dieser Dinge einplanen.
• Geben Sie sich selbst Belohnungen. Es stimmt, dass nur Arbeit und kein Spiel Jack zu einem langweiligen Jungen machen. Sie sollten versuchen, lustige Dinge zu tun nach jeder Lerneinheit zu planen, die Sie nur nach Abschluss des Lernens tun können. Wenn Sie wirklich gerne spielen, gibt es etwas sehr Motivierendes daran, zu sagen "keine Spiele heute Abend, es sei denn, ich schaffe meine 5 Stunden Lernen". Jetzt brauchen Sie nur noch Willenskraft. Viel Glück!
• Gemeinsam lernen und vorführen. Dies wird nicht für alle möglich sein, aber wenn überhaupt möglich, versuchen Sie, zusammen mit anderen zu lernen. Wiederum ist das einfacher, wenn Sie einen Hochschulkurs zur Webentwicklung machen, aber vielleicht können Sie einen Freund überreden, mit Ihnen zusammen zu lernen, oder eine lokale Meetup- oder Skill-Sharing-Gruppe finden? Es ist wirklich nützlich und motivierend, jemanden zu haben, mit dem man Ideen diskutieren und um Hilfe bitten kann, und Sie sollten auch Zeit einplanen, um Ihre Arbeit zu demonstrieren. Diese Ausrufe der Anerkennung werden Sie anspornen.

Es gibt keinen effektiven Weg, um alle Probleme (und alle Dinge) im Zusammenhang mit Webdesign und Entwicklung zu lösen, aber es gibt einige allgemeine Ratschläge, die Ihnen in den meisten Fällen nützlich sein werden.

Dinge in Teile zerlegen

Wenn Sie versuchen, etwas Spezifisches zu implementieren und es scheint wirklich schwierig, dies zu verstehen, dann sollten Sie versuchen, es in mehrere kleinere Probleme oder Teile aufzuteilen.

Zum Beispiel, wenn Sie vor der Aufgabe stehen, "eine einfache zweispaltige Website zu erstellen", könnten Sie sie wie folgt aufteilen:

• Erstellen Sie die HTML-Struktur
• Arbeiten Sie die grundlegende Typografie der Website aus
• Arbeiten Sie ein grundlegendes Farbschema aus
• Implementieren Sie ein grobes Layout – Kopfzeile, horizontales Navigationsmenü, Hauptinhaltbereich mit Haupt- und Seitenkolumnen und Fußzeile
• Implementieren Sie ein horizontales Navigationsmenü
• usw.

Dann könnten Sie es weiter aufteilen. Beispielsweise könnte "Implementieren eines horizontalen Navigationsmenüs" so ausgearbeitet werden:

• Erstellen Sie eine Liste von Menüpunkten, die horizontal in einer Linie sitzen.
• Entfernen Sie unnötige Standardeinstellungen, wie Listenabstand und Aufzählungszeichen.
• Stylen Sie die Hover/Focus/Aktiv-Zustände der Menüpunkte angemessen.
• Machen Sie die Menüpunkte gleichmäßig entlang der Linie verteilt.
• Sorgen Sie für genügend vertikalen Abstand der Menüpunkte.
• Stellen Sie sicher, dass der Text in jedem Menüpunkt zentriert ist
• usw.

Jedes dieser Probleme erscheint nicht annähernd so schwierig wie das eine große Problem, das Sie ursprünglich hatten. Jetzt müssen Sie nur noch alle lösen!

Lernen und Muster erkennen

Wie wir bereits gesagt haben, geht es bei Webdesign/Programmierung meist um Problemlösung und Muster. Sobald Sie aufgeschrieben haben, was Sie tun müssen, um ein spezifisches Problem zu lösen, können Sie beginnen herauszufinden, welche technologischen Funktionen Sie verwenden können, um es zu lösen. Zum Beispiel haben professionelle Webentwickler viele horizontale Navigationsmenüs erstellt, so dass sie sofort an eine Lösung wie diese denken werden:

Ein Navigationsmenü wird normalerweise aus einer Liste von Links erstellt, etwa so:

<ul>
  <li><a href="">First menu item</a></li>
  <li><a href="">Second menu item</a></li>
  <li><a href="">Third menu item</a></li>
  <li><a href="">etc.</a></li>
</ul>

Um alle Elemente auf einer Linie horizontal anzuordnen, ist der einfachste moderne Weg, Flexbox zu verwenden:

ul {
  display: flex;
}

Um unnötige Abstände und Aufzählungszeichen zu entfernen, können wir dies tun:

ul {
  list-style-type: none;
  padding: 0;
}

usw.

Wenn Sie ein völliger Anfänger in der Webentwicklung sind, müssen Sie einige Studien betreiben, im Web suchen und Lösungen für solche Probleme finden. Wenn Sie ein professioneller Webentwickler sind, erinnern Sie sich wahrscheinlich an das letzte Mal, als Sie ein ähnliches Problem gelöst haben, und müssen nur noch einige Teile der Syntax nachschlagen, die Sie seitdem vergessen haben.

Wenn Sie Lösungen für solche Probleme finden, lohnt es sich, Notizen zu dem zu machen, was Sie getan haben, und einige minimale Codebeispiele in einem Verzeichnis aufzubewahren, damit Sie auf frühere Arbeiten zurückblicken können.

Zusätzlich verfügt das Web über Entwicklertools, die Ihnen erlauben, den Code zu betrachten, mit dem jede beliebige Website im Web erstellt wurde. Wenn Sie keine Lösung zur Hand haben, ist eine gute Forschungsmethode, Websites mit ähnlichen Funktionen in freier Wildbahn zu finden und herauszufinden, wie sie es getan haben.

Je mehr Sie das Lösen eines Problems üben, desto stärker sind die neuronalen Bahnen Ihres Gehirns in diesem Bereich, und desto einfacher wird es, sich an die Details und die Logik dieses bestimmten Problems zu erinnern.

Bleiben Sie am Code dran und üben Sie weiter. Wenn Ihnen die Probleme ausgehen, suchen Sie online nach Tests, machen Sie weitere Kurse oder fragen Sie Ihre Freunde und Familie (oder lokale Schule oder Kirche), ob es etwas gibt, das Sie für sie bauen möchten.

Webentwicklung erfordert, dass Sie eine komplexe Reihe von Fähigkeiten erlernen – Sie werden manchmal feststecken und Hilfe benötigen. Wie wir bereits gesagt haben, benötigen selbst professionelle Entwickler regelmäßig Hilfe bei der Lösung von Problemen.

Es gibt verschiedene Möglichkeiten, Hilfe zu bekommen, und im Folgenden finden Sie einige Tipps, wie Sie dies effektiver tun können.

Eine wichtige Fähigkeit, die Sie lernen sollten, ist die Kunst der effektiven Websuche – welche Suchbegriffe müssen Sie in Ihrer bevorzugten Suchmaschine verwenden, um die Artikel zu finden, die Sie benötigen?

Es ist oft ziemlich offensichtlich, wonach Sie suchen sollten. Beispielsweise:

• Wenn Sie mehr über responsives Webdesign erfahren möchten, könnten Sie nach "responsives Webdesign" suchen.
• Wenn Sie mehr über eine bestimmte technologische Funktion erfahren möchten, wie das HTML-
• Wenn Sie nach spezifischeren Informationen suchen, können Sie andere Schlüsselwörter als Modifikatoren hinzufügen, zum Beispiel "<video>-Element-Autoplay-Attribut" oder "Date.setTime-Parameter".

Wenn Sie nach etwas suchen, das weniger offensichtliche Schlagworte hat, müssen Sie überlegen, was am ehesten das liefert, was Sie wollen.

• Code ausführen, nachdem mehrere Versprechen erfüllt wurden
• Einen Videostream von einer Webcam im Browser abspielen
• Ein lineares Gradienten im Hintergrund Ihres Elements erstellen

Fehlermeldungen

Wenn Sie ein Problem mit einem Code haben und eine bestimmte Fehlermeldung erscheint, ist es oft eine gute Idee, die Fehlermeldung einfach in Ihre Suchmaschine zu kopieren und als Suchbegriff zu verwenden. Wenn andere Leute dasselbe Problem hatten, gibt es wahrscheinlich einige Artikel oder Blogposts dazu an Orten wie MDN oder Stack Overflow.

Browser-Tests

Es ist oft eine gute Idee zu sehen, ob Ihr Problem alle Browser betrifft oder ob es nur in einem oder einer kleinen Anzahl von Browsern auftritt. Wenn es nur einen Browser betrifft, zum Beispiel, können Sie diesen Browser verwenden, um die Suche einzugrenzen. Beispielsuchen könnten wie folgt aussehen:

• Firefox scheint die Beetlejuice-API nicht zu unterstützen.

Die Seite, auf der Sie sich gerade befinden, bietet Ihnen einen Reichtum an Informationen – sowohl Referenzmaterial zum Nachschlagen von Code-Syntax als auch Leitfäden/Tutorials zum Erlernen von Techniken.

Wir haben die meisten Antworten auf die Fragen, die Sie zu den Grundlagen der Webentwicklung haben werden, in diesem Teil von MDN bereitgestellt. Wenn Sie feststecken, ist es gut, die zugehörigen Artikel erneut zu lesen, um zu sehen, ob Sie etwas übersehen haben.

Wenn Sie nicht sicher sind, welchen Artikel Sie lesen sollen, dann versuchen Sie, bei MDN nach einigen verwandten Schlüsselwörtern zu suchen (wie oben angegeben), oder machen Sie eine allgemeine Websuche. Um auf MDN zu suchen, können Sie entweder die integrierte Suchfunktion der Website verwenden oder noch besser, verwenden Sie Ihre bevorzugte Suchmaschine und stellen Sie "mdn" vor den Suchbegriff. Zum Beispiel "mdn responsives Webdesign" oder "mdn background-color".

Wir erwähnten bereits Stack Overflow, aber es gibt noch andere Online-Ressourcen, die helfen können.

Es ist gut, eine Gemeinschaft zu finden, zu der Sie gehören können, und Sie erhalten viel Respekt, wenn Sie versuchen, anderen zu helfen, ihre Fragen zu beantworten, genauso wie Sie Ihre eigenen stellen. Weitere gute Beispiele sind:

• MDN Community-Kanäle
• Sitepoint Foren
• webdeveloper.com Foren

Es macht aber auch Sinn, nützliche Gruppen in sozialen Netzwerken wie Twitter oder Facebook zu finden. Suchen Sie nach Gruppen, die Webentwicklungsthemen diskutieren, die Sie interessieren, und treten Sie ihnen bei. Folgen Sie Leuten auf Twitter, von denen Sie wissen, dass sie einflussreich sind, klug sind oder einfach oft nützliche Tipps teilen.

Schließlich sollten Sie versuchen, an physischen Treffen teilzunehmen, um andere gleichgesinnte Menschen zu treffen, besonders solche, die sich an Anfänger richten. meetup.com ist ein guter Ort, um lokale physische Treffen zu finden, und Sie könnten auch Ihre lokale Presse oder Veranstaltungsempfehlungsseiten versuchen.

Sie könnten auch versuchen, an vollwertigen Webkonferenzen teilzunehmen. Obwohl diese teuer sein können, könnten Sie versuchen, bei ihnen zu helfen, und viele Konferenzen bieten ermäßigte Tickets an, zum Beispiel Studenten- oder Diversitätstickets.

• Coursera: Lernen zu lernen
• freeCodeCamp
• Codecademy