10 Web-Building Resources You Should’ve Already Bookmarked

I spend a large portion of my day connected to the internet, and as a result I’ve amassed a large collection of websites and links pertaining to web development. Here’s 10 of my favorites:


1. Web Developer’s Field Guide

A collection of links that web builder Wade Meredith has created over time. A big resource list, and I go to it from time to time when I need some web development inspiration. Some categories include “inspiration”, “color theory”, “DOM”, “blogging”, and much more. The Web Developer’s Field Guide stemmed from another website by Vitalie.Friedman.


2. mycelly.com’s Nice and Free CSS templates

Here’s 12 common CSS-based layouts for when you’re in a rush or just starting out as a CSS developer. It’s great to know and understand basic layout styles such as two/three column fixed widths, two/three column fluid widths, etc. and there’s no better way to learn than to study pre-made templates.

web_building_resources_03.jpg3. Cheat Sheet Cheat Sheet by foxinni

A collection of cheat sheets organized in 5 categories: Server-side (PHP, MySQL, Ruby On Rails), Client-Side (JavaScript, CSS), Blogging (WordPress, Movable Type), General, and others.

web_building_resources_04.jpg4. CSS Sandbox

A web application that let’s you experiment with styles in real-time. Great way to preview what styles will look like.

web_building_resources_05.jpg5. Resources For Web Design

A mega-huge list of Web Design resources. Some of the topics include: HTML Tutorials, CSS Tutorials, Browsers, Search Engine Optimization, Perl tutorials, and much more.

web_building_resources_06.jpg6. DEVLISTING

Another large list of Web Development and Design links.

web_building_resources_07.jpg7. FreeTechBooks

A website that lists free online books (e-books), textbooks and lecture notes on the topic of computer science and programming. A couple of e-book examples: “Safe-Guarding Your Technology” and “Computer Animation: Algorithm and Techniques“.

web_building_resources_08.jpg8. MiniAjax

Quoted from the MiniAjax Website: “nice looking simple downloadable dhtml and ajax code.” Some of the code listed are: “Digg-like spy script”, “Reflection.js” which allows you to add a reflection effect on text just by assigning it a class=”reflect”, and “Draggable Content” which allows users to drag page objects such as div’s around the web page.

web_building_resources_09.jpg9. PSDTuts

One of my favorite blogs/tutorial sites. Showcases very high-quality Photoshop tutorials. Great instructions, great content, and I follow their tutorials to sharpen and hone my Photoshop skills — I’ve been using Photoshop for close to 8 years, but it’s always good to practice to keep yourself up-to-date with current techniques.

web_building_resources_10.jpg10. CSS Remix

A growing collection of spectacular web designs to inspire you on your next design project.

How I Come Across These Links

I mostly come across links such as these through social-bookmarking sites such as Digg.com and del.icio.us. A majority of these links I came across by using StumbleUpon (an addiction of mine!). Also, I get links from my co-workers and friends (usually through their Gtalk messages).

Connect With Me

Here’s my social-bookmarking profiles in case you want to add me as a friend:

Tags: inspiration, reference, resources, Tutorials