A little familiarity with HTML, CSS, and JavaScript is required.

Introduction

I made an assumption that when you read the title of the post you might wonder and ask questions like: What has curiosity got to do with learning? Well, I'll tell you; everything. Curiosity is what drives every) man to learn something be it capentry, shoe making, art work, architecture, or software development.

It all starts with questions like: What is this? Why this? How does it work? Then you proceed to look for answers wherever you think you might find them, thereby, you set on a journey that you'll return from as a totally different human being because you've increased in knowledge and most importantly you have learned something or lot of things.

This post as the title indicates is about curiosity and the art of learning but we'll focus its application to software development but you can apply what we'll discuss here to anything that you are curious about. The pattern is the same — What – Why – How. It's that simple but as you'll find out later, it's not easy.

Throughout this post, we'll trigger your curious mind by presenting questions about a particular code snippet in HTML, CSS, or JavaScript.

We'll begin with a simple but tricky example. Check out the code snippet below:

(function(x = 5) {
  return (function(y) {
    console.log(x);
  })(2)
})(1);

Now answer the following questions:

What is the name of the function?
Why do we use this function?
What value get's printed to the console?
How does it work?

How to find the answers:

Search online for types of functions in JavaScript. You can use DuckDuckGo
Once you note the name of the function, search again by typing: Why use <function-name-here>
Try the code in your browser Developer Console (if you have not done so already)
Head back to the search engine and type: How does a(n) <function-name-here> works?
As a bonus point, search the following: Use case of <function-name->

Take a look at the following loop:

for (let i = 0; i < 10; ++i) {
    console.log(i);
}

console.log(i);

What's the name?
How does it work?
Why do we need it sometimes?
What is the value of the second console.log(1) and why?

How to find the answers:

Search for types of loops in JavaScript using your favorite search engine.
After that search: How a <loop name> works.
When to uses a <loop name>.
Run the code in your browser console and note the output.

Next, let's look at some HTML and CSS. Given the following snippet:

<div class="red blue"></div>
<div class="blue red"></div>

div {
    width: 100px;
    height: 100px;
    margin-bottom: 1em;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

What is the color of both divs?
How did you arrive at the color?
Why do you think you are correct?
What CSS behavior did you use to arrive at the color value?
Type in your favorite search engine: What is <behavior here> in CSS?

How to find the answers:

That's up to you. When you figure out what to search for, let the search engine be your guide.

We are still on HTML and CSS, let's have a look at another snippet.

<div>
    <p>I am just a text</p>
</div>

div {
    font-size: 2em;
    margin: 1em;
}

What is the browser computed value for the margin property?
How did the browser arrive at these values?
Why is this happening?

How to find the answers:

Go figure!

Now back to JavaScript. Did you think I was done? No! Take a look at the following array:

let myFruits = ['banana', 'banana', 'orange', 'mango', 'banana'];

Without using a search engine (yet) and in just one line of code:

How will you remove the duplicates in the array and the array will still be an array?
What do you think you'll need to solve this?
Why did it work?

We are still on JavaScript. Take a look at the following object:

let myDetails = {
    "first_name" : "Habdul",
    "last_name" : "Hazeez",
    "nick_name" : "ziizium",
    "education" : "Computer Science",
    "interests" : "Web Development, Computer Security, A.I"
};

let copyDetails = myDetails;

copyDetails.education = "Psychology";

console.log(myDetails.education);

What is the output of console.log?
Why?
How is it so?

Fine, let's take one last one on JavaScript. Observe the code snippet below:

console.log(functionDeclaration());
console.log(functionExpression());
console.log(me());

function functionDeclaration() {
    console.log("I am myFunc.");
}

let functionExpression = function() {
    console.log("I am a function expression.");
}

let me = () => console.log("I am an arrow function");

What's the output in the console?
Why is the output that way?
How is this happening?

If you can, run the following code in the Internet Explorer browser.

<main>
  <p>Put some text here</p>
</main>

main {
    width: 70%;
    margin: 0 auto;
}

What happened?
Can you fix it?
How will you fix it?

Let's stop here for now.

Even though we talked about code, you can apply the What — Why — How pattern to anything you are curious about and you are determined to find the answers. It is not easy but it's going to be worth it at the end of the day.

Have fun learning.

Cover photo by Clever Visuals on Unsplash.

Curiosity: The art of learning

Introduction