Thinking about Web Development !!

When I want to know about the Web Development , I was bit confused with many technologies , many applications . This makes every beginner tense but I ensure that by end of this blog you will have good knowledge about the web development. In this field we have front-end and back-end development , Front-end is the look of your Website or Web application where the clients looks and judge . In this blog , I will give the brief exposure so that you will be ready to start.

- Frontend Development

Here we have different languages such as HTML,CSS and JavaScript (Don't Worry).Many of us sometime or other we have seen HTML which is Hyper Text Markup Language. Here we save the file as .html . This is basically structure for your website which describes the tags,buttons ,headings ,text fields and many more.If we have only the structure it looks like :

Simple code :

<!DOCTYPE html>

<head>
    <title>Basic</title>
</head>

<body>
    <h1>This is Heading!!</h1>
    <br>
    <button>Button</button>
</body>

</html>

Hurray!! Our First Web page is created !! If we want to design the elements present in the website we use CSS(Cascading Style Sheets). It gives you the look of your Website such as Colour , positioning , animations and many more. It is not complicated just we have properties to look into it and apply them simply .We need to just link the CSS file to the html file locally. We save the file as .css extension . In CSS we have layouts flex and grid which are used to position the elements in the web page. Here we have some frameworks such as BootStrap 5, Tailwind etc. to make our work easier.

Point to be remember : We no need to memorise every code , just use online resources to do it.This takes you some time to complete but make sure you do it with perfection.

Link to Html :

<head>
    <title>Basic</title>
    <link rel="stylesheet" href="style.css">
</head>

CSS snippet :

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

button {
    background-color: lightblue;
    border-radius: 5px;
}

Still here, we have completed the structure and designing of your webpage but our webpage is not responsive , not responding to the buttons or sending the information to the server. Now comes the backbone of web page i.e JavaScript which is used for functionality for the elements in the website.

Javascript is the programming language of the web. JS have some versions , presently ES6 is the version being used in the web Development. By using .js extension we save the file. We link the Javascript to the HTML page with the script tag.We don't have any specific compiler or environment for the JS but the output can be viewed in the Google Chrome Developer tools Console tab. We print the output using :

      console.log()
      window.alert() // it alerts the webpage by popping a small window
      document.write() // it is used to write in the document

In JS, Document Object Model (DOM) is used to define the logical structure of documents and way of accessing and manipulating the webpage .Here is the DOM structure :

(*Source - FreeCodeCamp)

I will continue this blog as second part since the backend has to be discussed in detailed.Stay Tuned !!!

(This is my First ever blog , So if any mistakes are noticed please comment so that I will correct in the next blog)

Thank you guys !! Hope you like the Content . :-)

MakeMeDev

MakeMeDev

Thinking about Web Development !!

Table of contents

No headings in the article.