Lernen und Hilfe erhalten

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

Es ist interessant zu überlegen, dass es zwei Hauptmethoden gibt, wie Ihr Gehirn Dinge lernt – fokussiertes und diffuses Lernen:

• Fokussiertes Lernen ist das, was Sie vielleicht traditionell mit akademischen Fächern assoziieren. Sie konzentrieren sich tief auf ein niedrigstufiges Thema und das Lösen der spezifischen Probleme, die es mit sich bringt. Sie sind auf einen engen Bereich fokussiert.
• Diffuses Lernen hat mehr mit hochgradigem Denken über ein breiteres Gebiet zu tun. Sie lassen Ihren Geist weiter schweifen und scheinbar zufällige Verbindungen zwischen verschiedenen Dingen herstellen. Dies ist mehr die Art des Denkens, die Sie während einer Dusche oder einer Kaffeepause tun.

Aus den Studien, die Neurowissenschaftler über Gehirnaktivität durchgeführt haben, haben wir herausgefunden, dass Sie nicht wirklich in beiden Weisen des Lernens – oder Denkens – gleichzeitig engagiert sein können. Welches sollten Sie also wählen? Sie könnten denken, dass fokussiertes Lernen besser zum Studieren ist, aber in der Realität sind beide sehr wichtig.

Fokussiertes Denken ist großartig, um sich intensiv auf spezifische Themen zu konzentrieren, tief gehende Problemlösungen zu finden und Ihre Beherrschung der erforderlichen Techniken zu verbessern – die neuronalen Bahnen in Ihrem Gehirn zu stärken, wo diese Informationen gespeichert sind. Es ist jedoch nicht sehr gut, das "große Ganze" zu verstehen und neue neuronale Bahnen freizuschalten, wenn Sie versuchen, neue Themen zu verstehen oder neue Probleme zu lösen, die Sie zuvor noch nicht hatten.

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

Deshalb ist es normalerweise gut, zuerst einige einleitende Materialien zu lesen, um ein grundlegendes Verständnis eines Bereichs zu erlangen, bevor Sie sich in die spezifischen Details vertiefen.

Deshalb können Sie manchmal auf ein Problem wirklich feststecken, aber dann die Lösung finden, wenn Sie eine Kaffeepause machen (oder einen Spaziergang). Sie könnten:

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

Nehmen wir an, Sie konzentrieren sich eine Weile auf Problem C und werden frustriert, weil Sie nicht wissen, wie Sie es lösen sollen. Aber dann, nachdem Sie einen Spaziergang gemacht haben, um frische Luft zu schnappen, stellen Sie möglicherweise fest, dass, während Ihr Geist wandert, Sie 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 das passiert. Dies zeigt auch die Bedeutung regelmäßiger Pausen auf, wenn Sie vor dem Computer studieren.

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

Textuelle Artikel

Sie finden viele geschriebene Artikel im Internet, die Ihnen das Webdesign beibringen. Zum Beispiel die meisten Teile dieses Kurses. Einige der Artikel werden Tutorials sein, um Ihnen eine bestimmte Technik oder ein wichtiges Konzept beizubringen (wie "Lernen, wie man einen Videoplayer erstellt" oder "Lernen des CSS-Box-Modells"), und einige der Artikel werden Referenzmaterial sein, um Ihnen das Nachschlagen von Details zu ermöglichen, die Sie möglicherweise vergessen haben (wie "Was ist die Syntax der CSS-Eigenschaft background?").

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

Es gibt auch noch einige andere großartige Ressourcen im Internet, von denen wir einige unten erwähnen.

Videos

Es gibt auch eine Reihe von Seiten, die Video-Lerninhalte anbieten. YouTube ist ein offensichtliches Beispiel mit Kanälen wie Mozilla Layout Land, MozillaDeveloper und Google ChromeDevelopers, die viele nützliche Videos bereitstellen. Viele Menschen bevorzugen textuelle Artikel für tiefergehendes Lernen und Referenzmaterial und Videos für schnelle Erklärungen von Konzepten und neuen Funktionen, aber letztendlich ist es Ihnen überlassen, welche Methode Sie bevorzugen. Es gibt hier keine richtige oder falsche Antwort.

Interaktive Code-Spielplätze

Vielleicht sind Sie der Typ Mensch, der minimale Anleitungen bevorzugt und lieber direkt loslegt und mit Code spielt. Dies ist auch ein vernünftiger Ansatz, und einige Lernseiten tendieren dazu, dies zu bevorzugen. Codecademy zum Beispiel ist eine Lernseite, auf 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 erreicht wurde.

Viele MDN-Webdocs-Referenzseiten bieten ebenfalls interaktive Beispiele, bei denen Sie den Code ändern können, um zu sehen, 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 zu erstellen oder in einem Online-Code-Editor wie JSFiddle, CodePen oder Glitch. Tatsächlich werden Sie aufgefordert, dies im Rahmen dieses Kurses zu tun, wenn Sie lernen!

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

Ein Zielstatement

Es klingt albern, aber warum nicht mit einem einzigen Satz beginnen, der aussagt, was Sie erreichen möchten? Die folgenden Ziele haben unterschiedlichen Umfang, sind aber alle realistisch und erreichbar:

• Ich möchte in zwei Jahren ein professioneller Webentwickler werden.
• Ich möchte genug lernen, um eine Webseite für meinen lokalen Amateur-Tennisclub zu bauen.
• Ich möchte HTML und CSS lernen, um meine berufliche Rolle zu erweitern und die Inhalte auf unserer Firmenwebseite zu aktualisieren.

Die folgenden sind nicht ganz so vernünftig:

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

Was brauchen Sie, um dorthin zu gelangen?

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

Materialien, die ich brauche:

• Einen Computer
• Internetzugang
• Stifte und Papier

Wissen, das ich brauche:

• Wie man HTML, CSS, JavaScript und die zugehörigen Tools und bewährte Methoden verwendet, um Webseiten und Webanwendungen zu erstellen (wir können Ihnen auf jeden Fall dabei helfen!).
• Wie man eine Domain, Hosting erwirbt und sie nutzt, um eine Webseite oder Anwendung online zu stellen.
• Wie man ein kleines Unternehmen führt.
• Wie ich mein Unternehmen bewerbe und Kunden gewinne.

Wie viel Zeit und Geld wird es kosten?

Schätzen Sie die Zeit und die Kosten, um diese Dinge zu bekommen. Wenn Sie arbeiten müssen, um Geld zu verdienen, um die erforderlichen Materialien zu kaufen, dann muss die Zeit dafür berücksichtigt werden. Sobald Sie eine Zeitschätzung haben, können Sie beginnen, einen Plan um Ihr Leben herum zu erstellen.

Wie viele Stunden pro Woche muss ich widmen?

Sobald Sie wissen, was Sie tun müssen und wie lange es Ihrer Meinung nach dauern wird, können Sie beginnen, einen Plan zu erstellen, um Ihr Ziel zu erreichen. Es kann so einfach sein wie:

"Es wird 500 Stunden dauern, um das zu lernen, was ich wissen muss, und ich habe ein Jahr Zeit, um es zu tun. Wenn ich zwei Wochen Urlaub annehme, werde ich 10 Stunden pro Woche daran arbeiten müssen. Ich habe abends und an Wochenenden frei, also plane ich meine Zeit darum."

Wie viel Zeit Sie darauf verwenden können, hängt natürlich von Ihren Umständen ab. Wenn Sie in der Schule sind, haben Sie viel mehr Freizeit als wenn Sie einen Job haben und Kinder versorgen müssen. Es ist immer noch möglich, Ihre Ziele zu erreichen, aber Sie müssen realistisch sein, wie schnell Sie das tun können.

Wenn Sie einen Universitäts- oder Hochschulkurs zur Webentwicklung machen, dann ist das meiste dieser Planung für Sie erledigt – Glück gehabt!

Wenn Sie einen wöchentlichen Zeitplan ausgearbeitet haben, sollten Sie aufzeichnen, was Sie jede Woche erreichen konnten, in einer einfachen Tabelle oder sogar in einem Notizbuch!

Es könnte auch eine gute Idee sein, einige Teilziele festzulegen, um es Ihnen zu erleichtern, den Überblick zu behalten. Beispielsweise:

• HTML- und CSS-Grundlagen bis zum Sommer gelernt
• JavaScript-Grundlagen bis Dezember gelernt
• Beispielprojekt für eine Webseite bis nächsten April erstellt
• usw.

Denken Sie ständig darüber nach, wie viel Fortschritt Sie machen, und passen Sie Ihren Plan bei Bedarf an.

Es ist schwer, motiviert zu bleiben, besonders wenn Sie versuchen, eine komplexe Fähigkeit wie Programmieren oder Webentwicklung zu lernen. Was folgt, sind einige Tipps, um motiviert zu bleiben und weiterzuarbeiten:

• Versuchen Sie, Ihre Arbeitsumgebung so produktiv wie möglich zu gestalten. Besorgen Sie sich einen bequemen Schreibtisch und Stuhl zum Arbeiten, stellen Sie sicher, dass Sie genug 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). Arbeiten Sie nicht in einem Raum mit Ablenkungen – zum Beispiel einem Fernseher, während Ihre Freunde Fußball schauen! Lassen Sie auch Ihr Mobiltelefon außerhalb des Raums – die meisten Menschen werden von ihrem Telefon stark abgelenkt, also sollten Sie es woanders lassen.
• Gönnen Sie sich regelmäßige Pausen. Es ist nicht gut für Ihre Motivation, stundenlang ohne Pause zu arbeiten, besonders wenn Sie es schwer finden oder ein Problem nicht lösen können. Das führt nur zu Frustration. Es ist oft besser, eine Pause zu machen, sich ein wenig zu bewegen, dann mit einem Getränk zu entspannen, bevor Sie wieder an die Arbeit gehen. Und wie wir bereits gesagt haben, kann das diffuse Lernen, das Sie in dieser Zeit machen, oft helfen, eine Lösung für das Problem zu finden, mit dem Sie konfrontiert sind. Es ist auch physisch schlecht, zu lange ohne Pause zu arbeiten; zu lange auf einen Monitor zu schauen, kann Ihre Augen verletzen, und zu langes Sitzen kann schlecht für Ihren Rücken oder Ihre Beine sein. Wir empfehlen, alle ein bis anderthalb Stunden eine 15-minütige Pause zu machen.
• Essen, Bewegung und Schlaf. Ernähren Sie sich gesund, treiben Sie regelmäßig Sport und achten Sie darauf, dass Sie ausreichend schlafen. Das klingt offensichtlich, aber es ist leicht zu vergessen, wenn Sie sich wirklich ins Codieren vertiefen. Planen Sie diese wesentlichen Bestandteile in Ihren Zeitplan ein und achten Sie darauf, dass Sie keine zusätzliche Lernzeit anstelle dieser Dinge einplanen.
• Belohnen Sie sich selbst. Es stimmt, all Arbeit und kein Spiel macht Jack zu einem langweiligen Jungen. Sie sollten versuchen, nach jeder Lerneinheit lustige Dinge zu planen, die Sie nur dann tun, wenn das Lernen vorbei und abgeschlossen ist. Wenn Sie gerne spielen, ist es ziemlich motivierend zu sagen: "Kein Spielen heute Abend, es sei denn, ich schaffe meine 5 Stunden Lernen". Jetzt brauchen Sie nur noch Willenskraft. Viel Glück!
• Gemeinsames Lernen und Vorführung. Dies wird nicht für jeden eine Option sein, aber wenn möglich, versuchen Sie, zusammen mit anderen zu lernen. Dies ist leichter, wenn Sie einen Hochschulkurs zur Webentwicklung machen, aber vielleicht können Sie einen Freund überzeugen, mit Ihnen zu lernen, oder eine lokale Meetup-Gruppe oder eine Skill-Sharing-Gruppe finden? Es ist wirklich nützlich und motivierend, jemanden zu haben, mit dem man Ideen besprechen und um Hilfe bitten kann, und Sie sollten sich auch die Zeit nehmen, Ihre Arbeit zu präsentieren. Diese Rufe der Anerkennung werden Sie anspornen.

Es gibt keine effektive Methode, um alle Probleme (und alle Dinge) zu lösen, die mit Webdesign und -entwicklung verbunden sind, aber es gibt einige allgemeine Ratschläge, die Ihnen in den meisten Fällen gut dienen werden.

Dinge in Stücke zerlegen

Zum Start, wenn Sie versuchen, etwas Spezifisches zu implementieren und es Ihnen schwerfällt, die Zusammenhänge zu verstehen, sollten Sie versuchen, es in mehrere kleinere Probleme oder Stücke zu zerlegen.

Zum Beispiel, wenn Sie vor der Aufgabe stehen, "Eine einfache zweispaltige Website zu erstellen", könnten Sie es folgendermaßen zerlegen:

• Die HTML-Struktur erstellen
• Grundlegende Typografie der Website erarbeiten
• Ein grundlegendes Farbschema erarbeiten
• Ein grobes Layout umsetzen – Header, horizontales Navigationsmenü, Hauptinhalt mit Haupt- und Nebenspalten und Footer
• Ein horizontales Navigationsmenü umsetzen
• usw.

Dann könnten Sie es weiter zerlegen. Zum Beispiel könnte "Horizontales Navigationsmenü umsetzen" ausgearbeitet werden als:

• Eine Liste von Menüelementen erstellen, die horizontal in einer Linie angeordnet sind.
• Unnötige Standardwerte entfernen, wie z.B. Listenabstände und Aufzählungszeichen.
• Hover-/Fokus-/Aktivzustände der Menüelemente entsprechend stylen.
• Stellen Sie sicher, dass die Menüelemente gleichmäßig entlang der Linie verteilt sind.
• Den Menüelementen genug vertikalen Abstand geben.
• Stellen Sie sicher, dass der Text innerhalb jedes Menüelements zentriert ist.
• usw.

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

Muster erkennen und lernen

Wie wir zuvor gesagt haben, geht es beim Webdesign/Programmieren hauptsächlich um Problemlösung und Muster. Sobald Sie aufgeschrieben haben, was Sie tun müssen, um ein bestimmtes Problem zu lösen, können Sie beginnen herauszufinden, welche technischen Möglichkeiten Sie nutzen könnten, um es zu lösen. Zum Beispiel haben professionelle Webentwickler viele horizontale Navigationsmenüs erstellt, sodass sie sofort anfangen, über eine Lösung nachzudenken wie diese:

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 horizontal in einer Linie anzuordnen, ist die einfachste moderne Methode, Flexbox zu verwenden:

ul {
  display: flex;
}

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

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

usw.

Wenn Sie ein absoluter Anfänger in der Webentwicklung sind, müssen Sie ein wenig studieren und im Internet nach Lösungen für solche Probleme suchen. Wenn Sie ein professioneller Webentwickler sind, erinnern Sie sich vielleicht an das letzte Mal, als Sie ein ähnliches Problem gelöst haben, und müssen sich nur an einige Teile der Syntax erinnern, die Sie seitdem vergessen haben.

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

Darüber hinaus verfügt das Internet über Entwicklertools, mit denen Sie den Code ansehen können, der zum Erstellen jeder Website im Internet verwendet wurde. Wenn Sie keine Lösung zur Hand haben, ist eine gute Forschungsmethode, Websites mit ähnlichen Merkmalen in der Wildnis zu finden und herauszufinden, wie sie es gemacht haben.

Je mehr Sie ein Problem lösen üben, desto stärker sind die neuronalen Bahnen in Ihrem Gehirn in diesem Bereich, und desto einfacher wird es, sich an die Details und die Logik dieses speziellen Problems zu erinnern.

Spielen Sie weiter mit Code herum und machen Sie mehr Übungen. Wenn Ihnen die Probleme ausgehen, die es zu lösen gilt, suchen Sie nach weiteren Tests online, absolvieren Sie weitere Kurse oder fragen Sie Ihre Freunde und Familie (oder Ihre lokale Schule oder Kirche), ob es irgendetwas gibt, das sie für sie bauen lassen möchten.

Webentwicklung erfordert das Erlernen eines komplexen Satzes von Fähigkeiten — Sie werden manchmal feststecken und Hilfe benötigen. Wie wir bereits gesagt haben, benötigen selbst professionelle Entwickler regelmäßig Hilfe bei der Bearbeitung von Problemen.

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

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

Es ist oft ziemlich offensichtlich, wonach man suchen muss. Zum Beispiel:

• Wenn Sie mehr über responsives Webdesign erfahren möchten, könnten Sie nach "responsives Webdesign" suchen.
• Wenn Sie mehr über ein bestimmtes technisches Merkmal herausfinden möchten, wie das HTML-<video>-Element, die CSS-Eigenschaften background-color oder opacity oder die JavaScript-Methode Date.setTime(), sollten Sie einfach nach dem Namen des Merkmals suchen.
• 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 etwas suchen, das weniger offensichtliche Schlagwörter hat, müssen Sie überlegen, was am wahrscheinlichsten das liefern wird, was Sie wollen.

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

Fehlermeldungen

Wenn Sie ein Problem mit einem Code haben und eine bestimmte Fehlermeldung angezeigt wird, ist es oft eine gute Idee, einfach die Fehlermeldung in Ihre Suchmaschine einzugeben und sie als Suchbegriff zu verwenden. Wenn andere Leute dasselbe Problem hatten, gibt es wahrscheinlich Artikel oder Blog-Beiträge darüber, zum Beispiel auf 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 wenigen Browsern auftritt. Wenn es nur einen Browser betrifft, können Sie mit diesem Browser Ihre Suche eingrenzen. Beispielhafte Suchen könnten folgendermaßen aussehen:

• <video>-Wiedergabe funktioniert nicht im iOS-Browser.
• Firefox unterstützt offenbar die Beetlejuice-API nicht.

Die Seite, auf der Sie sich bereits befinden, hat eine Fülle von Informationen – sowohl Referenzmaterial zum Nachschlagen von Codesyntax 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, in diesem Teil von MDN bereitgestellt. Wenn Sie feststecken, ist es gut, die zugehörigen Artikel noch einmal zu lesen, um zu sehen, ob Sie etwas übersehen haben.

Wenn Sie nicht sicher sind, welchen Artikel Sie lesen sollen, versuchen Sie, auf MDN nach einigen verwandten Schlüsselwörtern zu suchen (wie oben angegeben) oder versuchen Sie eine allgemeine Websuche. Um auf MDN zu suchen, können Sie entweder die in das Site eingebaute Suchfunktion verwenden oder noch besser, verwenden Sie Ihre bevorzugte Suchmaschine und geben "mdn" vor dem Suchbegriff ein. Zum Beispiel "mdn responsive web design" oder "mdn background-color".

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

Es ist gut, eine Gemeinschaft zu finden, der Sie angehören, und Sie erhalten viel Respekt, wenn Sie versuchen, anderen bei der Beantwortung ihrer Fragen zu helfen, sowie Ihre eigenen zu 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 über Webentwicklungsthemen, die Sie interessieren, diskutieren, und treten Sie bei. Folgen Sie Personen auf Twitter, von denen Sie wissen, dass sie einflussreich, klug sind oder einfach nur viele nützliche Tipps teilen.

Letztendlich sollten Sie versuchen, an einigen physischen Treffen teilzunehmen, um andere gleichgesinnte Personen zu treffen, insbesondere 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/Was ist los-Seiten ausprobieren.

Sie könnten auch versuchen, vollwertige Webkonferenzen zu besuchen. Während diese teuer sein können, könnten Sie versuchen, sich als Freiwilliger zu melden, und viele Konferenzen bieten ermäßigte Tickets an, zum Beispiel Studenten- oder Diversitätstickets.

• Coursera: Lernen zu lernen
• freeCodeCamp
• Codecademy