So I’m working through the Javascript tutorials and I find they are getting more complex for me to just code out right. Does anyone have any general tips on how to accurately visualize and design a solution for any given problem?
Idk if any method works for all problems, but some general steps should always be performed somewhere when your programming.
I’m going to give how I categorize the steps to solving a problem with code. It isn’t fool-proof nor a definition by any standard. But its how I would describe most problem solving 
- Define the problem to its bare parts. I’ve heard this is called modeling, but lets not use fancy lingo right now. The main goal of this step is to throw out stuff that isn’t important for the problem at hand.
- Break down the problem (if its complex) to smaller problem you can tackle. Your probably already thinking of using another function, but I’m not at the point to be talking about code yet, you just want to break things down as small as possible to it becomes “trivial”. If you get stuck, you might need to back up and determine if your broke down the problem wrong at a higher level of abstraction.
- use your intuition and experience to determine a reasonable solution I’m still not talking about code yet, since you might not even know what’s available in your language, but know what you need todo.
- use your knowledge and experience of your current tools(your lang) to solve the smaller problems Now we talk about code here haha. This is usually where experience and knowledge of your language can help you not re-invent the wheel. So knowing how to solve “smaller” problems in a clean simple way helps you solve the bigger ones. Obviously if you have little experience solving smaller problems, you might not know how to solve parts of a larger problem, and thus will have a tough time. But the key thing is understanding the problem, and being able to ask for help with that specific issue. (I’ll provide an example below)
-
combine your smaller solutions together and verify they solve the overall problem.
The main idea behind forming a solution this way is if you get stuck, and you must ask for help at that step, you ask help for that step, rather than the entire problem. Nothing is less helpful than “I’m trying to do this feature, and its not working” haha.
Now to using an actual whiteboard to help solve your problem. It would help at step 1 and 2, and possible 3 to use the whiteboard as psudo-code. But past that, you probably need to research or draw from your own knowledge to know whats actually available to help you.
I wouldn’t be afraid to ask/look for help (after trying it out yourself for a while 
) just make sure what your asking for/ searching for is focused enough to get good answers.
Do you know how to draw an array? (A series of connected squares - precision isn’t important: a long “U” turned on its side, cross with hash marks will work). You can then label them with indexes above or below the boxes, use arrows to indicate swaps to and from temporary value-holder variables. Similarly, you can do the same with strings, which can be modeled as arrays of characters. If this is too abstract, Harvard has a free Intro to Comp Sci course which ought to cover this: CS50. You don’t need to pay them $90—only if you want a certificate. But the knowledge matters more.
Edit: Also, look up a video on “pseudocode” - you don’t have to worry about correctly placing parentheses and braces, semicolons, equal sign vs colon assignment operators. You just have to get the idea right. I recently wrote some tax software for myself, and I kept the pseudocode in the comments above my code as I wrote it, and it went very smoothly.