Weiterführende Tipps und Tools

Buchtipps

Standards

• W3C Validator
• w3c
• whatwg
• W3C CSS Spezifikation (CSS 2.1)
• https://developer.mozilla.org/en-US/
• Can I Use
• Webstandards in deutscher Sprache
• HTML5 Spezifikationen (W3C Working Draft)
• CSS4you (deutsch)
• https://gs.statcounter.com/ Statistik
• nvision accessibility
• W3C HTML Spezifikation Html4 | XHTML

Tutorials + Tipps + Tricks

• SelfHTMLwiki
• W3Schools.com
• HTML Periodische Tabelle (Übersicht aller Elemente)
• mediaevent.de
• css-tricks.com
• Handbuch HTML5 Stefan Münz
• Emmet / Beispiele
• CSS
• CSS Zengarden
• 8 Games to learn CSS
• Little Boxes
• Überblick: Formulare in HTML 5
• www.screenguide.de
• Jens Meiert, HTML und CSS Guru
• Ein englischer CSS Guru
• The Styleworks.de
• HTML 5 rocks
• Die Webkrauts
• Michael Jendryschik
• Reguläre Ausdrücke
• CSS3.info
• CSS Hacks versuchen die Unzulänglichkeiten älterer Browser zu kaschieren
• Mediaqueries | Beispiele
• Mediaqueries Tutorial
• Impressive Webs
• Individuelle Ckeckboxes und Radiobuttons
• CSS3 Checkbox Styles
• HTML 5: Pattern
• Skiplink Navigation
• tn3: we love technology
• Boilerplate
• Pastor Pixel
• scotch.io Javascript

HTML CSS JS Frameworks

• https://webdesigntoolbox.com/
• yaml
• blueprint
• jQuery UI CSS Framework
• Yahoo YUI Grids CSS
• Bootstrap

Software Editoren

• Brackets (Adobe Editor) Quickstart Anleitung
• Edge Reflow (Adobe Editor)
• Pencil Project
• Webflow
• Phase 5 (2000er Edition)
• Notepad++
• Thinking Tags(Yaml, Blueprint CSS, 960gs)
• TopStyle Light
• HTML Editor (Mac)
• Ansi - UTF-8 Konverter
• Metaframe (Tool für Anmerkungen in der Entwurfsphase)

Grafik

Pixelbasierte Grafik Programme

• Adobe
• Gimp (Mac)
• Irfanview
• Paint Shop Pro
• Picasa (Mac)
• Paint.Net

Vektorgrafik Programme

• Inkscape (Mac)

Grafiken im Netz

• Freie Bilder (Wikimedia Commons), Bundesarchiv, Lebensmittelfotos
• Foto Stocks (Fotolia, IStockPhoto, Getty Images, Pixelio , About Pixel, shutterstock, http://www.sxc.hu/, FreePic, http://patterns.ava7.com/1.php, http://www.deviantart.com/ Thinkstock
• Beispielbilder http://lorempixel.com/
• Beispielbilder Dummyimage
• Tineye: Bildduplikate Suchen

lizenzfreie Bilder:

• https://pixabay.com/de/
• http://www.pixelio.de/
• http://de.freeimages.com/
• https://unsplash.com/
• http://www.freedigitalphotos.net/

Icons

• Freie Opensource Icons
• 35 freie Icon Sammlungen

 

Firefox Addons

• Colorzilla
• Measure It
• FireFTP
• Firebug
• Screengrab

Schriften

• Websichere Schriften
• https://ruhrpott-ipsum.de/

Schriften testen:

• https://www.typetester.org/
• http://typecast.com/preview/google
• Schriftkombinationen
• http://fontpair.co/
• Freie Webfonts:
• https://fonts.google.com/
• https://edgewebfonts.adobe.com/
• https://www.fontsquirrel.com/

Farben

• RGB und das Hexadezimalsystem
• Colorpicker Hexadezimal
• Color Sheme Designer
• https://color.adobe.com/de/
• https://coolors.co/
• http://paletton.com/
• https://www.materialpalette.com
• generiert auch Farbschemen aus Bildern
  http://www.colourlovers.com/copaso
  
  
  Farbkontrast Bewerten lassen:
  https://contrast-ratio.com/
  https://webaim.org/resources/contrastchecker/

CSS

• Can I use (was geht in welchem Browser)
• https://gs.statcounter.com/ Statistik
• CSS Optimizer
• CSS Maker
• CSS Komprimierer und Beautifier
• Media Queries
• Tipps und Tricks mit CSS3
• Mediaqueries für spezielle Geräte
• CSS Intensivstation
• prefixfree
• CSS3 Transitions, Animations, Transforms
• CSS3 Timing Function tool

Helferlein

• emmet
• tiny helpers
• midgi tools
• undesign learn
• tinywow
• meyerweb tools
• prefixfree
• http://enjoycss.com/
• CSS3 Generator
• Color Generator
• Grid Calculator
• Browsershot.org
• Blindtextgenerator
• Dummy Image Generator (Blindbildgenerator)
• List-O-Matic
• Favicon Generator
• Favicon Generator
• Box-Shadow Generator
• QR Code Generator
• Geo tag Generator
• Codecademy
• LearnLayout.com
• Video2brain
• 9 tools für Webdesigner
• 20 code snippets
• Webworker Referenzen
• Flat Design 15 Tools
• CSS Button Generator

Internetrecht

• Impressum
• Thomas Hoeren

Seo

• Meta Tags Allgemein Information
• Webmastertools
• Sitemapsgeneratoren
• Metatag Generator
• MetaTabs
• SEO allgemein
• Robots.txt, Robots Exclusion Standard

Webserver und Applikationen

• Xammp
• Ammps
• Cloudhosting

kostenloses Webhosting:

• https://www.freewebhostingarea.com/
• https://www.bplaced.net/

Webftp Dienste: (ermöglichen den upload von Daten ohne FTP client) auch vom WBS - Standort aus

• https://doms.freewha.com/ftp/index.php
• http://www.txftp.com/
• http://webftp.de

Empfehlenswerte FTP Programme:

• https://filezilla-project.org/
• https://www.ipswitch.com/ftp-client
• https://winscp.net/eng/download.php

Moodboards:

• http://www.creativebloq.com/graphic-design/mood-boards-812470
• http://www.pinterest.com
• Styletiles Für Mockups und Moodboards http://styletil.es/
  

---

Impressumsgeneratoren:

• https://www.e-recht24.de/impressum-generator.html
• http://www.123recht.net/impressumsgenerator.asp?ccheck=1
• https://www.hensche.de/impressum-generator.html
  

---

Css-generatoren:

• http://css3gen.com/
• https://www.colorzilla.com/gradient-editor/
  

---

Polyfills:
    
Formulare und Polyfills:
Einige Fertige RegXP für das HTML5 pattern Attribut:
http://html5pattern.com/

HTML 5 Elemente für alte Browser
https://github.com/aFarkas/html5shiv/tree/master/dist
Alternative zu html5shiv mit zusätzlichem CSS3 support:
https://modernizr.com/

Standard-CSS tippen und notwendige vendorprefixes generieren lassen:
https://autoprefixer.github.io/

Gute Einführung in das Thema der Regulären Ausdrücke:
http://regenechsen.de/wp/regulaere-ausdruecke/01-regex-allgemein/

---

Browsersupport von Elementen und Eigenschaften auf Endgeräten:
https://caniuse.com/