Baby steps of a web developer: Fresher’s guide

Published in

deqode

13 min readOct 24, 2018

The corporate world can be very daunting or very demanding, especially when you are a fresher. From a comparatively plain sailing journey of a college/university life to a highly competitive working environment, the transition is never easy. Yet I can tell you that getting into the battleground is damn exciting. You get to learn technologies that you might have never heard of, learn stuff from the elites out there and the best of all; you feel important because your code and your effort matters to the company.

The only problem is that you just don’t become an integral part of a team overnight as you need to prove yourself. The only way to prove yourself is by your work, and the only way to get the work done is to learn all that you can. You will gradually realize that it is a process and being surrounded by people sharing common interests, you are most likely to find this transition easier than it initially seemed to be.

“ Develop a passion for learning. If you do, you will never cease to grow” — Anthony J. D’Angelo (Some wise guy)

Well, if you are thinking of venturing into the world of web development, this blog will help you get you kick-started.

First things first

Okay, that’s all well and good, but as freshers, we have a hell lot of questions and insecurities in our curious heads. We have no clue how the company works, no idea how to code (we are not taught any of the important stuff in college TBH) and it is even harder for some people who do not have a coding background at all. If you have that kind of a curious mind about coding and loads of questions such as what the hell is web development? or what is back-end development? CONGRATULATIONS! You have taken your first baby step as a developer. Maintaining such curiosity is the hardest thing that freshers face in a company, and if you are able to do that, you will get to the fun part in no time.

Now, this blog helps you get your hands dirty before you get into actual web development projects (which can be very daunting). You will get a vague idea about all the important things that you would be interacting with, in your journey to becoming an expert web developer. This will result in two things; first, you won’t be startled when you hear some techie word for the first time and second, it’s always better to be prepared, isn’t it?

From now on, Google is going to be your best buddy. Starting from learning how to code to solving impossible bugs in your code, Google is going to be there for you at every step. Everything is available on the Internet provided you know how to search the right thing. Yes, I will be providing you with some resources to help you out, but do remember to search and explore each and every topic in this article by yourself.

Let’s get started…

Git happens

As a software developer before you come face to face with actual sh*t, Git will surely happen to you and it is going to stay with you forever (as long as you are in this industry). You might have heard that software development is all about teamwork which is 101% true. Companies are established by teams and not individuals. So, we are lucky that something as beautiful as version control (Git is just one of many version control systems) is with us which is going to be probably the best thing that is going to happen to you as a software developer. With version control, you can not only collaborate on projects but also keep a vigil on who did what for a particular project. So now you know whom to praise (or blame).

Before you dive into the world of web development, you need to learn how Git works and how you are going to use it to work on huge collaborative projects. Here is an amazing article that will get you started with the basics of git and it will help you familiarize yourself with the most used Git commands. I am giving below some most used commands that you will need.

init, clone, remote
add, commit, push, pull, fetch
status, log, diff, config
rebase, pull with rebase, merge
stash, cherry-pick, reset
branch, checkout

If you ever get confused with some git commands, visit this page. Better to bookmark it, it will make your life a lot easier.

Now once you know what Git is, you are ready to take your next baby step.

What the hell is this Internet?

This has to be your first question. Before you dwell into this beautiful world, you have to know how this world came to existence, how does it work and how the hell did it become such a giant. Something of a luxury in the 90s has become much of a necessity now. Read about this journey (if you want to) and I promise that you are going to love it. Once you are done with the history, learn the roots of the internet, the things that make it work.

This is a great series that you may love about the internet by the experts in the field (including the founder himself).

Here are few of the many concepts that you need to know about,

· Internet Protocols

· The HTTP protocol and HTTPS

· HTTP methods

· REST

· API (Application programming interface)

· JSON format

· Client-Server Model

· Request-Response cycle

· MVC Architecture

· Cookies and Sessions

· Routes

These are enough to get you started. But obviously, you will encounter various other concepts in your journey as a developer.

The world of front-end

Anything that you see on a website which makes it look so appealing is all because of a well-written front-end. Every web developer, even a purely back-end focused must have an idea about how the front-end works. At this stage, you don’t really need to deep dive, but yes, you need to have a stronghold of its basics. You must know the following things:

1. HTML: Defines the structure of a web-page.

2. CSS: Defines the style of a web-page.

3. Bootstrap 4: A CSS framework that will make your life easier.

4. JavaScript: Makes your web-page interact-able.

5. jQuery: A JavaScript library which greatly simplifies JavaScript programming.

w3schools is a great website that will help you clear your basics regarding these topics and these are not even that hard to learn.

Now once you understand the looks of a car, you will get into the fun part of how the engine works, the beautiful but unforgiving back-end.

But first, how do I handle all this data?

Data is everywhere and literally; the whole internet runs on it. Or you may say, the whole world does. Now since we know that the whole web is based on the exchange of data, as web developers it is our responsibility to understand how do we play around with all this data. This is where databases come into play. How well you organize and handle the ocean of data for your websites determines the complexities that come along while development. So, the first step before starting to build any website is to organize your multiple databases and decide how all of them are related.

To do all of this you have to have knowledge of Database Management systems (DBMS). There are two types of DBMS you can learn,

1. SQL databases like MySQL, PostgreSQL

2. No SQL databases like MongoDB

Now it’s up to you on what you chose because for me everything is correlated. Choose one (I would suggest Postgres) and you can easily migrate to any other type anytime. This will help you get started with Postgres. Again, you don’t need to have in-depth knowledge about it but just the basics.

The world of back-end

Anything that looks great on the outside demands a lot of blood and sweat it to look worthy. Millions of people have been killed making the current seven wonders of the world, the marvelous structures that leave us astounded. This also applies when it comes to developing great websites and applications. You have to toil hard, solve seemingly unsolvable bugs, lose your night’s sleep for that one error. Developing a good back-end code might not seem easy at first but with experience, you won’t find it that hard.

In this blog, I am focusing on two chief backend web development languages that are hot in the market right now, Node.js and Ruby on Rails (ROR). It’s up to you on what you wish to choose (you can learn both if you are curious). Here is a comparison that might help you choose.

Remember one important thing, never fall in love with a language. You should have the flexibility to jump between multiple languages. In this world, flexibility is as important as expertise.

Node.js

Well if you think JavaScript is all about making web-pages intractable, you are not wrong, however, you might’ve not explored the scope of JavaScript yet. JavaScript was initially developed to only run in your browser and make your web-pages a tad bit interesting. Then the original developers decided to do something more with it. They were like, why don’t we convert it into a scripting language so that people can start to code with it (like python)? Also, to make things easier, we will just use the engine that Google Chrome provides to convert the code into a machine-readable language. Viola! They came up with this beautiful server-side scripting language called Node.js. With Node, you can run JavaScript code on your own system as a stand-alone application.

Before you get along with Node.js, you need to learn more about JavaScript as a language (Node is 70% JavaScript). Since you have been recruited by this company, I assume you must be having basic knowledge about programming. Things are not so different in JavaScript when it comes to common programming concepts like variables, loops, conditions etc. Doesn’t matter if you are comfortable with these concepts, I would still recommend you to fast-forward through this introductory video course.

What important here is to know what exactly makes JavaScript different from other languages. I am listing below some very important concepts about the language you need to know.

· Variable types, scope, and hoisting

· Functions

· Closure

· Object Model and objects

· This keyword

· Prototype concept (prototype and __proto__)

· JavaScript event loop

· Asynchronous Process

· Callbacks

· Promise

· Class

· Arrow functions

Aforementioned will give you an idea of what JavaScript is all about and you will be surprised to know how different it is from OOP languages you might be familiar with such as C++.

Once you are pretty much familiar with these topics, we can start learning Node.js (you just finished 70% of it by covering the above concepts). The rest 30% is very simple. This is a nice article to get you started.

Node.js have an open source and it lets you create back-end code, this is perhaps the main reason why Node.js is preferred over others. The NPM (Node Package Manager) community is one of the biggest in the world and it holds thousands of packages to make your life easier as a developer. A great example is the Express framework developed by the NPM community which lets you easily launch web servers with just a couple of lines of code!

Also, having one language (JavaScript) for both back-end and front-end logic is pretty much neat and time-saving. You do not need to learn new languages for different aspects of web development. Another thing that makes node incredible is that it’s wicked fast because of its powerful underlying libraries.

To handle SQL databases using node, you need to have an idea about Object Relational Mapping(ORM). ORM lets you interact with the database like adding, updating or deleting the data. I would recommend learning sequelize as it provides a pretty simple syntax and has a pretty good documentation to go along with it.

If you are going with no SQL databases, I would recommend MongoDB with Node. It’s kind of a trend nowadays because of its JSON architecture which is quite easy to handle.

Ruby on Rails

Well, where JavaScript differs in its programming paradigm, Ruby as a language follows a paradigm that you must be familiar with. Yes, it is purely Object-oriented. Simply put, Ruby is a really powerful, genuinely Object-Oriented Language combining syntax inspired by Perl and Python with Smalltalk-like features. Ruby was created by Yukihiro Matsumoto in 1995. Known as Matz, he based Ruby on a variety of his favorite programming languages. By taking his favorite aspects of the various languages, he was able to make a natural programming language.

“I wanted a scripting language that was more powerful than Perl, and more object-oriented than Python. That’s why I decided to design my own language.” — Yukihiro Matsumoto, Ruby’s creator.

So, this is what Ruby does; brings the beauty of Python along with the true power of Object-Oriented Programming. You truly are lucky enough to work with one of the most beautiful languages ever developed. Ruby makes life a lot easier for developers when it comes to coding but at a price, speed. Even though it can be slower than its counterparts (e.g. JavaScript) but, what may take a lot of effort in JavaScript, the same can be performed by Ruby with just a few lines of code. Once you start working with Ruby, you will understand what am I talking about.

When Matz first released Ruby, it didn’t take off. In fact, it was still relatively obscure till David Heinemeier Hansson in 2003 created Ruby on Rails. Ruby on Rails, or Rails, is a server-side web application framework written in Ruby. Purely targeted for web development, Rails use the power and beauty of Ruby as a language to make web development more enjoyable. Many say that this combination of Ruby and Rails is something very magical. You can do wonders with just a few lines of code that you can never dream of doing in the node (you create separate modules in the node for something that ROR does in one line). At the same time, this is the reason ROR is way slower than node.

Fun fact, our company was formerly known as Grep Ruby and as the name suggests, we started as a bunch of RoR developers. ROR is the base of our company or you may say, it’s kind of a big deal here.

As a ROR developer, you need to have a stronghold of Ruby language (Rails is nothing without Ruby). To get your basics right, the Ruby Object Model is a must. Get comfortable with its syntax and I am saying it again, be clear with the Object Model.

After you know how Ruby works, you can dive into the web development aspect of it by learning Rails. The concept of Rails is convention over configuration. This means, all you need to do is follow the right conventions that rails asks you to follow and bam! You will have a web-page up and running in no time. All the hard part is done by ROR behind the scenes seamlessly. According to Wikipedia, Rails is a Model–View–Controller (MVC) framework, providing default structures for a database, web service, and web pages. I hope you already have an idea what MVC means.

There is just the one place you need to go, the Rail’s guide. It literally is the best place to go if you want to learn rails and build fully functional websites with databases and other complex stuff.

Final words

So that’s about it. You now know what you are supposed to do in order to start building beautiful websites and get a taste of how the real-world works. After you are done with the starter pack that I mentioned above, you are now ready to build a fully functional dummy website from scratch!

Here is an amazing tutorial by Thinkster that will help you build a medium clone from scratch. It covers each and every aspect of modern web development like user authentication or managing cookies with great detail and simplicity. Here, you will get tutorials for both Node.js and ROR. Go ahead and check it out!

Note: The above tutorial uses MongoDB. You might want to have a look at that first (it is well covered in the tutorial though). Also, it’s a tutorial for Full-Stack Development. You may just focus on the back-end part to build APIs or jump ahead by learning some front-end technologies like Angular or React.

You should also try out other dummies by yourself. The options are many:

· A to-do website like Trello

· Employee management system like Greythr

· Shopping website like Amazon

· Social networking website like Twitter.

· Version control system like GitHub.

You will find tutorials for everything on the internet if ever you need help.

The choices are endless and what you choose is up to you. At the end of the day, the choice doesn’t matter because you will be learning the very basics of web development by building a dummy website. What important here is that you ask a lot of questions during this phase and understand how things are actually done in client-based projects. Try to incorporate all of that in your first project (get your variable names right!).

You codes must hold a place in the Idiot’s Guide, it is supposed to be that simple!

Yeah, that’s what the intention of this exercise is, to help you write code that not only creates beautiful websites but also is understandable.

This training period is probably the most important phase of your career. Remember to learn all that you can, ask questions, experiment, work hard and make the most of your initial journey. It will take time but it’s worth it.

After all, it’s all about those baby steps. Initially, it is going to be very hard and you are going to fall very often. Don’t try to rush or else you are going to fall even harder. Be patient with yourself because only after you learn to walk, you can think of taking part in the race of development.

Signing off with a meme…