How to learn web development
As i run a web development bootcamp i get in contact with a lot of beginners. Many people want to learn web application development or at least learn what that is. I have written a series of articles to answer the most common beginners questions. I suggest you read all the articles and then do a course or bootcamp.
So the very first question, what is web development, is already unclear at the outset, and of course, since even wikipedia starts by saying that it a broad term. To define it for this series, i mean it as a short form for web application development. Web applications are similar to their static cousins (web pages), but dynamic. Usually this means user input (like searches) and dynamically changing content. Many of the same techniques are used for both, but in web applications, code or programming, is responsible for generating the web pages.
And of course, with so much internet going on, and people being people, there are a million ways to do the same thing, hence the “broad”.
Learning
To learn web development you have several options to choose from, and the main assumption here is that you are trying to teach yourself. At this point most articles on the topic jump into what you need to learn, ie web and development.
But for me the most important factor is the learning itself. You should understand what you are getting yourself into: Learning on your own is difficult. We are used to getting things taught, we do not learn independent learning at school, and most not even at university. The lesson here: find out quickly if it is for you. Do an intense month and if you are not satisfied, go to other options.
Guided online courses, online bootcamps and bootcamps are the next options, and they are good options. Considering that you can get your money back within a year, bootcamps are also good investments. But the main point here is: value your time. If you do not value your time, you will be wasteful with it and end up frustrated. Do not make zero monetary spending your priority, as it means zero value for your own time.
The second big thing to realise when trying to learn web development is scope. At bootcamps students put in about 400 hours and go from very little knowledge, to junior developer, possibly after an internship. Now guided learning is much more efficient and so on your own you are looking at 800–1000 hours. Shy of half a year full time, one year or more part time. And, if you can’t do more than 2 hours a day, you are wasting your time, because of the time it takes to get back into it every day.
In other words, you must be committed and disciplined.
The third big thing to realise is that web application development is a skill (like playing piano, or carpentry), not knowledge (like history or jeopardy). You learn it by doing, not by reading. In practical terms this means you should, right from the start, spend at leat half your time doing things: Write code, html, css, ruby, whatever. Even if you are copying it from codepen, that is where we all start the learning process: by copying. After a month you should be at three quarter of the time doing or more. Do not get lost in more theory than you can handle: do, do do.
Web
On to the actual thing, web development is web and development, and so you need to learn about both. The internet is of course full of info about what the web and the net actually is, but it’s not always said beginner friendly. Nay, complication is the engineers way it seems, so i just want to clarify the basics, the very very basics. The 1–3% that will set you on your way and give you a way to understand and classify the other 98% that you can then learn elsewhere.
There will be a later post on the internet, but for now we’ll just go with a very simple analogy: the net is like streets, and computers like houses. The domain (here medium.com) is the address and the uri (right of the name) points to a specific place within our application/house. The main point is that we can address every server on the net, and parts within an application.
The web (world wide web == www) is the addressable collection of all web pages on the internet, mostly conforming to the w3c standards. These evolving standards (anyone can participate!) govern how the pages that you see are transferred (http/s), structured (html) , displayed (css) and changed (javascript). I’ll do a post on each of those, but a super short summary to get an overview first.
Http (Hypertext transfer protocol) specifies how a client (your browser) can make a request to a server, and how the server responds with content, eg in the form of html. This is called a client server architecture where there are many may clients, but only one server (like a classroom). Http also defines error codes and can transfer any content, like images, stylesheets, etc. Requests usually come from users clicking (but can come from filling a form too), and designing, implementing and deploying the software for the server is what makes web development.
For the browser to display a web page, the first response is always html (Hypertext markup language). Html has two parts, a header and a body. The header is about the document, defining eg the html version or attributes like the author. It can also reference styles and javascript. The body is the actual document, which is a hierarchical structure of elements (like files in a mac finder / windows explorer). The simplest way to think of it is that each element is a box on the screen, and each element may contain more elements, making the whole document boxes within boxes (within boxes . .)
The browser uses css (cascading style sheets) to actually display the html. There are three different aspects in which the css defines how elements are displayed, but all of them are defined and applied using the same rules that i’ll go into in a separate post. The first aspect is positioning or layout: This defines how large or small the boxes are, how they relate to each other and the page. The second is what one may think of as style, eg fonts, colours, backgrounds, borders, shadows that kind of thing. And the third, quite a newcomer, is dynamic properties. For example colours can be changed or transformations applied (flips, skews etc), but this is quite advanced.
Once the page is displayed, javascript may be used to make any changes. Yes any. Javascript is a fully fledged programming language, and while it was designed for small little things, the kind of things one can use css for nowadays, it can be used to do much much more. In fact it can be used to create the whole web page inside the browser, but this is a different story (if you think it’s your story, look up angular). I will be explaining more standard use of javascript, like infinite scrolling, in another post.
Development
Now that we know a little bit about what we need to create (html/css…) we can start to think about how to do this. There are of course many many ways to do this, but many of the solutions are ultimately quite similar, because they solve the same problem. So as long as you learn one well, the others should be easy to pick up. As we will have to choose one, i will go with my favourite, which is ruby on rails. Ruby is a language designed for programmer happiness and rails, a framework for web development, is designed for developer speed. Also from a beginners point of view: other languages are harder to learn, and many other frameworks have copied from rails. In other words rails has established many of the best practices in use today, so learning it is a very good start.
The things we develop in software development (ruby, html, css etc) are still, just like 50 years ago, stored in text files. Also commands to the computer) are mostly still typed into a terminal. So you will need to get and learn how to use a text editor and a terminal. I use atom and iterm2, on a mac. I would not suggest to develop on a windows machine, and if you know Linux, just do your thing.
Now that we have the basic tools to create and edit files, you should start typing. Copy code, eg from codepen and try things out as you read about them. The one missing tool to do this is called a developer tool, and is built in to any modern browser. Usually activated by highlighting some text and “inspect”-ing from the context menu. This will give you insight into the html and css and how it all plays together.
As the final step to becoming a developer you will have to learn that it is a team sport that you are learning. Developing anything of value is (like building) such a large tasks that it’s usually performed in teams. Also the open source community is all about sharing, and the tool most used for sharing is called git and the place where most open software lives today is github.com. Get yourself an account and show the world (your future employer) what you are made of. 1–2 commits a day, minimum, 3–8 better. Consistently. Happy coding.
The next article is an overview of the web technologies .
