Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/CodeDesignInitiative/awesome-coding-and-designing

Sammlung toller Lernquellen – kommentiert und erprobt
https://github.com/CodeDesignInitiative/awesome-coding-and-designing

List: awesome-coding-and-designing

Last synced: 3 months ago
JSON representation

Sammlung toller Lernquellen – kommentiert und erprobt

Awesome Lists containing this project

README 

        
# 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, :us:) [GitHub Learning Lab](https://lab.github.com/courses) Lerne verschiedene Sachen rund um Open Source und git.

- (🔨, A/F/P, :us:) [VSCode](https://code.visualstudio.com/) - Eine IDE mit guter Integration und Code Completion.

- (🖼, A/F/P, :us:) [VSCode Basic Tips](https://medium.com/@martin_betz/how-to-use-visual-studio-code-for-web-design-f2a2450f54d9) - How to use Visual Studio Code for web design

- (🖼, A/F/P, :us:) [Awesome VSCode Plugins](https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5) - Awesome VSCode Plugins für schnelleres Entwickeln

- (✏️, A/F/P, :us:) [CodeAcademy](https://www.codecademy.com/) - Lerne verschiedene Programmiersprachen kostenlos mit einfachen Tutorials.

- (✏️, F/P, :us:) [FreeCodeCamp](https://www.freecodecamp.org/) - Baue verschiedene Projekte und bekomme dafür Zertifikate

- (✏️, A/F/P, :us:) [Udacity](https://de.udacity.com/course/all) - 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, :us:) [javascript.info](https://javascript.info/) - Einfache und schwere Tutorials für JavaScript mit einfachen Erklärungen. (Leider nur auf Englisch)

- (🔨, A/F/P, :us:) [Glitch](https://glitch.com/) - Glitch is the friendly community where you'll build the app of your dreams

- (✏️, F/P, :us:) [FullStack Open](https://fullstackopen.com/en/) - Learn React, Redux, Node.js, MongoDB, and GraphQL in one go!

- (🖥, A/F, :us:) [CS50's Introduction to Computer Science](https://www.edx.org/course/cs50s-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, :us:) [Scrimba](https://scrimba.com/) - Interactive video tutorials on everythin web-related like HTML, CSS, JS or React.



### HTML/CSS



- (🖼, A/F/P, :us:) [htmlreference.io](https://htmlreference.io/) - Alle HTML visuell verfügbar.

- (🖼, A/F/P, :us:) [cssreference.io](https://cssreference.io/) - Alle CSS Styles visuell verfügbar und anschaubar.

- (🔨, A/F, :us:) [Mozilla Thimble](https://thimble.mozilla.org/) - 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, :us:) [Bootstrap Beispiele](https://getbootstrap.com/docs/4.1/examples/)

- (🔨, A/F/P, :us:) [Bootstrap Cheatsheet](https://hackerthemes.com/bootstrap-cheatsheet/)

- (🔨, A/F/P, :us:) [a-frame AR/VR Markup](https://aframe.io/) 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, :us:) [javascript.info](https://javascript.info/) - Einfache und schwere Tutorials für JavaScript mit einfachen Erklärungen. (Leider nur auf Englisch)

- (✏️, A/F/P, :us:) [JS in 14 minutes](https://jgthms.com/javascript-in-14-minutes/) - Einfaches Tutorial für Einsteiger, direkt im Browser.

- (🖥, A/F/P, :us:) [Practical JavaScript](https://watchandcode.com/p/practical-javascript) - Hervorragender Videokurs für JavaScript-Beginner, in dem man direkt eine ToDo Liste baut. Empfehlung!

- (🖥, A/F, :us:) [Javascript30](https://javascript30.com/) - Build 30 things in 30 days with 30 tutorials



### Apps



- (🔨, A, :us:) [Thunkable](https://thunkable.com/#/) - super einfach Apps für Android und iOS entwickeln

- (🔨, A/F/P, :us:) [NativeScript](https://play.nativescript.org/) - im Browser Apps für Android und iOS entwickeln. Mit JavaScript, VueJS oder Angular.

- (✏️, A/F/P, :us:) [NativeScript Samples](https://market.nativescript.org/?tab=samples&framework=angular&category=all_samples) - Vorlagen für NativeScript, etwa zu [Login Form](https://play.nativescript.org/?template=play-ng&id=Hqp5UQ&v=320) und [ListView](https://play.nativescript.org/?template=play-ng&id=TIzFdC&v=4)



## Design 🖌



Programme zum erstellen von Grafik oder 3D-Objekten



- (🔨*A*/_F_) [Piskel](https://www.piskelapp.com/) - Web-Tool zum gemeinsamen erstellen von Pixel-Art (Block-Grafik)

- (🔨*A*/_F_/_P_) [Blender](https://www.blender.org/) - 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](https://unity3d.com/) - Spiele-Engine für 3D- und 2D-Spiele.

- (🔨*A*/_F_/_P_) [PhaserJS](https://phaser.io/) - Browserspiele mit JavaScript oder TypeScript entwickeln. Leichter als Unity!

- (🔨*A*/_F_/_P_) [LÖVE](https://love2d.org) - 2D-Spiele mit Lua entwickeln.

- (🔨*A*/_F_) [Construct 2](https://www.scirra.com/construct2) - Einfaches Tool für 2D Jump'n'Run-Spiele (Nur für Windows!)

- (✏️, A/F/P, :us:) [Construct2 Tutorial für Jump'n'Run](https://www.scirra.com/tutorials/253/how-to-make-a-platform-game)

- (🔨*F*/_P_) [Unreal Engine](https://www.unrealengine.com/) - 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, :us:) [Figma](https://www.figma.com/) - 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, :us:) [SketchAppSources](https://www.sketchappsources.com/) - Vorlagensammlung für App-Prototypen ([Bsp](https://www.sketchappsources.com/free-source/3320-material-design-widgets-ui-kit-sketch-freebie-resource.html)). Ihr könnt die Vorlagen in _Figma_ importieren und daran weiterarbeiten

- (🔨, A/F/P, :us:) [Atomic](https://atomic.io/) - 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](/CONTRIBUTING.md)