Need help? Having problems?

Learning to code means running into problems, like, every five minutes. That's totally normal. Google will help a ton (and never feel bad for using it!). But what if even googling doesn't help? Well... Here you go.

How to troubleshoot

to troubleshoot (v.): "trace and correct faults in a mechanical or electronic system."

The most important thing for troubleshooting your web development projects is knowing how to use your browser's developer tools. Every browser has them, and thankfully they work roughly the same in all of them, so you only need to learn it once. Open your website in a browser of your choice and press F12 or open the development tools over your browser's menu (e.g. Firefox: Menu on top right -> More tools -> Web developer tools). Alternatively, you can also right-click any element on your page and select "Inspect"/"Inspect element", this will also open the development tools. The development tools have multiple tabs. For beginners, only 2 are important: Inspector, and Console.

Inspector

This will show you the HTML of your page. You can select lines of code to select elements on your page, and the CSS rules that apply to that element will be shown at the bottom. You can also temporarily change these CSS rules or the HTML to try things out without having to edit your code. (Keep in mind that any changes you make in here are gone once you refresh the page!).

The Inspector is a great tool to find out how elements are actually rendered in the browser (as this might differ from what you expect) and to find out which CSS rules apply to an element (for example, it might be the case that a CSS rule you just coded doesn't work because it is overwritten by another one).

Console

The console is your best friend when you work with JavaScript. I recommend always leaving it open when making changes in your javascript. It will show you all errors, as well as any outputs you have defined in your code using console.log(...);. These console.log(...); statements are a great and easy way for beginners to debug JavaScript code, because you can output the value of one or multiple variables and check if they are as expected. For example, your code might not work because the value of a variable is a string even though you expected it to be a number.

Example:

const myVariable = "test";
console.log("My variable = " + myVariable);

Errors are also great to see. (What? Errors are great? Yes they are!) Most of the time, they tell you exactly what is going wrong with your code, you just actually have to read what the error message says. If you don't understand it, google it, and you will find out.

Error messages even sometimes show you exactly in which line of which file the errors happens. Click on the blue file name to jump to that position directly.

Here are two common errors:

• Any error with "undefined", e.g. "reference to undefined property": A variable that you are trying to read/use has no value (the value null).
• "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...": This error pops up on Neocities page if you have a free account and are trying to use external scripts. Read more about this problem here.

Keep in mind that the console might also show you errors/warnings from browser addons you have installed that affect the page. You can ignore those.

Where to ask questions

StackOverflow: The best and most popular site to ask for coding help is StackOverflow. They are very strict with how you need to ask questions, so be sure to read the section "How to ask questions" below. Tag your questions with relevant languages (like javascript) or hosting sites (like Neocities) to get more answers.

Reddit: If your site is on Neocities you can also ask question in the /r/Neocities subreddit. I'm also lurking over there and helping beginners from time to time. Again, make sure to read the section "How to ask questions" below so that we can help you better!

How to ask questions

Before asking questions:

• Troubleshoot to see if you can find the mistake yourself (see above)
• Google your problem; you're most likely not the first with this question
• Read through my common questions page or any FAQs you know.
• Use the rubber-duck method: "The idea is that when a programmer needs to debug their code, they should explain the program line-by-line to a rubber duck. Often, the act of explaining the problem step by step will cause the solution to present itself." (Yes, this actually works. No, you don't need to use an actual rubber duck.)

Still need help? Alright.

How to ask questions:

• Include your code. Only include the code that is relevant to your problem. Never just paste your entire file(s); nobody's going to read that.
• Explain your code (if necessary). Your code - if your code quality is good - should be pretty much self-explanatory. If it's not, you should add some explanatory comments so that those trying to help you will have an easier time doing so.
• Include a link to the relevant page (if applicable, and unless the change is not online yet)
• Describe your problem in as much detail as possible. Mention:
  • What you are trying to do.
  • What the result should be.
  • What the result is currently. / What's wrong.
  • What you've already tried. / What you know the problems isn't.
  • (If applicable) Which browser you are using and on which device (e.g. Firefox on Windows 10 desktop, large screen)
  • etc.
• Be polite. You're asking for free help, say please and thank you and don't demand help or quicker answers.