Getting started with HTML, CSS, PHP or jQuery can seem like a daunting task for many beginners. Some people think you need to go to school for these subjects but as many of you already know, there is an abundance of free resources to get you well on your way to becoming a pro in any of these subjects. Here are some killer tutorials and screencast series which cover the most popular topics (HTML, CSS, PHP and jQuery).
Resources for Help
Before you get started on any tutorials, do yourself a favor and bookmark these websites. When you get stuck and need help, these resources can really be a life saver.
W3 Schools is a huge resource for tutorials, references and lots more. When you’re stuck, do a quick search here first as it’s very likely you’ll find what you’re looking for. I can’t tell you how many times I’ve been asked for help on HTML, CSS or something else and end up pointing the person in need to W3 Schools. Visit w3schools.com
If you’re not familiar with Google or search techniques, you might want to take some time to learn how to use search engines like Google. When I need to know something or someone asks me something I don’t know, the first thing I do is Google it and I find the answer 90% of the time within 10 seconds. The great thing is people think I’m really smart but I actually just know how to use Google.
If you’re not on Twitter yet, you probably should be. At first you’ll wonder what Twitter is and how to use it but don’t worry, you’ll figure it out soon enough. What you need to do first is setup your profile and start following important blogs, resources and people pertaining to your interests such as web design and development. Here’s a few to get you started.
So you’ve designed a few websites in Photoshop already and you’re ready to jump into HTML and CSS. My personal opinion is that the best way to learn HTML and CSS is to jump right into real world examples. These tutorials will walk you through the process of taking your Photoshop design and turning it into a HTML and CSS website.
Converting a Design From PSD to HTML
This is a great screencast where Jeffrey Way shows us how to convert a Photoshop design into a fully functional HTML website. If you’ve just started learning HTML and CSS, this is a must. Visit Tutorial
Here are a few more excellent PSD to HTML tutorials.
- Slice and Dice that PSD – Nettuts.com
- Converting a Photoshop Mockup – CSS-Tricks.com
- Coding a Layout – erraticwisdom.com
- From PSD to HTML – partdigital.com
- From PSD to HTML, Building a Set of Website Designs Step by Step – Nettuts.com
Examples and Tips for Great HTML/CSS Formatting
“An overlooked aspect of websites is the formatting of HTML and CSS documents. This affects validation, SEO, and visual ease of use. Visual ease of use is the last thing most authors tend to keep in mind, but it’s still very important. If you’re building a template for a client, or to sell on ThemeForest, it is important that it’s visually formatted properly. Here are some examples of well formatted HTML and CSS.”
Visit Tutorial by Jarel Remick
15 CSS Tricks That Must be Learned
“As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme. “
Visit Tutorial by Drew Douglass
10 Reasons Why Your Code Won’t Validate (and How to Fix it)
“W3C validation isn’t very forgiving at times, but it allows you to see errors that are generated by your markup. Lots of errors and warnings thrown by the validator are a good indicator that your XHTML isn’t in very good shape, and might not look consistent across different browsers. Here are 10 sneaky validation problems that trip developers up, and how to avoid them.”
Visit Tutorial by Glen Stansberry
WordPress isn’t a web technology by itself but rather a combination of HTML, CSS, PHP and jQuery. It is, however, the most popular blogging platform and one you’ve most likely heard of. When you’re ready to learn how to use WordPress, these tutorials will teach you what you need to know.
WordPress for Designers Series
If you want to learn how to work with WordPress, one of the best places to start is by watching this series of screencasts. Okay, so this isn’t one tutorial but that’s what I’m calling it since it’s one big series covering one subject, WordPress. This series isn’t finished yet either so make sure you subscribe to the ThemeForest blog to keep up to date on new screencasts as they arrive (and tons of other great stuff).
WordPress for Designers by Drew Douglass
- WordPress for Designers: Day 1
- WordPress for Designers: Day 2
- WordPress for Designers: Day 3
- WordPress for Designers: Day 4
- WordPress for Designers: Day 5
- WordPress for Designers: Day 6
- WordPress for Designers: Day 7
- WordPress for Designers: Day 8
- WordPress for Designers: Day 9
- WordPress for Designers: Day 10
- WordPress for Designers: Day 11
- WordPress for Designers: Day 12
- WordPress for Designers: Day 13
- WordPress for Designers: Day 14
The Best PSD to HTML to WordPress Video Series
Learning how to go from your Photoshop design to HTML then to WordPress seems like an impossible task for someone just starting out. Thankfully Jeffrey has created a killer screencast series that makes this task easy and teaches you how to do it like a pro. If you already know how to complete this task, you might still check it out as it could really help improve your skills. You’ll have to sign up for Nettuts+ but this is far cheaper than buying all those books or spending hours searching for bits and pieces of the puzzle. Plus, you’ll get access to the amazing tutorials and content across the whole tuts+ network! You can join here.
Visit Tutorial by Jeffrey Way
Top 50 Wordpress Tutorials
“As a web developer, you can broaden your potential client base and add value for existing clients by listing ‘Wordpress’ as an area of expertise. Of course, unless you want to bluff your way through jobs, you’d better have the skill to back-up that claim. This collection will help.”
Visit Roundup by Glen Stansberry
More Great WordPress Tutorials
- 9 Useful Snippets for Your WordPress Functions
- Display Your Recent Envato Items With WordPress and the Envato API
- Take Your WordPress Theme to the Next Level
- A Crash-Course in WordPress Plugin Development
- New Plus Tutorial: WordPress, Beginner to Master
- Top 50 WordPress Tutorials
jQuery for Absolute Beginners Screencast Series
Just like the title says, this screencast series is for absolute beginners and will teach you how to get started without knowing a single thing about jQuery. When you’re done with this series you’ll know enough to do all sorts of awesome stuff with jQuery.
- jQuery for Absolute Beginners: Day 1
- jQuery for Absolute Beginners: Day 2
- jQuery for Absolute Beginners: Day 3
- jQuery for Absolute Beginners: Day 4
- jQuery for Absolute Beginners: Day 5
- jQuery for Absolute Beginners: Day 6
- jQuery for Absolute Beginners: Day 7
- jQuery for Absolute Beginners: Day 8
- jQuery for Absolute Beginners: Day 9
- jQuery for Absolute Beginners: Day 10
- jQuery for Absolute Beginners: Day 11
- jQuery for Absolute Beginners: Day 12
- jQuery for Absolute Beginners: Day 13
- jQuery for Absolute Beginners: Day 14
- jQuery for Absolute Beginners: Day 15 – Part 1
- jQuery for Absolute Beginners: Day 15 – Part 2
Visit Tutorial by James Padolsey
Visit Tutorial by James Padolsey
You Still Can’t Create a jQuery Plugin?
“It’s tough. You read tutorial after tutorial, but they all assume that you know more than you actually do. By the time you’re finished, you’re left feeling more confused than you initially were. Why did he create an empty object? What does it mean when you pass “options” as a parameter? What do “defaultsettings” actually do?”
“Never fear; I’m going to show you exactly how to build your own “tooltip” plugin, at the request of one of our loyal readers.”
Visit Tutorial by Jeffrey Way
More Great jQuery Tutorials
- Creating a jQuery Word Counter
- Build a Better Tooltip with jQuery Awesomeness
- Building a jQuery Image Scroller
- Build an Awesome Popup jQuery Calculator
If you went through any of the WordPress tutorials you’ve probably already learned some PHP. When you’re ready to start using PHP for other things such as web applications or even just to add some functionality to your existing HTML/CSS website, this is a great place to start.
Diving into PHP Screencast Series
This is another fantastic screencast series from Jeffrey Way that will get you going in PHP. PHP is a very popular server side programming language that you’ll run into all over the place (used in WordPress) so learning even just what this screencast series covers will take you a long way.
- Diving into PHP: Day 1
- Diving into PHP: Day 2
- Diving into PHP: Day 3
- Diving into PHP: Day 4
- Diving into PHP: Day 5
- Diving into PHP: Day 6
- Diving into PHP: Day 7
- Diving into PHP: Day 8
- Diving into PHP: Day 9
- Diving into PHP: Day 10
- Diving into PHP: Day 11
- Diving into PHP: Day 12
- Diving into PHP: Day 13
- Diving into PHP: Day 14
9 Extremely Useful and Free PHP Libraries
“A lot of functionality is shared among applications – like sending emails or preventing spam. In the spirit of reusing the wheel instead of reinventing it, here are nine free web libraries that you can use in your next program which will dramatically increase your efficiency.”
Visit Tutorial by Justin Shreve
Are You Making These 10 PHP Mistakes?
“One of the best things about PHP is that it’s a great language to just “dive into”, thanks to its wide-ranging popularity. Anyone with the ability to hit “Search” on Google can quickly create a program. However, this also lends to a major criticism of PHP: it’s almost too easy to find and reproduce bad code.”
“Here are 10 PHP mistakes that any programmer, regardless of skill level, might make at any given time. Some of the mistakes are very basic, but trip up even the best PHP programmer. Other mistakes are hard to spot (even with strict error reporting). But all of these mistakes have one thing in common: They’re easy to avoid.”
Visit Tutorial by Glen Stansberry
More Great PHP Tutorials
- 7 Ways to Enhance Your Theme Using PHP
- 404/403 Website Error Pages With PHP Auto-Mailer
- How to Create PDF Files With PHP
- How to Paginate Data with PHP
- How to Build a Login System for a Simple Website
- New Plus Tutorial: How to Code a Fun To-Do List With PHP and AJAX
- Subscribe to the ThemeForest RSS Feed for more daily web development screencasts and articles.