Lernspiele im Web
Farben und Design
- YouTube: Die Bedeutung von Farben für Branding
- Die Grundlagen der Farbenlehre
- Accessible Colors
- Explore Colors
- Flat UI Colors
- Farbkombinationen von anderen Webdesignern
- Test für Kontrast zwischen Hintergrund und Textfarbe
- Farbverläufe
- Gradient animieren
- Radial Gradient
- CSS Gradient Animation
- Farbverläufe erstellen
- Einführung in die Farbenlehre: So wirken Farben
- Farbkombinationen
- 7 Rules for Choosing A Website Color Scheme
- Wie Design wirkt Teil 1 – Psychologische Prinzipien erfolgreicher Gestaltung
- Designing with Code | Jonas Hellwig
- Die Kunst digitaler Verführung | Karl Kratz | Webinale 2017
- Design for Trust – Vertrauen designen | Henning Fries
- Stile & Design 1
- Stile & Design 2
- Online Tutorial
Rechtliches im Web
Nachschlage Links
- Wiki Selfhtml
- W3School
- Markdown Cheatsheet
- CSS Befehle Übersicht
- CSS Browser Support
- Übersicht der Bild- & Grafikformate im Web
- CSS Coding Guidelines
- Grafikpower für dein Projekt: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts
- t3n: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts Font Awesome
- Looking for a specific device’s viewport size?
- FAQ
Praktische Links und Tools
- Wappalyzer – Interested to know which websites use certain technologies?
- Image Color Picker
- Color Picker von Adobe
- Color Picker Paletton
- Blind Text Generator
- Autoprefixer CSS online
- TinyPNG – Smart PNG and JPEG compression
- Unsplash – kostenlose Fotos
- clean & simple HEX, RGB & HSL color picker tool for web designers
- APCA Contrast Calculator
- SVG Animieren
- SVG maker
- Markup Validation Service
- Latest Color Palettes
- ✂️ Copy and 📋 Paste Emoji 👍
- ACCESSIBLE COLORS
- Farbverläufe erstellen
Grundlagen
- Introduction to HTML
- !! Wichtig !! — CSS-Selektoren
- !! Wichtig !! – CSS-Spezifität
- HTML-Elemente und Semantik
- Kategorien von Elementen
- Was versteht man unter dem Box Model?
- DOCTYPE – HTML-Version
- HTML article, section, header, nav
- Seitenstrukturierung
- Character Entities: allgemeine Sonderzeichen
- Block- & Inline-Elemente in HTML
- Block-level elements
- Inline elements
Table
Pseudoklassen und Pseudoelemente
CSS
- Scrimba: Learn HTML and CSS
- Scrimba: Introduction to CSS
- Scrimba: Learn CSS Variables for free
- A Guide To CSS Debugging
- CSS Coding Guidelines – CSS Code besser schreiben, formatieren und organisieren
- Mit »box-sizing: border-box;« das CSS Box Model verändern
- Vererbung in CSS
- Placeholder von input mit CSS stylen
- Stufenlos skalierende Texte und Schriftgrößen mit CSS calc()
- Die CSS calc()-Funktion – Berechnungen mit CSS
- Formular-Styling mit CSS – Select-Listen, Radio-Buttons und Checkboxen individuell gestalten
- Webseiten responsiv umbauen
- Responsive Masonry Layouts mit CSS erstellen
- Responsive Web Design
- responsive images
- Responsive Webdesign ohne Media Queries
- CSS Multi Columns – Responsive Layouts ohne Media Queries
- Responsive Images: Use Cases and Documented Code Snippets to Get You Started
- CSS mask – Elemente mit Bildern maskieren
- Tag-Icons mit CSS gestalten
- 6 Creative Ideas for CSS Link Hover Effects
- Getippter Text mit CSS-Animationen
- Bildunterschriften mit CSS immer perfekt ausrichten
- Wortumbrüche/Zeilenumbrüche per CSS erzwingen
CSS 3
- Einführung in CSS 3
- BACKGROUND-BLEND-MODE: HINTERGRÜNDE MISCHEN (CSS3)
- CSS-Filter
- CSS Filter-Effekte
- Automatische CSS Initialien
- Schwebende Objekte mit CSS3 Keyframe-Animationen
- CSS Flip Animation – Objekte umdrehen
- min(), max() and clamp(): 3 logical CSS functions
- CSS perspective
- Intro to CSS 3D transform
- transform
- Intro to CSS 3D transforms
- Zick-Zack-Linien mit CSS3
- AUSSCHNEIDEN MIT CSS3 – CLIP-PATH
- CSS3-Hintergrundmuster mit CSS3-Gradients erzeugen
Media Queries und Print CSS
Flexboxen
Grid Layout
JavaScript
- Scrimba Learn JavaScript
- JavaScript 1 Einführung
- Scrimba Introduction to JavaScript
- Debugging JavaScript
- JavaScript Fehlerbehandlung
- W3School JavaScript Tutorial
- JS Hero Tutorial Interaktiv
- JS Clean Code – Best Practices
- Document Object Model
- Scrimba Solo Project Invoice Creator
- Schleife
- JavaScript Array map()
- Map
- JavaScript Sets
- Set
- JavaScript Arrays
- Javascript- Operatoren
- Javascript Variablen mit let
- Javascript use strict
- Grundlagen JavaScript Funktionen
- JavaScript Event Handling
- mouseover, mousemove, mouseout, mousedown, mouseup
- stopPropagation() Event Method
- Rundungsfehler in JavaScript
- Simplify your JavaScript – Use .map(), .reduce(), and .filter()
- Datenspeicherung
- JavaScript Spread Operator …
- ES6-Tutorial
- JavaScript fetch Tutorial
- JavaScript Fetch API Mozilla Docs
- Execution Order JavaScript
jQuery
PHP
- Welcome to the learn-php.org free interactive PHP tutorial
- Einführung Theorie
- !!Empfehlenswerte Tutorials und Erklärungen zu PHP!!
- Erste Programmierschritte
- Speicher, Erstellen, Beschreiben von Dateien
- If Abfragen, Schleifen, Funktionen
- Form Handling
- Arrays
- XDEBUG
- PHP – What is OOP?
- PHP Objektorientierte Programmierung
UI/UX, Accessibility, SEO, Design Richtlinien
- Interaction Design
- Design Thinking
- Human Computer Interaction?
- Dark Patterns of Web Design
- Web Accessibility
- Web Design Principles
- Übersicht der häufigsten Einschränkungen & was man beachten muss!
- Einführung in die Farbenlehre: So wirken Farben
- Video für Barrierefreiheit
- Blogbeitrag Barrierefreiheit
- Color Schema
- Learn UI Design Fundamentals
- Wichtige Prinzipien im Web Design: Don’t make me think
- Online Accessibility Checker
- Video: How a blind person uses a computer and an iphone
- What is usability?
- What is interaction design?
- ARIA Markup für bessere Barrierefreiheit
- Checker Tool für Farbkontraste
- 10 UI Design Guidelines
- Adaptive vs. responsive webdesign
- Web Content Accessibility Guidelines (WCAG) 2.2
- Die WCAG 3.0
- Accessibility For Everyone – Webinale 2018 – Keynote by Laura Kalbag
- User Research/ Usability Testing
- Story-Telling
- Web Design Trends 2022
Nachlese und Videos zu webbezogene Themen
- Responsive Web Design
- web-platform-tests documentation
- Marktanteile der führenden Browserfamilien an der Internetnutzung weltweit von Januar 2009 bis März 2022
- Pagespeed Optimieren
- Barrierefreiheit testen: Tools und Herangehensweisen
- Design, Development und dazwischen | Dennis Reimann & Jan Persiel | Webinale 2017
- Wie sich UX auch wirklich gut anfühlt: Strategien zur Validierung passender UX | webinale 2019
- Dark Patterns: Psychotricks, um Entscheidungen zu manipulieren | Kai Radanitsch
- Art Direction for the Web | Andy Clarke
- Variable Fonts — practical Guide | Marianna Paszkowska
- Perception is Reality – Wie die gefühlte Wahrnehmung Kaufentscheidungen beeinflusst
- Security by UX-Design | Enno Park
- Dynamische Layouts mit CSS | Sven Wolfermann
Frameworks & Bibliotheken
Projektmanagement
- Die Geschichte des Projektmanagements und ein Blick in die Zukunft
- Projektstrukturplan
- Das Lastenheft: Was ist das und wozu ist es gut?
- Projektmanagement: 5 Schritte der Projektplanung
- Kostenplan
- Agiles Projektmanagement
- Die 10 besten Mindmapping-Tools im Web
- User Persona Template
- In 5 Schritten Ziele übersichtlich darstellen (mit der Zielhierarchie)
- So erstellen Sie gute User Storys
- Was ist ein Softwareprozessmodell? Top 7 Modelle erklärt
- Projektmanagement Teil 1
- Projektmanagement Teil 2
- Projektmanagement Teil 3
- Projektmanagement Teil 4
