40+ Web Design and Development Resources for Beginners

ipsum imageBrian 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.

It’s no secret that web design is a fast-growing industry. Virtually every type of business is in need of a quality website. There are opportunities at the large agency level down to freelancers developing small-business websites from home.

So how do you break into this exciting field? With little or no experience creating websites, getting yourself up to speed can be a daunting task. There are so many different avenues of design and development to explore. Which way should you go first? Which skill sets suit you the best?

We aim to give you an overview of a few things things that are essential to a well-rounded knowledge of web design. These are starting-points, if you will. Below each item, we’ve listed additional resources for you to continue on in your learning process.

Before we get into it, heed one important lesson: You can’t become a professional web designer overnight. It takes years to reach an expert level in any aspect of the field. But everybody starts somewhere, and there’s no better time than the present begin your web design education.


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

adobe image

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

Adobe Fireworks (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.

Whether you’re going to be designing websites from scratch, or you’re tasked with programming a website designed by someone else, you need to know your way around these programs. You’ll need to understand the concepts of layers, selections, and saving images for the web.

Additional resources:

Design for the Web

grid image

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.

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.

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:

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:

A Content Management System

wordpress image

Once you have a solid understanding of the basic principals of web design, you will eventually work on projects that require a “Content Management System” (CMS). These systems provide the ability to manage website content using a friendly interface, rather than editing code. It’s great for setting up websites for clients who want to run it themselves.

There many types of content management systems to choose from. Some are best used for blog or portfolio-type websites, while others are geared to provide E-Commerce functionality. Some are free to use, others are commercial products, while others have both free and paid options. Many CMS systems are self-hosted solutions, meaning you install the software on your own server. Others are hosted solutions, meaning you pay to store and manage your content on their server.

It’s best to focus on just a few in the beginning, and explore more options as you become more experienced. Here are a few we recommend looking into:

WordPress (WordPress) – It has traditionally been known as a blogging platform, but has evolved significantly into a more robust CMS. Check out these WordPress resources on Mashable (Mashable):

Drupal (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 (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

palettes image

Network and never stop learning. Follow anyone involved in web design on Twitter (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 (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 (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 (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 (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 (Windows) on your Mac. This is helpful when testing websites across all browsers (something you should always do!).


Enhanced by Zemanta

Lo importante es el camino que recorremos, las metas son apenas el resultado de ese recorrido. Llegar generalmente significa, volver a empezar!

Tagged with: , , , , , , , , ,
Publicado en Design + ART + Photoshop + Image
One comment on “40+ Web Design and Development Resources for Beginners
  1. La pagina de tu Blog se ha actualizado…

    [..]Articulo Indexado Correctamente en la Blogosfera de Sysmaya[..]…

    Me gusta

Los comentarios están cerrados.

10:00 am to 05:00 pm | Mon-Fri
+5411 4954.0022 / +54 911 6259.7231
Gabriel Catalano

julio 2010
« jun   ago »

Enter your email address to follow this blog and receive notifications of new posts by email.

Únete a otros 6.188 seguidores

Being Your Brand

Branding and Strategy for Business and Life

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito


el mundo del marketing se activa para ti


fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog


La realidad alterna

Poesías, relatos, diario de sueños


Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions



Comunicación & Marketing

De Lilian Lanzieri


Dirección estratégica para la vida

Silvia Altamirano

Writing, English to Spanish

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.


Noticias de Tecnologia.

T a l e n t o  en  E x p a n s i ó n

Gestión de personas para las organizaciones líderes de la Era del Conocimiento

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

Little Grey Box

Travel & Intuitive Living

déborah rueda

Un sitio más pero diferente sobre marketing digital

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web, stat ups, emprendedores

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación


Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria


Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción


Ensalada de Manjares


Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 6.188 seguidores

A %d blogueros les gusta esto: