How to Become a Full Stack Developer: Part 1

It is the 21st century and the geek has inherited Earth.

A Full Stack Developer has never been in greater demand. Under such circumstances, learning to build software is one of the most pragmatic things you could do to magnify your job prospects. The pay for a  full stack developer is extremely competitive. Be it in tech giants (like Google, Amazon and Facebook) or internet companies (like Flipkart, Ola and PayTm) or even IT powerhouses (like Infosys, Accenture and Wipro); they are known to occupy the top spots in the lists of best companies to work for. In short, if you’re good at what you do, there will never be a shortage of jobs or money.

But financial motivation aside, there are certain unassailable benefits attached to programming. For one, as Steve Jobs had stated, it teaches you how to think. A computer is a machine with Zero IQ. Telling it what to do to ensure it acts the way you want it to, under varying circumstances, will shoot up your reasoning and analytical skills by a non-trivial amount.

Motivation

To me, the most potent benefit has to be power. Programming makes you feel powerful. It gives you the ability to create anything imaginable on a computer: Music Players, Social Networking Sites, Blogs, Search Engines, Workout Assistants; you name it and you can build it. Converting design mocks into real, working apps is a euphoria I wouldn’t trade anything in the world for. Once you’ve taught yourself to program, your imagination is the only thing stopping you from creating the next big thing.

Some of the greatest minds explain why you should learn to program, no matter who you are:

I’m going to tell you how to go about acquiring these full stack skills. It doesn’t matter what your college major was or the field you’re currently working in. Neither does your age or your self-perceived intellectual capability matter. Contrary to what most people think, literally anybody can program. All you need is a computer and an internet connection.

That said, let’s begin our full stack journey!

Step 1: Fundamentals of Computer Science

Before you venture into full stack development or any of the various fields of computer science, it is imperative that you get your basics straight. Online education has been one of the biggest boons to the field of education and the art of self-learning. With the advent of universities putting up their courses online, there isn’t a dearth of quality content on any subject you could imagine yourself studying. Computer Science is no exception.

I’d suggest signing up for Harvard University’s CS50: Introduction to Computer Science on edX. David Malan is one of the best instructors on the planet and his enthusiasm for the subject is sure to rub off on you by the time you’re done with the course.

To give you a sort of a teaser as to what is in store, you will learn up to 5 programming languages and technologies (including C, Python and Javascript), build a stock exchange and trade stocks, build a version of Pong and program with Google Earth to take a virtual tour of Harvard’s campus, etc.

Another option I’d suggest taking is the Pre-Course of IIIT-B & UpGrad PG Diploma program in Software Development. The entire program spans over 11 months, but I really like the way they have structured content to start off from the basics of computer science and then help you build your skillset when it comes to advanced concepts of full stack development.

Once you’re done with them, you’ll have a pretty good idea as to what the field of Computer Science has to offer. From here, you can dive deeper into the many branches of CS: AI and Machine Learning, Data Science, Full Stack Development, Information Security, etc.

In this series of posts, however, I will only be covering a suggested path towards teaching yourself Full Stack Development.

Interview with Ankit Tomar, Co-Founder & CTO, Bizongo

 

Step 2: Data Structures and Algorithms

When you become a full stack developer, it is extremely important you understand how to store a particular piece of data and how to implement a certain task in the most efficient and logical way possible. This is where Data Structures and Algorithms come in. They are the lifeblood of every branch of Computer Science in existence.

How does Google Maps calculate the shortest distance to our destination? What’s behind Netflix recommending movies? How does Facebook store and render the data of its billion-plus users? The answers lie in powerful data structures and algorithms. No wonder they are the topic of choice in almost every technical interview you will ever sit in.

For this step, I’d recommend going through Princeton University’s Algorithms I & II. They are taught by Robert Sedgewick, a renowned Computer Science professor. For our purposes, these courses should suffice to give us a strong understanding of how logic and structuring work in Computer Science.

However, if you’d prefer to go a little deeper into the subject, I’d suggest going through Stanford’s Design and Analysis of Algorithms series of courses. Keep in mind though that the course is considerably more mathematically intensive and lays immense emphasis on proofs. But should you be able to graduate, you can consider yourself an expert on the subject.

Finally, any list of resources for Algorithms would be incomplete without CLRS. Titled Introduction to Algorithms, it is the bible on the subject of algorithms. Anything that you could possibly want to know is in this book. Again, like the Stanford courses, the book is mathematically heavy and language agnostic and for our purposes, optional.

Step 3: User Experience and Design

The final ‘prerequisite’ before we delve into full-stack web development technologies is UI and UX. Now, unless you want to be a unicorn, you will not be designing apps yourself. Rather, you will be converting design mock-ups and product descriptions into code. Nevertheless, I believe that every developer must have a rudimentary knowledge of UX/UI principles and the world of design, in general.

How to become a full-stack web software developer frontend Back-end UpGrad Blog

For this, I’m going to suggest two books which are of monumental importance to the world of full stack development. The first is Steve Krug’s Don’t Make Me Think. This book will teach you the basics of UX/UI and the ability to differentiate good design from bad. The other one, The Design of Everyday Things is a book almost every designer I know swears by. It is often called the bible of design and rightly so. You will find yourself looking at the world in an entirely different way after reading this book.

These two books should be enough for our purposes. The book will arm you with tools that will let you identify good design(er)s from bad. It will also help you build decent looking websites without the help of a mockup from a professional.

How to Become a Full Stack Developer: Part 2

 

Step 4: HTML and CSS

HTML and CSS are the technologies that run every single website on the internet. The HTML provides the structure. The CSS provides style. If you’ve followed the path suggested so far, you may have already been introduced and gained a basic understanding of these technologies.

How to become a full-stack web software developer frontend Back-end UpGrad Blog

HTML and CSS aren’t programming languages. Their syntax is incredibly simple to grasp. However, when used incorrectly, they can wreak all sorts of havoc. It is imperative you learn how to structure and style your websites well. UpGrad & IIIT-B’s Software Development program would be mighty helpful for those who wish to learn these technologies to create engaging and responsive user interfaces. Supplement the course by going through Head First’s HTML and CSS and HTML5 Programming. The latter book will help you familiarise yourself with the HTML5 standard.

In parallel, I would suggest learning about Twitter’s Bootstrap library through scores of online material available on the subject. As you progress as a developer, you will gradually realise that CSS can be complicated. Bootstrap helps us alleviate a considerable amount of that pain and helps in making the website responsive and mobile friendly.

That said, always keep a CSS Reference Guide close to you. I’d recommend CSS3: The Missing Manual by David McFarland. Also, create an account on StackOverflow if you haven’t already. A considerable amount of your stylesheet code is going to be copy-pasted from this God-sent website.

Step 5: JS and jQuery

You now know how to add structure and style to your web pages. Now, it is time to add responsiveness. Enter Javascript. Javascript, or JS, is the language of the web and the only language that every browser can parse. Its monopoly on the web makes it a mandatory skill for every full stack web developer. Even if you grow to hate it, you will have to put up with it and all its idiosyncrasies.

A good place to start would be Head First’s Javascript Programming. The book provides a gentle introduction to the subject. Follow this up with Douglas Crockford’s Javascript: The Good Parts. This book will teach you to treat Javascript with the caution it deserves and the best practices while programming in it.

Javascript is a tough language to master. Often, it is incredibly counterintuitive and annoying to deal with. To alleviate the world’s front-end developer’s pains, John Resig built the jQuery library. jQuery does things in a line where vanilla Javascript would have required a dozen. To maintain your sanity, it is absolutely essential that you get a strong grasp of jQuery. For this, go through Head First jQuery. To obtain mastery over the library, give jQuery: Novice to Ninja a thorough read.

Congratulations! You are now a Front-end Developer. Theoretically speaking, you now have the tools to build the front-end of every website in existence. And I strongly suggest you do so in order to convince yourself of your newly found powers. Which brings me to the next step…s

Step 6: Build a Website

You now have the skills to build static websites. This is a good time to take on a few projects and build a website from scratch.

There are many ways you could do this:

  1. If you’re in college, volunteer to build the website for a student group.
  2. Build your personal website. Put up samples of your work, social links, resume, articles, blog, etc.
  3. Apply for a freelancing job to build the frontend of a website.

How to become a full-stack web software developer frontend Back-end UpGrad Blog

It can be anything, really. For instance, once I was done learning these technologies, I built a website for my college’s Dramatic Section. The website, in retrospect, was poorly structured and didn’t work on mobiles. But I learnt much more by doing that than from all the courses and books I’d gone through.

Step 7: Front-end Javascript Frameworks

With the advent of Single Page Applications, there has been a sudden surge in demand for front-end Javascript Frameworks. These frameworks aim at providing an MVC type of structuring on the front-end and delegate more and more backend tasks to the front-end. It is also incredibly useful in mocking the endpoints before the actual backend of the application is built.

The usage of front-end frameworks like Angular and React has increased exponentially and almost every other startup uses it. So, I believe it is important you gain a rudimentary grasp of the major frontend frameworks.

The most popular ones are Google’s Angular and Facebook’s React.

The best place to get started with Angular would be the tutorial hosted on the official website.

To gain mastery of the framework, go through Ng book 2. It’s highly recommended.

As far as React is concerned, it is rapidly becoming the most popular frontend platform in the world, with a 300% rise in React developer jobs. UpGrad & IIIT-B’s Software Development program is a great platform for you to build expertise over this framework. Through the program, you would get valuable hands-on experience on React working on cool projects like creating an Instagram-lookalike or a Quora-like website on your own.

How to become a full stack web software developer UpGrad Blog

Interview with Farooq Adam, Co-Founder, Fynd

 

Conclusion

So far, we’ve gone through curated lists to introduce ourselves to Computer Science, learn Data Structures and Algorithms, Design Principles and the technology stack of a front-end developer. In the next posts, I shall be covering the following:

  1. Back-end Development
  2. Mobile App Development

I hope you’ve found this article useful. If there are resources or technologies I’ve left out that you feel are important, please do mention them in the comments!

The following two tabs change content below.

Rounak Banik

Rounak is a final year undergraduate at IIT Roorkee. His professional interests lie in Web Development and Data Science. He has previously interned as a Software Engineer at Parceed, a New York-based startup and Springboard, a Data Science EdTech startup based in San Francisco and Bangalore. He has also worked as a Backend Development Instructor with Acadview, teaching Python and Django to around 35 college students from Delhi and Dehradun. He is currently working directly under the Director of IIT Roorkee and Dr. Durga Toshniwal on a project on Fake News and Review Detection.