Skip navigation

Page Content:

Yet Another Guide to Web Design

Page Contents

1. Yet Another Guide to Web Design
2. A few hints
3. Online-Tools
   1. Generators
   2. Font-Converters
   3. Tests (Web services)
   4. Tests (Browser addons)
   5. Programming
   6. Artistic Generators
   7. Text to Speech
   8. Paste Services (Text)
   9. Paste Services (Code)
   10. Dummy Images

A few hints

Coming Real Soon Now™

Online-Tools

Generators

• https://www.cssportal.com/image-to-data/ Data-URI generator
• https://www.cssmatic.com/gradient-generator
• https://www.cssmatic.com/box-shadow

Font-Converters

• https://convertio.co/ttf-otf/
• https://transfonter.org/

Tests (Web services)

• https://validator.w3.org/ HTML Validator
  As hyperlink on your page:
  https://validator.w3.org/check?uri=https%3A%2F%2Fharald.ist.neu%2Fhowto%2Fwebdesign%2Fintroduction.html
• https://jigsaw.w3.org/css-validator/
  As hyperlink on your page:
  https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fharald.ist.org%2Fhowto%2Fwebdesign%2Fintroduction.html
• https://validator.w3.org/checklink Check for broken links
  As hyperlink on your page:
  https://validator.w3.org/checklink?uri=https%3A%2F%2Fharald.ist.neu%2Fhowto%2Fwebdesign%2Fintroduction.html
• https://www.browserling.com/ Cross-browser testing
• https://www.browserstack.com/ Cross-browser testing
• https://search.google.com/test/mobile-friendly
• https://www.ssllabs.com/ssltest/ Checks, if your server handles SSL properly
• https://securityheaders.com/ Checks security related http headers
• https://www.jitbit.com/unusedcss/ Unused CSS finder

Tests (Browser addons)

• https://addons.mozilla.org/en-US/firefox/addon/all-in-one-pagespeed-test/

Programming

• https://jex.im/regulex/ Regular expression visualizer
• https://www.shellcheck.net/ Check your shell scripts for errors
• http://xahlee.info/comp/unicode_arrows.html List of Unicode characters (Link goes to section "Arrows")

Artistic Generators

• https://charactercreator.org/ Randomly generate images of persons (drawings)
• https://www.artbreeder.com/ AI generated portraits

Text to Speech

• https://responsivevoice.org/ embeddable
• https://nanottsaas.herokuapp.com/ embeddable
• http://www.fromtexttospeech.com/ Direct text input to sound file

Paste Services (Text)

• https://paste.debian.net/
• https://paste.ubuntu.com/

Paste Services (Code)

• http://paste.asmcbain.net/ Code only (you need to enter everything, no additional frameworks, but light weight and fast)
• https://jsfiddle.net/ Provides options to include a variety of frameworks, no login, a bit sluggish

Dummy Images

• http://dummyimage.com/

  <img src="http://dummyimage.com/120x100" width="120" height="100" alt="Dummy Image">

  

• http://ipsumimage.appspot.com/

  <img src="http://ipsumimage.appspot.com/120x100?l=Line1|Line2&s=15" width="120" height="100" alt="Dummy Image">