Learning Progression

Here in codeofaninja.com, we usually have three LEVELS of source code output. But WHY? Because I believe in "Learning Progression" to ensure efficient learning.

Not all of us can swallow a lot of information all at once. So we do it one at a time. By different levels. This way, learners will be forced to learn the essential basics of the subject.

Accoding to Dr. W. James Popham, an Emeritus Professor in the UCLA Graduate School of Education and Information Studies:

"Learning Progression is a sequenced set of skills and knowledge we believe students must learn on the way to mastering a more distant curricular outcome."

You can read more about the subject here, here and here.

So if you really want to learn, and serious about learning from our programming tutorials: I highly recommend studying the LEVEL 1 source code first, then the LEVEL 2, then the LEVEL 3 source code.

Some Changes in our Code Blog


Hey guys! As you can see there are some changes here in our blog, and how it works. For the past few months I've been really busy on these changes and on work that I haven't posted something that's of high quality to you. :D

Anyway, for those who are asking, YES, I'm still alive and this blog will continue to be updated as long as I live. Haha!

Read more

Yo App Super Funny Comments

yo app super funny comments

Few days ago, an app called "Yo" was released. Like the name suggests, the "Yo" app has one simple function: sending a single message: Yo.

How it works? You create a list of contacts. You tap one of those contacts, and they get a "Yo" message. According to the app's description, it can mean pretty much whatever the sender wants it to mean, depending on context:

Read more

Product Unit of Measure Conversion Pseudocode

Unit of Measure Conversion Pseudocode

I don't know if we will have the same term in mind, but here in our country we call it Product Unit of Measure or UOM. For example, we have a "candy" product. Possible unit of measures could be: pieces, packs and boxes.

The purpose of this post is to solve the problem of converting product quantity or inventory values in different unit of measures. I think SAP has this functionality. Just in case you want to have the same in your current program, keep on reading!

The following questions might give you some more ideas about this post:

How many box are 132 pieces?
How many box are 309 packs?
How much of a box are 33 pieces?
How much of a box are 5 packs?

...and many other combinations. So let's get started!

Read more

How To Make Things Happen?

It's simple.

How about not looking and not thinking about the things that can hold you back? You will feel lighter, excited, happy and empowered.

Just focus on how you can help other people, businesses or customers. They will feel it. You're sincere. You provide value. You have the skills. You can solve real world problems.

Stop "guessing" a solution. Stop wasting time. Act now and talk directly to the people you want to help and deserve your help.

What if you were rejected, or they didn't agree with you? It's their loss, not yours. They missed the opportunity to get the best possible solution.

So just keep on trying. :)

make things happen

Read more

I’m Making Some Simple But Useful Online Tools for Developers

Hey guys! How are you? Today I'm sharing these three simple but useful (well, at least for me) online tools for developers like you.

I developed it using Bootstrap to have a decent user interface, .htaccess for clean URL location, PHP for input processing and of course, jQuery AJAX requests to prevent reloading the whole page get what you want faster. It's really fun to built knowing that other developers might find it useful too.

simple online tools for developers

For now we only have three tools, but I'm planning to make more. But first, let's take a look!

Read more

How To Make TextBox with Search Icon in HTML and CSS?

Search boxes are a common requirement in almost every website you'll create. It is very useful when users want to find certain data, it may have auto complete functions for assisting users to search.

But it this post I'll guide you on how to create an input box or TextBox with search icon in HTML and CSS.

Recently I was asked to create this search box with a style that looks like the YouTube search box. Although not exactly the same as YouTube, I still made it with the same style. This can be useful for you too if you want a search box with decent style instantly.

TextBox with Search Icon in HTML and CSS

Step by Step HTML and CSS Search Box Guide

Step 1: Create the index.html with its basic structure.

<!doctype html>
        <title>TextBox with Search Icon in HTML and CSS - Tutorial from www.codeofaninja.com</title>

Step 2. Add the input box inside the tag.

Also include the placeholder saying "Search..." and an ID of "search-text-input".

<input type='text' placeholder='Search...' id='search-text-input' />

Step 3: Download a search icon.

Since we want to have a search box with search icon, download a magnifying glass icons which is a standard icon for search. It must be a transparent PNG icon. Size depends on what you need but in this example we have a 32 x 32 px icon. Put in in the same directory as the index.html.

Step 4: Add a div with the image icon inside.

The "div" tag should have an ID of "button-holder". My magnifying glass icons was named magnifying_glass.png.

<div id='button-holder'>
    <img src='magnifying_glass.png' />

Step 5: Add the magical CSS

We have three elements with IDs that we should style. Again, you can play or experiment with the CSS to suite your visual needs. I put the code below inside the "head" tag, after the "title" tag.

	border-top:thin solid  #e5e5e5;
	border-right:thin solid #e5e5e5;
	border-left:thin solid  #e5e5e5;
	box-shadow:0px 1px 1px 1px #e5e5e5;
	margin:.8em 0 0 .5em; 
	padding:.4em 0 .4em .6em; 
	border-top:thin solid #e5e5e5;
	box-shadow:1px 1px 1px 1px #e5e5e5;
	margin:11px 0 0 0;
#button-holder img{

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Online Resources

You can also use the following resources for other techniques in doing this task.

How do I create a search button within a textbox?
search icon inside search box
TextBox with Search icon as background image

If you made other TextBox with search icon in HTML and CSS, please let us see it by dropping the demo link on the comments section below, we love to see your own creations! Thanks for visiting and take care. :)

12 Animated Web Demos Made Only with HTML and CSS3

You guys seems to like the first one, so here’s another one for you! HTML and CSS are really amazing technologies that the humanity has to celebrate. Okay, that maybe exaggerated, but here are a dozen more amazing web demos with source code that might inspire you to be a better web developer, I was able to put them together while I was camping with a tent from Survival Cooking. I hope you guys get some help out of them. Just click the linked title of each item below, enjoy!

1. Melting Cube

12 Animated Web Demos Made Only with HTML and CSS3

2. Ironman Login Form


3. Acromantula


4. Beach Ball of Death


5. CSS Balls


6. BoldMedia Logo Variation


7. Become a Traveller Today


8. Color Picker


9. Animated Atom


10. Funny Loading


11. Social Flip Cards


12. Beating Heart