Website Design & Development Key Links

On this page…

    References

    One place you should not use: W3Schools. Find out why at W3Fools.

    HTML & HTML5 References

    ★ Mozilla Development Network
    An awesome, in-depth collection of material.

    Instant Documentation Search: HTML
    A nice search interface for Mozilla Developer Network documentation.

    More…

    When can I use…
    Compatibility tables for support of HTML5 & and more in desktop & mobile browsers.

    HTML Tags
    All of the valid tags belonging to the latest version of strict XHTML

    HTML Elements Index
    [HTML 3.2, 4.01, & 5 and XHTML 1.0, 1.1, & 2.0]

    CSS References

    ★ Mozilla Development Network
    An awesome, in-depth collection of material.

    Instant Documentation Search: CSS
    A nice search interface for Mozilla Developer Network documentation.

    More…

    When can I use…
    Compatibility tables for support of CSS3 & and more in desktop & mobile browsers.

    CSS Selectors References

    WestCiv: Complete CSS Guide: Selectors Introduction

    CSS Properties References

    CSS Properties
    All of the valid properties belonging to the CSS 2.1 standard

    WestCiv: Complete CSS Guide: Properties Introduction

    JavaScript References

    Instant Documentation Search: JavaScript
    Excellent. Search for what you want & then read the excellent explanation & examples.

    Instant Documentation Search: jQuery
    Excellent. Search for what you want & then read the excellent explanation & examples.

    Validation

    Check your code with these free tools.

    Validating Everything

    Unicorn - W3C's Unified Validator
    Check HTML, CSS, internationalization, RSS, & even mobile-readiness—all at once!

    HTML Validation

    W3C MarkUp Validation Service

    HTML Lint

    CSS Validation

    W3C CSS Validation Service

    Cheatsheets

    Excellent quick reference guides. Download these files & print them out, or save them on your tablet for quick access.

    HTML Cheatsheets

    HTML Cheat Sheet (PDF)

    Cheat Sheet v. 1.03 (PDF)

    HTML Character Entities Cheatsheets

    HTML Character Entities Cheat Sheet (PDF)

    CSS Cheatsheets

    CSS2 Cheat Sheet

    CSS 2.1 & 3 Help Cheat Sheets

    CSS 3 Selectors

    JavaScript Cheatsheets

    JavaScript Cheat Sheet

    jQuery Cheat Sheet

    Beautifying

    HTML Beautifying

    jsbeautifier

    CSS Beautifying

    Format CSS Code

    JavaScript Beautifying

    jsbeautifier

    Minification

    HTML Minification

    HTML Minifier
    Solid work, with lots of options

    CSS Minification

    Devilo.us
    Supports CSS3

    Online JavaScript/CSS Compression Using YUI Compressor
    Paste text in, upload a file, or point to a URL

    JavaScript Minification

    Online JavaScript/CSS Compression Using YUI Compressor
    Paste text in, upload a file, or point to a URL

    Web-based Tools

    Color

    Adobe Color CC (formerly Adobe Kuler)
    A free & fantastic color theme creator. Don’t choose your own colors! Use this instead.

    Software

    Web browsers

    Yes, you have to test with IE, but that doesn't mean it should be your main browser for daily use or development (not to mention, if you use a Mac, IE isn't available). Safari is fantastic for everyday use on a Mac (it’s what I use mostly), but there’s also Firefox & Chrome, both of which are cross-platform. Firefox uses the Gecko rendering engine, & Chrome uses Blink (formerly WebKit, which Safari also uses, but as of the summer of 2013 they’re going to start to diverge), so it's good to have both. And all of them have excellent tools for web developers as well.

    Mozilla Firefox

    Download Firefox

    The Always Up-to-Date Power User’s Guide to Firefox

    Firefox Extensions for Web Developers

    Google Chrome

    Download Chrome

    The Always Up-to-Date Power User’s Guide to Chrome

    Chrome Extensions for Web Developers

    Text Editors

    Brackets is a phenomenal HTML, CSS, & JavaScript text editor. it does things that no other editor does, & it’s future looks amazing.

    If you want a more general developer’s text editor, Sublime Text is an excellent choice & it’s also multi-platform (& even works well on Linux!).

    Windows

    Brackets

    Sublime Text

    Mac OS X

    Brackets

    Sublime Text

    Bookmarklets

    Viewport Resizer
    An awesome way to test responsive designs

    MRI
    Test and play with selectors

    XRAY
    See the box model for any element on any webpage

    WebSanity Top Secret