Design Superstars

A New Batch of Extremely Useful Tutorials for Web Developers

December 18, 2012 Development 1 Comment

42 Flares

42 Flares


×

As a web developer you are in a constant rush for learning and applying new things mostly because you have to stay one step ahead of your competition. We all know that reading and learning takes a lot of time, therefore the best alternative is to follow well made tutorials. This way you can instantly visualize the result and how it can be implemented in existing products. The following tutorials are very useful for web developers thanks to the wide range of features that they have. This list will help you get started on understanding and using popular things such as geolocation and they will also save you time and energy when you’ll need to actually implement them in real projects.

Creating an iOS-like Home Screen with CoffeeScript

20. web developer tutorial

 

Here you are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be familiar with JavaScript so you can better understand the concepts behind the language.

Timed Notifications with CSS Animations

19. web developer tutorial

 

A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear.

Quickly Build a Swish Teaser Page With CSS3

18. web developer tutorial

 

In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Many websites and upcoming apps gain great publicity from teaser pages, so this is a useful concept to add to your toolkit. Use it for any app or website that’s getting ready to launch.

Altering HTML and Images with just CSS

17. web developer tutorial

 

CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work.

Real-Time Geolocation Service with Node.js

16. web developer tutorial

 

A tutorial about how to create a simple real-time application that shows the locations of visitors on an interactive map using Node.js and the HTML5 Geolocation API.

Making a Page Flip Magazine with turn.js

15. web developer tutorial

 

The page flip effect used to be the quintessential Flash animation. On the web, it has powered everything from magazines to presentations, with its popularity declining over time, only to be reinvented on mobile devices as ebook reading apps.

Timeline Portfolio

14. web developer tutorial

 

Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests.

Fluid CSS3 Slideshow with Parallax Effect

13. web developer tutorial

 

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.

How to use Geolocation and Yahoo’s APIs to build a simple weather webapp

12. web developer tutorial

 

In this tutorial you will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast.

Rotating Words with CSS Animations

11. web developer tutorial

 

In this tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.

Apple-like Login Form with CSS 3D Transforms

10. web developer tutorial

 

Hey did you know that you can flip elements in 3D space with CSS3? You probably should as this has been possible for nearly two years. First only in Webkit browsers – Safari and Chrome, but now in Firefox as well. This means that more than half of the world (that use a non IE browser) can see advanced, CSS driven animations and effects. In this tutorial we will see how we can use these transforms to create an interesting flipping effect on an Apple-inspired form.

Build a one-click registration form powered by Google

9. web developer tutorial

 

Do you know that you can use Google’s services to build a one-click registration form for your web site? Everyone with a Google Account can then press a button and instantly sign up for your application with their email, name and photo. This service is called federated login, and is built on top of the OAuth2 protocol. This is a complex process that involves several data-exchange requests between your server and Google, but we will leave all this to Google’s PHP Library, whcih will handle nearly everything on the server side.

CSS3 Dropdown Menu

8. web developer tutorial

 

With the implementation of CSS3 can sometimes be unnecessary use jQuery. In this tutorial we will see how to create a simple drop-down menu and insert CSS3 transitions to make it more interactive. This tutorial is compatible with all modern browsers that support CSS3 Transitions. For Internet Explorer that don’t support the transitions you will just see a simple switch on hover

CSS3 Progress Bars

7. web developer tutorial

 

They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience.

How to Build an Option Panel for your WordPress Plugin

6. web developer tutorial

 

Create 3D Ribbons Only Using CSS3

5. web developer tutorial

 

In this article you will learn how to create a nice 3D ribbon that will make your website’s design even more beautiful.

Mini Help System with jQuery

4. web developer tutorial

 

In this tutorial, you are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted.

Create a Beautiful Password Strength Meter

3. web developer tutorial

 

In this tutorial youwill be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin. Only when a sufficiently complex password is entered, will the user be able to continue with their registration.

Fullscreen Slit Slider with jQuery and CSS3

2. web developer tutorial

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.

How to Create a Responsive CSS-only Slider

 

1. css responsive

In this tutorial you’ll create a simple responsive home page with a header embellished with a carousel where photos slide from right to left. Our solution will not require javascript, we’ll make our slideshow using css3 animations – supported by all major browsers: Firefow 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ and IE10.


About the Author -

Bogdan is the founder of Design Superstars. He is very passionate about design and web development and he's constantly searching for the most interesting things to write about on this site.

  • stacey

    As Always, great post!

42 Flares Facebook 3 Twitter 32 Google+ 3 StumbleUpon 0 42 Flares ×