in Development

20 Web Development Tutorials Important For All Novices

A website is not composed only from nice pictures and great content but also from complex scripts that are putting everything into place and makes the whole site work. The development of a website is not an easy task, and sometimes is a lot harder than creating a standalone application. Being a web developer is not only milk and honey because you must be constantly updated with the latest technologies and trends. When you are a beginner is even harder because you need to understand and learn the most used methods and techniques fast. Because learning requires time and you need to be very selective when you decide with what to start, I have collected 20 very useful web development tutorials vital for any novice and not only.

CSS3 Keyframes Animations Tutorial

I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :).

Create a Stylish Contact Form with CSS3 Transitions

Inspired by the contact form on Clear Span Media website I decided to recreate an effect of a letter sliding out from an envelope on mouse hover.

Saving custom fields in quick or bulk edit mode in WordPress

This code has been tested using TwentyEleven, the default theme of WordPress 3.2 but it should work consistently on other themes since it doesn’t uses anything from the theme.

Cool Notification Messages With CSS3 & jQuery

Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks. In this article, you’ll learn how to create some alert messages with CSS3 and Jquery.

How To Create a Slick Features Table in HTML & CSS

We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.

Migrating WordPress Across Hosts, Servers and URLs

Here’s a handy article for WordPress users: everything you need to be aware of when migrating a WordPress application across hosts, servers and URLs.

How to Create a Custom Facebook Share Button for your iFrame Tab

Read this tutorial and learn how to create a custom Facebook Share button to use on your Facebook iFrame tab that will allow viewers to share and post your custom content to their Wall.

10 HTML Entity Crimes You Really Shouldn’t Commit

An interesting article that covers some petty mistakes you may be guilty of committing with your HTML.

Designing and Coding a Clean Multi Purpose Website

Read this tutorial where you’ll learn how to create a fairly simple, yet stylish solution for your own small corner of the web, without having to go the extra mile.

How to Convert WordPress Theme to HTML5

HTML5 offers many improvements and cool features that can be useful while using WordPress. In this tutorial you will learn how to convert a WordPress theme to HTML5.

Experimenting with the element() CSS function

This tutorial dives into experimenting with the new CSS feature added to the Gecko engine, called the element() function.

Get started with mobile SEO

Optimise your site for its mobile audience and make the most of the mobile search opportunity: Aleyda Solis shows the way.

Spice up your personal site with jQuery

Joel Besada shows you how to take a personal site with a common text document layout, and create something far more interesting with the jQuery Scroll Path plug-in.

Play HTML5 audio in the browser

Playing HTML5 audio natively in the browser can be a challenge. Ashley Gullen, creator of HTML5 game editor Construct 2, guides you through the maze.

Writing HTML with your Eyes Closed

In between attempts to fully wrap my head around the far-stretching implications of responsive design, I like to hone my html skills. Leaving all practical worries behind, it’s actually nice to dig into something that’s fairly straight-forward, looking for ways to improve what we already (think we) know.

Creating an offline Rich-Client-Application using HTML, CSS and Java with SWT

There are a lot of frameworks out there to create offline applications and rich clients in Java. One exotic alternative is to use the HTML, CSS and Javascript for this purpose and render the application in a Java frame using SWT and SWT’s browser component.

20 Ways to Lose Your Visitors

The main area where a Web Designer have to focus when building a web site is with its user interface, the site must deliver a good user experience, which includes content readability , site navigation and much more, in order to stay alive in the Web Now.

Make a better FAQ page with jQuery

Learn a jQuery expand and collapse technique that will be useful in many situation.

Six Responsive Layout Techniques

This article provides six tips to help you implement effective responsive designs, working with media queries, viewport, and more.

How Well Do You Know Your IDE?

This is bit like a philosophical post. Just some thoughts regarding our perception of developer tooling.


Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.