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:

web_building_resources_01.jpg

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.

web_building_resources_02.jpg

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