Learning to Code: Infinite Resources, Not One Glossary

Every day, there are people jumping into web programming and design. This is excellent: the more diverse the creators of the web become, the better.

Unfortunately, almost all of the resources out there for starting on this path are extremely specific. Newcomers learn about the idiosyncrasies of Rails or Django well before they have a good grasp of browsers, HTTP, or hash tables. They learn from the wrong direction. Someone with a computer science degree might be interested in the implementation of Objects in JavaScript, and I bet there are quite a few posts describing just that around the web: a couple thousand words laden with terms like "associative array", "properties", "hash". This is not what the starting developers need. They need just enough explanation on every topic to understand their context and move on.

Novice programmers need a glossary entry, not a surgical walkthrough. API's? CMS? Responsive Design? Git? HTTPS? Why Javascript in the browser? None of these things are obvious.

Even the wikipedia entry is guaranteed to give you an avalanche of tangential information that doesn't help. How can a novice possibly be expected to absorb walls of options like this?

I bet someone's clicked on one of the PHP options.

With programming, it's easy for core technologies and pillars of human accomplishment to get mixed up with niche libraries. With libraries and languages alike, we need to make sure to place them in context first. Tell people why they might want to use your code. Tell them what people are using it for. Warn them of traps, even if the traps seem obvious to you.

Otherwise we'll have aspiring web programmers trying to start a website in Google Web Toolkit. It only takes one experience like that, and they'll never come back.

The Only CSS Defaults

Get a CSS Reset, like Eric Meyer's. And these two:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

Images should not overflow their container by default, and you want border-box. That's all.