Guymon

The Semantic Grid System

Mal wieder ein HTML / CSS Template System was ich mir anschauen will: The Semantic Grid System.

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

All without any ugly .grid_x classes in your markup. Oh, and did we mention it’s responsive?

Don’t Fear the Internet

Schöne Einführung in HTML und CSS für “Non-Web Designer”: Don’t Fear the Internet.

Through short tutorial videos, you’ll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. You’ll feel empowered rather than crippled by the internet and worst case scenario you’ll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen.

Bootstrap: HTML, CSS Framework

Ich hatte schon lange kein HTML, CSS Framework mehr: Bootstrap:

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Scheint einen Blick wert zu sehr, es bringt neben einem Grid Layout eine Menge Default Styles für Tabellen, Fehler Meldungen, Modal-Windows, etc pp mit.

HTML, CSS, und Javascript Einführung von Google

Auf Google Code gibt es eine kleine Serie zu HTML, CSS und Javacript.

Are you looking for a basic understanding of how UIs are created on the web or who wants to brush up outdated UI development knowledge? Or maybe you’d like to learn more about the medium you’re designing for and gain basic tools for prototyping designs? Do you want a better understanding of the web and how Google makes the pages that are its face to the world? If so, “HTML, CSS, and JavaScript from the Ground Up” is for you.

QA style sheet

Das praktische QA Style Sheet von Jens Meiert zeigt folgende Probleme auf:

• Errors:
  • deprecated elements like applet, basefont, center, dir, font, isindex, menu, s, spacer, strike, and u;
  • layout tables (nested tables, to be precise);
  • images (img elements) without any alt attribute;
  • anchors with an empty href attribute thus pointing to nothing;
  • style attributes.
• Warnings:
  • images with an empty alt attribute;
  • anchors linking GIF, JPG, or PNG images as well as PDF documents;
  • empty p, li, th, td, div, and span elements unless they’re using an id attribute;
  • style elements;
  • more than one link elements.