Getting started in web design can be quite difficult. For readers, there are tons of great free tutorials online. However, some people find visual instruction to be more effective for their learning style.
Instructional videos are an incredibly rich learning tool and could be just what you need to finally learn web development properly. We’ve compiled a list of over 30 excellent screencasts for beginners across a number of web technologies and disciplines.
How do you begin building a website?
The majority of developers probably start from scratch or pull in a few resources from previous sites. The more organized among us have developed a custom toolbox from which to begin a site that proves to be an essential part of their workflow.
Today we’ll discuss why you should consider building your own front end package to serve as a starting point for every single site you create.
Once upon a time I was in a rock band. When I was building our website, I naturally wanted to put some music up so visitors could listen before purchasing our songs on iTunes. After a bit of research I found out that there are a million ways you could go about it, some better than others. Sadly, after two albums and lots of good times, my band The Van Buren Regulars no longer exists. Fortunately, what I learned about embedding music lives on and is easy enough to pass along.
Today we’re going to look at four easy ways to embed MP3 files into your website. All of these methods are free and take mere minutes to implement. Let’s check them out!
jQuery has quickly made it’s way into nearly every web developer’s bag of tricks. The simplicity with which jQuery allows us to handle complicated events and perform smooth animations makes it the perfect tool for both beginners and experienced developers to add professional flair to their sites.
Several options have cropped up recently for adding custom fonts to your website by utilizing the @font-face selector. TypeKit is an exciting new player in this game because it stands out in two key areas: ease of use and richness of fonts available. This tutorial will take you through several small, super simple steps to get TypeKit up and running on your site. You won’t find any advanced techniques or scripting here, so even if you’re a novice web designer this should be a cinch!
There are times when one needs to find out which part of the world a particular visitor is coming from. There are plenty of IP-to-Location lookup providers out there, who offer this service at a reasonable cost (depending on how much detail you require).
Google’s AJAX Maps API offers this look up for you free of cost (so long your needs are non-commercial). You can even use the latitude and longitude information returned by the API to plot the user’s location on a Google Map. Nifty eh? Let’s now look at a simple example – we will be detecting the user’s location based on his IP address and rendering it on a map.
Before we begin, you might want to check out the demo.
Tired of the plain old boring login forms? How about we add some jazz! If you have ever typed in your password wrongly on your Mac, you would have seen that the login screen will vibrate and kinda shriek to indicate that the password you entered is wrong. I always found that rather cool! It’s surprising how little this trick is being used in web applications today. So, I thought I will write up a tutorial on how to get this going.
There is always a lesson or two to take away from these, and it could help you enter the New Year with a variety of new skills in your portfolio.
Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages.
I’m pleased to announce that today, in partnership with Pirolab, there’s a new jQuery lightbox script available. It has been designed and created by Diego Valobra. If you’d like to read more about the features and download the lightbox script, click through to read on.
For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.
Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.
Before I begin, let me show you how it will all look in the end.
Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity, even though there are many ways to improve their visual style. In this tutorial you will see how to create a dynamic, slide-in contact form using jQuery.
Let’s see what we’re trying to achieve with this tutorial. The image below shows the layout of our goal. In the upper right corner of the content is “Contact us” link. When the user clicks on it, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up.
Digg.com is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.
Before we get started, you may like to view a demo of the end result.
When an input field receives focus, a tooltip with a small blue icon is shown under it. On the other hand, if validation fails, an error message is shown in the same place. Both cases are shown on the screenshot below.
We are not going to recreate the entire form, but rather a few fields just to see how it works. Let’s take a closer look at the code sample. Each field row has a label, an input field, an info message and a validation message. Below you can see the HTML structure and CSS classes.
Note that, by default, both info and validation messages are hidden, which is set in tooltipContainer CSS class.
Like I mentioned at the beginning of this tutorial, an info tooltip should be shown each time an input field gets focus and hidden when it loses it. Turn this into jQuery code and you get this:
Simple, isn’t it? Now, let’s see how to handle validation messages. We are going to create fake validation just for the purpose of this tutorial. We’ll use jQuery again.
In essence, what the code above does is it shows a validation message for each field that the user hasn’t entered text in. Please keep in mind that this is not real validation, it just simulates what would happen if validation failed. You would have to implement your own logic, eg. check for mandatory fields, email address format and so on.
Ok, after pressing the sign-in button, validation messages will be shown. Signup form on Digg.com hides these messages and replaces them with info tooltips when the user starts to type. So we are missing a piece of code that will hide validation messages that were previously shown.
Let’s do it the dirty way. We’ll extend our jQuery code that controls the appearance of tooltips to hide corresponding validation messages each time an input field gets focus.
This way we have recreated the Digg.com signup form. You can check out live demo or download full source code.
You saw how to recreate the Digg.com signup form with simple CSS and just a few lines of jQuery code. However, there are a few pieces of advice I’d like to give you: