Curiosity: The art of learning
Tags: beginners, html, css, javascript
Published: 2020-05-02 14:57:40

---
title: Curiosity: The art of learning
published: true
description: A tour of how curiosity can lead to mastery 
tags: beginners, html, css, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qxjwle10o8k3edz7vz99.jpg
---

> __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 &mdash; What &ndash; Why &ndash; 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.

<hr>

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

```js
(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](https://start.duckduckgo.com)
* 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->`

<hr>

Take a look at the following loop:

```js
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.

<hr>

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

```html
<div class="red blue"></div>
<div class="blue red"></div>
```
```css
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_.

<hr>

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

```html
<div>
    <p>I am just a text</p>
</div>
```
```css
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!

<hr>

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

```js
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?

<hr>

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

```js
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?

<hr>

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

```js
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?

<hr>

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

```html
<main>
  <p>Put some text here</p>
</main>
```
```css
main {
    width: 70%;
    margin: 0 auto;
}
```

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

Let's stop here for now.

<hr>

Even though we talked about code, you can apply the _What_ &mdash; _Why_ &mdash; _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](https://unsplash.com/@clever_visuals) on [Unsplash](https://unsplash.com)._