101 – Webauftritt gestalten und realisieren

w3schools.com
Der offizielle Online-Kurs von W3C bietet enorm viel Lerninhalt, welchen du in einzelnen verständlichen Happen durchgehen kannst.

selfhtml
DAS Wiki für HTML und CSS

Dash General Assembly
Ein toller interaktiver Online-Crash-Kurs, um die Grundlagen von HTML, CSS & JavaScript zu erlernen

Khan Academy – Intro to HTML/CSS: Making webpages
Ebenfalls ein guter Online-Crash-Kurs, der nicht nur auf die Ausführung Wert legt, sondern auch auf das Lernen der Theorie.

edX.org – HTML5 Coding Essentials
Ein toller Online-Kurs (MOOC) um die Neuerungen von HTML5 kennenzulernen

Flexbox Froggy
Ein witziges Spiel mit Fröschen, um das neue flexbox in den Griff zu kriegen

Flexbox Defense
Ein witziges Spiel, diesmal mit Schützengewehren, um das neue flexbox in den Griff zu kriegen

CSS Diner
Ein cooles Spiel, um die eigenen CSS-Fertigkeiten auf die Probe zu stellen

Colouring with CSS
Ein Malbuch zum Ausmalen – mit CSS!

W3C Validation Service
Der offizielle HTML-Validator von W3C

CSS Validation Service
Der offizielle CSS-Validator von W3C

HTML5 Validator
Der alternative HTML Validator mit HTML5-Implementierung

Can I use…
Finde heraus, ob du eine bestimmte Funktion benutzen kannst, oder ob diese noch nicht auf allen Browsern sauber läuft

Modernizr
Modernizr hilft dir, Kompatibilitätsprobleme zwischen den Browsern zu korrigieren

A  Guide to Flexbox
Eine komplette Anleitung zum Einsatz von CSS Flex Regeln

Unleashed Design – CSS Flexbox
Praktische Videoanleitung

A  Guide to Grid
Eine komplette Anleitung zum Einsatz von CSSGrid Regeln

malven.co – GRID Cheatsheet
Nach Flexbox ist grid der neueste Wert für die display-Eigenschaft von CSS und bringt nochmals ganz neue Möglichkeiten mit sich um Inhalte in einem Raster anzuordnen

Unleashed Design – CSS Grid Einfach erklärt
Gutes Einstiegsvideo zum Thema CSS Grid

NETMARKETSHARE
Die neusten Statistiken zum Internet: Mit welchem Browser, welchen Auflösungen, welchen Geräten, etc. greift die Allgemeinheit auf Websites zu?

w3schools.com – Responsive Web Design
Tutorial zum Thema Responsive Web Design mit CSS

Hermes: Vorlage Testprotokoll
Vorlage der Projektmanagement-Methode «Hermes»

Google: Test auf Optimierung für Mobilgeräte
Der offizielle Test von Google, der dir verrät, ob deine Webseite von Google als Mobile-Friendly angesehen wird oder eben nicht und dadurch im Google-Ranking schlechter ausfällt

GTmetrix
Ein genialer Online-Test um die Geschwindigkeit von Websites zu testen. Liefert gleich auch die Korrektur dazu.

SEO Analyzer
Dieser Test deckt allfällige Probleme auf, welche für die Suchmaschinenoptimierung korrigiert werden sollten.

Chrome Web Developer Add-On
Firefox Web Developer Add-On
Sehr praktische Add-On für den Web-Designer. Wahlweise können HTML & CSS direkt validiert werden. CSS und JavaScript können mit einem Klick deaktiviert werden oder das Fenster kann eine bestimmte Grösse einnehmen.

dev.to – Understanding positioning in CSS
Eine sehr gute Erklärung, wie die CSS-Eigenschaft «position» funktioniert

BEM Methodology Documentation
Die BEM Methodologie definiert eine Arbeitskonvention für HTML und CSS, welche schon heute von zahlreichen Entwicklern eingesetzt wird und die Zusammenarbeit extrem vereinfacht.

CSS Portal
DAS CSS Portal mit allen möglichen Infos

CSS3 Generator
Der CSS3 Generator funktioniert als Assistent, bei dem die Eigenschaften definiert werden können und automatisch der passende CSS-Code rausgespuckt wird. Recht praktisch, wenn man sich nicht mehr genau erinnert.

scrimba.com – Learn CSS Animations
Interaktives Tutorial um die CSS-Animationen kennenzulernen

Animate.css
Unterschiedliche CSS-Animationen ab der Stange

animista.net
Ein toller Katalog mit CSS-Animationen, bei dem man sich bedienen kann

YouTube – How to: Mobile Responsive Drodown Menü
Tutorial, um mit Hilfe von JavaScript ein Burger-Menü zu realisieren

Medium – Stock photos that don’t suck
Zahlreiche Links zu Portalen mit lizenzfreien Bildern

content-visibility: the new CSS property that boosts your rendering performance
Erfahren Sie, wie Sie mit Hilfe der CSS-Eigenschaft „content-visibility“ die Ladezeit ihrer Homepage verringern können.

Google – Chrome Dev Tools
Offizielles Handbuch von Google, um die Funktionen rund um DevTools kennen zu lernen.