Best Full Stack Web Development Roadmap you’ll see on the Web

Best Full Stack Web Development Roadmap you’ll see on the Web

This question ain’t a new one but the answer is. Web Development has always been one of the most prominent domains of the software industry. According to a survey(can’t remember the sources; just kidding, they’re true), almost 60% of software engineers in the USA have worked in web development at some point in their life. Also in India, I don’t have accurate stats but the number must be higher. Coz everyone in this world has shifted or is shifting their business online and the best way to enter is with a website. That’s enough motivation to learn web dev so without further wasting a single word let’s together kill the curiosity.

Disclaimer

This article doesn’t essentially require any prior knowledge of Computer Science or IT. All the terms, phrases & languages used are beginner-friendly and any unusual term is briefly explained there or a link to them is attached. Also at most of the places I’ve used the abbreviation Web Dev for Web Development I hope you ain’t having any trouble with that. I expect from you all that all of you want to learn web development and will post their doubts in the comments.

Is Web Dev good to start?

Most of the beginners I encounter are always puzzled by the same question where to start? Well, I’m gonna give a unique answer to it very soon but for now, you can rely on my single word “YES” Web Dev is a very good field to start with.

Where/When/How to Start with Web Dev?

To be honest ‘When’ doesn’t deserve an answer & We’ll discuss ‘Where’ in the latter half of this article. So let’s discuss ‘How’?

Step-1: Understand HTML

Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

Official Definition of HTML

There shouldn’t be any doubt about starting with HTML. Let me start with an analogy and will stick to it till the end of the article so keep the threads bound together. Suppose you are God and you have to create an animal or human being for instance. What will you start with? It’s Skeleton, right? Whatever organ you want to fit in the body must have a solid structure to hold it right? In that skeleton fit all the components and hence here’s you’re ready with your HTML. HTML provides a very basic layout/structure to your site. Click here to learn thoroughly about “What is HTML?”. Also where to learn HTML we’ll discuss later.

Build Projects

By project, I don’t mean that you’re gonna make a fully functional website ready to be launched. I meant to say that build something relevant with whatever you’ve learned.

Step-2 Practice CSS

CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on the screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once

Official Defintion of CSS

So to define CSS let me stick to the previous analogy I gave to you. We’ve built the structure of our body and have settled all of its components. But one thing still left is its design, spacing, colors, looks, etc. That’s what CSS does. Click here to know more about CSS. CSS is sometimes very much mind-bending as it used to be in my case. I struggled a lot in the CSS part. And trust me CSS is all about practice and experience. There aren’t many concepts or logic that need to be understood but there are a lot of patterns to visualize. CSS entirely depends upon one’s visualization. And that comes with experience and practice. As much as you’ll explore new websites you’ll learn more.

Build Projects

Try analyzing other websites’ patterns and designs and develop yours. One thing you can try which even I used to do is open any website with a good design(depends upon reference frame) and try making the exact same design on your own. Stuck somewhere? Take the help of Google(Not Sponsored XD) or use Developer tools provided by most modern browsers or stack overflow and many more such things… Trust me only after making a complete design your skills will be on the next level. Also, use this only for practice and skills purposes. NEVER COPY ANY DESIGN IN A REAL-TIME PROJECT.

Step-3 Master JS

An object-oriented computer programming language commonly used to create interactive effects within web browsers.

Official Definition of JavaScript

Do you love success stories? Then you might also love JavaScript. Initially, this language was only supported in websites and browsers but now JS is the most preferred and favorable language in the world. (As per Stack Overflow Developer survey 2019). It can be and should be mastered to be a good developer. Relating it to our analogy I can add that you’re ready with a complete body ready to work. But how will it make decisions? Respond to Surroundings? React? For that, we need something called in human body’s nervous system and that’s what we call JavaScript here. It’s responsible for taking action and the logic of the website. Frontend JS code in a website is a set of instructions defined by the developer, executed by the browser, and manipulates DOM(Document Object Model can be summarized as a collection of HTML & CSS).

Build Projects

Don’t break the streak. After each step of learning, you must practice. And after learning JavaScript you can say that you entered the field of programming. Coz among HTML, CSS, and JS only JS is a programming language.

Time for a big move

At this stage of learning, you can make a website work completely well only on your device. Working in every aspect. Connect it with APIs, insert animations, and add dynamic features and the possibilities are endless. This is the time when you can(or should) build as many projects as you can. Front-End Completed

Congratulations if you’ve made it to this point either in the article or in your web dev journey. Most people just give up before this instance. The absolute magnitude of difficulty will increase further but if you’ve followed the mentioned steps properly you’re not gonna face any kind of difficulty further.

Let’s make things work in Realtime

Backend development

What is the Back-end?

To explain the backend I have to make some minor modifications to my previous analogy. Suppose instead of a human being you have to create a robot. A fully functional one. So after manufacturing it you want it to work through a server such that it fetches responses on external conditions from your database. That’s what we call the backend. when we have to serve a particular DOM(i.e. Webpage) then the back-end code base takes charge. Basically, this is the part of the web dev that insures the proper, independent & automated running of websites.

How to start with the backend?

There are actually a lot of languages and frameworks to work on the back-end. It totally depends upon your prerequisites for which one to choose. Also, some of you might not agree with my views but still, I’ll try to give a solid reason for every statement If I won’t be able to do so I’ll change this at that very particular instant.

  • If you’re an absolute beginner — Node.JS
  • If you’ve web dev is not the first thing you’ve learned — Python(Django or Flask)
  • Just arrived part-time? Want things very quickly? — PHP

It’s not mandatory for you if you fall into any of the above categories to learn the above tool of your category. Trust me you can choose any of them, You won’t feel a lack of functionalities and control I have taken only one name in each category because people often ask for only one option.
I have recommended Node.JS for absolute beginners despite considering the fact that it is tougher than Python and PHP because since you’ve just learned JS it might be easier for you to maintain the stream and work smoothly with the backend. Also, It’s been said by a lot of people and I promote it too that “a newbie should also learn some complex things together.”
If you’ve already worked in the field of I.T. and have learned anything else before web dev, you can also go for any framework or language but I’ve suggested python because it won’t be difficult for you to learn a new language for web development.
And for those who just want things done very easily, I’ve recommended PHP coz it’s very much simple and easy to use.

Database 

Keeping the analogy alive I’ll add that if you want to store the user’s data in your robotic machine which you’ve built you can store it in your database. That’s all it is. The only work of a database of a website is to store all of the relevant data of the user or website which can be fetched or written by the backend codebase.

Which Database to use?

Using any DBMS(Database Management System) doesn’t bring a drastic change in your project. But using an organized database brings a lot(This had a deeper meaning comment if you’ve understood or I’ll explain in the response to your comment). I recommend DB on w.r.t. language you’re using.

You can use any of the databases with any of the languages but these are the pairs that I feel/suggests/think work best when used together.

Now basically, you’ve completely learned all of the things required for web dev. Even with these things you can build a website of any scale. After that one must learn to host a website(An easy task if you’ve come this far).

Also don’t miss the bonus section. Conclusion after bonus Section.

Ready to Rock!! 

BONUS SECTION

So If you guy’s have scrolled this far you definitely deserve something special derived from my experience. And I have a lot of precious things to convey. This section will definitely glow your mind.

Some Course Recommendations

  • Paid
  1. Full Stack Web Development: HTML, CSS, React & Node Course | Udemy (English)
  2. The Complete 2021 Web Development Bootcamp | Udemy (English)
  3.  web development in HINDI using HTML and CSS for Beginner 2021 | Udemy (Hindi)
  • Free
  1. CS50’s Web Programming with Python and JavaScript (English)
  2. Web Development Full Course – 10 Hours | Learn Web Development from Scratch | Edureka (English)
  3. Web Development Tutorials For Beginners In Hindi: HTML, CSS, JavaScript by CodeWithHarry (Hindi)

Things to keep in mind in your Web Dev Journey

  • Learn Regularly. A very very basic thing to remember that people often forget or ignore. Learning 10 hours today and zero hours on the next day is the worst thing.
  • Maintain a Linear Progress. You must keep on improving yourself day by day.
  • Follow minimal learning sources. Don’t mess things up. If you’re learning using a book try using fewer books. The same thing on YouTube or Udemy just find a well-structured course and keep following it. 
  • End to End Completion is best for beginners. By end-to-end I mean the percentage of the portion you’ve decided and break things into small sections as I’ve done.
  • Keep making projects. This is the best advice one can give.
  • You’re brilliant! Just believe in yourself, Wherever you are you must be aware that you’re going well.

Things to definitely avoid while your journey

  • Don’t step very fast in frameworks like React, Bootstrap, and other shortcuts. Master the basics because these frameworks will keep coming and going but the core technology will always be there. Also, I’m not saying you must never learn them instead I support the use of new tech after mastering core.
  • Don’t Rush. Slow, Steady but Smart always wins the race. So don’t try to finish things very fast especially if you’re a beginner.
  • Never, never, never fall back after stepping into the game. I’m myself the dumbest person I’ve ever met in my life so if I can make it you can rock it!!

Additional must learn things

Here are a few things which you can or should learn after learning all of the above-mentioned things. 

  1. ReactJS
  2. Bootstrap
  3. Pug
  4. Git – Version Control System

The Conclusion

So, if I were to wrap this up, tie it with a bow, or whatever… I guess I’d say “Web Development; despite being a tremendous way to start with requires some attention towards it, Coz it’s been said tasty meal pleases a lot unless it burns your mouth. So move steadily strengthening the concepts. Also, one thing which I’d like to add is that don’t go on learning 100% just learn a fraction of the skill that is required. Like you should learn 80% HTML, 40% CSS, and 30%JS are enough to start with. Initially, you don’t need to do a Ph.D. in things by mastering I meant that master whatever you’ve learned not everything that exists. And also I see people rushing on frameworks. Don’t do that. So that’s all I had to say I still can add a lot but will discuss it some other time. 

Thanks for Learning!

Regards
Prakhar Shukla(tonyStarkJr)

Share:
Avatar of Prakhar Shukla

Author: Prakhar Shukla