Troubleshooting
If you’re reading this page because something in your current exercise or project is broken, first and foremost:
Remember: Troubleshooting is a normal part of the coding process. Here are some tips to help you to identify where issues are in your code and for solving those issues:
🧹 Clean up/organize your code
- Make sure you have proper indentation; this makes it easier to find missing closing tags in HTML or closing brackets in CSS.
- Alphabetize your CSS properties; this makes it easier to spot if you have written a rule that is overriding another.
🔍 Review your code for:
- misspelled properties, elements or classnames
- mismatched classnames (e.g., the classname in your HTML and CSS don’t match)
- missing brackets or semicolons
- spaces between numbers and units (e.g.,
width: 20 px;) - missing hyphens in properties or classnames
🕵🏻♂️ In your browser, use dev tools to explore the problem
- Does the HTML structure look wonky? You may be missing a closing tag somewhere.
- In the CSS explorer, is a declaration unexpectedly marked out? This means the code is either broken or is being overwritten by another declaration.
🔲 Isolate the problem by commenting out code that you think is unrelated
◻️ Start fresh; create a new Glitch and retype the code you think is creating the problem.
- Don’t copy and paste, as that would negate the purpose. This is a fine way to catch misspellings or missed elements, like a unit or bracket.
👀 Ask someone else to look at your code (ideally, either on GitHub or isolated in a Glitch so they can muck around a bit)
- Their fresh set of eyes may catch something you’ve glanced over.
- Your colleague may understand a specific bit of code better than you do (e.g., they may know that a value is invalid for the property you’re using).
💡 Take a break
- Exhaustion and mounting frustration do not make for clearheaded troubleshooting. Even walking away for 5-10 minutes can help you reset.
- I know this is hard to accept when it’s an hour before something is due, so try to give yourself plenty of time to complete assignments.