Konami code javascript (and other easter eggs)

Who doesn’t love easter eggs? You’ve got to admit, easter eggs are awesome!

One of my personal favorites for easter eggs is the Konami code.

Originally a cheat code, AKA Konami Command, it was popularized by the amazing game contra.

…And you can make a version to place it on your website as well, using a little bit of Javascript magic.

…And once you learn that, you can use any word as an easter egg!

Continue reading “Konami code javascript (and other easter eggs)”

Discuss on Twitter

Full page slider using HTML5, CSS3, and JS

Sliders are the latest craze in the web dev and design world. In this tutorial, I’ll teach you how to make a beautiful, full page slider, which can be used for promotional work, using HTML5, CSS3, and Javascript. We’ll learn how to use event listeners, a bit of object oriented JS, and how to minimize repetitions using functions effectively.

Continue reading “Full page slider using HTML5, CSS3, and JS”

Discuss on Twitter

Building a javascript smooth scroll site

You must have seen smooth scroll websites. I mean, javascript smooth scroll websites are seen almost every where! This tutorial will show you how you can make a simple javascript smooth scroll website.

This is a part of the series of the design and development of furious nerds, following Setting the base and Pure CSS image carousel. However, for this tutorial, it is not required that you read previous posts.

As for the demo, visit the demo site, and click on any navigation. Notice how it smoothly moves to the corresponding parts. Today, we’re going to learn how to do exactly that. Don’t be intimidated! 🙂 😛

Revision: Included more detailed explanation of Javascript.

Continue reading “Building a javascript smooth scroll site”

Discuss on Twitter

‘Ask yourself: How is this useful or usable for a user?’

We often take mindless, thoughtless decisions of design. We take decisions ‘just because it looks good’. Actually, design is much more.

I like to see design as a way of solving problems, and the approach taken by most designers seems to contradict this.

So ask yourself, before taking any design decision. Ask yourself this one, important question. ’How is this useful or usable to the user?’

Continue reading “‘Ask yourself: How is this useful or usable for a user?’”

Discuss on Twitter

Super easy javascript slider – Tutorial

Javascript sliders are rising in popularity—they’re seen almost everywhere! This tutorial will show you how to make a super easy Javascript slider, using CSS transition, and some clever javascript.

This awesome slider will also pause when you hover over it!

As you know, my last tutorial was for a concept site, furious nerds. Reading the previous tutorial isn’t really necessary, but the previous tutorial has a awesome way to get an image to fade from grayscale to color, so you might want to read it.

As the site’s theme is football, go and find more images. I took 3 images from Stock.XCHNG
Continue reading “Super easy javascript slider – Tutorial”

Discuss on Twitter

Setting the base – Making a minimal website

In this tutorial series, we’re going to build a minimal website for a fictional football club. The things which the website will have are

Each will be covered in a separate tutorial. The site will have a single page navigation (Like another website I built and wrote about) and will use no jQuery or any other Javascript library.

You can even subscribe through email to get email updates as soon as I publish the next tutorial in the series!

In this tutorial, we’re going to set up a base for the minimal website using HTML5 and CSS3. As of now, there will be no interactivity.

Continue reading “Setting the base – Making a minimal website”

Discuss on Twitter

Using human psychology in design—Why do we work?

Design is closely tied to people’s way of thinking. If we know hows and whys of human psychology in design, we can design better, and complete our jobs as designers. Here’s a question for you.

Why do we work?

Why do we do anything for someone else? There must be reasons!

Yes, there are. The three ‘basic’ reasons for anyone working are –

  • Value
  • Fear
  • Positive Emotions

Most (if not all) of our actions can be explained by above. Examples—

  • Working in an office
  • Helping out a friend in need
  • Doing the bidding of a bully
  • Helping your sibling during tough times
  • Donating money to charity

…and more.

Human psychology in design is important, as to know how to use (or may I say, ‘exploit’) these facts while designing something to sell a product. To narrow it down—to design better CTAs (Call To Action(s))
Continue reading “Using human psychology in design—Why do we work?”

Discuss on Twitter

Bonus – Making Clas backward compatible and responsive.

I recently published a tutorial on making a website from scratch, using JS, CSS, and HTML. A lot of critique of that post was based on the fact that the design wasn’t backward compatible, and nor was responsive. So today, I’m going to tell you how you can do all that.

In my utopia, it wasn’t necessary for Clas to be backward compatible—but many people pointed out that it was required in our current world!

First, I request you to check out Clas, the site in question.

What is backward compatibility, you ask? According to wikipedia,

In telecommunications and computing, a product or technology is backward or downward compatible if it can work with input generated by an older product or technology. If products designed for the new standard can receive, read, view or play older standards or formats, then the product is said to be backward-compatible;

Responsive web design is well explained from this amazing article at Smashing Magazine.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

So basically, we’re going to make Clas work for old browsers (coughIEcough) and for people who have javascript disabled.

Continue reading “Bonus – Making Clas backward compatible and responsive.”

Discuss on Twitter

‘Javascript Challenge: Make a fading, single page website’

This is the first of a new series, Javascript Challenges, where I try and complete set challenges in the shortest time possible.

The Challenge: 

  • Single page.
  • Navigation done using Javascript. Not standard navigation.
  • To be made under 1 hour.
  • No Javascript library to be used.
  • Crisp design.
  • Unobtrusive Javascript.
  • Required use of Javascript, CSS3, HTML5.
  • Three pages. Two content pages, and one contact page.

So well, after getting this challenge, I had a brief idea in my mind on what to do. The site had to be simple, with a title, a small navigation menu underneath, mock content, and a brief footer. Along with that, there had to be a form. I chose a light blue color for emphasis, and an overall grey, clean, modern design.

Final Result

Play around a bit. We’ll create the above, in under an hour. Sounds fun?

Continue reading “‘Javascript Challenge: Make a fading, single page website’”

Discuss on Twitter

How to learn JavaScript (my story).

JavaScript (commonly abbreviated to JS), the scripting language of the web. This post will be unlike others, this post has my story, my journey, of how I learnt (and am learning) the beautiful language.

It’s a scripting language with it’s main purpose to add interaction to a static page. You can do a lot with it, like modify the CSS, do stuff when someone clicks on a button, make image sliders, do animation, and a lot more.

There are libraries too. Libraries are basically helpers, you still write javascript, but it’s (usually) easier to write (so people can’t technically be ‘jQuery programmer’). Some popular libraries are jQuery, Dojo, Mootools.

If someone tells you to learn a library first, then normal javascript, don’t. Learning JS first will give you a better grasp on how things are done, when (and if) you have to use a library.

Also, remember that libraries don’t add anything new. Everything you can do with a library can be done in regular js (Regular JS is known as ‘Vanilla JS’).

With this, I conclude the intro. Let’s start!

Continue reading “How to learn JavaScript (my story).”

Discuss on Twitter