“#*@#, why isn’t it working?” If you find yourself saying that a lot, think about these basic coding gotchas. These are some very basic things that can trip you if you’re just starting out with HTML, CSS, and other things (I guess).
Just remember — everything is different, everything has its own troubleshooting steps. Understand how to fix problems in general — don’t just remember how to fix specific problems you’ve encountered before. It’s more useful for you to have general problem-solving and troubleshooting knowledge that can be applied in a variety of different environments.
Gotchas
Spacing and Capitalization Matter
Both of these things can cause errors and strangeness. Make sure capitalization matches for the easiest time all-around. With spacing, sometimes it matters and sometimes it doesn’t — it depends what you’re doing, and it can change situationally. For instance, with a HTML unordered list, if you set the list item elements to inline-block, you’ll have spaces between them. There are a bunch of fixes for this, but if you’re starting out and you haven’t heard of this weird gotcha, it can be extremely strange to encounter for the first time… especially as spacing doesn’t otherwise tend to matter in HTML/CSS.
Avoid Bent/Smart Quotes
This can break your code, simply put. Sometimes it happens when you copy code from a site that automatically converts quotes and apostrophes. If you just started coding it might happen because you’re trying to code in Microsoft Word or some other program that converts quotes. Don’t — use Notepad++ or Sublime Text. They’re made for coding and they won’t cause problems with formatting.
Character Encoding
Sometimes — rarely, if you’re working with simple files in English — you’ll get some really odd errors with individual characters on your site. It might take you a second to notice — maybe some things have been replaced with a diamond-shaped question mark, or some characters have been appended or prepended with other weird characters? This is often the fault of character encoding. Sometimes when working with files over FTP, the character encoding gets swapped.
The one in your text editor might be ASCII, while the one on your server was UTF-8. Or — your FTP program swapped it over on you. Switch the character encoding to UTF-8 without BOM (and if that doesn’t work, try UTF-8 with BOM). Double-check your FTP settings to ascertain it isn’t interfering.
Some Things Need Extra Things, Some Don’t
HTML, CSS, JavaScript, and certain other things will run on your home computer no problem. You can save a .html and a .css file on your home desktop computer, open the HTML file in your browser, and view a working website. You can write some code, save it as a .js file, and add it to a HTML file — it’ll run right in your web browser.
This is actually a great way to start out learning the barest basics, as it saves you the cost (and trouble) of buying a host, getting it set up, and learning a bunch of other stuff. If you just want to start out writing HTML and CSS, this is a great way to do it.
On the other hand, if it’s something like PHP, Ruby, or Python, you may need to download additional tools and set up a local development environment. (e.g., XAMPP or WAMP to run PHP; installation of Ruby on Windows computers). If you save a file as .php and try to open it in the browser, it won’t work. Keep that in mind and make sure, if you’re working on something, it doesn’t depend on something else to work.
Troubleshooting Tips
A+ #1 Troubleshooting Step
Turn it off and on again. Just try what you already tried, refresh the page, save the file again, close and reopen the program, reconnect to the server, etc. Maybe when you logged in, something went awry with permissions. Maybe you refreshed before the CSS file was completely uploaded if you’re cowboyin’ away on a live server. Maybe a goblin intercepted your transmission. Who knows?
Before you assume it’s broken and jump to troubleshooting, just try again. You don’t want to try to fix mistakes you really haven’t made. When it fails twice, then you can roll your sleeves up and start digging.
It is super, super easy to get into the habit of immediately leaping to search (seriously)… but that takes way longer than just trying again. You can also be prone to falling for this one if you’re trying out a new technology, because you expect more errors. Well — great news: sometimes they aren’t your fault, hooray!
Hard Refresh
Sometimes when you’re working with code, and especially on a live server, you may need to press CTRL + F5 to “hard refresh” the page. This is a refresh that ensures you aren’t loading anything from your browser’s cache. Cached items are probably not updated to the version you just saved: the change you just made isn’t there, because the browser loaded from its local cache instead of downloading your updated version from the server.
Read the Introductory Text
This can save you a ton of aching and time. Make sure you read over the introductory text. Skim if you really can’t bear to read*.
*But seriously, read it before you ask a question. Otherwise, someone somewhere is gonna hyperventilate at their keyboard and you’ll contribute to humanity’s rising collective stress! Don’t do that!
A technique that works for me is to read until I can’t understand anything just by reading anymore. For instance, in the Git book (which is awesome, by the way) I read up until about Chapter 4. I started Chapter 4 but abandoned it quickly as it stopped making sense. I realized about then I needed to practice the basics, firstly, and I also needed to actually work with the technology to really get what the next chapters would discuss. So I stopped reading, and started practicing.
Yes, some things have bad documentation, whether difficult to find, too sparse, or too technical. However, the great thing is — there are tons of different tutorials and resources you can use beyond the official documentation. Often, when you dig beyond the official stuff, you’ll find others lamenting the documentation, too! That can be helpful in teaching you and affirming that, no, it really wasn’t just you.
Other Essentials
- Did you spell it right? Make sure the spelling of your CSS class matches your HTML class attribute. You can actually avoid this somewhat by naming files, classes, etc. intelligently. “drsmall” is more difficult to read (i.e., more difficult to spot a mistake) than “directory-small” when coding.
- Did you edit the right file? Editing the home page when you meant to edit the About page can cause errors!
- Did you actually save the file? The number of times I’ve angrily switched back to Notepad++, only to find the icon indicating I haven’t saved, the number of times I didn’t switch to FileZilla to confirm the upload… yeah.
- Did you use the right symbol? In CSS, # (id) is different from . (class). They are not interchangeable.
- Did you close the tags? Did you close all apostrophes?
- Is there something else overriding your CSS styles? Right click and inspect the element you’re trying to change, and view its styles to see if something overriding your style.
Going Deeper
Disabling Plug-Ins, Extensions, Etc.
Disable your plug-ins/extensions/any other baubles you’ve added — and do so wherever you can (browser and your code). This can help you eliminate different areas where the error may be coming from.
In the browser, an easy way to do this in Chrome is to CTRL + SHIFT + N. This opens a new incognito window. Incognito windows run without extensions by default, for an easy way to do so in the browser. If your images suddenly show up, maybe your AdBlock was preventing them from showing up?
On WordPress, you can disable all your plugins and re-enable them — one by one, and then one plus one plus one again — until you’ve determined where the error is coming from. If none of the plugins produce the error on their own, try reenabling them in pairs, trios, and then all together until the error happens again.
The basic tenet is to pull things out and simplify until you have the simplest set-up with the error. This helps you determine where it’s coming from rather than blindly trying things until something works!
Things You Can Do to Reduce Errors
- Use tabbing, new lines, and blank lines to format your code. It’s not a matter of making it pretty or being picky. It makes things easier to read. If it’s easier to read, it’s easier to see when there’s a problem. Obvious errors tend to become really obvious when you can read CSS and HTML… but only when the code is formatted for readability.
- Write down what you did and how you fixed problems the first time. Even if you remember it now, if the error is esoteric or rare or otherwise not something you’d regularly encounter, you might lose that information if you’re not regularly accessing it and using it in the interim. You don’t perfectly remember everything, and this can save you time in the future.
- If you’re already writing, it may also help you to write down your thought process — i.e., including paths you took that did not solve your problem. Why did you think it might have? Why didn’t it? This can help you recognize where you might be misidentifying problems, or maybe where you could investigate a problem more deeply before leaping to the solution.
Try This One Weird Trick to Avoid Errors Forever
If you thought I was serious, sorry. You can’t avoid errors, certainly not with any one weird trick. Mistakes and errors happen because… we’re human and we make mistakes.
Sometimes we’re tired and trying to work too fast, too hard. Sometimes we get distracted, sometimes someone shatters our carefully-honed concentration. Especially at first, you are gonna screw up a lot. And, despite the Internet’s plethora of well-meaning advice, you will do many things you later learn were Really Bad Ideas. It happens. You might even make some pretty costly mistakes: people might yell at you.
There’s that old adage about practice. If you want to practice, you will make mistakes. So whatever, yo. You’re learning and that’s awesome and so are you!