Awesome resources to become a web developer.
Many people have asked me the route to learn web development quickly or as fast as possible. My answer to them is: there isn't one. Web development is such a big concept that it'd be impossible to learn in just a few months. This guide I wrote is the path I took to learn what I know about web development in a year. Naturally, this guide doesn't include all the mistakes I made and all the time I lost trying to teach myself a technology that didn't click with me. I listed all that I learned so you won't have to waste time. I will exclude things like text editors and version control because those are personal preferences. Enjoy:
These are links to places I go to when I have a question.
These links are the steps I took to learn web development, in order, and the time I took to master it, with practice included:
It's worth noting that since this is the base of all your development education, you shouldn't move on to the next topic before mastering HTML and CSS.
- HTML & CSS course, I didn't finish it, because I started practicing right off the bat. I made about 3 websites before moving on to the next topic. So when I came back to this course I had already learned all of it and more.
Alright, so you think you know html and css. But what do you know about responsiveness? Or frameworks like Bootstrap or Skeleton? What about animations? Not to worry I'll link them to you, no wasting time and searching on the web.
-
How to Bootstrap Bootstrap is the biggest guy on the block, it has many awesome features like a grid, boxes, tables, modals, and javascript functionality. My personal problem with this, and any other frameworks is that developers never get into the responsiveness of things, they don't know what's happening don't explore the possibilities and what's our there waiting for them. It's an amazing start for newcomers, but delve deeper into the HTML and CSS of things.
-
SkeletonCSS A personal favorite, lightweight, simple and only includes the essential grid.
-
CSS3 + Animations It took a while to learn this. It's tricky. But you'll get it down in about a week or two.
This is one of my favorite parts of web development. Sass. Oh. My. God. Preprocessors are a way to write better, slimmer and easier-to-read CSS. You can even go so far as to write no brackets or semicolons. It's amazing for quick prototyping, and it'll be hard to go back once you start practicing. All of my projects are written with Sass. It's ridiculous how 10 lines in Sass can equal to 30 normal CSS.
Sass
Yes, I know it's a lot, but bear with me, by the time you get this down, you're on to the amazing world of JS.
This is where things get interesting. Javascript and jQuery. Because from here you can choose a JS framework or pick a backend (more into that later). Many people fight over wether jQuery is actual programming or not. I think it is. So there's that. First, of course, to use a library we must learn the language itself. So:
-
JavaScript This should be enough knowledge to advance into the jQuery department. What I did here was use some vanilla JS to make some websites interactive. I made 2 websites before jQuery.
-
jQuery Although people argue jQuery is going downhill, it's just losing its popularity, but it's still an amazing tool to have under your belt to create things.
Keep in mind these guides are the basics, I went on my own from there creating imaginary projects and some client work as well. That made me better in the JS world.
So how is JS and jQuery used in the real world and in the web? Take a look:
During this period, I wasn't sure how JS really worked. Nor why I'd want to use it, so I looked for inspiration around the web and I found this:
It's basically a playground were developers do clever and beautiful things. If you want to learn and see how people do things, go ahead and give it a try.
Webpack
Please keep in mind that these are not all the task runners or package managers in the world. These are just the ones that I liked and clicked with me to help me learn and speed up my development process. There are other options out there, but these are my personal favorites.
Alright, here we are. The best part of front-end web development. Why? Because we get to build real webapps now! Aren't you excited!? (You can take a breather). So, here's how it works: A JS framework lets you have the full functionality of an app but only running on the client side, while hooking up a BaaS ( Backend as a service ) like Parse or Firebase to manage all your data for you. But there's so many!? Look here:
- You select a JS framework. (How? The one that has the prettiest name, has the best landing, etc.)
- You make a simple app to test out the framework. Maybe a todo, just check things out.
- Practice.
- Get good.
That's it! I personally like React, it's a library, not a framework, but you get the idea, if you include other libraries like Redux and Flux, you get a whole app running. At first it took some time for things to flow. Why would I even want this? I can do that in plain HMTL and CSS. But then it clicked. It all comes down to the data. When you need dynamic info to move around your app, you'll need a framework. And that's where React kicked me in the face and I understood it once and for all.
This is where things start to get fuzzy. This is where all the rainbow-colored things die. I'm kidding. But this is where I had the most trouble thriving. The backend. The problem with this is having to choose (yet another) language for the server-side. There are two problems here: 1. Choosing stuff. (why are there so many options?) and 2. Having to learn another language. This is hard, you know HTML, CSS, JS. PLUS Sass, CoffeeScript, Jade and jQuery. Isn't that like, a lot? It is and if you're reading this, you're awesome.
Languages
These are the languages that I learned to become a backend developer.
- JavaScript (duh) I knew all the front-end part, why'd I choose a different language for the backend?
It sucked. I tried Sails, I tried the MEAN Stack. And it didn't work. It didn't feel good. Express was weird, MongoDB was weird, Node itself was pretty weird, I didn't get the hang of things and things didn't move for a few months.
Keep in mind that these frameworks are AWESOME and everybody should try them at least once if they don't love it at first sight.
I tried it for a few months, mostly March through May (2015) and I didn't get anywhere. So for now, JS goes in the front-end side of things for me.
- Ruby <3 I didn't want to do it at first 'Ew, why Ruby?', but then I took some lessons (listed here) and now I'm in love. The language itself is elegant and expressive, there are tons of ways to do tons of things, and that's where I discovered Ruby on Rails.
I did all that and read a few books (in the book section) and I was ready to take on rails.
My ruby baby Gitwrap
Rails
Rails is cool, it helps you out a lot, and makes you development go fast, you don't have to worry about the annoying stuff, only the amazing, coding part and cool-as-beans building webapps part.
Now, this is what I did to learn Rails in a week. Yes, after a week ( 7 days, 12 hours straight ):
I have the physical copy of this, so if you see me walking around just ask.
That's it, after the book I went straight into app building. I did everything: todos, blogs, reddit clones, everything that came into my mind, I built. Why? Because it's easy to learn, that's the way to learn, practice.
Also, dig into Rails gems, many times I found myself trying to implement a functionality that someone else had already built and made into a gem so other people could use it. (Devise, Cancan, CarrierWave).
Rails resources I use almost daily:
Of course, if Rails or Ruby isn't your area of interest, there's always other server-side languages and frameworks to choose from. Somebody once asked me how to start, where to start with these things I personally don't know. What I'd recommend (and it has worked for me) is to check out the official website of the technology you want to know. If you want to learn Django then go to their site to see documentation and how to get started. Many of these website have included learning resources and courses to help you learn quickly.
Books I've read during this (never ending) journey:
- John Duckett's HTML / CSS & JavaScript / jQuery Books
- Peter Cooper's Beginning Ruby
- The rails 4 way
- Object Oriented Programming
While learning all of these technologies, I was up for hire. I had different clients, some excellent, some terrible that bailed on me. Regardless of that, I appreciate the practice and the learning I acquired from them.
Another freelancer advised that you should establish a first base price for your first project, and then add 10% as you go, and never go for less than that.
Your work should be human, and not just 'a website factory', try to be passionate and be in contact with your clients, they'll appreciate it, and recommend you and even come again. At the end of each project ask for feedback to get better and improve your skills.
I've been doing web development since October (2014). I have done many apps, learned many things, and I still learn new things everyday. To everybody that asks me, "How can I become a developer ASAP?". Please consider re-reading this guide, it really has all the steps to even get a good-paying job in the tech industry. If you can manage to master these things, I guarantee you this.
To be a developer is not only a discipline, but a passion that takes dedication and sacrifice. It is to think like an engineer, to come up with the best solution an how you can make a client competent, and satisfy him with your awesome skills. Many times have I said no to a party (or something of the sort) to stay at home with some friends (or even alone) to keep learning. I encourage you to never stop hacking and make amazing stuff not only at hackathons or at school, but also at home, with your friends or even a startup.
You can do this.
-Oscar Elizondo H.