Roadmap of Being a Web Developer

Roadmap of Being a Web Developer

Being a Web Developer is quite interesting and exciting. It was always fun for me when I started my career as a web developer. I choose this field because I love code and create something interesting. I was not sure that I would be web developer or mobile application developer, but I was sure about that I have to write code definitely. I got into IT sector and get opportunity to become a web developer. So, now I am, since 2019.

At the beginning of my career, I had no idea how to start and from where to start. Thanks to those mentor who helped me to start with basic, from root, and it is the most important and necessary thing to learn.

In this article, I would make sure that you could know everything in detail which help you to become a web developer. We will cover everything in details.

But first, let know about this :

  1. Who is Web Developer?

Web Developer is a programmer, coder, developer who create website for e-commerce, e-learning, static and dynamic website. They ensure easy to navigate in website and users can get every information, data, products and whatever they are looking for. They play an important role in performance of website, like how fast website load and how website get content dynamically.

=> Types of Web Developer : -

==> Front End Developers work on the visual part of the website—the pages visitors see and interact with (also known as the user interface). They design the physical layout of each page, integrate graphics, and use HTML and JavaScript to enhance the site.

==> Back End Developers create the website’s structure, write code, and verify the code works. Their responsibilities also may include managing access points for others who need to manage a website’s content. This is the part which users can't see on front end. Like how content is reflecting, how data is fetching from database, how user information stored in database and how payment etc works on website. This all manage by Back end developer.

==> Full Stack Developers do the work of both front end and back end developer. They are expert in handling website on user interface as well as back end with dynamically fetching content from database.

2. What is website and webpage?

Website is a collections of webpages and identified by domain and hosted on one server.

For example, you visit any domain like Facebook, Google, Instagram, Youtube, Wikipedia etc, you see the homepage of the website (the first view visible to users) then you may navigate to others pages from homepage that is inner pages of website. These all are websites which is in different category, such as Social Networks and Online Communities, Search Engine, Dictionaries and Encyclopedia, TV Movies and Streaming etc.

Now, as you are aware of who is web developer and what is website. Now you can start learning how can you create these kind of websites.

We can create a website in different programming Languages. But for learner or beginner, I suggest to start with

=> HTML

No alt text provided for this image

  • HTML is the standard markup language for creating Web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

// Syntax of HTML


<!DOCTYPE html>

<html>

   <head>

     <title>Page Title</title>

   </head>

<body>
      
   <h1>This is a Heading</h1>
   <p>This is a paragraph.</p>
      
</body>
</html>
            

Syntax Explained :

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

You must read "Why HTML is must?". To learn more about HTML you can visit W3Schools or YouTube Channel CodeWithHarry for Hindi and freeCodeCamp.org for English.

=> CSS

No alt text provided for this image

  • CSS is the language we use to style a Web page
  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files


// Syntax of CSS

p { 
    color: red;
    text-align: center;
  }
        

Syntax Explained :

  • p is a selector in CSS (it points to the HTML element you want to style: <p>).
  • color is a property, and red is the property value
  • text-align is a property, and center is the property value

To learn more about CSS you can visit W3Schools or YouTube Channel CodeWithHarry for Hindi and freeCodeCamp.org for English.

=> JavaScript

No alt text provided for this image

JavaScript is the world's most popular programming language. It is the programming language of the Web.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

  1. HTML to define the content of web pages

  2. CSS to specify the layout of web pages

  3. JavaScript to program the behavior of web pages


// Syntax of javascript

// How to create variables
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;
        


To learn more about JavaScript you can visit W3Schools or YouTube Channel CodeWithHarry for Hindi and freeCodeCamp.org for English.

A web developer should know above these 3 most essential language to become a good developer. Now, to enhance your skills in web development you can move to core languages, frameworks or CMS. You can become a front end developer or back end developer of Full stack developer as per your interest.

From this point you can choose

=> PHP

No alt text provided for this image

PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.

A PHP script starts with <?php and ends with ?>:


// Syntax of PHP

<?php

// PHP code goes here

?>
        

The default file extension for PHP files is ".php".

You can visit W3School website to learn php.

=> React

No alt text provided for this image

React is a JavaScript library for building user interfaces. It is used to build single-page applications. It allows us to create reusable UI components.


// Syntax of React

import React from 'react';
import ReactDOM from 'react-dom/client';

function Hello(props) {
  return <h1>Hello World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);
        

To Learn React, visit https://reactjs.org/. This is official documentation of React.

=> Laravel

No alt text provided for this image

Laravel is a web application framework with expressive, elegant syntax.

Visit https://laravel.com/

=> Nodejs

No alt text provided for this image

  • Node.js is an open source server environment
  • Node.js is free
  • Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
  • Node.js uses JavaScript on the server

To learn Node visit https://nodejs.dev/en/learn

=> Phython

No alt text provided for this image

Phython is also one of the most popular programming language which can be used on server to create web application.


// Syntax of phython

print("Hello, World!")

// creating a python file on the server, use the ".py" file extension
        

visit https://www.python.org/

This is how you can become an expert developer. But more important thing is you need to keep practice the code and keep updated yourself with new update in technologies. Every languages get update after few months.

Share this article if you like it. Please write your valuable comment so I can keep posting.

Keep Googling. Keep Reading. Keep Practicing

Thanks for reading!

To view or add a comment, sign in

More articles by Arvind Kumar

  • How to enable SVG support in WordPress

    WordPress support JPG and PNG file by default. But We can enable SVG support in WordPress without using any plugin.

  • How to create custom post type & taxonomy in WordPress

    Hello Readers! WordPress is one of the popular CMS and 30% websites are created in it. This is because, it is very easy…

  • How to create Child theme in WordPress

    Child theme is most important in wordPress. To add more functionality in your theme you need to create child theme, so…

  • Why HTML is must?

    Before we discuss this topic, let understand "What is HTML?". HTML - Hyper Text Markup Language ( if a non technical…

    2 Comments

Explore content categories