Coding HTML and CSS

This website is not designed to teach you HTML and CSS; a quick Google search will turn up plenty of sites that will provide example code and walk you through how to apply it, and I’ve included a few of my favorite sites in the sidebar here. Unfortunately, it’s never quite that simple, and it’s usually the little things that trip you up. The following is an FAQ of mistakes I’ve made along the way, sorted in descending order of how much time I spent trying to figure out what was wrong. You may or may not run across the same issues, but if nothing else, it’s good to know you’re not the only one who’s spent an entire evening trying to fix their webpage, only to realize that they left out a semicolon in one line of the code.

Q: I keep trying to change the size of my text, but nothing’s happening, no matter how many times I change the CSS!

A: Does the HTML document actually reference the CSS spreadsheet you're editing? That helps.

Q: I have six div boxes side-by-side, and I calculated very carefully to be sure they’d all fit on one line, but for some reason one still got pushed down to the next row.

A: What size font are you using for the text in the div boxes? If – for example – the div box contains a single word that is just a little too large to fit in the box given the parameters you set, the box will have to expand to contain the text, and it will override the box size. Shrink the text a little and see if that helps.

Q: I have two div boxes side-by-side, but I have fewer lines of text in the second than I do in the first, so the second box is a little shorter than the first. Is there an elegant way to fix that?

A: No. Either use trial and error to assign a specific height to both div boxes and remember to adjust the height if you have to change the content, or throw in a few empty lines at the end of the second div box to make the content of the two div boxes the same length. I’m sorry. It’s an imperfect world we live in.

Q: My text is wrapping around my image really weirdly.

A: If you have an image that takes up significantly more space than do the lines of text that are supposed to be next to it, it will probably look a little strange. Either resize the image (preferably using image-editing software rather than HTML or CSS), add more text, or use div boxes or tables to position the image and the text the way you want them.

The real takeaway from the above is not that HTML and CSS are obnoxiously nitpicky (although they can be) or that you should learn to laugh at your inevitable silly mistakes (although you probably should); it’s that the key to learning HTML and CSS is patience. Things are probably not going to work properly the first time you hit “save” on the HTML/CSS files and try loading the page. They probably won’t work properly the second or third time, either. It doesn’t mean that you aren’t smart enough, or that you’re lacking some innate talent for coding, or that the only solution is flinging holy water on the computer. (Although there are times when I'm not entirely convinced on that last one.) Go back through your code, put things in and see what happens, take them back out when it turns out that what happens is that it breaks your site, then put different things in to see what else happens. As long as you don’t give up, you’ll figure it out eventually. Like with any skill, perseverance is nine-tenths of it, and that’s true at just about any skill level. It'll be just fine.