97 tutorials with downloadable content

VueJS: Building A Comments Section

in VueJS

To carry on through the learning of VueJS we're going to build a real world example of creating a comments section in your website. We're going to use an API...

Read More


VueJS: Building A Simple Calculator

in VueJS

In previous tutorials of VueJS we've learnt the basics of how to use Vue, but we haven't really learning how to build an application. In this tutorial we're going to...

Read More


VueJS: Building A Confirmation Modal

in VueJS

In this tutorial we're going to learn how you can create a deletion confirmation modal in VueJS. This technique is important when you have a form or a link asking...

Read More


VueJS: Computed Functions

in VueJS Basics

In a previous tutorial we learnt how you can add a message to the page in VueJS by using the handlebars syntax. Along with simply outputting data properties on the...

Read More


VueJS: Click Counter

in VueJS Basics

In this tutorial we're going to build a simple click counter using VueJS. For this we're going to simply have a button on the page and on the click event...

Read More


FREE

VueJS: Preventing Default

in VueJS Basics

A common task you have to do when working on JavaScript applications is preventing default browser behaviour, probably the most common situation you find yourself in with this is when...

Read More


FREE

VueJS: Managing User Input

in VueJS Basics

In a previous tutorial we looked at how you can bind Vue data points to HTML attributes. In this tutorial we're going to look into how you can bind Vue...

Read More


FREE

VueJS: Binding To A Class

in VueJS Basics

In a previous VueJS tutorial we learnt how you can bind to a HTML attribute such as title, in this tutorial we're going to go further with that concept and...

Read More


FREE

VueJS: Loop List Elements

in VueJS Basics

Just like other programming languages you'll need to be able to loop through data and perform a common task with each data point. The most common JavaScript data form is...

Read More


FREE

VueJS: Conditional Show And Hide

in VueJS Basics

Previously we've seen in Vue how to display data to the page and how to bind data to a HTML attribute. In this tutorial we're going to use conditions to...

Read More


FREE

VueJS: Bind To HTML Attribute

in VueJS Basics

In the previous tutorial we saw how we can use the data property to display content on the screen, is this you'll see how you can bind this data to...

Read More


FREE

Display Data With VueJS

in VueJS Basics

This is the first post from the learning VueJS series, you can see all the code examples in this series on the following Github repository. Vue Examples The first thing...

Read More


FREE

Getting Started With VueJS

in VueJS Basics

In this tutorial we're going to look at the basics of getting started with VueJS. VueJS is a JavaScript framework which is focused on the view layer only, and is...

Read More


FREE

Javascript Copy and Paste

in Javascript

In a previous tutorial we saw how you can create a copy and paste button using jQuery and the ZeroClipboard flash extension. The problem with this is that it requires...

Read More


CSS Bouncing Arrow

in Animation

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .arrow { cursor: pointer; position: relative; bottom:...

Read More


How To Use Page Templates In A Plugin

in Plugin Development

In this tutorial we're going to investigate how you can override a theme template files from your WordPress plugins. For this we're going to be using two filters: theme_page_templates template_include...

Read More


Back To Top Pure JavaScript

in Javascript

A popular trend you see on many websites is the back to top button, where the user will click this button to automatically scroll back to the top of the...

Read More


Build Your Own Responsive Tester Page

in Media Queries

Today with all the different devices we can use on the internet it is very important that your website is responsive and can be viewed in any browser on any...

Read More


No More Comment Spam

in Customise Comments

Since moving my comments from Disqus back to native WordPress comments I was getting a lot of spam comments a couple every minute. I had the suggested plugins installed like...

Read More


Restrict Access To WordPress Login Page

in WordPress Security

In this tutorial we're going to create a WordPress plugin that can be used to help improve the security of your site by restricting access to the login page by...

Read More


FREE

Get Keyword Frequency In PHP

in PHP

In this tutorial we're going to find out how we can get the keyword frequency from a string or even a webpage in PHP. This information is useful when you're...

Read More


How To Create A Show Password Button

in jQuery

In this tutorial we're going to have a quick look at how you can create a show password button on your register or login forms. When you're creating a register...

Read More


FREE

How To Create A Custom Geotag Field On Formidable

in Plugin Development

In this tutorial we're going to use the Formidable plugin and create a new field type that will use HTML5 geolocation to get the current user location, once we get...

Read More


Restrict Content Pro Stats WordPress Dashboard Widget

in Plugin Development

If you use Restrict Content Pro on your WordPress membership site then you most likely find yourself logging in regularly to check the stats on your site. One of the...

Read More


Back To Top WordPress Plugin

in Plugin Development

In a previous tutorial I wrote about how you can use jQuery to create a Scroll back to top button. jQuery Back To Top In this tutorial we are going...

Read More


Stop WordPress Automatically Adding br

in Shortcodes

WordPress uses a function called wpautop to automatically add paragraphs and line breaks to your content from the content editor. This will change double line breaks and convert them into...

Read More


WordPress Recent Posts Shortcode

in Shortcodes

On WordPress.com you automatically get are a large number of shortcodes that you can use on your blog. Here you can view all the default shortcodes on WordPress.com. One of...

Read More


Set WordPress Posts To Private By Default

in Admin Area

The following code snippet will allow you to set all your posts to private as default. We do this by using the action post_submitbox_misc_actions and inserting jQuery into the page...

Read More


Colours With Sass Map

in Sass

Here is a quick CSS snippet on how you can use Sass maps to create a colour list for your project. Sass maps are a nice way of creating lists,...

Read More


FREE

Disable Emojicons Introduced In WordPress 4.2

in WordPress Versions

As of WordPress version 4.2 WordPress enabled the use of Emojicons in your posts, but in order to do this it will automatically add some javascript to your page. But...

Read More


FREE

Fixed Width Sortable Tables Row With jQueryUI

in Javascript

When you use jQuery UI sortable function on a table I've noticed that it will collapse the width of the row you're dragging which can lead to a strange user...

Read More


Add Delete Confirmation Modal To Form With jQuery

in jQuery

In this tutorial we are going to learn how you will add a confirmation modal box to your forms for things like deleting. Most tutorials I've seen on this only...

Read More


FREE

Login To WordPress With Email Address

in Admin Area

By default WordPress will assign unique usernames to all users registered on the website. As they are unique there could be a possibility that the username the user wants to...

Read More


Equal Height Columns

in Flexbox

If you are displaying a number of columns on your web page then would of probably reached the problem where you need these columns to be the same height as...

Read More


Add Upload Media To Library On Widgets

in Widgets

The WordPress media library is one of my favourite features in using WordPress over other CMS's, when you upload a new image into WordPress it will convert it to a...

Read More


FREE

Adaptive Backgrounds jQuery Plugin

in jQuery

I recently found a good resource for changing the background colour of a containing div. This is a jQuery plugin that will search for the most dominating colour in an...

Read More


FREE

CSS Loading Spinners

in Animation

We all know that CSS3 brings a lot of features which allows you to do a lot of cool stuff that we used to need Javascript for. One of the...

Read More


FREE

Create A Typing Effect In CSS

in CSS

I recently found this jQuery plugin that allowed you to easily create a typing effect on your website. This plugin is an open source plugin available on Github called typed.js....

Read More


Restart CSS Animation

in Animation

Since CSS3 we have been able to add CSS animation to our elements, these are relatively easy to setup. An example of a simple CSS animation example is to fade...

Read More


FREE

Changing The Element Size With jQuery

in jQuery

When you are changing the size of an element using jQuery there are two methods that you can use to change the size. First you can use the .css() method...

Read More


Create A Clock In CSS

in Animation

In this tutorial we are going to walk through the process of creating a ticking clock in CSS, using CSS3 features animation and transform. The animation will start when you...

Read More


Create A Animated Download Icon In CSS

in Animation

When you place a call to action on a webpage you normally want the visitors to down something like sign up to your newsletter or download some of your content....

Read More


FREE

How To Create Flat Checkboxes

in CSS

With the trend of flat design I've decided to extend a previous tutorial of How To Style A Checkbox With CSS with two extra code snippets of styling checkboxes with...

Read More


Create Password Strength Indicator With jQuery

in jQuery

With security being the biggest problem for most websites it's important to make websites as secure as possible. But after all the precautions a developer can do with their code...

Read More


FREE

Lazy Load Social Media Buttons

in jQuery

With the page loading speed being so important to a websites success you need to try to speed up all areas of your website as much as possible. One of...

Read More


FREE

Create An Animated CSS Box Menu

in Animation

In this tutorial were going to play with CSS transitions to create a new style navigation menu. The effect we are aiming for is having a number of navigation boxes,...

Read More


FREE

CSS Flip Boards

in Animation

In this tutorial we are going to create a flip board effect by using CSS, there are 2 effects we can create one the hover event we are going to...

Read More


FREE

How To Style A Checkbox With CSS

in CSS

Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not...

Read More


FREE

Create An Interactive Metro Style Grid Dashboard

in jQuery

Since Windows 8 released it's first pictures of the new design, people have been going crazy over the metro style. People love it, it's modern, it's clean, it's simple and...

Read More


FREE

Create Post Tags With CSS

in Theme Development

In this tutorial we are going to create post tags using CSS, we will also create a WordPress widget that will allow you to display these post tags in the...

Read More


FREE

Create Polaroid Image With CSS

in CSS

A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to...

Read More


FREE

Create Google Maps With gmaps.js

in jQuery

How To Use GMaps.js GMaps is a javascript plugin that makes it really easy to use Google Maps to display a map to your user. There are multiple options that...

Read More


FREE

Create Your Own Share Buttons With Sharrre

in jQuery

People are now members of multiple social networks be it Facebook, Twitter, Google Plus, Linkedin etc. All of these social networks have created their own button which makes it really...

Read More


FREE

Learning CSS Filters With Images

in CSS

I'm a big fan of some of the experimental CSS properties that the browsers vendors are developing. In previous tutorials I have looked at some of the new features which...

Read More


FREE

Handle Keyboard Shortcuts With Mousetrap.js

in jQuery

Mousetrap.js is a javascript plugin that makes it easy to setup keyboard shortcuts for your web applications. It allows you to define functions to run on certain key pushes, you...

Read More


FREE

Using CSS3 Columns

in CSS

When it comes to designing a website it's really handy to use a grid system to help. Using a grid system allows you to easily space out and line up...

Read More


FREE

How To Create A CSS Animated Share Button

in Animation

Every website now has social network share buttons on their site, if you don't have them then you really should do. They're a great way to give your visitors easy...

Read More


Javascript Full Screen API

in jQuery

The full screen API is an easy way to get the full web content to be displayed on the page. It's very similar to pressing F11 on your keyboard but...

Read More


FREE

Manipulate The Favicon With Tinycon

in jQuery

When you get alerts and notifications from Facebook, twitter or your email client depending on the browser you will be alerted of new activity. An example of this is if...

Read More


FREE

Display Code Snippets In WordPress

in Theme Development

If you want to talk about programming or development in your WordPress post then there will be times when you want to write about code but make sure that the...

Read More


Create A CSS 3D Push Button

in CSS

In this tutorial we are going to look at how we can use CSS transitions to make it look like a button is 3D when you push it. For this...

Read More


FREE

How To Create Shiny CSS Buttons

in Animation

With buttons playing a major part in the call to actions of your website it is important for them to make an impact on your visitors. This can be done...

Read More


FREE

Create Always On Page HTML Elements

in jQuery

A common trend in web design now is to make sure important content is always on screen by making the content move as you scroll down the page. Many websites...

Read More


FREE

CSS Animate Effects We Can Learn From Animate.css

in Animation

In this tutorial we going to look into the open source project which has become very popular lately...Animate.css. This is a project which is currently hosted on Github where you...

Read More


FREE

Create A Real E-Book With Turn.js

in jQuery

In today's tutorial we are going to see how we can create a "real" ebook by using the jQuery plugin turn.js. Using this jQuery plugin you can create a real...

Read More


FREE

Controlling The WordPress Toolbar

in WordPress

The WordPress Toolbar was introduced in WordPress 3.3 and replaces the WordPress admin bar which was introduced in 3.1. The purpose of the toolbar was to give logged in users...

Read More


FREE

Add a WordPress Menu To Your WordPress Toolbar

in WordPress

This WordPress snippet will add a WordPress Menu on the WordPress Toolbar. This uses the admin_bar_menu which will run when the admin bar is created. This action calls the function...

Read More


FREE

Using Social Media Hovercard jQuery Plugin

in jQuery

Displaying your social media account on your website gives them great exposure to your accounts and allows your readers to easily follow you on the different social networks. There is...

Read More


FREE

CSS Animated Media Queries

in Animation

A new trend in website design is the use of media queries, this is because of the amount of devices that can now access the internet all the websites need...

Read More


FREE

How To Add Text Gradients With CSS

in CSS

In this tutorial we are going to look at some of the new CSS3 features for dealing with text colours. If you have used CSS background gradients before then you...

Read More


FREE

Learn How To Create Different CSS Box Shadow Effects

in CSS

In this tutorial we are going to learn how to use the CSS box shadow property to create different effects with just CSS. Below is an image created in photoshop...

Read More


How To Use HTML5 GeoLocation API With Google Maps

in HTML5

In this tutorial we are going to learn how to use the Geolocation API to get your current latitude and longitude, from these results we can then connect to the...

Read More


FREE

How To Create A CSS Slide Out Fixed Navigation

in CSS

In today's tutorial we are going to learn how we can make it easy for your visitors to always have access to the main links on your site by creating...

Read More


FREE

How To Create Pretty Search Forms

in CSS

In this tutorial we are going to style text boxes and buttons to create pretty search forms. We are going to create three forms which will match the image above....

Read More


FREE

How To Build A Simple Tabbed Menu

in CSS

In this tutorial we are going to take a PSD and turn them into HTML and CSS. I previously done this with other tutorials such as building a CSS pricing...

Read More


FREE

HTML5 Details Tag

in Forms

In past articles I have wrote about some of the new features which have come with HTML5. We have gone over some of new features with HTML5 forms and HTML5...

Read More


FREE

Smooth Scrolling To Internal Links With jQuery

in jQuery

jQuery allows you change the way you interact with your website with very little code. jQuery has an animate function which allows you to animate anything that jQuery does, including...

Read More


FREE

CSS Image Reflection With Webkit

in CSS

Image reflection is a great new feature from CSS which allows you to spice up your web image by adding a reflection underneath. Before CSS this had to be done...

Read More


FREE

Learn How To Create Drop Cap Letters In CSS

in CSS

In the tutorial today we are going to learn how we can use just CSS to create an old newspaper technique of making the first letter of a paragraph capital...

Read More


FREE

How To Work Out Distance Between Mouse And Element

in jQuery

In the tutorial today you will learn how you can use jQuery to get the distance of the mouse from a certain element on the page. This bit of code...

Read More


FREE

How To Create Stitched Look in CSS

in CSS

The current trend in web design is textures with vintage design. One of the main aspects of this design is the use of stitches in your design, this used to...

Read More


FREE

Create Pulse Effect With CSS3 Animation

in Animation

In this tutorial you will learn how you can create a heartbeat pulse effect with CSS3. CSS3 gives us some added ability to CSS animation, with animation you can set...

Read More


FREE

How To Create An Animated Scroll To Top Button With jQuery

in jQuery

Creating a good user experience on your website is very important to keep people on the page. The best way to create a good user experience is to make it...

Read More


FREE

Build A jQuery Image Gallery

in jQuery

Displaying images galleries on your web pages can be very complicated, much like the jQuery modal boxes, today you will learn a very simple way to create a nice looking...

Read More


FREE

How To Build A Pricing Table With CSS3 Animation

in Animation

Quite often I'm given a PSD and asked to convert this into HTML/CSS for the graphic designer. I was given a PSD which was a pricing table and realised that...

Read More


FREE

Link Indenting With CSS3 Animation

in Animation

In website design there is something that your website must always do this is styling your links so that they stand out from normal text on your page. This will...

Read More


FREE

Pure CSS Tooltips

in CSS

Demo In all browsers you can get the basic tooltips on HTML elements by using the title attribute like the below example. Back to top

Read More


FREE

Switch Stylesheets With jQuery

in jQuery

Jquery makes it very easy to manipulate the the DOM, this makes it so easy to change any element on your webpage. One of those elements is the reference to...

Read More


FREE

Change Browser Highlight Colour With CSS

in CSS

In this tutorial today you will learn how you can change the default browser highlight colour by using CSS. If you take your mouse, click and drag your mouse on...

Read More


FREE

Get Any Website Alexa Rank Using PHP

in PHP

In past tutorials here you have learned how to get your Twitter followers and your Feedburner subscriber numbers. They are both useful information to use to judge how popular your...

Read More


FREE

How To Use HTML5 Form Features

in Forms

In HTML5 there are a few more features which allow you to do some cool things with forms such as validation without writing any Javascript which makes it easier for...

Read More


FREE

CSS3 Spinning Social Media Icons

in Animation

We all want more attention on social media, it's all just one big popularity contest and were all fighting for more followers and friends. If you have managed to get...

Read More


FREE

How To Create A Simple Modal Box With JQuery

in jQuery

There are loads of plugins out there to use for a modal box but some of over complicated for this simple task of showing a message on the screen in...

Read More


FREE

CSS Buttons With Icons But No Images

in CSS

Since reading the article Just some other awesome CSS3 buttons I become interested about how you can use this effect to get icons on buttons without using any images. As...

Read More


FREE

Create Sticky Notes To-Do List In CSS And JQuery

in jQuery

In this tutorial you will learn how you can create your own simple To-Do list using CSS and JQuery. First you will design the To-Do list, this is going to...

Read More


FREE

How To Create Fixed Position Share Box

in CSS

Do you want your social media buttons to always be on the screen for your visitors to click on? If yes then you want to have a fixed position share...

Read More


FREE

Creating CSS Only Horizontal Navigation

in CSS

It’s best to provide these links as a HTML list and style the list items to create the look for your menu. In terms of SEO having a pure CSS...

Read More