A Road-Map to Web-Development (for begginers)



As a newbie computer-science/IT student you may get fascinated and confused by the term web-development.
There are many terms and doubts that revolve around the mind regarding how and from where to learn web-development and what technologies one must learn to create websites or to be a web-developer.

What is Web-Development ?

Let me give you a very brief definition of web-developement :
"Web-developement is creating websites, whether it is a short portfolio website or a big e-commerce website".

A website is generally designed in two main sections :

1. Front-end :

Front-end of the website is actually what you see in a website, and to what you interacts in a website.
All the images, text, buttons, animations, etc. that you see in a website are parts of front-end of a website.
Languages/Technologies like HTML, CSS, JavaScript are used to create front-end of a website.
Front-end is also called 'client-side' of the website.

2. Back-end :

Back-end of a website is just opposite of front-end.
Back-end invloves all the calculations, computational parts of a website.
Data is stored and retrieved from back-end of the website, i.e. it involves the database section too.
When you submit any form to a website, form processing is done in back-end section of a website.
Languages like PHP, Python, Java, Ruby are used in Backend
Back-end is also called 'server-side' of the website.

Who is a Web-developer ?

A web-developer is a programmer who is capable of developing websites or web-apps that runs on WWW(world-wide-web).They are responible for designing, modifying nad maintaining websites.
Types of web developers :

There are basically 3 well known categories of web-developers :

1. Front-end web developers:
 
A web-developer who create, modify or maintain the front-end section of a website are called front-end web developers.Front-ent web developers are responsible to work with User-interface and User-experience of website.Front-end web developers are like decorators or interior designers of a house.   
To be a front-end developer, one must gain proficiency in HTML, CSS and JavaScript languages.
In addition to these, front-end developers need to have knowledge of various frameworks like Bootstrap, JQuery, EmberJS etc. To make a website more dynamic front-end developers must use AJAX technology (which is trending now-a-days).

Technologies/Languages required to be a front-end developer :
(Basic skills) -
  • HTML (mandatory)
  • CSS (mandatory)
  • JavaScript (mandatory)

(after gaining proficiency in above technologies you can move to the following skills/technologies) -
  • JQuery
  • Bootstrap
  • get familiar with browser developer/debugging tools, etc.

2. Back-end web developers:  

A back-end developer is one who performs all backend calculations and computations, and apply logical checks on data stored in back-end.
It also includes database, and a scripting language that interacts with the database.
Back-end developers uses Php, Python, .NET, Ruby, Java, etc languages to manage backend services.
Back-end Developers manipulate data and apply logic behind the working of the website.

Technologies/Languages required to be a back-end developer :
(Basic skills) -
  • Atleast any one of server-side scripting language (like Php, Python, Java, Node.js, .NET, etc) 
  • Knowledge of Databases (like MySQL, Oracle, SQL server, MongoDB, etc)
  • Handling server (like Apache, Nginx, etc)

(after gaining proficiency in above technologies you can move to the following skills/technologies) -
  • Web services or API(Application Program Interface)
  • Server Security

3. Full-stack web developers: 

A full-stack developer is one who is a front-end as well as beck-end developer.
Full-stack developer can work on both client-side and server-side. They know front-end technologies(like html,css, Javascript, etc), back-end technologies(like server-side scripting languages-python, php, java, ruby as well as databases).They also need some knowledge of Version Control Systems(VCS) like Git,etc.
A full stack developer need not to be proficient in all front-end and back-end technologies, but instead they need to master any one of software stacks available in market.
Some popular software stacks are - LAMP(Linux Apache MySQL Php), MERN(MongoDB Express React Node.js), MEAN(MongoDB Express Angular Node.js).

Other related areas to dive in web-development are :
  • UI/UX designers
  • Graphic Designers, etc.





Sources to learn web-developement

There are many sources out there, but to be more specific about content quality, i have listed some of the best free resources or courses here (espacially for beginners) :

    Websites - 

  1. w3school - https://www.w3schools.com/
  2. Udemy - https://www.udemy.com/
  3. Mozilla Developer Network(MDN) - https://developer.mozilla.org/en-US/
  4. stack overflow - https://stackoverflow.com/

   Youtube Channels -

  1. Hitesh Choudhary - https://www.youtube.com/user/hiteshitube
  2. Programming with Mosh - https://www.youtube.com/user/programmingwithmosh
  3. freeCodeCamp - https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ
  4. Traversy Media - https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA 
  5. Dev Ed -  https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q

Summary 

  • In short, HTML, CSS, JavaScript are the basic and mandatory skills one must learn to begin the web-development journey.
  • After that, one can go much deeper by learning more frameworks, backend scripting languages and databases.
  • To learn much more efficiently and faster, practise more and more by creating some projects.
  • Here is the list of some beginner friendly projects to improve your skills :
    • Portfolio website
    • To-do list web-app 
    • canteen management system 
    • Quiz game 
    • library management system
    • chat application
    • voting application
    • e-commerce website

Sample Web-development Project with source code -


Comments

Post a Comment

Popular posts from this blog

GIT & GITHUB : an easy way

Image
You may have heard about GIT and GITHUB a lot of times in your coding and development journey. Trust me, these are genuinely one of the most useful tools that you should know as a developer or a programmer. INTRODUCTION TO GIT -
Read more

Create Your First Website ( from Scratch )

Image
Create your first website from scratch (for beginners) To give you a proper intuition on how to create a simple website let's dive-in and create a TO-DO List web-app. Programming/Scripting Languages used -  We will use HTML and CSS to create front-end and Php with MySQL in back-end of the web-app. We will perform basic CRUD(Create, Read, Update, Delete) operations in this web-app.   Tools used - 1 .  Xampp  - Xampp is an open-source software that provides Apache Server, MySQL database and Php in a single package. There's no need to install ans setup these things seperately. Xampp provides all these technologies in one wrapper.   2. VS-code editor -                                                      VS-code editor is a very popular and light-weighted free editor for programming, it supports various programming languages and plug...
Read more