How to start web development ?


If you are beginner, first year students and anyone who want to learn web development and  going to start learn web development but you don't know Where to start ? or How to start ? , so you are at right  place .In this post I will share Roadmap to web development in easy way for those who don't know abc of the web development.
Lets start but before going into details first talk about what is exactly web development ? 

Web development

  • Web development is the building and maintenance of websites.
  • it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.
  • Web development can range from developing a simple single static page of plain text to complex web-based internet applications (web apps), electronic businesses, and social network services
  • Web developers, or ‘devs’, do this by using a variety of coding languages. The languages they use depends on the types of tasks they are preforming and the platforms on which they are working.
  • There are three kinds of web developer specialization:
  1.  front-end developer [ Client-Side scripting ]-  A front-end dev takes care of layout, design and interactivity using HTML, CSS and JavaScript. They take an idea from the drawing board and turn it into reality.Generally responsible for behavior and visuals that run in the user browser.
  2. back-end developer [ Server-Side scripting ]- The backend developer takes care about what is going on behind the scenes. The backend of the web consists of the server that hosts the website, an application for running it and a database to contain the data.
  3. full-stack developer. Full-stackers take care of both the front-end and the back-end, and need to know how the web works on all levels, in order to determine how the client- and server-sides will relate. Generally they should have the knowledge about both front-end and back-end.


Types of web development


  • A more comprehensive list of tasks to which web development commonly refers, may include
  1.  web engineering, 
  2. web design, 
  3. web content development,
  4. client-side/server-side scripting, 
  5. web server 
  6. network security configuration,
  7. and e-commerce development.
  • All these are related to front-end and back-end either in indirect way or direct way.
This was all about web development definition and I hope you'd understood about what is exactly web development ? , So this is the time to going into details about roadmap and  first i will tell about Front-end roadmap and after this tell about Back-end roadmap.

Front-end Roadmap

Now, this is the time to learn about Front-end step by step, So for this, firstly  you should know about What is exactly Front-end development ?

Front-end development 

  • Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data
  • means A front-end dev takes care of layout, design and interactivity using HTML, CSS and JavaScript.
  • In general What you see and what you use, such as the visual aspect of the website, the drop down menus and the text, are all brought together by the front-end developer, who writes a series of programs to bind and structure the elements, make them look good and add interactivity. 
  • This all thing comes under front-end development and these programs are run through a browser.
For example , this is my website front-end

Front-end example

This was all about Front-end introduction ,now I am going to delve in front-end roadmap and I will explore about What should you learn first in front-end development ?

Before learning HTML and CSS directly, You should learn about INTERNET and How it works ? If you will have the understanding about this then it will increase your conceptual knowledge.So this is the Step-1:

STEP-1 INTERNET

  1. What is the Internet ?
  2. How does the internet works ?
  3. What is Browser ?
  4. How does the browser work ?
  5. What is Http ?
  6. What is domain ?
  7. What is Domain name system ?
  8. What is web-hosting ?

After this you should learn about basic components of front-end like HTML, CSS, JavaScript.

STEP-2  HTML

  1. What is HTML?
  2. What is the importance of the HTML?
  3. Learn basics like HTML structure, Tags, forms , validation etc.
  4. SEO Basics.

STEP-3 CSS

  1. What is CSS?
  2. What is the importance of the CSS?
  3. Learn basics.

STEP-3 JavaScript

  1. What is JavaScript?
  2. What is the importance of the JavaScript?
  3. Learn Basics like syntax , data types, functions etc ?

STEP-4 Version Control System

  1. What is Version control system and  why you should use them ?
  2. Basics usage of Git.
  3. Learn about Github which is the well known Repository hosting Service provider.

STEP-5 Web Security Knowledge

  1. Got at least a basic knowledge about HTTPS and Content Security Policy

STEP-6 Choose Framework for Front-end development

These framework helps us to make Stateful components and dynamically changing websites.
  1. React.js
  2. Angular 
  3. Vue.js

STEP-6 Choose Framework for CSS.

  1. These framework helps us in designing and styling your website by just using pre made classes provided by bootstrap

After all these step you will easily make a website Front-end efficiently and I hope you'd understood all steps. This is only Front-end Roadmap , In next part there will be Back-end Roadmap.