10/04/2022
🟡 How to start a career in web development as a JavaScript developer?
This article is about "How to start a career in web development as a JavaScript developer". It will be very important for those of us who want to enter the field of web development and build our careers by learning web development. Because here I will explain why to start, how to start, and where to start web development. Along with these, I will discuss many important topics of web development that will be beneficial for beginners. I am also going to share a complete roadmap of web development for beginners. So before we start, let’s look over the table of contents.
⚪ Table of Contents:
- What is web development?
- Difference between front-end and back-end web development
- Responsibilities of a front-end developer
- How does the back-end work
- Use cases of JavaScript and its potential future
- Best resources to learn JavaScript
- What is the MERN stack and why is it so popular?
- Complete roadmap for becoming a web developer
- Conclusion
⚪ What is web development?
Before I say what web development is, let me give you an example. We all use Facebook, Twitter, and Instagram for social networking and watch videos on YouTube. We use YouTube, Facebook, and Instagram, and we all do it on the web, don't we?
What do we see when we enter YouTube or Facebook? We see a website where every webpage contains some information or data, pictures, or videos. Everything from creating a website to where any data will be shown, and how it will be shown falls into web development. We can say that web development is building a website and those who build websites are called web developers.
⚪ Difference between front-end and back-end
Let's see what is meant by front-end and back-end and what is the difference between them? We learned a little while ago that the work of creating a website is called web development. But this work is again divided into two parts. One is front-end and the other is back-end web development.
After hearing the name, we can at least understand that one is the work at the front and the other is the work at the back. When we visit different websites, we see different layouts, a website has a logo on the right, another website has it on the left, and there are also many pictures, buttons, videos, etc. These are included in the front end. This means that what we see when we enter a website is front-end. It is also called 'Client Site'.
The back-end is the work of the 'Server site'. What's a server? The server is nothing more than a remote computer - connected to the rest of the world via the internet. The work of the server site means that when we are uploading an image, it is being stored in the back-end server, that is, on a remote computer, or I have commented on something like, and these are being saved in the database. Such tasks are the work of the back-end. Also, the webpage that can be seen when the user enters a website is on the server meaning back-end and when we make a request, then the server sends a response to us and then we see it in our browser.
Let me give you an example that will make the matter clearer. For example, the design of a car as far as we can see with our eyes and the colours are the front-end of the car. On the other hand, The engine or other equipment inside the car that is driving or controlling the car is the back-end.
⚪ Responsibilities of a front-end developer
Now let's understand the responsibilities of a front-end developer. The first task of a front-end developer is to create the layout of the website. Then he will put the button, form, logo, picture, video, etc. in place. He will do this through a markup language called HyperText Markup Language, widely known as HTML.
Once the layout or structure is done, his job is to make that structure beautiful, because no one likes to see a bad website in modern days. We will beautify our layout with another stylesheet language called CSS (Cascading Stylesheet).
The next step is to make the website more Mobile Responsive. What does Mobile Responsive mean? The website we created will be browsed by different users from different devices. Some will use desktop, and some will use mobile. Again, the screen size of each person is not the same on desktop or mobile, is it? We need to make sure that our website is beautiful on all devices. This is called Mobile Responsive Design. This means that our website has to respond according to the screen size of the device. We can do this with the help of HTML and CSS.
The next step is to make the website interactive. For example, in the case of Facebook, what do I do? I press the like button, I like it, I write something on the comment, the comment has happened, I use different emojis, I see some animations, and so on. This means that the website is not just showing us information, it is allowing us to interact with the website. To do this kind of interactive work we need another programming language called “JavaScript”. All of this is the back-end of the website.
⚪ How does the back-end work?
Now let's come to the back-end development. The first thing to do here is to collect the data from the database. Just as all of our information is stored in our brain, there is a separate database for storing data on the server. When the client requests user data from the client-side (front-end) to the server-side (back-end), the server retrieves that data from the database and sends it to the client. Then its job is to show different types of web pages back-end for different users. The web pages that a front-end developer creates are stored in the back-end or on the server. Whenever a user requests a web page from a client site, the server creates or renders the web page to the client by fulfilling various conditions.
Think of it in this way - when we log in to Facebook. Different people see different posts. The reason is that when we log in to Facebook, some information from our client site is sent to the server. The server can see the request and understand which user has requested it. The server then renders a customized web page for that user depending on the different conditions or calculations and sends it to the client site. This type of website is called a "Dynamic Website" because it can send different information to the server for each user. Again there may be some websites where the same information is displayed all the time. For example, when I visit a company's website, you and I see the same information that comes after clicking on their About us menu, right? Such a website is called a "Static Website".
The next task is to save the data in the database. Just as a server retrieves data from a database, it can also store a lot of data in a database. Just like HTML, CSS, and JavaScript languages are required for the front-end, a programming language is required for the back-end. There are numerous such programming languages. Popular programming languages for the back-end are JavaScript, PHP, Python, Laravel etc. There is no need to know all the
languages for the back-end. You can learn any one of these.
However, the language that is common between the front-end and back-end is JavaScript. With this language, in addition to the current front-end and back-end, technologies like mobile application development, data science, machine learning, and AI can be worked. we will discuss these later. If you think you will only work with the front-end, then you must learn HTML, CSS, and JavaScript. You have to master those languages very well.
If you want to work on a back-end or server site then you can start with any one of the languages like PHP, Python, Go, Java, JavaScript, Ruby. But I will suggest that don’t go into depression by comparing these languages. There is a demand for every language in the tech industry. So, just start learning a language which you really want to learn.
⚪ Use cases of JavaScript and its potential future
Now the question is which of these so many back-end languages would you like as a beginner? Well, if you ask me this question I would say - you should close your eyes and start learning JavaScript. What is the reason?
The reason is that just like Bengali is our mother tongue, JavaScript is the mother tongue of the web. The web application that we build will ultimately be loaded into a browser and this browser cannot understand anything other than HTML, CSS and Javascript. So if you want to work on the web, you can't ignore these three languages.
So the question is what to do with the back-end? Since you have already learned JavaScript for the back-end, you can continue with JavaScript without learning any new language for the back-end. That’s why you need to get an idea about NodeJS.
NodeJS is not a programming language. You might think that when we use JavaScript on the front-end, it is running in the browser, isn't it? But there is no browser at the back-end. This NodeJS can run JavaScript in the back-end. Once you have an idea about it, you can write JavaScript language and do all the work of the back-end nicely. That means completing a front-end and back-end with a single programming language. That's why JavaScript is so popular these days. This is called the 'JavaScript Everywhere Paradigm'.
Web applications are built with JavaScript, as well as mobile applications, which support both Android and iOS. JavaScript can also be used for game development, data science and machine learning. Now you are gradually understanding how big the hand of JavaScript is. It is possible to work in so many fields only by learning a language.
Not only that, JavaScript is becoming more and more popular day by day and new features are being added. Many large companies are backing the JavaScript ecosystem. So it can be fairly said that learning javascript will bring more opportunities for us in the future.
⚪ Best resources to learn JavaScript
Now the question is where to learn JavaScript? Since with JavaScript, we can do almost everything - we need to master JavaScript very well. So I will now suggest some books, websites, and YouTube videos for learning JavaScript.
Those who like to read books can read these books. The book 'Hate Kolome JavaScript' by Zonaed Ahmed has been explained in a very simple way in Bengali. Hopefully, those who are brand new in the JavaScript world, will be benefitted a lot if they start with this book.
However, those who like to read books in English can read ‘Eloquent Javascript', ‘JavaScript Notes for Professionals’, and ‘Effective JavaScript’ books. In these books, from beginner to advanced and complex concepts of JavaScript have been discussed.
In the case of websites, I will first highlight the name of W3Schools. I couldn't find a second place to learn JavaScript in a simple fluent language. You can also visit the freecodecamp.org site after learning the basics. On that site, you can learn as well as practice. If anyone wants to watch paid tutorials, you can always watch Udemy's video course.
Those who like to learn by watching video tutorials on Youtube can follow these channels - Freecodecamp, Dev Ed, Clever Programmer, Programming Hero, etc. Ok, now you learned about the resources for JavaScript. But if you know only one language, will you be able to do web development well in this modern age? Will you be able to get a job in this competitive job market? No. For this, we need to know some framework or library after learning basic JavaScript.
⚪ What is the MERN stack and why is it so popular?
At present, the most talked-about and popular stack of JavaScript is the MERN stack. M in MERN stands for MongoDB which is a database. E stands for ExpressJS which is a NodeJS framework. R stands for ReactJS which is a front-end JavaScript library. And N means NodeJS where JavaScript runs on the server which we just learned a little while ago. The combination of these four frameworks or libraries is the MERN stack.
This is called a stack because we can build a complete dynamic web application using only these components. In this case, no separate programming language is required, only JavaScript. Earlier, if the back-end of the website is made with HTML and CSS - then a separate language would be required for the back-end. Such as PHP or other languages. But in the case of the MERN stack, websites' front-end can be created using JavaScript and React framework, and Node and Express and MongoDB can be used for the back-end. This is a lot easier. This is why the MERN stack is so popular nowadays. From what I have discussed so far, I hope that as a beginner you have an idea about web development.
⚪ Complete roadmap for becoming a web developer
Now I will share with you my recommended web development learning path or road map. Whether you want to be a front-end developer or a back-end developer, you need to know the basics first. That means you have to know HTML, CSS, and JavaScript. These three languages are the foundation of a web developer.
Then if you want to work with the front-end, you need to learn one CSS framework. It can be BoostStrap or Tailwind CSS. There are many more such CSS frameworks.
After that, you need to learn a front-end JavaScript framework. It can be React or Vue or Angular. ReactJS is currently the most popular. I would personally recommend learning this because if you know it you can also create mobile applications later. But if you want, you can learn one or all of the powerful frameworks like VueJS or AngularJS slowly one by one. But I will say one thing here - without listening to others and without thinking about what is good and what is bad and without thinking about it too much, you need to start learning any one framework quickly.
And if you want to work with the back-end, you can start with one language. In this case, also my recommendation will be to start with JavaScript. If you want to stay in JavaScript, you have to learn NodeJS and ExpressJS carefully. But in this case, also the choice is yours. No programming language is major or minor to others. You can also start working with PHP or Python if you want.
If you want to be a FullStack developer I would say focus on the front-end at the beginning. Then learn the back-end. I recommend ReactJS for the front-end. And after that, you can do different projects with ReactJS. If your JavaScript basics are good enough, then you can learn VueJS very well by looking at the official documentation of VueJS.
By the way, if you want to learn NodeJS, ExpressJS, and MongoDB in Bengali, you can go through this complete YouTube playlist where step-by-step NodeJS and its framework express.js are discussed in detail. And not only that, using MongoDB as a database is beautifully shown there.
This was my recommended roadmap for JavaScript or web development. If you want to follow it, follow it strictly and stick to it. And if you want to go to another stack, continue that stack you like. And after learning it very well, practice it again and again. Work on projects and then you will be able to apply for the jobs that are related to web development. And after applying, you may need to learn different frameworks for different types of languages. A web developer can never spend his entire life just learning a single language or learning a single framework. So, as a web developer, you have to assume that you have to be constantly updated with new technologies and learn new things. But the foundation is very important. If you have mastered the foundation, then you do not have to stop at any step of life, this is my belief.
⚪ Conclusion
Finally, I would like to conclude this article with love and best wishes to all. All the best to all of them who want to start their career as web developers.
If you have found this article useful, then kindly consider sharing this with friends and colleagues. This will be extremely beneficial for the growth of our community.
______________________________________
An Article by CodeLoop • AS8 ORG
Credits:
Original video session - Sumit Saha (Founder of "Learn with Sumit", Co-founder of Analyzen)
Cover Image - Ahammad Shawki
Editing - Nahiyan Rafiq
_________