Tag

html5

Browsing

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.

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.

Welcome to the second part of my tutorial on how to create a WordPress HTML5 template from an existing website. Be sure to read the first part before continuing here.

We have created a new HTML5 WordPress template that currently displays our home page including a menu, that can be customized through WordPress and three new posts for our slider content boxes. The next step is to create new layouts for posts and pages. As explained in the previous part of this tutorial the navigation items “About”, “Contact” and “Portfolio” would link to pages while the “Read more” links would rather link to posts.

Video Cloud Players to Deliver Video in Flash or HTML5 – An Insight

The growth rate of mobile web usage is exceeding in leaps and bounds. And this rapid increase in the popularity of mobile web, is giving video publishers a hard time in reaching out to a wider audience base, by utilizing the Flash Player alone. Therefore, to reach the desired audience it becomes imperative for video publishers to serve their audience with HTML5 videos as well that can run on both desktop and mobile devices.

Flash was ubiquitous and has been the standard player for delivering videos, for more than a decade. Though, HTML5 is getting developed expeditiously, but when it comes to keeping in line with the Flash technology or the integration environment, it hasn’t yet attained the maturity like the Flash videos. Fortunately, Video Cloud smart players will most likely help you meet the challenges imposed by HTML5.

HTML5 Video on all devices

In this tutorial we will take the responsive website we have built in the previous tutorials and implement it into Wordpress. Wordpress is a web blog system which was originally created to be able to easily write flexible and adaptable blog posts. In the course of years the range of functions enlarged more and more so that we can now use Wordpress not only for blogs but also as a Content Management System for “normal”…

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.

Benötigte Kenntnisse: mittel In diesem Tutorial werden wir Schritt für Schritt eine hübsche moderne responsive HTML5-Webseite erstellen. Ich habe versucht so viele Features wie möglich in das Tutorial zu integrieren. Wir werden uns mit einem jQuery Slider, CSS3-Transitions und CSS3-Animationen, CSS Media-Queries und noch einigem mehr beschäftigen. Der erste Teil des Tutorials wird Dir zeigen wie man die grundlegende HTML-Struktur aufbaut und welche Skripts für eine browserunabhängige Darstellung der Webseite benötigt werden. Im zweiten Teil…

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…