HTML, CSS, PHP and jQuery Killer Tutorials

sambir — Fri, 08 May 2009 17:19:23 +0000

HTML, CSS, PHP and jQuery Killer Tutorials

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

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

Google

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.

Twitter

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.

HTML/CSS

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

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

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

jQuery

If you’re not familiar with JavaScript, it’s okay. I do recommend that you pick up a book and learn true JavaScript but if you just want to jump right in and start using some really great features of JavaScript without learning everything about it first, jQuery is a great place to start. jQuery is a JavaScript framework that will save you tons of time and is super easy to use.

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.

JavaScript and the DOM Series: Lesson 1

“While frameworks such as jQuery, Prototype and MooTools are great ways of suppressing browser bugs and speeding up development, it’s important to know and understand the underlying technologies. This series intends to tell you what you need to know about JavaScript and the Document Object Model (DOM). Even if you swear by a particular library this will still benefit you – knowing how something works under the skin can only be a good thing!”

Visit Tutorial by James Padolsey

Javascript and the DOM: Lesson 2

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

PHP

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.

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

Sambir's Weblog

HTML, CSS, PHP and jQuery Killer Tutorials