A guide to Web-Dev for quite-the-noob by not-that-noob.

So, Website Development brings together two together words and a lot of questions, most of which I will try to answer. Also, I will start off by listing a few jargons:-

• Front-end 
• Back-end
• Framework
• Tech Stack.
• Database

Chapter 1: Pilot

I know you are super confused, but hold up. I will clear some doubts here, some in the coming blogs(so that you stick together and stay tuned😉). We are bringing forward a series of blog posts that will guide you, people, smoothly throughout the world of Web Dev, so next time you know for yourself how to proceed. Also on each of these sub-topics, we will post dedicated blogs and cheat sheets.

Chapter 2: Your friendly neighborhood, Front-end

     Chapter 2.1: Chapter Intro

        Front-end refers to the section of the software that deals with the end-user interface and experience. A very heavily animated page may look nice but in some cases might be an obstruction to a smooth user experience. It majorly has three basic components:

• HTML
• CSS
• Javascript

As of yet, we will be focusing on these, but there is much more to the front-end than just this

    Chapter 2.2: Of tags and styles

        So, as a beginner, we should first introduce ourselves to the languages of HTML (HyperText Markup Language) and CSS (Cascading Style Sheet). HTML is "not a programming language", it is a markup language. It is written in form of <tags/>. CSS is solely meant for styling (and sometimes animating) the bare bones of what we created with HTML.

However, CSS can sometimes be really frustrating to debug. The thing with CSS is that it will never give an error message. If you have done it right, well and good. But if you haven't, ahh then, GG.

 

    Chapter 2.3: Console.log("Hello world")

        Yes,  I know you have guessed it correctly. Javascript. Right of the back, Java, and Javascript are as different as Car and Carpet. 

        If HTML and CSS form the basic structure of a website, then javascript is the basic functionality provider of the website. What good is a form, if we cannot submit it. All the responsiveness, the advanced and sleek animations, the button functionality, all of it because javascript exists. Javascript makes it possible. The importance of javascript can never be understated. 

Chapter 3: Meet the Back-End

        

Well, I guess, that is quite a head start to backend development. To put it in very simple terms, backend development refers to all the efforts in the parts where the user cannot see but is of absolute importance. Just like you are reading this blog, you are the user and the fonts, colors, designs, etc. constitute the frontend of this page. While the content of the article is rendered from a server and fetched from a database. This is the backend part of the application.

Chapter 4: A Quick Taste of Frameworks.

    

( Ok, just before the pros come rushing to the comment section saying react is not a framework, let me tell, I know it is a library. This is for convenience's sake. Node JS is also not a framework, it is a runtime open source development platform for executing javascript code server-side ) 

Instead of re-inventing the wheel every time, we have been provided with wonderful frameworks and each comes with its own wonderful collection of packages and modules. These exist to support the development of web applications including web services, resources, and APIs.   

      

Chapter 5: A Briefing on Tech Stacks.

A tech stack refers to a set of tools, programming languages, and technologies that work together to build websites, mobile, and web apps.

Tech Stacks are generally composed of four components:-

1) A Frontend framework/library (Angular, React, Vue)

2) A Backend framework for support (Django, Node JS)

3) A database to store data (MySQL, Mongo, Cassandra)

4) A server to handle client request (Apache, NGINX, IIS)

Some of the most popular tech stacks are as follows:-

• MERN
  
  
  
• LAMP
  
  
  
• MEAN
  
  
  
• MEVN
  
  
  
• Ruby On Rails
  
  
  

Chapter 6: An Intro to Database

A database is an organized collection of data, generally stored and accessed electronically from a computer system. In layman language, it is where all the client or the company data is stored.

There are broadly 2 types of Databases:-

• Relational
• Non-Relational

Some popular databases are:-

• Postgresql
• MySQL
• MongoDB
  
  
  

Chapter 6: Season Finale

        So that's it for this blog. This blog will be closely followed up by more blogs describing each of the subtopics in detail to give you a headstart in pursuing Web Development.