cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Posts tagged tutorial

Let's Talk about Colour

CSS currently supports three different ways to define colours:

Using one of the preset keywords.

Using the HSL cylindrical-coordinate system

Using the RGB cubic-coordinate system

As an RGB triplet

As a...

CSS3: Units of Measure 101

Here is a quick lesson on CSS3 units of measure. I know some have difficulty with this when starting out.

px -Pixel is exactly as described. It allows you to define size based on number of pixels....

A 'Hello, World!' in AngularJS

AngularJS Workshop

This started out as a lesson plan for my 3rd Year Undergraduate students, so I've cut out a bit of the 'introductory' stuff on the assumption that if you're here...

responsive html5 video using video-js

responsive html5 video using video-js

This is a simple example of how to implement Video in your static project by leveraging the fantastic open source video-js. I have a few versions floating...

Let's do canvas.

Let's learn some Canvas

So I found myself messaged today in regards to tagging one of my pens canvas-club with a link to this blog entry by Abhijit Hota . An excellent idea I thought. Learning...

Canvas 101

Canvas Chapter 1 Section 1

So you want to make JS art

So for our first venture into this series we will be working on some basic things. This will probably be a longer section than the others but...

Rainbows and Pixels

Welcome back

Starting off today we are going to take a brief look at gradients. After that we are going to be looking at altering individual pixels. If you are not sure what a gradient is check out...

A Skewed Perspective


Our next topic will be transformations. Similar to other canvas methods ,and like I have said before, you should keep in mind canvas is one solid object. When ever a transformation...

Some Like It On Top


This week we will take a little time going over canvas composition. Some of this is easy, some of it takes a little thought. Still it is all faily simple if it wasn't it wouldn't...

Chapter 1 Exercise

Chapter 1 Post Exercises


Sorry for the delay, I know I missed last Friday. I will however be putting out this post and the pre-section prep today. So with out further ado today, I will be...

PS Prep Animation

Animation Basics

Alright so let's start animating. Before we do I would like to take a little time to go over some things that will help you understand the animation process a little better. If...

My First Animation

Basic Animation

Well it is time to start adding life into our canvas. It's alive ALIVE!!!!!!!! MWHAHAHAHAHAHAHA .......ahm. Anyway, by the end of this tutorial you should understand the basic...

First blog: Building menus


As my first post on codepen, I want to write a little about the constrution of a menu. Especially a menu on one page.

[[[pen slug-hash='eNZmPR' height='500'...

What is JavaScript Hoisting ?

JavaScript Declarations are Hoisted

In Javascript, a variable can be declared after it has been usedi.e. A variable can be used before it has been declared

Example 1

  a = 5; // Assigned value to a...

The Scope Chain in JavaScript

Lets know the basics first:

Lexical environment is the actual order of written code.

Every execution context has reference to its outer environment.

Global execution context is the outermost...

What is Asynchronous Callbacks in Javascript ?

Asynchronous: More than one at a time.

Javacript is Synchronous, but events are Asynchronous.

All events are saved in Event Queue and gets executed one by one, once execution stack is empty.



Plug and Play Flips

Show and Tell them with this simple effect. Flips are an easy way to enhance your achievements or collectables.

What we're after

Simple Card Flip


An implementation of ECS in Javascript


ECS or Entity Compnent Systems are an interesting way of organizing data it allows you to smash bits and peices of an Object together, but for me I like it because it can be very DRY code...

Flexbox Guide

Flexbox Guide

This is my first post on Codepen which looks into Flexbox module, covering most if not all the different CSS properties. This guide is what I have learnt about Flexbox and I hope you...

#1 React drops

When I think of Web, I think of simple things, now I started thinking in React. Let start from the very beginning.

The why to use React the people on Facebook already answered, then I will write...

Get to the Point: Installing MySQL Server on Mac OS X


A guide for those who need this working now.

Download MySQL

Download the appropriate installer MySQL Community Server (free)

Install MySQL

Once the download is complete open the file. In my case...

Ping Pong Game

Hi Readers!

I was very interested in Game development.So, i started learning about html5 game development, javascript and jquery some days back. I beleive, we learn more when we actually do, so i...

How to launch a startup

Few days back I referred to an online startup course for first time entrepreneurs and the response was just amazing.Thousands of views and shares and queries from EverythingStartup community...

Tutorial - Bootstrap ScrollSpy

In this tutorial I'm gonna teach you how to use Bootstrap's ScrollSpy, as it maybe be a little hard to see it the first time.jQuery and Bootstrap versions from this post's time are...

Getting Started with React.js


Getting Started in React.js, or any other javascript library or framework usually takes me a few hours or days of configuring my environment (downloading/updating node,npm,webpack,etc,etc) ,...

React js simple tutorial

React Js Simple tutorial list:

Here is the github souce code link : https://github.com/yokesharun/react-js-tutorial

creating a simple template with react

See the Pen simple-react-template by Arun...

Son do you know Emmet ?

Quick explanation :

let's say you need to write down the following HTML code:

  <div class="row"> <div class="col-md-6"></div> <div...

Getting Started with AngularJS

Angular Who?

Good question, the plan is to figure out what Angular is and how it works through a series of pens that follow my learning; before each one I gave myself a little challenge which you...

Getting started with Chart.JS


I recently got an interview for developing a chart based front end, I never heard back :( , but it got me excited about chart libraries and other chart based...

A look at Chartist.js with sample code



I recently wrote about chartJS (go check it out !) a pretty cool javascript charting library; I would like to explore a few more charting libraries and I've had my eye on...

Getting started with Sass



Sass is a great little helper for dealing with complex CSS and extending functionality, come along and learn SASS. A cool Css preprocessor that is supposed to give your Css Superpowers...

I LEARN YOU NODE? Yes, you learn me Node even in Windows.

This is actually a good Node.js tutorial!

Someone whos name I can no longer find asked me about how to run learnyounode on HyperDev. In my effort to help I looked up what this was and could see that...

Let's try Angular Material

Angular Material


As part of my series on learning Angular, I am checking out Angular Material, a cool library for implementing Googles Material Design with Angular, come along and check it...

A look at Quill.js



Thanks to a codepen blog post, I recently discovered Quill: An API Driven Rich Text Editor ? it sounds all kinds of interesting, but I have no idea how it works, follow me as I dig...

Customize a Google Form for your website

You’ve built a static website, and now you want a way to collect data from your visitors. We’re not just talking about a basic contact form that sends the data in the body of an email. Instead, we...

A Dummy's Guide to Redux and Thunk in React

If, like me, you've read the Redux docs, watched Dan's videos, done Wes' course and still not quite grasped how to use Redux, hopefully this will help.

It took me a few attempts at using...

Javascript plugin



Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, itaque. 11-21-2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur...

Mess Creator Tutorial

this is my first post, so don't judge strictly.

Hi humans!

So, this is my little explanation, tutorial if you want, of the pen I made a few days ago called "Mess Creator". Some positive...

OpenVBX + ServerPilot + EC2 = Awesome Startup Phone System

When you're a startup, one thing that most have in common is having little to no budget. I would have to say that yet another thing most have in common is they don't want their customers to...

Tutorial: Edit in Place

Table of Contents






Make an editable label. When the label is clicked, a textbox shows up allowing the user to edit the label. To edit, the user has to press the...

Single responsibility principle

What's the SOLID principles?

It's inevitable as you develop an application that it's going to grow in complexity. As your code base gets bigger and more complex, you will want to...

Make it Rain: a fun SVG Animation Project for Beginners

In this exercise, we will use CSS and jQuery to animate an SVG scene according to the storyboards provided for us by the designer. Feel free to fork the starter SVG file and get started:


Open/closed principle

Open/closed principle

This is part two of a five part series covering the SOLID principles. For more information on what the SOLID principles are, check out part one.

Single responsibility principle


Learn Vue.js - a quick and friendly tutorial



Vue.js is a progressive and reactive JavaScript framework for building front-end interfaces. It's dead-simple and allows for lightning-fast DOM manipulation through a virtual DOM....

How to make a Zelda Fairy (Part 1)

I've been asked by a few people if I could write a tutorial for my Zelda Fairy CSS animation.

This is part 1 of the tutorial, which will cover how to code the fairy.

Part 2 is coming soon and...

Liskov substitution principle

Liskov substitution principle

This is part three of a five part series covering the SOLID principles. For more information on what the SOLID principles are, check out part one.

Single responsibility...

Creating a Browser Extension with create-react-app


This post will walk you through creating a browser extension using React via create-react-app.

The React App

Step: Install create-react-app

Install create-react-app globally on your machine:


Interface segregation principle

Interface segregation principle

This is part four of a five part series covering the SOLID principles. For more information on what the SOLID principles are, check out part one.

Single responsibility...

Clarifying Async and Promises

I wanted to clearly present async and promises since the concepts were hard for me to understand at first. Here's my attempt:

Synchronous javascript means to wait for one action to complete...

Comfortable Tube Sockets

According to their website, "Socket.io enables real-time bidirectional event-based communication.” Unpacking this description, it essentially means a browser and server can have live...