Awesome Coding+Designing

Sammlung toller Lernquellen und Tools – kommentiert und erprobt. In Klammern steht immer, für welchen Kenntnisstand geeignet ist:

• A: Anfänger
• F: Fortgeschritten
• P: Profis

Außerdem ist aufgeführt, ob es ein Tool (🔨), eine Sammlung von Vorlagen (🖼) oder ein Tutorial (Text: ✏️, Video: 🖥) ist.

Wie lerne ich nach dem Camp weiter?

• Such dir ein Ziel! Welches Projekt möchtest du umsetzen?
• Finde heraus, wie du am besten lernst (du wirst viel Zeit alleine probieren und lernen, also müssen deine Lernquellen gut sein)
• Nutz die Code+Design Community
  • Stellt viele Fragen und zwar im Channel #community
  • Tretet Lerngruppen-Channels bei und fragt dort: #masters-html, #masters-javascript, #masters-gamedev
• Finde heraus, ob du eher mit Video oder Texte (Tutorials/Bücher) lernen kannst
• Nutze die Awesome Coding&Designing Liste, um Lernquellen zu finden, die Code+Design Coaches empfehlen
• Finde das richtige Video (bei Udemy oder Youtube) oder Tutorial/Buch
  • Wieviele Bewertungen hat Lernquelle?
  • Wie gut ist die Bewertung/die Kommentare?
  • Wird im Kurs ein Projekt umgesetzt? (wenig Theorie, viel Praxis)
  • Verstehst du das Inhaltsverzeichnis? (Nein? Dann wirst du den Kurs nicht verstehen)
  • Ist das Vorschauvideo gut? (Du wirst viel Zeit damit verbringen, also frage dich, ob die Stimme, die Sprechgeschwindigkeit, der Humor, der Lehrstil zu dir passt)
• Nutze Lern-Communities im Netz
  • Suche bei Google nach Forum/Community/Slack plus deine Technologie, also z.B. forum php
• Stelle gute Fragen in Lern-Communities
  • Schreibe eine konkrete Überschrift (NIcht: Warum geht gar nichts?, Sondern: Warum bekomme ich Fehler 500 bei API-Anfrage über PHP 7.2?)
  • Beschreibe das Problem so spezifisch und allgemeinverständlich wie möglich (Analogie: Erkläre das Problem deiner Mutter)
  • Erstelle ein minimales Fehlerbeispiel (also nur den Abschnitt des Fehlers) und kopiere es in Online-Editoren (codepen.io, jsbin.com) und teile die URL in deiner Frage
  • Schreibe, was du schon alles probiert hast
• Finde oder gründe lokale Lerncommunities
  • Über Meetup.com kann man Treffen für Programmierer/Designer finden, leider häufig nur für Erwachsene, trotzdem probieren!
  • Es fehlen Meetups für Jugendliche. Wir helfen euch gerne, lokale Treffen für technikbegeisterte Jugendliche zu organisieren!

Code 👨‍💻

• (🔨, A/F/P, 🇺🇸) VSCode - Eine IDE mit guter Integration und Code Completion.
• (🖼, A/F/P, 🇺🇸) VSCode Basic Tips - How to use Visual Studio Code for web design
• (🖼, A/F/P, 🇺🇸) Awesome VSCode Plugins - Awesome VSCode Plugins für schnelleres Entwickeln
• (✏️, A/F/P, 🇺🇸) CodeAcademy - Lerne verschiedene Programmiersprachen kostenlos mit einfachen Tutorials.
• (✏️, F/P, 🇺🇸) FreeCodeCamp - Baue verschiedene Projekte und bekomme dafür Zertifikate
• (✏️, A/F/P, 🇺🇸) javascript.info - Einfache und schwere Tutorials für JavaScript mit einfachen Erklärungen. (Leider nur auf Englisch)

HTML/CSS 🕸

• (🖼, A/F/P, 🇺🇸) htmlreference.io - Alle HTML-Tags visuell verfügbar.
• (🖼, A/F/P, 🇺🇸) cssreference.io - Alle CSS Styles visuell verfügbar und anschaubar.

Design 🖌

Programme zum erstellen von Grafik oder 3D-Objekten

• (🔨A/F) Piskel - Web-Tool zum gemeinsamen erstellen von Pixel-Art (Block-Grafik)
• (🔨F/P) Blender - Programm zum erstellen und manipulieren von 3D-Objekten (die dann z.B. direkt in der Unity-Engine genutzt werden können)

Gaming 🎮

Programme und Tutorials zur Computerspieleentwicklung.

• (🔨A/F/P) Unity 3D - Spiele-Engine und Editor für 3D und 2D Spiele.
  • (✏️F/P) offizielle Unity-Tutorials für 2D- und 3D-Spiele (auf Englisch)
• (🔨A/F/P) Unreal Engine - Spiele-Engine und Editor für 3D und 2D Spiele.

Unity 3D und Unreal sind beides komplexe Editoren mit denen sich alle möglichen 2D und 3D Spiele umsetzen lassen. Sie können beide von Anfängern für einfache Spiele genutzt werden. Da sie aber auch für Profis mächtige Werkzeuge darstellen, mit denen auch große Studios Spiele umsetzen besitzen sie sehr viele Funktionen. Es dauert Jahre um alle Funktionen kennen zu lernen und an der Entwicklung großer Spiele sind hunderte Experten über Monate oder gar Jahre beschäftigt, die sich auf einen Teil der Spieleentwicklung spezialisiert haben (2D/3D Grafiker, Story-Autoren, Programmierer, Marketing-Experten, Musiker, Tester...).

Produktentwicklung ✨

Prototypen ⚙

Wenn man schnell ein Produkt entwickeln will, entwirft man einen Prototypen. Manche Tools sind nur für Design geeignet.

• (🔨, A/F/P, 🇺🇸) Figma - Prototypen und Designs online entwickeln.Man kann einen Prototypen teilen und zu zweit kostenlos daran arbeiten. Wenn man mit noch mehr Leuten gleichzeitig daran arbeiten will, meldet man sich mit der gleichen Mailadresse und Passwort an
• (🖼, A/F/P, 🇺🇸) SketchAppSources - Vorlagensammlung für App-Prototypen (Bsp). Ihr könnt die Vorlagen in Figma importieren und daran weiterarbeiten
• (🔨, A/F/P, 🇺🇸) Atomic - Alternative zu Figma, auch designorientiert, aber mit mehr "Programmierlogik"

Contribute 🤔

Welche Beiträge zu a, Tools und b, Tutorials sind für diese Liste erwünscht?

Tools 🔨

• Mit Kommentar: a, Wofür kann man es nutzen und b, warum ist es cool
• Man kann zusammen daran arbeiten
• Läuft mindestens auf Windows und Mac, idealerweise online

Tutorials 📜

• Mit Kommentar: a, Wofür kann man es nutzen und b, warum ist es cool
• Geschrieben auf Deutsch oder Englisch
• Je praktischer und konkreter, desto besser