Skip to content

CodeDesignInitiative/awesome-coding-and-designing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Awesome Coding+Designing

Sammlung toller Lernquellen und Tools – kommentiert und erprobt. In Klammern steht immer, für welchen Kenntnisstand das Tool 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.

Code 💻

  • (✏️, A/F, 🇺🇸) GitHub Learning Lab Lerne verschiedene Sachen rund um Open Source und git.
  • (🔨, 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, 🇺🇸) Udacity - Lerne verschieden Programmiersprachen, Frameworks und Tools. Diese Tutorials wurden teilweise in Zusammenarbeit mit Firmen wie Google, Facebook und Amazon erstellt und orientieren sich daher nah an der Berufspraxis.
  • (✏️, A/F/P, 🇺🇸) javascript.info - Einfache und schwere Tutorials für JavaScript mit einfachen Erklärungen. (Leider nur auf Englisch)
  • (🔨, A/F/P, 🇺🇸) Glitch - Glitch is the friendly community where you'll build the app of your dreams
  • (✏️, F/P, 🇺🇸) FullStack Open - Learn React, Redux, Node.js, MongoDB, and GraphQL in one go!
  • (🖥, A/F, 🇺🇸) CS50's Introduction to Computer Science - An introduction to the intellectual enterprises of computer science and the art of programming by Harvard's CS staff!
  • (🖥, A/F, 🇺🇸) Scrimba - Interactive video tutorials on everythin web-related like HTML, CSS, JS or React.

HTML/CSS

  • (🖼, A/F/P, 🇺🇸) htmlreference.io - Alle HTML visuell verfügbar.
  • (🖼, A/F/P, 🇺🇸) cssreference.io - Alle CSS Styles visuell verfügbar und anschaubar.
  • (🔨, A/F, 🇺🇸) Mozilla Thimble - Thimble ist ein Online-Quelltext-Editor, mit den Sie ganz einfach Ihre eigenen Webseiten erstellen und veröffentlichen können, wobei Sie gleichzeitig HTML, CSS & JavaScript lernen können.
  • (🔨, A/F/P, 🇺🇸) Bootstrap Beispiele
  • (🔨, A/F/P, 🇺🇸) Bootstrap Cheatsheet
  • (🔨, A/F/P, 🇺🇸) a-frame AR/VR Markup A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, Daydream, GearVR, desktop

JavaScript

  • (✏️, A/F/P, 🇺🇸) javascript.info - Einfache und schwere Tutorials für JavaScript mit einfachen Erklärungen. (Leider nur auf Englisch)
  • (✏️, A/F/P, 🇺🇸) JS in 14 minutes - Einfaches Tutorial für Einsteiger, direkt im Browser.
  • (🖥, A/F/P, 🇺🇸) Practical JavaScript - Hervorragender Videokurs für JavaScript-Beginner, in dem man direkt eine ToDo Liste baut. Empfehlung!
  • (🖥, A/F, 🇺🇸) Javascript30 - Build 30 things in 30 days with 30 tutorials

Apps

  • (🔨, A, 🇺🇸) Thunkable - super einfach Apps für Android und iOS entwickeln
  • (🔨, A/F/P, 🇺🇸) NativeScript - im Browser Apps für Android und iOS entwickeln. Mit JavaScript, VueJS oder Angular.
  • (✏️, A/F/P, 🇺🇸) NativeScript Samples - Vorlagen für NativeScript, etwa zu Login Form und ListView

Design 🖌

Programme zum erstellen von Grafik oder 3D-Objekten

  • (🔨A/F) Piskel - Web-Tool zum gemeinsamen erstellen von Pixel-Art (Block-Grafik)
  • (🔨A/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 🎮

  • (🔨A/F/P) Unity 3D - Spiele-Engine für 3D- und 2D-Spiele.
  • (🔨A/F/P) PhaserJS - Browserspiele mit JavaScript oder TypeScript entwickeln. Leichter als Unity!
  • (🔨A/F/P) LÖVE - 2D-Spiele mit Lua entwickeln.
  • (🔨A/F) Construct 2 - Einfaches Tool für 2D Jump'n'Run-Spiele (Nur für Windows!)
  • (✏️, A/F/P, 🇺🇸) Construct2 Tutorial für Jump'n'Run
  • (🔨F/P) Unreal Engine - Spiele-Engine für 3D Spiele.

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"

Tool/Tutorial hinzufügen

  • Dein Lieblingstool fehlt?
  • Füge es einfach hinzu
  • Folge dafür diesen Hinweisen

About

Sammlung toller Lernquellen – kommentiert und erprobt

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages