Practice Problem Solving for Web Development without Code

If you are deciding that making a career change into web development is your next move, you have probably researched the soft skills that you will need. Doing a quick Google search on soft skills for programming you will find problem-solving as one of the skills often listed. Let’s make three exercises using everyday tasks that will help you to practice problem-solving without writing code.

Problem-solving is a skill that may remind you of a high school standardized test. If you are hesitant to learn how to problem solve because of that high school memory, please stop. Most of the problems you will face do not resemble a standardized test at all.

Also, you can throw away the fear of not getting the correct answer. A programmer does not write the correct code. A correct answer implies that, like in math, there is only one answer. Because you can solve the same problem in multiple ways, a programmer writes the best code she/he can write.

Problems that you will face in the web development world require imagination and mental mapping because computer processes are abstract. Therefore, the more you practice writing code, the more familiar you get with processes. Also, practice makes code easier to understand so you are ready when the problem arrives.

But you do not need to start writing code to sharpen your problem-solving skills for web development purposes. Because a computer’s job is to follow a set of instructions, problem-solving revolves around understanding steps and following instructions. Keep this methodology in mind once you start to write code and you will see that it will be easier to detect problems and solve them.

The problem-solving without code exercises that we will discuss are:

1. Step: DIY (Do it Yourself) furniture and food recipes
2. Segment: Order of mathematical operations
3. A typical user login

1. Step: DIY (Do it Yourself) furniture and food recipes

Writing, reading, and following instructions for mounting furniture or preparing a food recipe are great examples of stepping through processes to obtain a known result.

These activities require detailed step-by-step instructions so someone else, or yourself can follow them on a future occasion. So if you were the steps writer or reader, understanding the order of the part assembly or food preparation is the essential key in understanding future problems.

Let’s say that a chair I mounted has a squeaky sound, or the mofongo stuffed with chicken that I prepared didn’t taste as expected. If I wanted to understand where the misstep was so it won’t happen again, I would go back to the beginning of the instructions and verify each step.

The same goes for coding. Even if it seems a longer process, stepping through the code when searching for the cause of a bug will help you solve the problem faster.

Once you find that bug, it is up to your combination of creativity and understanding of instructions for the desired results that will help create multiple solutions.

2. Segment: Order of mathematical operations

Let’s do a quick recap of what is the order of mathematical operations. It is a set of rules that decide which method (addition, subtraction, etc.) is performed first when evaluating a math equation. The order goes as:

1. Parentheses
2. Exponents and roots
3. Multiplication and division
4. Addition and subtraction

If we have some equation like:

(3 * 4) + (2 * 6) 

Applying the order of equations would look like this:

(3 * 4) = 12 // First step - Solve first parentheses
(2 * 6) = 12 // Second step - Solve second parentheses
12 + 12 = 24 // Third step - Add the result of both parentheses

Notice how this solving method requires us to restructure the equation (3 * 4) + (2 * 6). It isolates each segment it into (3 * 4), (2 * 6) and (12 + 12). It solves each segment between parenthesis and finally, solves the operation between segments.

Not only do programming languages also follow these orders of math operations, but also almost every coding problem can be segmented or isolated into smaller ones.

Every time I remind myself to try and segment even more the problem that I am having while writing code, it seems as if I get to the aha moment quicker.

3. A Typical User Login

So, let’s do what we came here for, step through a web development problem without having to code!

In the article The Programming Pedestal, I described in a high-level way the process of creating a user account.

For the sake of this example, let’s assume that you already know how to create an online account, and now you just want to log in to your account. But oh, oh! You cannot log in but there is no message displaying the error.

By using the step and segment techniques described earlier, let’s figure out what may be the problem and create possible solutions.

What are the usual steps you follow when login into an account?

1. Locate the user login section.
2. Type username and password.
3. Click the Submit button.
4. Wait for the webpage to display the account profile.

From those steps, can you segment even more those steps?

You can segment the second step into two more steps:

1. Type username.
2. Type password.

And also you can segment the third step into:

1. Click Submit button.
2. Submit button calls a function.
3. The function that validates the data.
4. The function sends data to the database.

So let’s step again through the login process:

1. Locate the user login section.
2. Type username.
3. Type password.
4. Click the Submit button.
5. Submit button calls a function.
6. The function validates data.
7. The function sends data to the database.
8. Wait for the webpage to display the account profile.

Alright! It seems that to step through the process again will take longer, but remember, the more detailed the steps, the easier it will get to find a possible issue.

Now let’s assume that this particular webpage has a username character requirement. And let’s assume that after reading the username character requirement, you remembered that the password you entered was the incorrect one. After correcting the password, the function validates the information and you gain access to your user account.

I know that the example had a lot of assumptions. The point is that when a problem arrives, always verify the steps you performed and try to segment even more of the steps.

Practice this technique with your everyday activities. So, when you start coding, writing programs and debugging will come easier because you trained your mind to step and segment processes.

Thanks for reading.

You can get a new post notification directly to your email by signing up at the following link.

Related Articles

The following CTRL-Y articles are related somewhat to this post. You may want to check them out!:

• API Testing with Mocha
• Learn to Code: Lowering the Programming Pedestal
• Resources for Newbie Web Coders
• Filtering with GraphQL and Prisma: What NOT to Do
• Night Own Home Office
• Programming Language: The General Parts
• What is the Rendering Engine?
• A Morning in a Front End Developer’s Mac Terminal
• Industrial Engineering and Web Development

By the way – A playlist for you

This post was written while I was listening to the new Chemical Brothers album No Geography. I have listened to this album so many times since it came out, that I can write out my thoughts while listening to it. If not, I would not be able to ignore the music and I would be doing mental music videos.

What do you think about these techniques? Do you know any other techniques that can help develop problem-solving skills for web development purposes without having to code? Comment below!