Wie ich in fünf Tagen Front-End-Webentwicklung kostenlos lernte

Letzte Woche habe ich mich der Herausforderung gestellt, in nur fünf Tagen ein mittlerer Front-End-Entwickler zu werden. So habe ich es gemacht.

Dies ist nicht mein erstes Lernexperiment. Vor zehn Jahren forderte ich mich heraus, in 17 Tagen Französisch zu lernen, und es gelang mir. Seitdem habe ich ganze Studiengänge online gestellt (sowie ein paar Graduiertenkollegs offline), mehr Sprachen gelernt und mehrere Unternehmen gegründet.

Ich hätte dies nicht tun können, ohne effektive Lernstrategien zu entwickeln, von denen viele dem weit verbreiteten Modell widersprechen, wie man etwas Neues lernt. Einige von ihnen haben sogar Diskussionen an den Universitäten der Ivy League ausgelöst.

Obwohl ich viel Erfahrung mit technischen Teams hatte, beginne ich nur mit technischen Konzepten auf hohem Niveau und praktisch ohne praktisches Wissen.

Sprachenlernen als Analogon

Ich lernte Französisch für fließende Konversationen mit einem Programm, das viele Hacks und schrullige Techniken kombiniert. Könnte ich analoge Techniken verwenden, um die Front-End-Entwicklung zu lernen? Soweit scheint es mir möglich zu sein.

Meine Sprachtechniken umfassten:

  • Audio / visuelle Anleitung - Hören von Michel Thomas 'MP3s
  • Immersion - Aufenthalt in einem französischsprachigen Land
  • Benchmarking - Lesen Sie vertraute Kinderbücher auf Französisch und hören Sie französische Musik
  • Vertrauensbildende Hacks - Aufsätze über mich selbst schreiben und Füllwörter lernen
  • Auswendiglernen - Verbtabellen ausschreiben

Jedes hat ein Analogon in der Front-End-Codierung:

  • Videos mit Tutorials auf Youtube ansehen
  • Eintauchen in einen Entwicklungssprint
  • Benchmarking meiner Lieblingsseiten mit der Entwicklerkonsole
  • Sprechen Sie mit anderen Entwicklern, um Feedback und Tipps zum Arbeitsablauf zu erhalten
  • Spickzettel für das Auswendiglernen von CSS-Elementen

Dies war die Blaupause für meine Lernstrategien.

Der bisherige Fortschritt

Ich bin 48 Stunden in und hier bin ich:

  1. Ich habe mich im Sprint eines meiner Nebenprojekte den Front-End-Geschichten verschrieben. Ich erstelle gerade zwei Seiten: eine Zielseite und eine detailliertere Produktseite.
  2. Gleich zu Beginn startete ich ein Basisprojekt (nur zwei Textdateien mit HTML und CSS) und verbrachte ungefähr eine Stunde damit, HTML für die Zielseite zu durchsuchen. Wie sich herausstellt, werde ich das Ganze rausschmeißen und von vorne anfangen, aber alle Videos, die ich mir angesehen habe, werden in einen Kontext gebracht.
  3. Ich war bei drei Mittag- / Abendessen mit erfahrenen Programmierern, wo wir über den Workflow gesprochen haben.
  4. Der Löwenanteil meiner bisherigen Zeit war Tutorial-Videos und Code-Exemplaren auf Youtube gewidmet. Ehrlich gesagt, es war eine der intensivsten Lernerfahrungen meines Lebens, die ich mit Ihnen im Detail teilen werde. Wenn Sie also verrückt genug sind, in meine Fußstapfen zu treten, können Sie dieselben Materialien verwenden.

Youtube Videos

Obwohl ich nicht unbedingt vorhatte, so viel Zeit mit Lernvideos zu verbringen - oder so weit und tief mit ihnen zu gehen - bin ich unglaublich froh, dass ich das getan habe. Ich war schon früh mit vielen Konzepten und Technologien vertraut und kann dies nur empfehlen.

Es steht in krassem Gegensatz zu dem, was die meisten Leute empfehlen, nämlich das Nötigste zu lernen und sich darauf einzulassen. Wenn Sie langsam lernen, ist das vielleicht das Beste, aber wenn Sie Konzepte schnell erfassen, ist es für mich besser, tief in die Sache einzusteigen schneller. Außerdem waren es nur zwei Tage von Youtube. . . was im Kontext nicht viel ist.

Um so viel Material in so kurzer Zeit zu verbrauchen, musste ich mir alle Videos mit doppelter Geschwindigkeit ansehen. Ich bin als Podcast- / Hörbuch-Fan sehr daran gewöhnt und empfehle, es in Ihrem Lernprogramm zu verwenden, da es Ihre Produktivität verdoppelt. Sie können mit 1,25x oder 1,5x beginnen, wenn 2x zu schnell ist.

Außerdem schreibe ich zwei oder drei Zeilen Notizen zu den wichtigsten Konzepten, die ich aus jedem Video lerne. Ich bezweifle, dass ich etwas von dem, was ich geschrieben habe, wieder lese, aber das ist in Ordnung, weil ich es hauptsächlich aus Gründen der Konsolidierung und Erinnerung mache.

Hier sind die Videos, die ich mir in den letzten 48 Stunden angesehen habe.

1. Einführung in die Django-Webentwicklung (12 Videos)

Da ich mit Python bereits einigermaßen vertraut bin, dachte ich, dass Django (Pythons Web-Framework) der natürliche Ausgangspunkt wäre. Rückblickend halte ich es für eine viel bessere Idee, mit HTML, CSS und Javascript zu beginnen. Tatsächlich würde ich davon ausgehen, dass die Leute, wenn sie sagen, dass sie programmieren möchten, wirklich Webentwicklung lernen möchten. Und genau das ist mir passiert.

Diese Wiedergabeliste lieferte mir jedoch eine viel bessere Vorstellung davon, wie Back-Ends wie Django (und Rails) HTML generieren. Wenn Sie bereits Python gelernt haben, ist dies kein schlechter Ausgangspunkt, nur für den Kontext.

2. Bootstrap Tutorial für Anfänger (14 Videos)

Mein Entwicklerteam sagte mir, ich solle Bootstrap lernen. Dies war also die erste Wiedergabeliste, die ich gefunden habe. Es ist ziemlich gut, obwohl in Kürze eine noch bessere Wiedergabeliste erscheint. Das Wiederholen schadet aber nicht.

3. UIkit Web Framework (10 Videos)

UIkit wurde beiläufig in einem der obigen Bootstrap-Videos erwähnt. Ich war neugierig und habe mir dieses Intro zur UIkit-Wiedergabeliste angesehen. Es hat Bootstrap als nur eine Option (wenn auch die beliebteste) für den schnellen Front-End-Aufbau ins rechte Licht gerückt, aber es gibt Alternativen.

4. Derek Banas Tutorials (3 Videos)

Auf der Suche nach weiteren Bootstrap-Anweisungen stolperte ich über Derek Banas 'Videos. Ich habe seinen Stil sofort geliebt - sehr intensive Beispiele nacheinander, die alle verschiedenen Elemente und Möglichkeiten in jedem Framework veranschaulichen. In Analogie zum Erlernen einer Sprache werden die Verbtabellen behandelt.

5. learnCode Academy (1 Video)

Dies war der Zeitpunkt, an dem die Dinge wirklich sehr, sehr interessant wurden. Dieser Kanal ist der Goldstandard beim Codieren von Videos, und dieses Intro-Video gab mir einen großartigen Überblick über all die verschiedenen Bereiche, die ich kennen musste, um Entwickler zu werden.

Wenn Sie sich das Programmieren beibringen möchten, ist dies der beste Ausgangspunkt.

Hinweis: Hier ist die Mind-Map, die im Video beschrieben wird - eine großartige Ressource.

6. Web Development Tutorial für Anfänger (29 Videos)

Diese Wiedergabeliste ist einfach brillant und der beste Ort, um die Webentwicklung zu lernen, den ich jemals gefunden habe. Obwohl ich der Vollständigkeit halber meine gesamte Reise mit einbeziehe, würde ich diese Wiedergabeliste als Kernmaterial empfehlen. Es beinhaltet HTML, CSS, Bootstrap, FTP, Javascript, Github, JQuery, Live Reload, Grunzen und vieles mehr.

7. Javascript Tutorial für Anfänger (10–12 Videos seit einigen in der Playlist oben)

Zu diesem Zeitpunkt war ich süchtig. Sogar bei doppelter Geschwindigkeit war die letzte Wiedergabeliste ziemlich anstrengend, aber ich fühlte mich sehr motiviert, direkt in mehr Javascript zu springen. Diese Wiedergabeliste enthält das Durchlaufen des DOM und der modularen Javascript-Konzepte.

8. Was ist "Dies" in Javascript (4 Video)

Als das Javascript-Tutorial anfing, sich mit modularen Konzepten zu befassen, wurde mir klar, dass ich das "Dies" -Konzept nicht wirklich verstand. Also habe ich nach Erklärungen gesucht und diese Videos habe ich verwendet, um dieses schlüpfrige Konzept zu erfassen.

9. Frontend-Workflow (12 Videos)

Zu diesem Zeitpunkt wurde mir klar, dass es Tools gab, mit denen die Produktivität gesteigert werden konnte. Meine früheren Erfahrungen mit HTML und CSS waren schmerzhaft klobig und mühsam, und ich war äußerst glücklich, dies im Vorfeld zu erfahren. Ich plane definitiv, Jade oder Emmet und SASS vom ersten Tag an zu verwenden.

10. Chrome Developer Tools verwenden (6 Videos)

Viele der Videos verwenden die Chrome Developer Console, um ihren Code zu debuggen. Ich dachte, ich sollte mehr darüber erfahren, und diese Videos waren gut genug, um die Grundlagen zu vermitteln und andere Konzepte wie GET- und POST-Anfragen zu vertiefen.

11. CSS Flexbox Essentials (2 Videos)

Ich habe mit dem CTO eines meiner früheren Startups zu Mittag gegessen, der mir einen hervorragenden Rat gab. Eine Sache, die ich aufgeschrieben habe, war "Flexbox lernen" und ich bin sehr, sehr froh, dass ich das getan habe. Es scheint eine sehr intuitive Art zu sein, mit Abstands- und Dehnungselementen umzugehen. Dazu gibt es ein Folgevideo, das ich mir auch angesehen habe.

Ich muss sagen, dass ich auch ein großer Fan des DevTips-Kanals bin, der dieses Video produziert hat. Sie haben einen großen Teil des Workflows und der praktischen Techniken beeinflusst, die ich bei meinem ersten Projekt verwende.

12. Frontend-Beispielprojekte (9 Videos)

Dies ist eine Zusammenstellung von exemplarischen Vorgehensweisen zum schrittweisen Erstellen realer Websites. Nachdem Sie alle grundlegenden und mittleren Konzepte durchgearbeitet haben, konnten Sie die Ideen auf hervorragende Weise konsolidieren und ein professionelles Workflow-Modell aufzeigen. Und der Workflow ist der Schlüssel. Als Neuling denke ich ständig darüber nach, ob ich etwas richtig angehe. Diese Videos geben Ihnen einen Ausgangspunkt.

Videos, die ich hier nicht aufgenommen habe

Es gibt ein paar Dutzend Videos, die ich ausgelassen habe, da ich sie nicht fertig gestellt habe oder sie nicht gut waren. Auf dem YouTube-Kanal der learnCode.academy habe ich auch ungefähr zehn weitere Videos angeschaut, in denen die Grundlagen von Node.js, Angular.js, React.js, Vagrant und Docker behandelt wurden, aber ich habe mich jetzt nur wenig dafür entschieden Verwendung von Javascript-Frameworks in meinen ersten Projekten.

Insgesamt habe ich in 48 Stunden über 125 Codierungsvideos angesehen und ich fühle mich wie Neo in der Matrix, wenn er in fünf Minuten Kampfkunst lernt. Aber ich bin so froh, dass ich am Anfang einen weiten Bogen gemacht habe.

Nächste Schritte

Jetzt ist es an der Zeit, sich mit dem Erstellen einiger tatsächlicher Webseiten zu beschäftigen. Ich habe ein hartes Ziel, das mich anspornt. Also genug von Medium und zurück zu Sublime Text.

Über mich:

Ich bin Dave und coache CEOs von Technologieunternehmen der Serie A +. In den letzten 10 Jahren habe ich drei von VC unterstützte Technologieunternehmen mitgegründet, als VC- und Angel-Investor in Dutzende von Jungunternehmen investiert und Hunderte von Startups als Lead Mentor für Google betreut. Weitere Informationen finden Sie unter Dave-Bailey.com.