Required knowledge level: intermediate

Please note: This tutorial is still in construction and has not been finished yet. You can however already start reading and come back later again.

If you are a reader of this blog you will surely have read my previous tutorial on how to build an adaptive HTML 5 website. In the previous tutorial we created a website from scratch and we did it the manual way without the use of any framework or grid system. Personally I think it is very important to first learn how to code a website all by your self without using a framework which will take care of many things for you. So be sure to first read through my previous tutorial before continuing here.

Required knowledge level: expert Walruses are my favorite animals, I just like how calm and friendly they are and it’s a shame that they are threatened with extinction due to water pollution and climate changes. One day when I had some free time I came up with the idea to build a cartoon-styled walrus using only HTML and CSS. I have never created a CSS animal before but since I kept on seeing pure CSS animals on…

As the first quarter of 2015 is ending, we’ve come to see many predictions being made for the web design industry. Without wasting any time, let’s discuss about some of the major web trends that are expected to evolve and will be ruling the web industry in 2015:

1. Storytelling Will Become More Animated

You may have stumbled upon several websites that tell a story. Though storytelling isn’t new and has been around us for ages, but it’s only recently that it made its way into the design industry, by making use of animations and other interactive elements.

And this year, you can expect to see story designs becoming even better by the use of animation sequences that starts when a user scroll down the page. In essence, more and more websites telling stories will be using 3D graphics and HD quality videos, in a bid to increase the level of visual appeal and user’s interactivity.

This very simple jQuery Accordion Snippet will help you save space and divide your content into different logical sections. No fancy setting parameters, no need for a function call, simply add the JS file to your head and enjoy a minimal, cross-browser working Accordion. Preview Simple Lingulo-Accordion What you need to do Include the minified or the original JS file Add the CSS rules to your CSS file Add your HTML code create an element…

Each and every day I browse through the internet to find new useful scripts or CSS files which might make our lives easier when creating websites. The amount of different scripts and plugins out there is just tremendous and it becomes more and more difficult and confusing to actually know which ones to use in your project. In this blog post I will give you an overview over the most important and useful plugins and scripts (the list will be extended by time). In a second step I will then try to show you an example setup of plugins and scripts that you can use in your web project.

In this second part of my tutorial we will be building the CSS and JavaScript code and do the necessary steps for responsive webdesign to create this beautiful HTML5 responsive website. Be sure to have worked through the first part of the tutorial where we have built the basic HTML structure and included all necessary scripts. We have already included our CSS Reset in the last part of the tutorial. The Reset will take care…

In the vastness of the internet you can find a lot of useful online tools which can help you save tremendous development time.

1. Ceaser

Ceaser is a CSS Easing Animation Tool which can be used to create custom timing functions. For further informations about transitions and timing functions please read my blog post.

Ceaser - CSS Easing Animation Tool

In den Weiten des Internets gibt es eine ganze Menge nützlicher Online-Tools zu entdecken, die Dir die Arbeit erleichtern und Dir helfen können enorm viel Zeit einzusparen.

1. Ceaser

Ceaser ist ein CSS-Easing Tool, mit dem Du Deine eigenen Zeitfunktionen für CSS Transitions erstellen kannst. Für weitere Informationen rund um Transitions und Zeitfunktionen, lies bitte meinen Blog-Beitrag.

Ceaser - CSS Easing Animation Tool

How to use transitions CSS3 offers a lot of useful new features, one of these features are transitions. Transitions can be used to easily animate effects when changing from one style to another. Look at the navigation on top of this page. It is not very noticeable but if you look closely you will see that the link does not change its color immediately on mouseover. Instead it nicely blends from one color to the…