Helping Beginners Get HTML Right

It's easy to forget just how developed our pattern-matching abilities are as seasoned programmers. The inability to recognize, find and fix transcription errors is the single biggest challenge I see new folks struggle with. (A close second might be the realization that, yes, every single character matters.)

I can't even remember how long it took me to develop those skills, but it's interesting how far back I slide when working with a new language or toolkit.

That link to the Turing-complete Rule 110 cellular automaton implemented entirely in HTML and CSS (no Javascript!!!) is an incredible example of what happens when programmers have too much time on their hands. Here's the full repository:

https://github.com/elitheeli/stupid-machines

Back in the mid 00s I learned HTML basically from trial and error. Write some tags, save, refresh page and see how things look. That followed by verifying how correct it was with the w3c validator with strict mode. Also lots of changing css styles to *{border: 1px solid #000} to see how things were out of wack. I'm sure there's a somewhat better way than just dealing with trial and error and figuring out how css plays with html through the same manner & validating, but for the patient, it works out.

Thankfully now, browsers come with good editing tools to see html elements without crappy css hacks. I've always seen universities pushing GUI tools on students to learn HTML, but I really don't think that's the best way to do it. Showing them how the tags work, what they are for and using tools such as firebug is a much better way imho.

I'm sure there are other utilities that behave like this, but yours seems very aesthetically pleasing.

I'm going to try this with some friends that are struggling. I'll be sure to report back with its effectiveness.

Very cool. To make the code site even more beginner friendly for those peeps who find this tool via google, I suggest you generate a github page for this project. Just go project settings it seriously is pretty much auto generated and takes 5 mins.

Might want to emphasize your lib's dependence on jQuery, especially since your article says it can be installed in "just one line", the opposite of what the Github README shows.

This is a great idea! I think as developers we take for granted just how foreign html/css/js look to a beginner.

Step 1. Don't go to college.