Category

Featured

Category

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…

Kube Tutorial by Lingulo

Preview

HTML5 responsive website

Download

Download it from GitHub


Please note! Due to the use of CSS flexbox this website only works in the latest browser versions. Be sure to know that before using Kube for a production website.

In this quick Kube tutorial we will be creating a very simple yet modern and elegant personal portfolio website using Kube. Kube is a small CSS framework using the latest CSS techniques. The grid system is not using any floats but instead the new CSS flexbox which is already supported in current versions of all mayor browsers. In the future using flexbox will be the default way to create layouts in CSS and Kube is already starting now. Kube doesn’t include any JavaScript functionality like sliders, accordions etc. which might be missing features at first sight. But that is actually the strength of Kube because it is kept small and very basic without any fancy designs or features which would bloat the whole framework with stuff we don’t even need.

About WordPress

WordPress is the world’s most popular content management system. Originally it was designed for creating blogs however more and more people started using it as a system for building websites. The advantage of using WordPress is that it is super simple to create new content and maintain your website. It is also very easy to add new functionality to your website by choosing from thousands of plugins and installing them on your WordPress system.

Non-exclusive website designs

To define and adapt the layout and design of your website WordPress comes with the ability to install themes. Themes contain several files that specify what your website looks like. You can either download an existing theme (by choosing one of the thousands of free or charged themes out there) or create your own theme. Most of the themes that you can download from websites like ThemeForest or the WordPress theme directory can somehow be adapted from the WordPress admin area. You will probably be able to change colors, upload a logo or do some predefined page layout changes (like changing from a full-width website to a boxed website). However if you want to do some furthergoing changes to the website design or if you are creating your own theme you will have to add your own CSS and HTML code. While this might be useful if you wish to create a very unique design and have a clear picture in your head of what you want to build you will certainly need to have some coding knowledge. If you don’t have coding knowledge you will probably end up leaving the themes as they are or investing money and hiring a web developer to adapt the design according to your needs. Since many small businesses or private persons simply don’t have the money to hire a developer they are often forced to leave the themes as they are. But because themes are free of charge or available at very low cost they are mostly non-exclusive. Non-exclusive means that apart from you many other website owners might use the same theme and therefore have a similar looking website.

Required knowledge level: intermediate In this responsive web design tutorial we will create an awesome responsive HTML5 website starting from scratch. I tried to include as many different features as possible, so we will be dealing with a jQuery slider, CSS3 transitions and animations, CSS Media Queries and so on. This part of the tutorial will show you the HTML structure and the required scripts in a step by step tutorial. The second part will…