A New Batch of Extremely Useful Tutorials for Web Developers
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
Timed Notifications with CSS Animations
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
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
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
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
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 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
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
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
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
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
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
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
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
Create 3D Ribbons Only Using CSS3
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
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
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
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
Some cool related posts:
- Roundup: 50 Top Notch HTML5 Tutorials
- 30 Of The Best Photoshop Tutorials Released In The Last Months
- 30 Stunning Implementations of CSS3 Techniques in Web Design
- Enhance Your Website’s Usability With These jQuery Plugins
About the Author - Bogdan
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.
- 30 Very Creative Button Designs
- 25 Absolutely Gorgeous CSS 3 Based Websites
- 40 Hand Picked Photoshop .PSD Resources Which Are Perfect For Top Notch Designs
- 20 Great Watch Advertisements
- 20 Useful CSS Snippets Which Can Help You A Lot
- 80 Amazing Photo Manipulations Which Will Play With Your Imagination
- 37 Impressing Old Images From Our Past
- 30 Inspirational Portfolio Websites
- A New Batch of Extremely Useful Tutorials for Web Developers
- The Psychology of Color in Web Design