With the tools available to us in search engine optimization, such as rich snippets, media queries for responsive design and sophisticated conversion tracking, the line between SEO and development continues to blur. Keeping that in mind, I’ve compiled a list of resources I’ve used in the past to learn HTML & CSS, WordPress and jQuery & JavaScript.

HTML & CSS

W3Schools: W3Schools is a resource given to us by W3C, the consortium responsible for maintaining standards for HTML, as well as most other languages used for web design and development. Nothing can be better than going straight to the source when trying to learn a new skill.

From the homepage, the site offers tutorials on various coding markup, including HTML and CSS. As the tutorial introduces a new HTML element, it will allow you to test using the tag and see it in action.

All of the lessons within W3Schools adhere to the most current standard of HTML (currently HTML5), and will even note if tags are deprecated as well as their compatibility with leading browsers.

CSS-Tricks: After learning the basics of HTML and then CSS with W3Schools, CSS-Tricks offers great small tutorials to accomplish styling trends, work around incompatibilities with Internet Explorer (it happens often) and recommend other tools for creating the best designed website you can make.

Be sure to check out the “Snippets” section of the site to add new tricks to your portfolio as you start creating and producing websites.

WordPress

WordPress Codex: Similar to starting your journey into HTML & CSS, I always suggest starting with the WordPress Codex for anyone interested in learning about the #1 content management system. My main reasoning is that going to the source will educate you on how the platform is originally meant to be used, in addition to only teaching what’s up to date. Learning past tactics or rules can be very confusing if you haven’t already established your base of knowledge.

The Codex may seem daunting at first, but it does offer broken down sections that any level can begin to gain understanding of the WordPress management, architecture and even theme and plugin development.

WPBeginner: WPBeginner is a great resource to go along with the Codex. At times, the Codex will describe items in a very drawn out way that only established programmers may be able to understand. WPBeginner offers a glossary of terms and then gives real life examples of those items at work to help with understanding the different elements that the Codex may reference.

This site also offers a wealth of quick tutorials for common problems with WordPress, such as managing robots.txt files and compressing images for site speed.

jQuery / JavaScript

CodeAcademy: jQuery is a library of JavaScript functions that is commonly used for supporting web design. CodeAcademy offers free online lessons (yes, FREE!) for learning a lot of these basics, but their jQuery track is one of the best I’ve found thus far. This program will show you neat tricks like show and hide content on click, display the date and time and changing the styling of HTML elements.

W3Schools: After getting the basics down with jQuery, move back to W3Schools to learn more about JavaScript rather than just the functions supported in the jQuery library. Most design items you’d want to add into your website can probably be found in jQuery, but knowing its parent will only further your abilities overall. The biggest benefit from gaining deeper understanding from JavaScript is for diagnosing when certain functions aren’t working or triggering at the right time.

JSFiddle: While JSFiddle doesn’t offer tutorials, this is a great tool to use when you want to try out what you’ve learned. The tool is broken down into four panes, with a sidebar of options. The panes allow you to enter HTML, CSS and JavaScript with the fourth rendering what you’ve submitted. From here, you can test and play with your content and functions for learning or diagnosing issues.

The sidebar allows users to select particular JS frameworks and HTML if you’re doing more sophisticated testing with functions.

General Resources

Stack Overflow: Once you begin to code, whether it’s for SEO, design, or creating amazing applications, Stack Overflow will become your new best friend. This site serves as a massive Q&A Forum for developers around the world. If and when you run into a problem, chances are you’ll find the answer you need on Stack Overflow either from someone already asking the question, or posting the question and getting responses yourself.

As a rule of proper etiquette, before posting a question, be sure to do a thorough search to see if anyone has asked the question before.

Team Treehouse: Team Treehouse serves as an online learning community with programs offered to focus on particular skill sets. While many of these online courses exist, I’ve had the best success with Treehouse. The price point is fair at $29/mo for unlimited courses. Of course, you’ll only get your money’s worth if you’re active. Luckily, Treehouse includes gamification for motivating you to continue going, with story vignettes being your reward as you hit certain milestones.

Their courses range a full gamut of skills, from basic HTML and CSS to building media queries for responsive design and even to developing mobile applications. The courses are taught in small segments, complete with a “playground” to test the code you learned about in the preceding video.

The best part of Treehouse is that when you’re done with a course, you’re left with documents and examples of work to add to your portfolio, or to build on in the future. For example, you’ll build a simple website in the HTML Foundation course, then create CSS styling for it in your program. The same site can then be used when you learn about responsive design and how to make it mobile friendly. This building on top of what you’ve done instead of starting fresh helps you understand the process from start to finish.

As you’ve started learning to code to better understand SEO, what tools have you used? I’d love to hear what you find helpful in the comments below, or tweet me @SamTorresSEO.

By: Samantha Torres