40+ Web Design and Development Resources for Beginners

Brian Casel is a web designer and owner of ThemeJam WordPress Themes and CasJam Media. You can follow Brian on his blog at BrianCasel.com or on Twitter @CasJam.

HTML & CSS

These are the building blocks of every web page you see. Yes, HTML and CSS are two different things, but they are completely dependent on each other. You can’t learn CSS without understanding HTML. You can’t build an HTML website without using CSS. Let me explain:

HTML is short for “HyperText Markup Language.” It makes up the building blocks of a web page. The language is composed of “tags,” which define various elements on the page. For example, a paragraph of text is wrapped in a paragraph tag, like so:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu mollis mauris.</p>

CSS is short for “Cascading Style Sheets.” CSS is used to add style and formatting to your page elements. If HTML is the framework of your house (the foundation, the beams, the bricks), then CSS is the presentation (the paint, the furniture, the decor). The concept of writing CSS is to add definition to an HTML tag, like so:

p { color: #0000ff; font-size: 12px; margin-bottom: 18px; }

The above CSS code defines all paragraphs to be blue text color (represented by the color code, #0000ff), have a font size of 12 pixels, and have a margin below each paragraph of 18 pixels.

Additional resources:

W3Schools – An excellent reference and learning resource for HTML and CSS. W3C Validator – A tool for checking your HTML and CSS to ensure it complies with professional standards for programming — otherwise known as “valid code.” A List Apart – A fantastic website about all things web design, with a focus on web standards. Net Tuts – An excellent resource for web development tutorials. Designing With Web Standards – One of the must-read books on web design, written by “The Godfather” of web standards, Jeffrey Zeldman. CSS Zen Garden – Both fun and amazing at the same time. See what types of design possibilities are possible just using CSS.

Photoshop and Fireworks

Whether you’re a designer, a coder, or both, you will undoubtedly be working heavily with one of these graphics programs. Adobe Photoshop () has been the long-time champion of web design, photo editing, and print design.

Adobe Fireworks () is a popular alternative to Photoshop. Fireworks is intended to be used specifically for web design, while Photoshop is more of a jack of all trades.

Additional resources:

10 Fantastic Photoshop Tutorials on YouTube Adobe Photoshop Support Adobe Fireworks Support PSD Tuts – fantastic blog with all sorts of cool Photoshop tutorials. How to Design a Clean Business Website With Photoshop PSD/HTML Conversion: Code a Clean Business Website Design

Design for the Web

For many folks, the first thing that comes to mind when you think about web design is programming. But what about design? Effective design for the web is arguably the most important aspect of this craft, yet it’s often overlooked by beginners.

Even if your focus is to become a programmer, it’s still important to have a basic background in design principles as this will help you to relate and collaborate with designers more effectively. Here are a few topics that are well worth your time to read up on:

Grid Design – The process of aligning page elements to an evenly spaced (invisible) grid, which makes for an aesthetically pleasing design.

5 Simple Steps To Designing With a Grid TheGridSystem.org – An excellent list of resources. 960 Grid System – Design and development tools for designing to a 960 pixel grid.

Web Typography – The art of arranging type, fonts, line spacing, and anything else that relates to the presentation of type content. On the web, there are many factors which affect this, such as varying screen resolutions and designer font serving technologies.

I Love Typography 6 Ways To Improve Your Web Typography TypeKit – A paid font service for serving designer fonts in web pages.

Usability – This is the process of designing a user experience that promotes interaction and eases the user through the site navigation and action flows. This is also related to information architecture (IA), and user experience design (UX). Here are some related resources:

UX Booth UX Magazine Usability Post

Design Inspiration – Every designer needs inspiration. There are tons of sites dedicated to listing outstanding web designs for you to browse through and formulate new and interesting ideas. Here are a few of our favorites:

Creattica Unmatched Style The Best Designs

A Content Management System

WordPress 3.0: The 5 Most Important New Features 10 Ways to Tweak Your WordPress Theme 11 Ways to Speed Up WordPress HOW TO: Get Up-to-Date on WordPress 3.0 HOW TO: Secure Your WordPress Blog

Drupal () – A very popular alternative to WordPress. Great for a site that requires many custom content types.

ExpressionEngine – Another popular CMS. Unlike WordPress and Drupal, ExpressionEngine is not an open-source project (you have to pay to use it).

Magento () – This is an E-Commerce system, meaning it provides the ability to manage products, have a checkout process, and other common features you’d find on a shopping website.

Shopify – Another popular E-Commerce system. This one is a hosted solution, which means you pay to store all your products and website files on Shopify’s servers.

This list is just the tip of the iceberg. There are many systems out there worth considering. I recommend finding one that has as strong community around it to turn to for support, plugins, and other extensions.

A Final Word of Advice

Network and never stop learning. Follow anyone involved in web design on Twitter (). Subscribe to as many relevant RSS feeds of web design blogs. Try and learn a new thing every day. Over time, all the pieces will start coming together and before you know it, you’ll be on your way!

I will leave you with a list of tools I’ve found to be extremely useful in my day-to-day work as a web design professional. I highly recommend you check these out:

FireBug – A must-have FireFox () extension, which allows you to inspect the HTML and CSS of any web page. You can tweak code on the fly and instantly pinpoint areas in your code which need editing. Great for troubleshooting display issues.

FileZilla () – A free FTP client for Mac and PC.

Panic Coda - This is my code editor of choice. It’s only for Mac. I highly recommend it.

Colour Lovers – A site for browsing and choosing color schemes.

MeasureIt – Another FireFox extension. This one helps you measure pixels on any web page. Very useful when perfecting your page layout dimensions.

Google Analytics () – This is the go-to tool for tracking your website traffic.

Lipsum – This site generates “Lorem Ipsum” text, or placeholder text for mocking up websites before actual copy is swapped in.

Comp Fight – A Flickr () photo search tool. Great for quickly finding images to use in your web design mockups.

VMWare Fusion – A mac application which allows you to run an installation of Windows () on your Mac. This is helpful when testing websites across all browsers (something you should always do!).

More Dev & Design Resources From Mashable:

- Top 10 Resources for Design Inspiration - HOW TO: Create a Pixel Fireworks Animation Using JavaScript - HOW TO: Develop iPhone Apps With Staying Power - 5 Things to Consider When Designing Your Mobile App - 7 Hackathons Around the World and the Web Read more at mashable.com