Games to improve your coding

When you are doing ANYthing, whether it's your job, your schoolwork, a hobby, or whatever — if you want to get better at it, consciously or not, you create games with rules to help you improve.

If you are playing a video game, the object is to make as many points as you can, gain the highest level you can, or gain that highest level as fast as you can. If you are learning to hand sew, it might be to make the stitches as straight and even as possible; it might be to make the stitches as small as possible; it might be to figure out a decorative way to make the stitches.

Specific web coding games

As a web designer, there are several mental games you can play play to improve your coding:

Organize and indented

• Make your code as organized and easy to read as possible, using tabs, spaces, etc. + comments to explain everything you're doing, so that anyone could understand it, and you can understand it when you go back to update it in six months.

Separate style from content

• Keep the coding for style (css instructions) separate from the content (basic html coding and the words that are coded). We said css codes could be placed in-line, in the head, and in a separate style sheet. Placing them in a separate style sheet makes it faster to code, and makes your pages more consistent. (You just type <h1> rather than <h1 style ="attribute"> over and over.) You can even use those style sheets over for other projects.

Simplify

• Make your css as simple and all-encompassing as possible. The game is to not write any inline or page-specific code, to keep everything in linked style sheets that apply to multiple pages, and to keep even that very simple.

Semantic Web

• Use the semantics of html to add another level of readability to your code. The concept that your most important headline should be coded as an h1 headline, the next most important is coded to be h2, then h3. Lists use <ol> or <ul>; <blockquote> for quoted text, etc. There is also a payoff in this game that it will help search engines evaluate and rank your web pages.

I looked for a good article on semantic web coding so you could better understand it. Most make my eyes glaze over. Here's some better articles:

Relatively clear article on semantic web

• The Importance of HTML5 Sectioning Elements, Smashing Magazine

More difficult articles on the semantic web

• Introduction to the Semantic Web, Semantic University
• Semantics in HTML5, A List APart

To summarize them, in html 4, you only had divs to seperate elements, and they were a strictly visual division. But if we correctly code HTML5 using sections, articles, asides, etc., people and screen readers can determine what order text belongs in, and what information is grouped with what, to help them make sense of it, even if they can't see our beautiful design. If semantically correct, your page can be parsed by an outlining program, and the outline the program creates would look like the one you would create if you were outlining it yourself.

Outlining using sectioning elements

• Here's an article that explains outlining using html5: html5doctor.com/outlines/ 
• and here is an outlining tool: http://gsnedders.html5.org/outliner/

Summary

All four are good games to be playing while coding — how well can you use all of these when you're coding your web page?