The Internet is constantly growing and there are hundreds of thousands of collective resources for upcoming web developers. From online articles, tutorials, tools, guides, to videos, you can learn just about anything over the Web. It has really never been easier to jump online!

Below I’ve put together a huge collection of some very helpful web developer resources. These include beginner’s material for HTML5/CSS3 along with more complicated theories for JavaScript and PHP programming. It’s possible for a couple of enthusiastic developers to study these languages and build wildly popular web applications similar to Twitter or Tumblr. If you have an interest in helpful assets for modern web developers then you’ll love this compilation of trustworthy resources.

Helpful Online Magazines

The blogging world has exploded with hundreds of thousands of new writers taking to the Internet. Many of these online blogs are focused around design & web development. You can find a lot of helpful resources by just flipping through these RSS feeds.

Depending on what type of language you code, it will determine your interest in any of these blogs. We can focus on web development and assume this includes all front-end work (HTML5/CSS3/JavaScript) as well as simple back-end scripts (PHP/RoR/Python/SQL). I’ve taken the liberty of constructing a single list of the most popular dev blogs which focus on both front-end and back-end code.

• Nettuts+
• 24 Ways
• Webmonkey
• Smashing Coding
• Webitect
• Inspect Element
• Cats Who Code
• Line25 Web Design Blog

There are certainly many others to consider. I recommend hitting Google in search of tutorials and articles on your preferred dev language. Then using an RSS feed aggregator like Google Reader you can set up lists of all the latest articles from these magazines. This is a great way to start your workday, or even to kill a bit of time chugging through tutorials.

jQuery Plugins Galore

Both the jQuery core library and jQuery Mobile have gained a lot of traction in the past year. These open source libraries work to design a front-end experience full of rich animation and easy-to-implement Ajax features, although the mobile library hasn’t quite caught up with its parent in terms of plugins and third party code.

Similarly another fantastic product bgStretcher can be used as a dynamic background script. It will take a series of images, and some scaling of the sizes proportionally to your user’s screen resolution. Check out the wonderful demo to see this in action. Both of these plugins are free to download, and behave as simple examples for the awesome 3rd party code built off jQuery. Working with these resources will save you loads of time on project work so you don’t have to re-invent the wheel.

In general I also recommend browsing the websites Ajax Blender and Dynamic Drive for JavaScript code snippets/plugins. The library isn’t huge but it’s constantly growing from new user-submitted content. The sites includes not only jQuery plugins but also MooTools and Prototype libraries.

If you do end up working with the jQuery Mobile library I want to recommend another tool jqmPhp. It’s a dynamic PHP class where you can reference simple functions to output lines and lines of HTML5 code powered through jQuery Mobile. It’s honestly the easiest way to prototype dynamic mobile apps built around a PHP shell. The site blog has plenty of example references to dig through.

Building in HTML5 & CSS3

When we talk about front-end web development, it’s generally all about efficiency. You don’t have the same problems building a website in HTML/CSS as you would coding a back-end Ruby application. There is no real logic or error handling in HTML – it’s mostly about how quickly you can scale a layout design properly in all browsers.

First I have to start by recommending the HTML5 Boilerplate. This is a stripped bare-bones template which includes all the “standard” HTML5 webpage elements in one package. This includes a default stylesheet, JavaScript, favicon, Apple touch icons, and plenty of other goodies. It’s a 100% free project and you can even contribute on their Github repo. This is a must-have resource for all developers before starting on any serious web project.

Now if you work off this boilerplate then you have the option of adding all your own custom code. But I suggest taking the next step and building with an app such as Initializr. This will generate a typical website layout and even allow you to customize which elements are included inside your boilerplate package. Google Analytics code, minified jQuery, .htaccess or web.config files, plus about a dozen other options are available.

CSS Designers

Now that we’ve looked a bit into HTML5 coding we should also consider some of the popular CSS3 frameworks. These are more open-ended than HTML templates since you can do so much more with CSS. Designers will also realize the difficulty in building standards-compliant code for all modern web browsers.

The Golden Grid System is fantastic as a framework on responsive web designs. These layouts will adapt to mobile screens and fold inwards as you resize the browser window. It also helps with planning the width and size of each column area. Blueprint is another handy CSS framework you should check out. It’s great for building custom websites and offers fantastic documentation.

When it comes to CSS tools, however, CSS3 PIE has to be in my top three favorites. It’s a simple web app which outputs the proper code to render CSS3 effects supported in Internet Explorer 6-9. You can create dynamic linear gradients, rounded corners, and box shadows with customizable settings. The site has IE examples if you want to check them out as well.

Developers will also be looking to slim down their file sizes for production. Clean CSS is one resource where you can select from numerous options to simplify your code and reduce file size. Another alternative Code Beautifier doesn’t offer as many options but may be easier to use.

Customizing Themes with WordPress

WordPress publishing is easily the most popular CMS in this era. We have seen possibly millions of new blogs and websites all powered by this fantastic content management solution. And as such WordPress developers are in high demand for building custom widgets and website themes.

The new release of Constellation Theme gives WordPress developers an easier starting point than the default templates. The new Twenty Eleven theme is very crafty and minimalist, but it can’t compete with an entire theme template built on top of HTML5Boilerplate. The Constellation WP theme even includes media queries for various device resolutions such as iPhone and iPad tablets.

Wonderflux is another WordPress theme template which isn’t quite as far along in development. It was just recently released out of beta into v1.0 along with some online documentation. This theme is a bit more complicated than Constellation which gives you more control over the layout. The developers have included custom PHP hooks, functions, and filters to make your WordPress site more dynamic.

Serious WP developers should check out both solutions to see if either one would help on future project work.

Finding Web Developer Freebies

Compared to PSDs and graphics the web development community seems a bit lacking in freebie galleries. You can always find great scripts on Github, but you’ll often have to search around and test them out yourself.

It’s difficult to find websites which offer free downloads and demos as well as script examples. My favorite new resource is CodeVisually which catalogs user-submitted development tools, plugins, libraries, and other neat things. The layout is setup like a gallery where each page includes a link to the product, demo screenshot, and some further details.

The gallery includes hundreds of examples of HTML/HTML5 template code, CSS3 libraries, and certainly plenty of jQuery stuff as well. I’ve also found this is a great website to submit your own open source code to the public. Your name is tied onto the submission, plus you can place links to your own website where users could access the code.

Web Application APIs

A very popular trend in modern web development is building off APIs as a third party app. Most of the mainstream social networking brands include a working API and documentation segment right on their website. Plus there are tons of free wrapper classes on Github written in all the major back-end programming languages.

Developers should feel comfortable working with these types of code libraries as they are growing in demand. Using the OAuth system you can quickly build up a userbase from many of these applications. I’ve listed below just a few references to popular online APIs and their full documentation.

• Twitter API
• Digg API
• CloudApp API
• Instagr.am API
• eBay API
• Foursquare API
• Dribbble API
• Github API

Take advantage of these resources on new projects whenever possible. The Web is becoming more connected and users are always flocking to the next big app. You can recruit thousands more dedicated members to your app when your visitors don’t need to register a whole new account and can instead signup directly through Twitter or Facebook.

Q&A Resources

The most beneficial experience between developers is asking questions and learning new techniques. The developer community is always so helpful to newcomers and willing to offer their expertise in many situations. If you have any struggles or specific questions on a project, search through Google for a related web developer’s forum.

I personally have to recommend joining the Stack Exchange community if you aren’t already a member. This includes amazing websites like Stack Overflow and Super User where you can get programming help on basically anything. Community members are knowledgeable in all the major web languages including jQuery and smaller PHP classes.

A neat trick I learned is to search through Google and see if your problem has already been solved. Enter a few keywords into your Google search and append the suffix site:stackoverflow.com. All returned search results will be questions from within Stack Overflow archives – if you’re lucky you may find exactly the solution to your current problem.

Testing Page Speed Online

This new tool put out by Google Developers has actually been really impressive. The app Page Speed Online will analyze your website content and generate an analytics report on your speeds. This includes possible solutions to reduce load times and keep your visitors on the site longer.

It can also help you determine problems with bounce rates and lower conversions. Google Analytics is a must for any website, but I feel that Page Speed just attains a higher level of analysis.

The report output is ranked from high-to-low priority and often includes many different items. If you understand LAMP setups and working on Apache servers then you may also consider the mod_pagespeed module. It automatically performs many of these optimizations on your website to decrease load times and cache important web data (images, icons, scripts).

The Best Developer’s Software

Between the two most popular Operating Systems, you can find dozens of programs. From graphics software to source code editors and IDEs, there are many resources for web developers to choose from. But if you’re looking for popular suggestions I recommend the following titles.

Mac OS X

Panic is a software company who created Coda – by far the best web development app for Mac. You have access to a source code editor, terminal, and FTP client where you can make changes directly to the server files. Coda additionally supports a long list of syntax highlighting for languages such as HTML, XML, CSS, JavaScript, PHP, SQL, and many more.

If however you need a free solution, you should check out Komodo Edit. The software is developed for Windows and Mac, open source, and totally free to download. It includes all the same support for syntax highlighting and plenty of similar features as Coda (no FTP unfortunately). TextWrangler is another free solution you may want to try, also just a simple text editor.

For a free FTP application check out Cyberduck on the Mac App Store. Although personally I prefer a paid alternative such as Yummy FTP or Transmit.

Microsoft Windows

The Adobe software suite always comes to mind when you think about web design and development. Windows users do have plenty of alternatives to Dreamweaver, and many of them are totally free.

Notepad++ is a great example of some open source Win32 software. The project is still in active development and releases updates frequently (almost monthly). I love their tabbed interface and support for so many additional plugins. As I mentioned above Komodo Edit is also offered for Windows XP/Vista/7, so you can try that as an alternative.

Web developers on Windows are not without an FTP client either. Filezilla is probably the most popular free alternative. For alternatives, check out our free FTP clients list along with similar tools.

Other Helpful Dev Resources

• 100 Essential Web Development Tools
• Best Of 2011: Best Useful jQuery Plugins And Tutorials
• Ruby on Rails Tutorials for Web Development Beginners
• 30 Fantastic New jQuery Plugins
• 7 Exciting Web Development Trends for 2011
• Script Tutorials – Code Tuts for Web Developers

Conclusion

So far the first quarter of 2012 has kicked off with a bang! We’ve already seen some amazing content pouring out of designers and web developers from all over the world. Professionals building for the web have so many tools at their disposal compared with 1-2 years ago.

It’s my hope that this huge compilation of tools and resources will push your methodology for better development. I love working with web developers and learning about new projects all the time. Yet there is only so much room for new resources we can include, so I’m bound to have missed a few gems. If you have ideas or suggestions for related web developer resources let us know in the post discussion area.

Related posts:

1. Eco-Friendly Design Tutorials and Resources Round-Up

What if you could see who among your friends ‘Like’d which of the pages that come out on the results you searched on Google? For example when you search for keyword ‘funny’, Google will list down search results and next to every result, you get to see Facebook ‘Like’ button together with a list of your friends who already liked the link. This may help you to open up the result based your friends’ recommendation, and if you feel like it, ‘Like’ the link as well.

This feature helps you to find out what cool things on the Web have attracted the attention of your friends, but since Google is our best search buddy, it is way cooler if you can integrate Facebook ‘Like’ button on every search results too.

There is an extension called Google +Like that allows you to ‘plug’ this tiny ‘Like’ button onto your Google search results. Google +Like is a cross-browser extension, available for Internet Explorer, Firefox and Chrome, that runs with a simple script to let you integrate the Like button on Google search.

Recommended Reading: 10 (More) Awesome Things Google Search Can Do For You

Adding Google +Like to browsers

If you are using Internet Explorer, Firefox or Chrome, head over to the Google +Like download page and click on the ‘Get Google +Like’ button.

Now if you are using Chrome, click ‘Continue’ at the bottom left of the browser to allow the download of the extension, and proceed with install.

Once completed, open Google search and search for any keyword, you will see a ‘Like’ button appear just next to your search results, and on the right sidebar, you will see athumbnail list of your friends who already liked the links.

Conclusion

When we do any search on Google, it’s quite hard to skip to which result would be best to look up. With this ‘Like’ integration, it adds the factor of recommendations based on previous Likes by the people you know on Facebook.

Related posts:

1. How to Rename Facebook Page Vanity URL [Quicktip]
2. How to Customize and Beautify Facebook Chat [Quicktip]
3. How To Find Out who Unfriended You on Facebook [Quicktip]
4. How to Setup Messages + Facebook Chat in OS X Lion [Quicktip]