Basic Web Design and Development Guides

While it is true that anyone can teach themselves Web design and development skills, if you want to learn good practice, you need to be a little selective in terms of the learning materials you use. In this article we'll run down some of the best quality sites for learning Web skills as a beginner to the subject. Try not to be put off by the number of areas to learn, they are not all obligatory. Once you have a couple of the technologies under your belt, you will find the others easier to pick up. Focus on one skill at a time and progress at a pace that suits you.

Web Design Basics
To get started learning development skills, you need to gain a basic understanding of how pages and sites work before creating code yourself. The W3Schools site is possibly the best single source of learning material for basic skills in all areas of Web design and development. As well as clear, simple explanations, it has interactive pages in which you can try out code yourself. There are a few other excellent resources for beginning Web development skills, including Tizag. Please also see the Tech Tutorial Links list on each page in this blog for general links to useful tech learning sites.

Here are some of the W3Schools basic guides:
Web Building Primer
Browser Information
Web Hosting


Client Side Development
Client side development is developing in those technologies that operate on the client, which means on the user's computer. Client side technologies include HTML, Cascading Style Sheets (CSS) and JavaScript, all of which run in the browser of the person using a site.

To begin with, learn to structure the content of your sites in basic HTML:
W3Schools: HTML Tutorial
Tizag: HTML Tutorial
HTML Dog: HTML Beginner

Next get to grips with styling your pages using CSS:
W3Schools: CSS Tutorial
Tizag: CSS Tutorial
HTML Dog: CSS Beginner

To make your sites interactive, learn at least the basics of JavaScript:
W3Schools: JavaScript Tutorial
Tizag: JavaScript Tutorial
Mozilla Developer Network: Learn JavaScript

JavaScript is an area with lots you can learn, with intermediate and advanced topics including AJAX and jQuery.


Server Side Development
Once you have learned the basics of client side development, if you want to continue building on your development skills, you can get started with server side development. Server side development includes scripting in languages such as PHP and ASP. It also includes data technologies such as SQL scripting, using database management systems like MySQL and Oracle, and optionally XML.

The basic principle with server side development is that you store your data in structured systems rather than within the pages for your site. The server side scripts bridge the gap between the data and your website pages, carrying out queries and updates as well as building the results into HTML code.

Learn basic PHP programming:
PHP.net: A Simple Tutorial
W3Schools: PHP Tutorial
Tizag: PHP Tutorial

Learn basic ASP programming:
W3Schools: ASP.NET Tutorial
Microsoft MSDN: Active Server Pages Tutorial
Tizag: ASP Tutorial

Learn about building, maintaining and using databases including SQL scripting and the MySQL database management system:
W3Schools: SQL Tutorial
Tizag: SQL Tutorial
Tizag: MySQL Tutorial
MySQL Developer Zone: Getting Started with MySQL

Learn how to use XML to model, store and use your website data:
W3Schools: XML Tutorial
Tizag: XML Tutorial
O'Reilly XML.com: A Technical Introduction to XML


Accessibility and Best Practice
Learning Web design and development involves more than just making the technologies do what you want them to. If you want to take a best practice approach and create successful sites, you need to consider accessibility. This basically involves making sure your pages are accessible to people regardless of their own circumstances, including the details of their computing software and hardware, as well as any issues they may have personally such as disabilities.

There are a variety of standards you can optionally observe when creating sites that you want to sustain a high level of quality. To ensure your sites adhere to these, you can validate them using online tools:
W3C Markup Validation Service

Jakob Nielsen has written many seminal guides on usability and accessibility that are well worth referring to:
Jakob Nielsen on Usability and Web Design

If you want to really get yourself up to date, consider learning emerging Web technologies including HTML5 and CSS3:
W3Schools: HTML5 Tutorial
W3Schools: CSS3 Tutorial

Finally, here are some of mine:
The Characteristics of a Successful Web Page
Web Development Concepts: Static Versus Dynamic
Good Web Page Characteristics
Why Web Developers are Excited About HTML5 and CSS3
The Vital Components in an Effective Web Page
What is Web Content?
An Introduction to HTML5 Features
What is Dynamic Content?
Web Development Concepts: Client and Server
How to Get Started with Web Development

Learning Web development is not something you do once, but is rather an ongoing process. To begin with you build yourself a foundation in the different areas, but you should ideally never stop building on it, expanding your skill set as time passes. The Web is constantly changing, so your development skills must evolve along with it.