The information in this post can be found in condensed form in the slide deck below. But you’re missing out if you don’t read my magnum opus that follows.
#Intro
So you want to make a website? Good for you! Making a website was my first step into coding, and it’s not that hard to learn. If you follow these steps, you can have a working website in no time, made completely by you.
Making a website is not hard, it’s figuring out where to start that’s difficult. The problem is when I was first learning, I would try a tutorial that just taught what code to use without saying why. And if it tried to get me to figure out the code on my own to learn why, if was often tripped up by minor things that have nothing to do with what I needed to learn at that moment. Often, the things that adequately explained why things operate the way they do were quite dense and had little chance for hands-on. The flashiest and most enjoyable things are often also the most shallow and unsatisfying. So for a long time, my workflow was to try a flashy tutorial, thinking I knew what I was doing, then to go try it on my own and realize I had no idea how anything worked. The best way I can explain this is with a quote from programmer Jade Dominguez in “The Pain of Teaching Yourself to Code”
“The self-learner must gain conceptual awareness.
He may rely on a baseline collection of reference materials he’s discovered to do it. He may enlist tons of Google-fu to painfully acquire morsels of increased awareness. He may take this awareness and further refine his question on stackoverflow. He may go “keyword hopping” where initial searches lead him to unknown keywords for which he can refine his initial search to gain more awareness and repeat.”
My mission here is to make sure that your time is not wasted going down rabbit holes of confused Google searches because you don’t actually know what it is you are looking for. Additionally, the experience of gaining conceptual awareness as described above, however infuriating, is integral to gaining a full appreciation of what you are learning (Actually, I have no idea if it is actually integral, I’m not a cognitive researcher, but let’s just go with it). Therefore, I will aim to provide the fullest context I can without spoon-feeding, and try to point you to the places you should look, all in a narrative format.
The reason for the narrative format is because all of technology is built on what has come before it, by “standing on the shoulders of giants.” To understand why things are the way they are, you have to understand why they were the things they used to be, the problems they exist to solve. Then you can understand how they can be used to become what they will be in the future, and you become part of the progress, and it all just makes a lot more sense. This all sounds great in my head, but now it’s time to get down to learning.
First thing first, none of this tutorial is completely original. I have been influenced by multiple other great online resources such as HTML Dog, Codecademy, Khan Academy and Awesome Inc U. [Disclaimer: I intern for Awesome Inc, the initiative behind Awesome Inc U]
Secondly, I probably made a lot of mistakes that will cause you trouble. If you get stuck and need help, ask for help! You can contact me, or try looking up your question on Stack Overflow. Chances are that someone has had the problem before, and if you can’t find anything, try asking your own question.
If you know how to, you can just submit a pull request directly to this site to make a change.
One more thing. If you need inspiration, I would like to introduce my hero Adam Savage. He says a lot of great things about learning, but this one is nice and pithy, despite being repackaged into an ad for Discovery Channel (It isn’t actually his voice in the video). The monologue comes from a TED Talk he gave in November 2011.
May the Force be with you.
#Format
This post will be published incrementally, as I develop it, so it will be perpetually incomplete. I will, however, try to update it in complete sections so that each increment is actually useful. the sections will be formatted like this:
Title: A header to tell you what you’re about to read
Reading List: Part of the “conceptual awareness” thing I talked about earlier. Reading these is not required, but will definately expand your knowledge of the material and its context.
Recommended Tutorials: For sections that call for it, I will link to tutorials I find helpful for hands-on learning. These are essential for developing a workflow. You can do these before, after or during the section, but you should do them.
The rest is where I get to teach, rant, tell stories, drop pop culture references, and share how I think the best way to approach the topic at hand.
#History