Web development tools and toys
Appearance in this page does not constitute an endorsement or recommendation. USE THESE PAGES AND SERVICES AT YOUR OWN RISK!
HTML Tools and Toys
- Firefox Browser and Firebug
- Don't do web page development without them. Caution: Don't get too locked in on Firefox/Firebug - your pages need to look right (close, not identical) in both Firefox and Internet Explorer. But for just seeing how things work, you can't beat this combination. Experimentation and general fooling around required!
- ColorZilla Color Picker
- Another Firefox extension. See a color on the web that you just have to use? ColorZilla's eyedropper will show you the RGB and hexadecimal codes for it. Want to pick your own from a variety of palettes? ColorZilla's got 'em.
- Free online HTML editor
- Real-time editor displays your HTML as you type it. Use it to experiment with tags and inline styles. Or just check to see how your browser renders an H1 tag
- Free HTML Color Converter
- Handy tool for converting between hex format and rgb() formats; shows current color as page background.
- W3C Markup Validation Service
- This validator provided by the World Wide Web Consortium (W3C) checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
- HTML 4.0 Validator
- HTML 4.0 alternative to the W3C validation service above.
- Online Form Responder - Try it out here
- Use this for the "action" attribute on your
<form>tag, i.e.<form name="input" action= "http://www.gregorylane.com/formresponder.asp" method="get">.
It will work with both POST and GET methods.
Format Converters
- ZAMZAR Free online file conversion
- Requires your email address - upload a file (100MB limit), tell Zamzar what format to conver it to, check your email for a link to the converted file.
- YouConvertIt
- PC Magazine Top 100 Classic Web Sites: For audio, video, images, and docs, YouConvertIt is a dead-simple way to change the file format into something you can use.
Online References
- W3C HTML Tutorial
- Good summary of HTML. Use the left navigation to select a topic (i.e. "HTML Basic Tags" under "HTML Basic" or "HTML Fonts" under "HTML Advanced"). You might find the "HTML Quick List" handy. Also check out the "HTML Tag List" and other topics under "References" handy.
- W3C XHTML Tutorial
- Same as above for XHTML.
- Using a form to send email
- See "the Mailto form" about three-quarters of the way down the page
- 10 Hand-Picked Tutorials for Beginning Web Designers
- "So you're starting to show interest in web design, but are having trouble figuring out where to start? Want to create awesome websites, learn how to code HTML/CSS, and learn about web standards and the user experience? If so, we have a list of hand-picked Envato tutorials that should get you started on your journey! "
- W3C HTML Color Names
- For when your needs are simple and you don't want to bother with hex or RGB codes
Cascading Style Sheets (Mostly CSS2)
- CSS Cheat Sheet
- Pretty good basic CSS cheat sheet.
- W3Schools CSS2 Reference
- The essential, comprehensive CSS2 reference.
- "Safe" font-family combinations
- All font-family values should include a generic "fall-back" font to ensure that the browser uses something close to what you intended.
- CSS Tables by Robert Denton
- Shows several ways of using CSS to create different kinds of tables.
- CSS Table Gallery
- Lots of dynamic examples of sometimes weird styles. All examples simply apply a different style sheet to the same table. The style sheets can be downloaded and studied. Also some handy links under the "Learn" tab.
- WDG Guide to Cascading Style Sheets
- The Web Design Group has some outstanding reference pages.
- CSS Zen Garden
- The ultimate site for showing the power of CSS.
Javascript Tutorials and Tricks
- The W3Schools Reference
- The usual competent reference with demo pages.
- Javascript Primers (slow load)
- Three sets of pages: The JavaSript Diaries (15 parts), JavaScript Basics (12 parts), and JavaScript Primers (30 parts + Introduction). The Primers are pretty good but there seem to be a few bugs in some of the demos.
- HTML and Javascript Web Tricks
- "... an eclectic collection of weird web HTML and Javascript code snippets and stuff. You can get the standard HTML books and tutorials. This is not one of those". Table of Contents on the left side.
- HTML and JavaScript tips and tricks
- Scroll down a ways for a long list of topic links; some include demos. Ads interspersed amid the content are distracting.
- HTML, JavaScripts and picture tricks
- More interesting gimmicks. The HTML/JavaScript "User chooses background color" uses some instructive tricks.
Sites/Articles of Interest
- Top Web Developer Mistakes
- Slide show of various design problems. Click on the "Top Web Developer Mistakes" link in the last paragraph. Would using standard underlined links have made it easier to find the actual slide show? Also read the comments.
- Web Pages that, uh, are really bad
- Really bad web pages to help you learn what not to do.