2013 has ended with a great blast and I’m pretty sure that everyone has done their countdowns and throwback blog posts, tweets and even status updates. It’s a pretty cool thing to do because you get to remember all the awesome things 2013 has given you. You look back at how bad you were design-wise last year and how well you’ve improved. With this, you get to assess yourself how much more you could exert and, in turn, how much more money you could earn. Retrospection also tells you what more could you learn. Seeing what you’re weak at will also allow you to see where you could trained. That is why self-correction and openness to new things is a great habit for a designer.
Speaking of learning, were you able to catch some of the best web design tutorials of 2013? has given a lot of trends and knowledge that made tutorials prevalent as stars in the night sky. Well, for one thing, these tutorials will teach give you new knowledge and improve on what you already know. You’ll never know; maybe one day, the web design noob becomes the ninja.
Now, let’s look back at the top 70 tutorials that rocked the web design world in 2013. Some of these, you might have seen before. Others, you might have missed. But one thing is for sure, these tutorials don’t kid when they say they will teach you new cool things. So, for those who lived under the rock last year, let’s roll!
Graphic Design
The following tutorials highlights graphic designs. It includes typography and basic web mock up designs. These tutorials are aimed at making your website look better using graphic design elements such as fonts, shapes and a lot more!
Working with Types: Typography Design Tutorial for Beginners
This one discusses the basics of typography and how to create your very first design! For beginners, this one’s recommended.
Your Logo as a Web Font Ligature
Create beautiful logos using types and not worry about CSS3 cross browser considerations (which is very, very tricky, messy and takes a lot of effort). This one shall render with better quality with the smallest effort and time.
Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]
This tutorial will teach you to create a very beautiful flat design portfolio landing page. Very easy to follow and tinker with!
PSD to HTML/CSS, SASS, CSS3, HTML5
Three of the best used platforms in web design are used in this section. This is a list of PSD to HTML/CSS tutorials and HTML and CSS tricks. Make your site look better using these easy-to-follow tutorials.
Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing [Part 1]
Talking about details, this one goes off the charts. Broken into parts, this comprehensive tutorial discusses the major facets of web design that you should know. Great for both beginners and experts.
How to Create Your Own Custom Grid System in Photoshop
Grid systems are of great help in putting different elements in a page without becoming lost in pixels. This tutorial teaches you how to use a very simple tool (a Photoshop plugin called Guide Guide) to design using grids.
Hide / Show Notification Bar With CSS3
Do you want to create a sliding notification bar? This tutorial is for you. Written in the simplest and most understandable way possible, you will be amazed at how easy it is to add a notification bar in your website design.
Web Design: How to Convert CSS to SASS & SCSS
SASS and SCSS are pretty new to some designers. With CSS still known as a very plausible and useful language, learning how to convert CSS to SASS and SCCS is not bad for some knowledge that you might use in the future. When you read this tutorial, you will see how these languages are both alike and different in many ways.
How To Style Google Maps
Putting maps on your website is great, especially for corporate clients. But styling them? That’s better. Now learn how to do this through this tutorial, and you’ll be able to look at maps in a whole new way.
Getting Creative with the Google Maps API
We’ve seen earlier how could we style maps. This one is another tutorial about this. The only difference is that it pushed further as it incorporated a lot of new elements that we thought we could never place in maps before. Amaze your clients at how you could design a map just for them.
Web Design: Equal Column Height With CSS
What bugs most designers is unequal column heights. An OC designer will have a hard time tinkering with pixels and doing trial and error computations. This becomes a major headache for beginners as they still don’t know the tricks of the trade yet. So, this tutorial becomes a must if they need to add more to their skills. Look at this tutorial to see which of your methods is easier to execute and which produces more accurate results!
How To Create a Web-Based Video Player
It’s always fun to customize all the elements you post in your website. It gives a personal touch to it. More so, you achieve uniformity in design. This tutorial is a proof of this perk. Learn how to create a web-based video player that you can really call ‘yours’.
How To Use CSS3 Multiple Backgrounds
When I first read this tutorial, I never knew that having multiple backgrounds in one div or class is possible. Well, we all have our moments of learning, don’t we? This one is a great yet simple example of this.
Creating Content Tabs with Pure CSS
In the early popularity of CSS3, this tutorial has done wonders for me. Being able to create tabbed contents easily with CSS? It’s a pretty amazing thing to know.
Fun CSS Loading Animations
I’ve talked about loading animations before and how cool they are. They make your website more fun and makes your audience do (or see) something while they’re waiting. Interested? Learn from this tutorial.
Flat UI Pro Tutorial: How To Use LESS to Create a Sign-In Form
David East gives a very simple and detailed explanation on how he created a custom sign-up form using LESS and HTML. It’s very simple and easy to follow. You just need basic coding knowledge. That’s all.
Create an e-Commerce Web Element with CSS3
Have you ever had any e-commerce customers? Or you wanted to put up one? Well, this tutorial is a good kick-start. Learn how to put e-commerce elements in any site using only CSS3!
Create a Drop Down Menu with Search Box in CSS3 and HTML
Do you want to create a very simple and elegant drop-down menu and search box? This one’s for you. With its very trendy design and easy to follow steps, a drop down menu could never be created this easier.
Learn SASS on Treehouse
“SASS is the most mature, stable, and powerful professional grade CSS extension language in the world.” So does the SASS website says. So where to learn this Syntactically Awesome Style Sheets? Nowhere else but on this tutorial!
Creating Non-Rectangular Layouts with CSS Shapes
Sometimes it’s good to deviate from designing norms. A good example of this is non-rectangular layouts. It gives a refreshing look to the over-all design of the page. Give your clients and yourself a new view by trying this tutorial out.
How To Create Flat Style Breadcrumb Links with CSS
Breadcrumbs are great tools for navigation. It lets you know where are you exactly on the website and prevents you from getting lost in the deep, dark woods. Learn how to save your viewers with breadcrumbs and learn how to do it creatively using CSS!
Bring Your Forms U- to-Date With CSS3 and HTML5 Validation
Great for contact forms, this tutorial will help you create a simple but very useful contact form. I was amazed at how it matched with any design because of its awesome simplicity.
Quick Tip: Don’t Forget the Viewport Meta Tag
Is responsive designing complicated? Or are you just complicating things out? It turns out that, most of the time, you’re the one complicating things out. Good thing you have this tutorial to clarify.
How to Customize the Foundation 4 Top Bar
Another navigation menu tutorial proves to be brilliant as it crosses over browsers and devices with simplicity, style and sense. Great tutorial.
Build a Freshly Squeezed Responsive Grid System
Using one of the many grid systems, this tutorial is aimed towards teaching designers to use grids for easy styling. This method is a very great tool, especially when doing responsive designs.
Build an HTML Email Template From Scratch
Email templates could attract more traffic to your website. Once you send your subscriber cool emails, they will be awed at how good you are and might even hire you because of this. So learn how.
Quick Tip: Implement a Sticky “Back to Top” Button
One of the greatest advancements in web design is that “back-to-the-top” button which allows you to scroll into the top of the page in a single click. This tutorial lets you create that. Put it on your website now!
Quick Tip: Using Images as Fullscreen Faux-Gradient Backgrounds
I personally love full screen backgrounds. They give professional and neat-looking feel to your website. Try this on your designs and your client will surely love them!
Circle Navigation Effect with Css3
This easy-to-navigate and use navigation effect gives a very clever method of presenting data in your website. Another quality tutorial for your convenience.
Blur Menu with CSS3 Transitions
Another amazing navigation effects, this tutorial lets you create a very cool navigation that blurs unselected links. I recommend this for designers who want to design portfolios.
Animated Border Menus
Who would have thought that you could do something as clever as this? I love this tutorial because it lets me understand the greatness and coolness of using borders with animations.
Building a Circular Navigation with CSS Transforms
The world surely is both flat and round as this tutorial proves that something amazing can be achieved by fusing two opposing ideas in the literal aspect. With different effects to tinker on and with this conveniently written article, you’ll soon adapt this in your creative outputs.
jQuery
Here’s for you guys who like to have a little bit of a challenge. Some advanced stuff! jQuery effects that will surely make your clients’ eyes pop! The list is easy to follow and comes with demos that you could download and tinker!
Beginner’s Guide to Working with jQuery Animation
This tutorial delves into jQuery animation basics and lets you understand these fundamentals while preparing you for more advanced stuff. For beginners, this is a yes-yes tutorial.
jQuery How-to: Creating and Inserting New Elements
Learn the basics of jQuery from this very comprehensive set of tutorials!
Creating Touch-Enabled Slider With SwipeJS And jQuery
With the advent of mobile touch devices, doing jQuery sliders became a little bit more complicated. As we all know, it is very easy for web designers to use jQuery slider navigations. But it becomes difficult when transforming these into mobile as the navigation icons become cluttered in the tight screen resolution. The answer to this? Make the slider touch-enabled.
Customizing Browser Scroll Bar With CSS / JQuery
Does the default scroll bar bore you? Well, good news is, you could re-design them. Learn how from this tutorial.
Building a Mobile Panel With jQuery Mobile
I first saw this mobile panel on the mobile version of Facebook. Well, for one thing, I knew that someday someone will do the re-creation of this panel. So, here it is!
How to Implement Infinite Page Scroll Effect in Static Webpages
Are you into infinite scrolling? Or do you want your design to have one? You came to the right place because I will tell you where it is. It’s right in this particular tutorial. Learn how to seamlessly feed your future viewers with content.
Smart (Auto-Hiding) Website Header & Footer Using jQuery
This tutorial discusses and demonstrates how you can build a sticky header bar that will auto-hide after a few scrolls. This is very advantageous because it allows you to achieve the ease of access capability of a sticky nav bar, and the convenience as well as lack of distraction in a regular nav bar.
Sticky Position (Bar) with CSS or jQuery
Make your sidebar and other elements on your website always visible. Avoid scrolling them together with the content through this tutorial.
Create an Awesome 3D Interactive Object Using Only Images and jQuery
Do you have a client who wants to put up an online shopping website? Do you need a 3d presentation of a product you want to place in your website? This one is perfect for you.
Creating an Immersive Slider Experience with jQuery Immersive Slider
Sliders are still a thing in the world of web design. Be creative and try this tutorial out. Your eyes will pop at the fusion of simplicity and beauty at its finest.
Creating a Parallax Scrolling Webpage Using Jarallax.js
Doing a videogame website design? Or a promotional website for a movie? Try this tutorial and let it help you using Parallax scrolling.
Create a Smooth Jump To Sub-Navigation Menu in One JS Call
Navigation is a key element to any website. If you have the easiest to navigate design, more likely, you’ll get the money. Allow your users to still navigate even within posts using this tutorial.
FancyScroll.js: Add an iOS/Android Overflow Scroll Effect
Are you a fan of Android or iOS scroll effects? Adapt them to your website and give it a feel of simplicity and professionalism.
OnePageScroll.js: Creating an Apple’s iPhone 5S Website
One page scrolling has been a think this year. With the major companies like Apple following the trend, it becomes a bandwagon design as it epitomizes the functionality of all content within one page.
Notify Better.js: Creating a Dynamic Favicon and Title
Dynamic favicons are cool. Period. It gives a flare on your designs and lets you own every bit of it. Create dynamic favicons by following this tutorial and I bet you’ll have a very good time tinkering with this.
LoadingBar.js: Adding a YouTube-like Loading Bar to Your Website
When YouTube first adapted that loading bar, everybody’s eyebrows went high and wondered if they could re-do it and adapt the design into their website. Well, we can. Here’s the tutorial.
Super Simple Text Rotator with Almost No Effort Required
Great for advertisements and short descriptions, this text-rotator will make your website more creative and adds flavor of movement and dynamism into it.
Create a Path-like Menu Button with WheelMenu.js
With the revamp of Path a few years back came a button like no other. It is very convenient and eye-pleasing. Learn how to create it through this tutorial.
Creating the New Google Play’s Multi-Level Navigation from Scratch
Reeking with googliness is the next tutorial that borrowed the design of Google play. Learn how to create this eye-candy tutorial now.
Add Depth to Flat UI with Flat Shadow.js
Use long shadows using code? Yes, you can. I didn’t believe that too. Well, not before I have finished reading this tutorial. Read and see for yourself.
Creating a Swipeable Side Menu for the Web
Learn to recreate the behavior of side menus in smartphone applications in your website design. Both designs are suited for mobile and desktop versions. Learn how this tutorial works and become fun for both mobile and desktop users!
Creating a 3D Interactive Gallery with CSS and jQuery
Imaginations are pushed further as this gallery is put into the limelight. Be amazed at how simple and yet awesome the output is. This is great for portfolio designs!
Making Draggable Webpage Elements Using jQuery
Draggable elements are very interactive. It lets your viewer see how your mind works by stretching your users’ imagination. Using this tutorial, you will learn how to put a little twist in your regular design.
Make Pretty Charts For Your App with jQuery and xChart
Want to put something analytic in your website? How about trying charts using jQuery and xCharts? Be prepared for eyegasms as you will be pampered with good-looking data.
Create a Beautiful Password Strength Meter
If you are planning to put sign-up forms, better spice it up using this tutorial. Add a beautiful password strength meter to ensure the safety of your users while adding a different look in your forms.
How to Build an iOS-Style Content Slider using jQuery
Create a cool slideshow using jQuery inspired by iOS. The good thing about this tutorial is that it allows you to drag the images to navigate them.
How to Create a CSS3 Login Form
Refurbish your log-in page through this very simple tutorial. Give your users a new look and make your website better.
Create a Sticky Navigation Header Using jQuery Waypoints
This is another cool tutorial that involves the navbar. This time, it moves a few pixels down and becomes less opaque.
Quick Tip: Embedding New Google Maps
Maps are back on track as another tutorial is included in this list. Re-tweak your maps using this tutorial and revolutionize how people navigate in real life.
Build a Dynamic Dashboard With ChartJS
This chart tutorial adds effect to the previous one as it provides with more samples and templates to choose from. Present your data using pie, line and hexagonal charts.
Draggable Image Boxes Grid
Do you have a client who wants a gallery type design? Well, this one might help you. Using grids and tiles as navigation tools, your client will surely love your work.
Medium-Style Page Transition
Showcase your posts in a totally new way using these transitions. With both simplicity and elegance, this tutorial will surely help you impress your clients, now and in the future.
3D Shading with Box-Shadows
3D-looking boxes are not an abomination in the flat design trend. In fact, adding a 3D effect in your designs will accentuate the message you are trying to convey. Learn how it works on this tutorial.
Google Nexus Website Menu
Want to tinker more on menus? This Nexus-looking menu is great for a start. It is totally refreshing to see and amazingly easy to navigate. Try it.
Caption Hover Effects
Hovers have never been this awesome. I admit that I was pretty impressed with this tutorial. Clever as it may seem to be, reading this will make you realize that it’s not that difficult to do after all.
Responsive Retina-Ready Menu
Inspired from the colors of the Maliwan Borderlands Game, this menu is both retina-ready and colorful. Try to resize the page and see if the images become pixelated.
Thumbnail Grid With Expanding Preview
Another gallery tutorial that lets you enlarge the image for a better preview by clicking on the thumbnail.
How WordPress Plugins Work
Perhaps one of the best WordPress plugin tutorials there is. This one introduces you to the magical world of plugins and teaches you step-by-step to become a plugin developer.
Killer Responsive Layouts With CSS Regions
Still in responsive layouts? Smashing Magazine gives an option using CSS Regions. Read this tutorial and become free from the limits posed by CSS elements.
Conclusion
And there you have it, guys. Seventy tutorials that highlights 2013. As 2014 comes right into our doorsteps, read these tutorials to refresh and to learn new things for the next year will surely be a bang! More tutorials to come, more design trends to be inspired from, more clients to ask for your help and hopefully, more money to fall right into your pockets.