How to become a full stack web developer might have been the second most popular search from google after ‘Why did Elon Musk buy twitter’. Almost everyone has an opinion about this topic but rarely has deep insights. Some would say it’s a piece of cake since even rookies could make a handful of projects, whereas diving deep into it could get pretty overwhelming. Whether you want to get a job as a web developer or not, as a programmer, getting your feet into the waters could make for a great experience. So, how does one go about it?

Getting Started:

Web Development basically ranges from developing static web pages to building websites and even complex web applications. It consists of the client-side or the graphical user interface i.e. front end and the server-side architecture i.e. back end development. One can gain proficiency in either of them or learn both to become a Full-Stack Developer.

Front-End Development

Developing a graphical user interface involves getting more creative with your designs and creating appealing web pages for the clients. Creating elements for users to interact with the data, making them attractive and functional, and hence adding to a positive user experience is the main focus. There are 5 phases to becoming a proficient front-end developer.

Phase 1: HTML 

HTML (HyperText Markup Language) is a markup language used to create elements that the user sees.

Such as the feather button on Twitter to compose a new tweet, the forms you submit to sign up for a newsletter, or even this text on our website that you’re currently reading, everything is composed using HTML.

People would find it boring but I’d say developing a web page with pure HTML is the most fun thing to do.

Phase 2: CSS (Bootstrap or Tailwind CSS)

Html is fun but it can be arduous to make your website colorful and appealing without CSS. CSS (Cascading Style Sheets) is a style sheet language to manipulate the presentation of your document with ease. Simply put, the tweet button is made round and blue with the help of CSS.

Because writing code for each and every design can be tedious, there are CSS libraries available with already composed codes for desired designs. Bootstrap is the most popular among programmers whereas Tailwind gives you more freedom with designing work. Learning either of them could save you tons of time.

Phase 3: JavaScript

Now you know how to develop static web pages, but to make them more dynamic you need to add behavior to your elements. JavaScript, the language that powers the web is a programming language used for scripting dynamic content on the web. In simple words, without JS this website wouldn’t be able to load the ads that you see. One of the cons of not having JS is that most of your websites like Youtube and Netflix would not load at all.

Phase 4: Portfolio Website

Making a portfolio website with the help of all three could be a great project to test your skills. And as it is said, programming is better learned with hands-on experiences than with tutorials.

Phase 5: ReactJS

React is a javascript library that lets you develop your website in components. Dividing your website into components increases the usability of the code and also makes it easier to manage the website. For Example, if you wish to change the appearance or positioning of the tweet button, you wouldn’t have to disturb the rest of the code base, since the tweet button is a separate component of the page. Doing this without React could be more tedious.

Back-End Development

Back-end development lets you work on the server-side management of the website. Every website you see has a database of its users and interacts with a server, learning back-end development gives you the freedom to manage the parts of your website hidden from the user. Back-end architecture involves learning a programming language, databases, and communication mechanisms. 

Phase 6: NodeJS with Express

There are multiple back-end frameworks devised namely Django, Ruby on Rails, etc. Since you’re already familiar with javascript, learning NodeJs with Express would come easily. So before Node, you could run javascript only on your browser, but Node provides you an environment to run JS on the server.

And just like we had libraries for the front end, Express is the library used for the back end to make it easier to write code.

RESOURCES:

There are a million videos and articles on the web for self-learners and online boot camps for people who need guidance. Links for a few top-rated resources are listed below.

The Complete 2023 Web Development Bootcamp (by Angela Yu)

If feasible, this boot camp by Angela Yu guides you systematically through all the required phases and has some great hands-on projects to learn better.

FREE resources:

Front end development

• HTML: https://www.w3schools.com/html/default.asp
• CSS: https://www.w3schools.com/css/default.asp
• Javascript: https://www.w3schools.com/js/default.asp
• Bootstrap: https://www.youtube.com/watch?v=hnCmSXCZEpU
• Tailwind CSS: https://youtu.be/v74SZBVMPa0
• Intro to React: https://reactjs.org/tutorial/tutorial.html
• Linkedin clone with React: https://youtu.be/QaYts9sPmcY
• ReactJS Tutorial for beginners: https://youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

 Back end development

• NodeJS with Express: https://youtu.be/SBvmnHTQIPY
• ExpressJS: https://expressjs.com/en/api.html

Scrimba Bootcamp:

During my journey of learning web development, I came across this website for learning front-end development in a completely unique and interactive way for free. Scrimba makes it much more interesting for beginners who prefer to learn by practicing.

Links for Scrimba:

• HTML & CSS Crash Course: https://scrimba.com/course/ghtmlcss 
• Intro to CSS: https://scrimba.com/course/gintrotocss
• Introduction to JavaScript: https://scrimba.com/course/gintrotojavascript

CONCLUSION:

So now you might have got some insights about,

1. What is web-development

2. Difference between front-end, back-end, and full-stack development

3. Various technologies of front-end and back-end development

4. A roadmap to learning complete web-development

I wish you luck on the journey and happy coding!