My step by step guide in solving coding problems
Tags: javascript, architecture, codenewbie
Published: 2020-09-01 09:21:04

We, developers, either paid or unpaid, either students or interns, face challenges every day, one of them is solving problems. When I say problems, you might think about those mighty interview questions that require algorithms or just positioning a div or maybe starting your own project. With some problems you may have a deadline, with others may be unlimited time to present a solution. But in the end, one thing in common: they are problems. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/prytbuaym0pyor1acyf1.jpeg)


Let me give a short introduction about myself. I am a Front-End Developer coding my portfolio page in order to dive into the job searching. I am self-taught, self-teaching, self-coding or whatever. I have encountered numerous problems no matter what the size of the code is. In this boring post, I'd like to share some methods I find useful to give you some idea. 

###1. Understanding what the problem is###
*"Understanding is the solution to every problem." B. J. Armstrong*

Now let's assume I am trying to centre a div and whatever random solutions I generate does not make it work.


***Random solutions***
Yes, this was what I used to do on the initial stage of my coding journey. Just making random changes by random reasoning, without giving a second thought, by changing style properties without understanding what is REALLY going on there.

***Does random reasoning really work?***
Yes, sometimes it works but next time I encountered a similar issue, I would spend hours, then again, and so on. However, I believe that random success is not true success, it is just a temporary victory. What defines success is, reaching a solution based on understanding - this may apply even to our everyday relations with others.

***Let's go back to div***
My old version would do random reasoning. What my current version would do if encountered this problem? Firstly, I would open the notepad application on my computer and start to write down step by step. So, let's begin.

***Div is not working***
Good start. At least I am aware of what is NOT going on there. Defining problem is actually the first step of reaching a solution. Now, let's start to be more clear, aiming at finding out the right question like, *what does div NOT do?* 

***Div is not working because it does not centre***
Very well done! The second step is achieved. Now I narrow down the problem. Let's go deeper and deeper. But, why this div does not work? I open the notebook, start to write down:

####1. It does not work because there should be a typo somewhere.
####2. It does not work because I do not know how div works.

###2. Ok, problem understood, let's write down to-do list step by step###

***To-do List for number 1***
(*It does not work because there may be a typo somewhere.*)
- Check if there is a ***syntax*** error with code. Maybe I just missed a semicolon somewhere, or just a curling brace is accidentally removed. But how can I debug my code?
  - Use Chrome tools.

Now I have done what Number 1 asked for. There is no typo in code, now at least I eliminated 1st possibility and will not distract myself with this topic anymore. Otherwise, if I found a bug, the problem would be solved and taking the rest of the steps would not be required anymore.

***To-do List for Number 2***
(*It does not work because I do not know how div works.*)
- Search what is a div and how it functions
  - Go to MDN documents and find out. 
- Now turn back to code and see if there are any ***semantic*** errors, like treating the div as an inline element although I just found out that it is a block element!
  - Yes, I just found out where the mistake is!
  - No, I could not fix the bug.

At this step, if I found a bug, that means methods worked. If the result has not changed, now let's find out new methods.

####1. Div still does not work because I still could not figure out how div functions.

This is perfectly fine! Now it is time to get help from others. 

***To-do List***
- Go to discussion topics, read the posts carefully and find out the questions raised by others. I would try to look at more recent posts because technologies change very fast. 

At this point, I'll probably find other developers struggling like me, that means I'm not alone! After this point, I will encounter two ways:

  - I found out an answer and compared and applied that with my code. Now div can centre.
  - No, this method did not work.

No worries, now it is time to get in touch with other developers. To do this in a correct way:

- Show my code snippet,
- Share methods I tried,
- Share what I want to do.

That's it! Tech is a great community and surely there will be someone reaching out for help. 

However, sometimes things might not work out as expected and no matter what I do, I do not seem to solve issues. In that case, it is crucial to take a step back and refresh my mind to look at the problem with brand new eyes. Because mostly in those moments I spent hours trying to work it out without having any idea of what actually I am doing. Therefore, solving a problem requires two things: *a positive mental state* and *taking the right steps*. 

That's it from me! Thank you for your time reading this article. If you have any other methods that work well in solving problems, you're welcome to bring it onto the discussion topic below.