How to Learn Web Development – 2 Steps Approach

Learning to code may seem like a complicated process, but it doesn’t have to be. Essentially there are two basic steps you have to repeat over and over again if you want to learn to code. The same two steps apply to beginners just as well as they apply to advanced programmers.

Step 1: Read / Watch the theory

read some theory

Every time you’re learning something new, you have to start with the theory. If you’re learning to code, you first have to find out about the basic elements of programming (variables, conditionals, loops, functions, arrays, etc). That’s why beginners start with a book or a course and more experienced programmers first read through the documentation.

First steps if you’re learning web programming

Find out what is HTML, CSS and JavaScript. New concepts are difficult to remember. Don’t worry about it, just keep handy cheat-sheets and you will learn them unconsciously simply by using it. That’s how it worked for me at least.

All these new concepts don’t stick straight away – the most important thing is just to know they are there. Then move to the second step.

Step 2: Find a simple, but useful project idea to actually use your new knowledge.

build something real

It doesn’t have to be unique, just somehow useful.

I hear and I forget. I see and I remember. I do and I understand.

Confucius

This is where most beginners fail. But it’s hard to blame them, when you’re starting out it is really difficult to think of something that you can actually make. To make your life easier I’ve made a list of simple apps you can make to learn html/css, javascript and php.

Tutorials are also a good starting point here, but be careful – many tutorials try to teach you how to do some useless things therefore they are boring to follow and end up somewhere in the bookmarks with the label “looks useful, but maybe I’ll look at this later”. That’s why I recommend using TeamTreehouse.

 

Image sources: http://500px.com/Jphotog66 http://500px.com/vanmarciano http://www.flickr.com/photos/mpa/