Learn web development- complete road map for getting started

Every day millions of users access millions of websites on the internet. Whenever we search for something on Google, we receive a list of website links. You may have visited a website that consists of different fonts, different colors, different elements, images, etc.Have you ever thought how these websites work, how these websites seem so beautiful, how you can build such websites on your own. Yes, you can. You just need to learn Web development.

You may have the question in your mind that how to start learning web development or will it be easy to learn? Then, this blog is for you. You just need a maximum of 4 months to learn web development. In your academics, you study theory or concept and apply it to several problems. Here, it is the same. You need to learn the concepts well and practice as much as possible. Just remember, the more practice the more you will be better in any skill. In the case of web development, you should build more projects on your own to have more experience as well as confidence.

There are some languages and several libraries and frameworks to work with to build a website. Before you start learning anything, you need to know what is front end development and what is  Back end development.

Front end development: If you visit a website you may see texts, images, headings, colors, animations or if you click a button the appearance of the website may change or you can see some pop-ups, all these things we, the users or clients to the website can view or interact is the client-side of a website and building the client-side of a website is called front end development.

Back end development: When you enter your data in a sign in form on a website, your data is sent to the server or when you try to log in the server checks if your given username and password is matching or not. This is server-side work of a website.There are different types of work that is done by website server interaction. Adding  this functionality to a website is called  Back end development.

 Now, if you are a web developer, you may have skills in front end technology or in front end and back end both. If you only have front end technology skills then you are called front end developer. But, if you have both the skills you are called Full-stack developer. Now, let's talk about what are the languages and frameworks you need to learn to be a web developer. As a web developer, you need to know how to build a structure of a website, add some styles so that it seems beautiful, and adds some functionality. So, to learn all these things you should follow some stages.

Some stages to follow :

HTML: HTML stands for Hyper Text Markup Language. This is a language to build the structure of a website. It tells the browser what elements or contents you want to show on your website. It has different types of elements like heading, paragraph, image, etc. to tell the browser what you want to display. I think you may have learned HTML in your school days. But, there are lots of different technologies added to the newer version. The newer version is HTML5 and many new features like <audio>,<video>,<canvas>,<footer>, etc and support for SVG contents were added as well as we can develop games on it. An example of web page built with HTML is given below.

  

 

 

2. CSS: CSS stands for Cascade Styling Sheets. Everyone likes to look beautiful. As a developer, we would also want our website to look beautiful and attractive and CSS does this job for you. With CSS you can add style like color, space between two elements, animations, etc. You can design your website how you want. Like HTML5, there is a new version of CSS which is CSS3.

          A link of a beautiful CSS website is given here- CSS website

3. Javascript: With HTML and CSS, you can just create the structure and style of the website, but using javascript users can interact with the website. Just think, you have created a website with HTML and CSS. Now, you want when a user clicks a button, the image on the website should change. Now, if you use only HTML and CSS, you should change the style or image whenever the user clicks the button. Is it possible to change the style whenever the user clicks the button? No, It is not possible. But, javascript does this job. An example of javascript is given below.

When Turn Off button is clicked

When Turn On button is clicked

4. Bootstrap: Now, we don’t want our website to look good only on desktop but on all size devices like smartphones, tablets. So, a website that looks perfect in all screen sizes is a responsive website, and to make our website responsive we have to use Bootstrap. Bootstrap is free and open-source 

HTML, CSS, and Javascript framework that helps to design a website responsive.

5. PHP: PHP stands for Hypertext Preprocessor. Till now, you have learned about front end development. But, we also want that user can send data and visit a particular page of the website. This can be done using server-client interaction and for this job a scripting language like PHP required. There are some other scripting languages like ASP.NET and other languages like Python, Java, Ruby on rails for Back end development. But, PHP is one of the most popular languages.Facebook, Yahoo, Wikipedia are the most popular websites built using PHP.

6. MySQL: Now, you may have visited websites where you have to sign up or log in.For working the sign up or log in system you need to store the data user gives input while sign up and check whether user id and password matches while login.So, you need databases to store all these data and work with them.For this reason, you need MySQL.PHP is most easy to work with MySQL.So, I would recommend to work with PHP and MySQL.

Other technologies like Libraries and frameworks

Modern technologies are developed with time to make our life easier with development and to make websites more user friendly. For this reason, there are several libraries and frameworks to work with.

1. Node.js : It is a powerful Javascript framework that allows us to develop server-side components using Javascript.

2.React JS: React is an open-source Javascript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

3. Vue.js :Vue.js is an open-source Javascript framework for building user interfaces and single page applications.

4. Angular.js : Angular JS is a Javascript-based open-source front-end framework mainly maintained by Google and a community of individual developers to address many of the challenges encountered in single-page applications.

5. jQuery: It is a Javascript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and AJAX. It is free open-source software using the permissive MIT liscence.

6. Wordpress: It is a free and open-source content management system written in PHP and paired with MySQL or mariaDB database. Features include a plugin architecture and a template system, referred to within Wordpress as Themes.

7. Django : It is a python-based free and open-source web framework that follows the model-template-view architectural plan.

Text editors to use :

 For writing your code you need some text editors.So, here are some text editors you can use.

1. Microsoft Visual studio code: Visual studio code is a free open-source code editor created by Microsoft for Windows, Linux,and Mac OS. Features include support for debugging ,syntax highlighting ,intelligent code completion,snippets, code refactoring, and embedded Git.

2. Atom: It is a free and open-source text and source code editor for macOS, Linux, and Windows with support for plugins written in Node.js, and embedded Git control, developed by Github. Atom is a desktop appliaction built using web technologies.

3. Sublime Text : It is a shareware cross-platform source code editor with a Python application programming interface. It natively supports many programming languages and markup languages, and functions can be added by user with plugins, typically community built and maintained under free software liscences.

 

There are other text editors as well but I will personally recommend Atom or Visual Studio code as it is free to use and comes with different helpful features.

How to run my code ? 

You already learned which languages to learn and which text editors to use. Now, you might be thinking that how to run my code. If you are using HTML, CSS , Javascript and Bootstrap to build your website, you can just use chrome or other browser to run the code. You just need to go to the folder where you have created the project and open the html file to run the html code.

But, if you are using PHP, you need to have a local server installed in your device to run the code. The tools that can be used for this work are-

XAMP: It is a free open-source cross platform web server. It can be used in Linux,Solaris, windows, and Mac OS systems.

WAMP: It is a software stack for windows system.

MAMP: It is a solution stack composed of free and open source and proprietary commercial software used together to develop and run dynamic websites on Apple Macintosh computers.

Not only this you can also host your own websites for free with github. I have written another article on the hosting process in github. You can find it here - Check this. Till then, start learning and gaining knowledge. Best wishes for your journey to be a web developer.

Happy coding 😀