There is no doubt that Web design can sometimes be a little intimidating, not only is there so much to learn but the environment is ever changing and it seems as if every day there is something new that you need to learn if you want to stay up-to-date. Don’t know where to start? Don’t worry we have compiled some of the best resources on the web for learning web design. Some of the suggestions offered here are free while some come at a small cost. Some focus only on HTML while others will teach you anything from HTML, CSS to jQuery and everything else you could possibly imagine.

#1. W3Schools

Your first stop on the quest for learning HTML and CSS should really be W3Schools, if you have never heard of this site then you are missing out on some great tutorials. At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.

#2. Webdesigntuts+

Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. They publish tutorials that not only produce great results and interfaces, but also explain the techniques behind them in a friendly, approachable manner.

#3. netmagazine.com

.net magazine, is stuffed with great tutorials on pretty much anything you can imagine, need a tutorial on HTML, CSS, JavaScript, jQuery, then they are your go to guys. Even though some of their tutorials are aimed at intermediate to advanced web designers, the offer is really great.

#4.  Lynda.com

Lynda.com offers a wide range of video-based tutorials that can teach you pretty much anything about web design, as well as pretty much everything else for a monthly fee. An authoritative source of web design training videos, you can get a taster by checking out its free tutorials.

#5. Smashing Magazine

Smashing Magazine is really a fantastic resource of tutorials on all aspects of web design. Similar to .Net magazine, the lessons are aimed at the intermediate to advanced end of the web design spectrum.

#6. Quackit

Quackit teaches beginners how to create websites. According to the website they start off slowly, teaching you the basics such as HTML and CSS. Then slowly they introduce you to more advanced topics so that you can add more features to your website.

#7. Codecademy

Codecademy describes itself as the ‘easiest way to learn how to code’ and has established a great reputation for itself within the web design community. Codecademy is a team of hackers working hard to build a better way for anyone to teach, and learn, how to code. We’re determined to succeed in realizing our mission to turn a world of tech consumers into one of empowered builders.

#8. Treehouse

Treehouse is a video-based service, where you can learn to build websites, create iPhone and Android apps, code with Ruby on Rails and PHP, or start a business. The extensive Treehouse library of step-by-step video courses and training exercises will give you a wide range of competitive, in-demand technology skills that will help you land your next dream job or build your startup idea. No experience? No problem!

#9. Mozilla School of Webcraft

In School of Webcraft you can earn badges backed by Mozilla, that highlight your technical and community skills to your friends, colleagues and potential employers. School of Webcraft Badges are easy to display on your personal website, online profiles, and CV and use the Open Badges framework, a way to record, track, and display your skills and knowledge across the web. The site offers a host of free web design training courses, including ones in CSS, PHP, and HTML. What’s great is that they also offer courses in Spanish.

#10.HTML Dog

What makes HTML Dog different to most other HTML guides and tutorials out there is its focus on best practices. “Web Standards” are at its heart, which, to cut a long story short, is all about using technologies, such as HTML and CSS, in the right way.

#11. CSS-Tricks

CSS-Tricks actually a blog run by web designer Chris Coyier. He covers the latest CSS techniques. Recently it has become immensely popular among professional web designers. What makes this site so great is that it is constantly updated source of tips, tutorials, and video lessons, best of all its Free.

#12. Learncss.tutsplus

30 Days to Learn HTML & CSS was created because they believe everyone has the right to learn how to build wonderful things on the web. The course is 100% free and always will be, no strings attached. It is instructed by veteran web developer and trainer Jeffrey Way, and brought to you by Tuts+ Premium.

#13. Udacity

Whether you want to learn how to build a simple web site or something as complex as your own search engine Udacity offers everything. With Udacity you can learn a whole bunch of new and interesting things, and best of all the training is absolutely free and is led by expert professors from Stanford and the University of Virginia.

#14. HTML.net

HTML.net provides guidance and help about designing and developing websites. They offer tutorials on everything from HTML, CSS, PHP to JavaScript, their motto is they will get you up and running in less than an hour.

#15. About.com

About.com has tutorials and how to guides on pretty much everything from changing a tire to changing a diaper, and of course they also have a plethora of different tutorials and guidelines for learning HTML and CSS online for free.

...

The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?

New Content Tags

One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the <div> tags from HTML4 with additional functionality

Tag: <header> Page Function: Similar to <h1>, <h2>, etc., but can also contain a logo and navigation data. SEO Function: Just as with the <h1> tags, the <header> tags inform the crawlers that the contents are highly relevant to the page content. Example:

<header> <img src = “images/company_logo.jpg”> <h1>Main Header</h1> <h2>Subheadline</h2> </header>

Tag: <nav> Page Function: The <nav> tag allows designers to separate the major navigation functions from the page content. The <nav> tags typically nest inside the <header> tags at the top of a page. SEO Function: Links enclosed in a <nav> tag inform the spiders about the major sections of a site’s content. Example:

<nav> <ul> <li><a href=”/dccomics”>DC Comics</a></li> <li><a href=”/marvelcomics”>Marvel Comics</a></li> <li><a href=”/imagecomics”>Image Comics</a></li> <li><a href=”/darkhorsecomics”>Dark Horse Comics</a></li> </ul> </nav>

Tag: <article> Page Function: The <article> tag contains independent, self-contained content. Although the content in the <article> tags can relate to the other content on the page, it can also stand alone. SEO Function: Since “content is king” for search engines, the primary target for crawlers will be within the <article> tags. Example:

<article> <h1>Superman</h1> <h2>Origin of Superman</h2> <p>Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark...

Most of the popular web search engines prioritize the sites that they index by two major criteria: content and links. The indexable content (i.e. content viewable in the source code) gives the search engine spiders material which they can store in their databases and sort according to relevance. The links within a site guide the spiders throughout the site’s architecture. In many instances, web developers ignore the importance of links in creating a site that will bring them search engine results and increased traffic.

Links and Site Structure

A major factor in developing a web site’s architecture is to make sure that each page within the site links to every other page, either directly or indirectly. While most developers include this feature when designing the site navigation system, some pages may inadvertently be left “orphaned”. If a page within the site does not have a link on another page to connect it to the main site, the spiders cannot reach it.

Links and Javascript

Some developers prefer to generate links with Javascript routines rather than with strict HTML. While these Javascript links may improve the user experience, they can hamper the site’s search engine ranking. Since spiders work on the basis of the most technically primitive browsers, they will either fail to parse some Javascript methods, or give these links less significance than they may deserve.

Links and Flash

Many designers and developers spend dozens of man-hours creating the most dynamic, most eye-catching and most dazzling Flash animations. These interactive movies can bring a site to life for a visitor. However, they can also be death to a search engine spider. Spiders typically don’t “see” Flash (or other dynamic browser plug-ins), so they won’t follow any links contained within the animations. A primitive site, with strong content and logical links, can bring in traffic rivaling that of the 1977 premiere of “Star Wars”, while a site with better effects can earn less respect from search engines than audiences gave Jar Jar Binks.

Links and Robots

One of the more problematic issues facing both web site developers and SEO marketers is the use of the “robots.txt” file. This file allows the developer to permit or block search engine spiders from crawling specific files or directories within a site. For instance, if the developer wanted to block a spider from crawling its error pages, the robots.txt file would look like this:

User-agent: * Disallow: /error

The developer can also allow a specific spider (e.g. Googlebot) to index a file or folder, while shutting out the other spiders. The robots.txt file also permits users to set permissions for files within a specific directory:

User-agent: Googlebot Disallow: /comics/DC/ Allow: /comics/DC/Batman.html

To prevent spiders from crawling a specific page, developers can add content to the “robots” meta tag:

<meta name=”robots” content=”no-index,no-follow”>

The cardinal rule for SEO links should be, “When in doubt, spell it out.”  The spiders will index the links, the site will gain more traffic, the client will make more money, and the developer will be in high demand. Everybody wins!

...

With hundreds of millions of users entering hundreds of billions of queries into major search engines such as Google, Yahoo and Bing, the importance of designing a site to be search-engine friendly cannot be underestimated. However, even the most experienced designers and developers can make simple mistakes that can cost their site thousands of views and (potentially) uncounted revenues.

HTML Issues

Sometimes, the “old-fashioned” methods are still the most effective. While many SEO experts have debated the degree of effectiveness of old-school metatags and how they affect search engine rankings, the common belief is that their presence is helpful, especially since spiders often crawl through much of the text content of each page they index.

Page Title

The first place most spiders crawl through is the page’s title tag. When a search engine finds a word in a title tag that matches the search terms, the results page displays that title in bold text. The bold text catches the reader’s eye and causes a nearly instinctive compulsion to click on that link. As the specificity of the search terms increase, so does the importance of the title tag.

Description Metatag

The next area of the page that the spiders will visit is the content within the “description” metatag. Unfortunately, many so-called “black hat” SEO specialists take advantage of this situation by spamming the title and description tags with keywords that are either tangentially related to the page’s content, or completely irrelevant but filled with “hot” keywords in order to boost traffic. Description content should be relevant, clear and precise.

Headlines and Subheaders

In HTML4, the header (<h1>,<h2>, etc.) tags specify the headlines and subheaders within content. Not only do search engine crawlers view the content within these tags as important, the tags also help the viewer find the the information they need without scrolling through the entire article. Wikipedia uses this technique to great effect when breaking down its lengthy and specific content.

Architecture Factors

While content is an important component of search engine optimization, the other key part lies in the design and architecture of the site itself. Spiders must be able to navigate through a site and index all its relevant pages quickly and efficiently. Also, the URLs that link pages together within the site can be used as search engine material.

Navigation

Since search engines view pages in much the same way as the least sophisticated browser, an overly complicated navigation scheme (or one that his highly dependent on user input) will hamper the spider’s ability to index pages. Most site architects believe that a site’s navigation structure should resemble that of a cake: two layers is good, three is better, four or more is too much.

Speed

Search engines also place a high priority on how fast a page loads. While Flash-heavy pages can produce stunning animations and eye-catching designs, they also slow down a page’s load speed. Search engines, like users, won’t wait forever for a beautiful presentation: they both want content and they want it now (if not sooner).

URL

Which link tells you more about a product? www.blahtech.com/product.asp?id=234 www.blahtech.com/moisture-balance-il-160.html Most developers understand how to assign a URL to a dynamic page. These links will enable the spiders to collect content and index the page much more quickly.

In a future article, we will address how the new tags in HTML5 will help with search engine optimization.

...

In part one of Baking a New Site With a Sprinkle of SEO, we covered some of the more important things a developer can do to help their sites find their way into the top positions of the search engines. This week, we look at more advanced steps you can take to really help catapult them up to the top.

Advanced: canonical tags

You may have heard about Google’s recent algorithm updates such as Panda and Penguin. Well, one of things Panda concerned its self about was not how much sugar cane it was getting, but rather duplicated content. When I say ‘duplicated content’ I mean content that gets copied across internal pages. A typical example can commonly be found on e-commerce sites. Let’s say you have a product which we’ll call aeroplane model (I am an aviation obsessive) which sits on the URL www.i-really-like-planes.com/aeroplane-model. Now like all good e-commerce sites, I can choose to filter, pick colour, size and all those good things. But each time I do, a very small amount of content changes on the page, but I get completely different URLs:

Original: www.i-really-like-planes.com/aeroplane-model Colour: www.i-really-like-planes.com/aeroplane-model&colour=red Colour and size: www.i-really-like-planes.com/aeroplane-model&colour=red&size=large

Essentially, all three pages (but in a typical case there will be many more, I’ve seen up to 200 in some instances!) are all duplicated. Well this confuses dear Google and they’d prefer you to specify a single URL to display to users in their results pages.

We solve this problem by specifying the canonical tag. This is a <link> element which sits in the <head> tag on that particular page. For the example above, the following code would sit on each of the above pages:

<link rel=”canonical” href=”http:// www.i-really-like-planes.com/aeroplane-model” />

If you can provide the ability to add canonical tags across a website in this way, you will greatly improve the effectiveness of the site as a whole by dramatically reducing issues with duplicate content. However, care must be taken to implement these carefully. Each canonical must be specific to each group of pages, so don’t go putting the same one on every page of the site – that will cause more problems than it will solve them!

Advanced: Next and Prev

Following nicely on from the canonical point above, we go onto another canonical element that deals with another source of SEO issues – pagination. This tag enables you to consolidate paginated sections across a site whether they are a series of posts or a category of products. This indicates to search engines that the pages are interconnected via a contextual relationship. Let’s check out an example:

An article series on your site may have a story divided into three parts, all linked via ‘next’ and ‘previous’ buttons. The URLs could be:

www.example.com/headline&page=1 www.example.com/headline&page=2 www.example.com/headline&page=3

On the first page you would include the following code in the <head> section:

<link rel="next" href="http:// www.example.com/headline&page=2" />

On the second page, you would implement this code onto the <head> section:

<link rel="prev" href=" www.example.com/headline&page=2" /> <link rel="next" href=" www.example.com/headline&page=3" />

And finally, on page 3 you would implement this:

<link rel="prev" href="http:// www.example.com/headline&page=2" />

Looking at the code above, you can see how this indicates the inter-page relationship to search engines. However, if you have a ‘view all’ option then there’s no need to implement the above solution. Google will endeavour to show the ‘view all’ page as the preferred page instead.

Advanced: Redirects

Ah yes, redirects, the bread and butter of any SEO’s day to day. You’re probably well aware of the types of redirects (301, 302 etc) so I won’t delve into that (ask in the comments if you’re not sure), but making sure you have the ability to implement 301 redirects and 302 redirects will be very useful for your website. You may need to implement a 301 redirect when:

You move to a new website You change the URLs of your site You delete pages on your site

301 redirects are excellent for maintaining the integrity of a site. Imagine if you will a website with lots of links, but the owner of the site hasn’t put in place any redirects or changed the navigational destinations. Lots of links across the site will result in a 404 error leaving a dead end for both users and search engines alike. To solve the issue, you would implement a 301 redirect to the correct URL (and in the case of navigation, fix it!). From an SEO perspective, this is also good for fixing incorrect links coming into the site from other websites, redirecting deleted pages that still carry weight which you can then direct to another relevant page. David Gitonga did a great post on redirects using Htaccess which I recommend. On a final note, I’ve always found it a challenge finding a suitable solution implementing redirects on a Windows server, so it’s worth bearing that in mind. Additionally, you want to check anything that should be a permanent redirect (via 301) isn’t actually redirecting via 302 (temporary redirect) instead as this may impact how search engines view the page. A great tool for checking these redirects can be found here.

Advanced: Sitemaps

The XML sitemap on your site (and if you don’t have one, I recommend you get one) is the road map to your content. Having one of these in place will help Google find and index your pages to enable them to show up in their search results. It’s not essential, no, but recommended. Google may well find all your pages just through the navigation and external links, but why rely on that when you can physically tell them what you want them to look at and where they can find it.

Besides having a sitemap.xml I recommend you also try to do the following:

Make sure the sitemap.xml can be easily edited If you have an automatically generated one, ensure you can make exceptions to avoid getting stuff listed that you don’t want in the sitemap.xml (like development pages, duplicate pages and pages with unfriendly URLs if you’ve implemented friendly ones) Check that your sitemap.xml removes the pages as well as adds them if it is automated Check with your robots.txt that no URLs in the sitemap.xml clash with them. In other words, you’re not telling search engines not to index certain pages in the robots.txt and then telling them to in the sitemap.xml!

As with web development, there are many many facets, tactics and techniques that can be implemented to improve rankings and general site visibility. I hope to be back soon with more, but I’d love to hear your feedback and what else you may specifically be interested in learning more about in the comments below!

...

The web development industry is one that is always growing because of how we use the web. No longer do we expect the Internet to simply host a digital pamphlet for a business.

The expectations nowadays are for a site to be rich with content, provide the means for visitors to interact and be dynamic in every interaction.

With the demand at an all time high, freelance web developers may think that there is little they could do to harm their career. Unfortunately, there are many ways that people in this industry sabotage themselves when it comes to their career.

1. Clinging to technologies

Like any industry, web developers usually work with their favorite languages, databases or platforms. However when it comes to technology, we sometimes tend to be a bit hardheaded.

Whether you prefer to work with Micro$oft, Open Sores or you are a die hard Apple fanboy, painting yourself into a corner when it comes to any particular technology is never a good thing. Be open to learning new ways to do things and you will find more doors open to you professionally.

2. Fail to network

Attending conferences and trade shows are a great way to learn about what is new in the industry, but it is also a great way to network with other developers.

Maintaining relationships within the industry is extremely important. You could find it a valuable source of referrals for clients and a support system to help you solve problems in your own work.

3. Taking on projects for family and friends

So your aunt wants to sell her fruit jellies that made her a local legend. Of course, you are the first person that is called on to help her launch the online portion of her business.

Now you are stuck with a client that can be extremely hard to please and they may be expecting you to work free of charge. Family and friends often have trouble distinguishing between personal and professional boundaries as well.

Of course if you say no, you might not be welcome when the holidays come around.

The best bet when taking on these projects is to set the parameters right from the beginning and charge a small fee. This reinforces the fact that you are actually paid to do this type of work. It also helps let them know that they are not your only client.

4. Underbidding on a project

I am sure we can all remember a time early in our careers when we underbid on a project, but it happens even to more experienced developers as well.

Whether we blame the economy, the scope of the project or the slick talking of the project manager underbidding never works out for the best. Even if we need the work.

First of all, paying you less only undervalues your importance to the client. If they see you as the cheap alternative, they won’t view you as a professional.

Secondly, underbidding seriously waters down the market. Colleagues who are fighting for every client quickly lose respect for those who undercut them every chance they get.

5. Failing to market

I have actually met web developers who don’t have their own portfolio site. That’s kind of like the doctor who smokes and eats fast food for breakfast, lunch and dinner.

Marketing your skills is a must if you want to grow your freelance business. But an online portfolio isn’t the only way you should be doing this.

Contribute guest posts to web development blogs and web sites, answer questions and solve problems for others and spend some time (and money) advertising.

6. Forgetting why you were hired

The bottom line is a developer is hired to provide a service for a client that lacks the technical knowledge and/or skills to do the job themselves.

So when they don’t understand that AJAX won’t be used to clean their web site it is up to you to educate them.

Yes, working with clients who don’t make any effort to understand the technology that powers their web presence can be extremely frustrating, it is imperative that you don’t come across as pompous or intolerant.

Of course, we would like to hear from our readers any thoughts they may have on things they feel can “damage” their careers.

...

With the progress element, HTML5 pages can display the progress of a task, for example a download or background activity. In this tutorial we will demonstrate how to use the progress element in your pages, with a simple JavaScript function updating the element as the task executes. At the moment the progress element is only really supported in Firefox, Chrome and Opera, with support developing in Internet Explorer and Safari, so you can’t rely on it just yet.

For demonstration, we are simply going to update the progress element using a JavaScript timeout. We will allow the user to start the task by pressing a button, which we will disable while the task executes, updating the progress element and a textual indicator throughout. When the task is complete, the button will be enabled again and the user can start the task over again if they wish. This is how the progress bar looks in my installation of Firefox while the function is executing:

Create a Page

Create your HTML5 page using the following outline:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

We will place our JavaScript function in the script section and the page elements in the body next.

Add the Progress Element

Add the progress element to the body section of your page, together with a little informative text:

<p>Task progress:</p> <progress id="prog" value="0" max="100"></progress>

We are starting our task progress at 0. Since the maximum value is 100, when the task is complete the value will also be 100. We will update the value from JavaScript, so this markup is purely for the initial display of the progress element when the user browses to the page.

Provide User Interaction

Let’s allow the user to start the progress of the task by pressing a button. We will also indicate the percentage of progress in a textual element:

<input id="startBtn" type="button" value="start" onclick="startProgress()"/> <div id="numValue">0%</div>

The input element will start the task executing, which will cause the JavaScript function to update the progress element. We will also update the div with the percentage indicator as the task progresses.

Implement the JavaScript

Let’s now complete the JavaScript for our task progress. In the script section of your page head, add a few variables to track progress:

//current progress var currProgress = 0; //is the task complete var done = false; //total progress amount var total = 100;

Now add the function outline:

//function to update progress function startProgress() { }

Inside the function, first retrieve references to the page elements we are working with:

//get the progress element var prBar = document.getElementById("prog"); //get the start button var startButt = document.getElementById("startBtn"); //get the textual element var val = document.getElementById("numValue");...