The 6 best online web development learning resources

Learning is key to all of us, keeping us up to date with the latest trends and information. It's important to keep one eye on what is currently happening and how this could affect or aid you in something you may be doing in the future.

These resources are mainly aimed at the development community however these sorts of online resources are available for pretty much any area of expertise required.

Sometimes it's good to have a google and find the best ones for yourself, however I've compiled a small list of my favourite and most used resources so you don't have to!

Let's start...

1. Degreed

Degreed launched in 2013 and is a community dedicated to advancing your education. 

When you join Degreed, you get tools to help you track, organize, share, and validate everything you learn.

It's really easy to create a free profile which lets you set up a range of topics that you are interested in learning more about. Degreed will curate a list of reading material every day, and charts what skills you are progressing in and when.

Keeping you engaged and with great articles that you won’t necessarily find elsewhere it’s good to check in and see what’s being offered.

2. Asp.Net

ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.

With a overhauled site that now clearly separates out current news/ announcements with learning material, including great video tutorials and articles guiding you through the latest Microsoft technologies. 

There is also a great forum where the community will help if you are struggling with any concepts, so jump in and ask.

3. Channel 9

Channel 9 is a great resource that brings together learning materials for Microsoft technologies. With hundreds of videos guiding you through each step of the development life cycle it's a great place to learn all aspects of coding, from humble beginnings to the advanced expert coding standards, tips and tricks.

4. .Net Tuts

Net Tuts is a great place not just for web design and web apps but also for photo, video, music and games articles and tutorials.

It does have an alternate paid for subscription that offers more content but the free tier offers more than enough material to keep you informed with current developments in your field.

5. W3 Schools

Listed as “The worlds largest developer site” W3 schools is a great place for simple and concise coding examples for tried and tested coding practices. This is the place to come if you have forgotten a simple bit of syntax or for a beginner to come in and get some easy to understand and useful examples which you can try yourself and play around to see different outcomes.

More centred around beginner tutorials it’s a great place to come when first starting out, but having visited many times for a quick refresh of a topic it’s a vital resource that couldn’t be left of the list.

6. Smashing Magazine

A great collection of resources, articles and pieces of inspiration. Smashing magazine has so much information across a range of topics it’s a great place to see what’s currently trending in the developer scene. 

With sections on Coding, Design, Mobile, Graphics, UX Design and CMS Frameworks such as WordPress it’s bursting to the seams with useful information. 

Including a great weekly roundup listing the essential reading materials for each section it’s an important resource to visit frequently, to get any information you may have missed. 

Being really well optimised for mobile devices, checking it out on the commute is never a problem, or a chore. 

I hope you find this list useful, let us know of any others, and your favourites.

SEO Top 10 Free Online Tools/Resources.

Search Engine Optimisation can be a chore. Here are my 10 most useful online resources to help with your page speed, page rank, link info and keywords. Each of these online tools have helped me improve my pagerank and many others too!

In no particular order:

1 - TextAlyser

A simple free lightweight app that takes your url and tells you your keyword density as well as giving link analysis , lexical density and a readability index. Very easy to use, quick and useful! All the things you need.

2- RanksNL

Another keyword checking tool, one I use a lot! Gives you a run down of your most important words and phrases and their locations on the page, prominence and keyword density. Plus its fast and the site also has lots of other tools which you may find useful such as google positions, links in and out of your site. Put this one to the top of your list. A free-sign up also lets you skip the nasty captchas that are spread throughout to counter bots.

3 - Google PageSpeed Insights

SEO is not only about keyword density and credible backlinks. Your website page speed and efficiency is something that google and a lot of other search engines take a lot of interest in. What good is them putting your website first if it takes 10 seconds to load, people would have left by then.

This useful tool checks your website structure and lets you know where you can improve.

Being that:

• Minifying your js and css files
• Leveraging browser caching including your images and resources
• Optimising and shrinking the size of your images
• Enabling compression
• Combining smaller images into a single sprite.

Are all things which are quick and easy to fix, you just need to know what they are and how to do it. Pagespeed Insights gives you both bits of information!!

4 - Google WebMaster Tools

Webmaster tools is a great tool for finding out how google is doing indexing your site. Basically this gives you all the information you need to see how your website is coming along.

It shows your most used and important keywords, you can upload a sitemap to google so they can index your site, you can check your rankings across certain keywords and you can see how many times you've been included in search results. All the information is provided in simple bit size chunks and is very easy to keep track of.

Webmaster tools also contains additional tools such as a Structured Data Markup Helper in case you want to add structured data but are not to savvy on how to implement it.

5 - Page Rank Checker

A nice simple site that in one simple step will tell you a websites pagerank! What else could you want?
Facebook and the BBC websites are given a 9 so expect your site to be somewhere in the range of 1-6

6 - Alexa

Alexa is the leading provider of free, global web metrics. Although not for everyone Alexa does provide another view of sites linking your content. And just for that it's worth your time.

7 -  W3C Link Checker

8 - Google Analytics 

Another entry from google! Google Analytics is a must, giving you details about traffic coming to your site, you can also link analytics with webmaster tools to give you search query data in your analytics window!
You can see how people are using your page, which links they are clicking on, duration on the site and bounce-rate.

All very important information that can help you decide what needs changing on your site

9 -WooRank

A fremium tool that lets you query one website a week! But that one can give you a lot of good advice!

Giving you a list of top priorities and also information on how to fix them this tool is a great one to start with to see where you are.



10 - Google Adwords Checker

Adword checker is a great tool to use to see if you are missing out on lower priority keywords that you are a part of. Simply enter your website url the category your site/business falls under and a keyword or phrase which you currently use. The checker will then show you how many search results are made every month with the given terms and show you alternatives that might benefit you and raise your rankings!

Also very useful for picking up trends, new words and areas that searchers are looking into.

Martin King Carpets website has gone live!

New Site Launch

Design Puddle has recently finished production of a new website for Martin King Carpets .
 
Martin King is an experienced carpet fitter with years of experience. Wanting to take his business to the next level I have been asked to revamp his fledgling website and create a fresh new design and feel to bring it into the new age.

Working with a minimalistic design that has been tailored to showcase his work and create a calm easy to view webpage with minimum fuss and maximum polish.

Completely bespoke using only a lightweight Jquery plugin and some simple new CSS3 features and transitions this site has been molded to the users requirements and showcases his work while maintaining a very professional and sleek look.

For a closer look into what was done please visit http://www.martinkingcarpets.co.uk

Front Page of new site

For any further information regarding the creation of the site or how things were done please visit http://www.designpuddle.com and feel free to contact me directly.

An Introduction to Rich Snippets - Event and People tags

Rich snippets / Structured data helps nearly all search engines understand what content is on your site and will be used to display rich snippets in your search results. Rich snippets are not for everyone but it has been said that incorporating them into your websites could yield higher rankings and therefore are worth looking into.

You can add structured data to your websites by using special keywords in your html markup.

This blog will go through a few examples of this markup and how it will affect your search results and how to add it to your site.

The snippets we will run through are Events and People

Events

To create an event tag similar to what we see above we will have to make a few HTML changes. Events are useful for musicians, pubs, clubs, festivals, theaters, museums, cinemas etc to let consumers know with a brief glance who is performing / showing where when and for how long. First of all you will may need to alter the structure of your HTML to wrap your events in a div with the syntax:

<div itemscope itemtype="http://data-vocabulary.org/Event">

inside this you can add your event summaries, times and locations. To do this you simply once again have to alter your HTML.

Use the keyword "ItemProp" within the corresponding tags to add the information into your search results rich snippets.

<span itemprop="summary"> ## Enter Summary Here ## </span>

The times uses the new HTML5 syntax where you add time into time tags, these are just the same as span or p tags but give browsers more of a description as to what information is kept within. Use the StartDate and or EndDate tags to show the information you want to display.

<time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>
<time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time> 

Finally we have the location tags, wrap your location in a span tag with the following syntax

​<span itemprop="location" itemscope 

itemtype="http://data-vocabulary.org/​Organization"> 

<span itemprop="name"> ## Name of Location ##</span>
     ​<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">## Street Address ##</span>, 
         <span itemprop="locality">## Town / City ##</span>, 
         <span itemprop="region"> ## Region ##</span>
     </span>

Using this syntax a rich snippet similar to the above image will be shown when you have users viewing search results about your site/ pages.

People

Very similarly to the events example above but probably a little easier to understand are the people tags. This is useful if you post a lot of content online and is very similar to how journalists end their columns. It gives the reader a sense of knowing the writer and also sometime attracts click throughs if they have read content from you previously. First start off opening a div tag with the following syntax:

<div itemscope itemtype="http://data-vocabulary.org/Person">

Inside here you can add span tags with itemprops such as name, url, affiliation and can even add a small photo of yourself below your search results. Set your name against the name span and a URL to your site / blog in the URL keyword, if you are working for an affiliate you may also add that too.

<span itemprop="name">## Name ##</span>

<a href="http://www.example.com" itemprop="url">www.example.com</a> 

<img itemprop="photo" src="## Location of Image ##</img>

Always remember to close off your original DIV tags to make sure your HTML is valid!

 

Once you have added your rich snippets, it may take a while for them to appear in the respective search engines. Google webmaster tools which is free to use has a tool that can check them straight away. The search engine crawlers will then add them to the search engine for definite once it has re-crawled your site. Do get to this visit http://www.google.com/webmasters/tools/richsnippets you may need to log in.

Schema.org is a website that goes through all of this syntax and markup in much more detail and I would recommend visiting it for more information on this topic.

Likewise for more information on this or any other topic please visit http://www.designpuddle.com and feel free to contact me.