Best Resources to become a Full-Stack Web Developer for free in 2023!
In this blog I am going to talk about how anyone can become a Full Stack Web Developer (Specifically will be discussing MERN Stack) for free.
8 December, 2022
1
1
0
Contributors
Let's start with the basic
HTML: The Skeleton of the website
First of all, you need to learn HTML. The Full form of HTML is Hyper Text Markup Language.
We can call HTML the skeleton of the website. It is one of the most important parts of a website. HTML is not a programming language it's a markup language. I am going to share both video resources and written resources. My personal suggestion will be to follow the written resources as there are much more details in the written resource than the video tutorials.
•
Written Resource
•
Video Resources
CSS: Let's do some Makeup
The full form of CSS is Cascading Style Sheets. In simple words, it is used to make the website beautiful. Using CSS, we can change the whole design of the website. We can do add many cool designs like animation, loader, hover effects and many more. In fact, you can build a complete static website using only HTML and CSS.
The latest version of CSS is CSS3 which comes with a lot of advanced features. Even if you want to become only Front-End Developer or a Backend Developer you need to have a good grasp of both HTML and CSS. Every type of web developer should learn.
•
Written Resource
•
Video Resources
As a good web developer, you must be able to make any responsive web design easily. In order to be good at CSS, there is no other way other than to practice. You need to practice more and more. The more you spend time on it the better you become at it. After learning the Fundamentals of CSS start doing some PSD to HTML Projects.
Now many of you may ask that what does PSD to HTML Project mean? Basically, by PSD it is meant that a web design. You need to try to make the design of the other website on your own. I can suggest you two places in order to practice your designing skills using only HTML and CSS.
•
Practice Resources
After you have made 3/4 PSD to HTML design on your own, you can now move on to the next step.
JavaScript: The main ingredient of our MERN stack
Before diving straight into JavaScript let us know a short brief of the history of JavaScript. You will be amazed to know that the first prototype version of JavaScript was made within less than 10 days. Yeah, you read that right. It took less than 10 days to build the prototype.
It was invented by Brendan Eich in 1995. In 1996 Netscape 2 was released with JavaScript 1.0. Till then JavaScript was not widely used that much. It had many ups and downs until 2016. In 2015 ECMAScript 6 was released. And after the launch of ES6 version of JavaScript, it started to become more and more popular. People started using it in huge number.
People Started using the frameworks like React, Angular, Vue more and more and now it's one of the most demanded programming languages in the world right now.
Source: Google Trend
So let us discuss why JavaScript is mainly used. JavaScript was made to make the webpage more interactive. But currently we can make a full stack web app just by only using JS. So, let's start learning it. The resources for learning JS are:
•
Written Resource
•
Video Resources
After gaining the basics programming concepts and learn the basics of JavaScript language you should practice some JavaScript problems (at least some basic ones) in order to have a good grasp over JS. I will be solving JS problems in another blog. You can see that blog by clicking here.
So we have learnt javascript and have learnt with the basics of problem solving and now we can do some actual cool projects. You can practice the projects of Frontend Mentor. The list of the projects that you can try are listed below. I will try to provide the guidelines of how to build those.
1.
Decimal to Binary Converter
2.
Todo Listt
3.
Book List
4.
Random Quotes Generator
Now we have done enough vanilla js projects now we can dive into more real-world projects. Like Building some real-world website using HTML, CSS and JS. I think the best way to practice a real-world project is by creating yuour own personal portfolio website. From Designing to Hosting everything done by you. It will be a great experience for you and as it will be your personal portfolio website you will put some extra effort to stand it out. I will be sharing a guide on how to start designing your own portfolio to hosting it but won't provide you any source code or any template. It should be done by you. After you have made your own portfolio website, now you should try to create some professional landing page. After you feel comfortable enough that you know enough of JavaScript and ES6 syntaxes then you can move forward to the next topic.
Node JS & Express JS: Let's build the Backend
Maybe most of you are asking why you should learn Node before React. It's your personal preference but personally I feel one should first learn Node and then React. I think it helps anyone to understand some of the react features more easily. So, it's just my personal preference.
Before you start learning Node JS, Let me tell you a little bit about node and share a short history of it.
Node js is an open source, course-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node JS lets developers use JavaScript to write a command line tools and for server-side scripting, running scripts server side to produce Dynamic Web Page content before the page is sent to the user's web browser.
Node JS was written initially by Ryan Dahl in 20009. about thirteen years after the introduction of first server-side JavaScript environment. And at first node js had to go through some ups and downs but after some time people started using it in huge number. And still now there are not many good alternatives of Node.
And on the other hand, Express JS is a Fast, unopinionated, minimalist framework for Node. With the help of Express JS, you can easily build different kind of web apps in a short period of time.
Let's know from where we can learn Node JS and Express JS
•
Video Resources
After you have learnt the concepts of Node js and Express JS try to build some projects like creating a CRUD app or a simple chat app. After you have gained the basic concepts of Node and Express you can start learning React JS. So, in the next session I am going to share the free resources to learn React.
React: Lets learn to build single page web applications
Let's first know why some developers went to make a new library. Back in 2011, the developers at Facebook started to face some issues with the code maintenance. As the Facebooks Ads app got an increasing number of features, the team needed more people to keep it running flawlessly. After a while the engineers at Facebook couldn't come up with the huge number of update issues and to handle them. So, Jordan Walke built a prototype that made the process more efficient, and this marks the birth of React JS.
React JS is now one of the most famous JavaScript Library and it is used to build single page application very easily. It's not like that the things that can be done with react can't be done with vanilla JavaScript project. It just makes the whole process a lot easier and more efficient.
•
Written Resource
•
Video Resources
After learning React JS, it's time for you to make some cool frontend websites like creating a to-do app with react, building a blogging website or create your portfolio website with React.
MongoDB: Let's build the Database
MongoDB is a document database built on a scale-out architecture that has become popular with developers of all kinds who are building scalable applications using agile methodologies.
MongoDB was built for people who are building internet and business applications who need
to evolve quickly and scale elegantly.
Here's where you can learn Mongo DB for free
•
Written Resources
•
Video Resources
After learning all these technologies, you need to create 3-4 full stack projects. To be specific MERN stack project. And voila you are now a Junior MERN stack developer. If you are interested in getting into any job, then start preparing yourself for job interview and start applying for those jobs. If you want to do freelancing online then just create an account on the freelancing marketplace like Fiverr, Upwork, Freelancer and others. Then start bidding on jobs that you think you can do. Remember only bid on those jobs that you think you can do. The more real world work you do the more experience gain. So, keep working and gain more experience. And always remember Hard work beats talent every time.
For any queries feel free to contact me via
Mail: muntahi1212@gmail.com