WEB DEV FAQ

What is web development?

Web development is a broad description of the tasks and technologies that go into creating a website. It can be as simple as making a static text-based website or as elaborate as developing an interactive dynamic website. You can break web development into two different categories: frontend (client-side) and backend (server-side). Frontend code executes on the user's computer. This can include HTML, JavaScript, and CSS. Backend code runs on the server — this commonly includes communicating with a database and often involves languages like Python, Ruby, Java, or PHP. Web development does not necessarily include the design process — it focuses on code. A web designer builds wireframes to mockup their vision for a website and then shares that with a developer. The developer is responsible for writing the code that implements the design.

What are the steps to becoming a web developer?

Some web developers will obtain a degree or certification in the field. However, most jobs don't require a specific degree or level of education, just demonstrated knowledge of the field. So, it is more important that you know how to show off your skills. You could highlight your skills through relevant work experience or a portfolio of past projects. You might also share code you have developed using a platform like GitHub, or participate in solution-based forums like StackOverflow that reward you for helping others. HTML, CSS, and JavaScript are the first three coding languages you'll need to learn to break into web development. You need these three essential elements to create a modern website and work as a frontend web developer. HTML (Hyper-Text Markup Language) specifies the content of the website and builds the backbone. CSS (Cascading Style Sheets) styles the content. JavaScript controls the interactive elements of the website.

How long does it take to become a web developer?

The answer to this question will depend on you. The more time you spend developing your skills, the faster you can become a web developer. The good news is that web development generally uses light-weight code that is easier to learn than many other languages. If dedicated, you can learn the basics of web development in a couple of months. But good web developers never stop learning. A better question might be, "What can I do to become a better web developer faster?" The answer to this question is practice. Becoming familiar with coding helps tremendously, but there is also a less obvious benefit of practicing. The more you code, the more you will run into problems or find bugs in your code. A significant aspect of web development is solving problems and debugging code. The better you get at solving problems and tracking down bugs, the faster you will get at coding.

JavaScript is one of the most ubiquitous programming languages on the planet, mostly because it's the backbone of interactive web applications. On top of that, JavaScript is a great language for beginners because it gives them a chance to write code that does something visual, which is exciting and helpful when you're just getting started as a programmer. Dynamic content is the hot topic in web development right now. Dynamic content refers to content that constantly changes and adapts to specific users whenever possible. For example, JavaScript can be used to determine if a website visitor is using a computer or a mobile device before deciding whether or not to render the mobile version of the website. It's these small things behind the scenes that create genuine value in using JavaScript to create dynamic web pages.

What is JavaScript?

JavaScript is a curly-braced, dynamically typed, prototype-based, object-oriented programming language. It started as the programming language for the web and is one of the three layers of standard web technologies — the other two being HTML and CSS. JavaScript allows you to create and control content dynamically on a web page without requiring a page reload. Web browsers are able to interpret it, and when triggered by events, modify the HTML and CSS of a web page with dynamic updates. JavaScript also uses asynchronous calls to fetch data from web services in the background. Although it was initially only used in web browsers, JavaScript engines have since been put to use as servers with Node.js, included in desktop application frameworks like Electron, and embedded in phone frameworks like Apache Cordova.

Why is JavaScript important?

JavaScript is the programming language that allows users to interact with the websites that they're visiting, making it a very important language for web developers to know. In the past, most developers focused on the backend; JavaScript was only relevant when they needed to use visual effects. As web development evolved and the focus shifted towards user experience, programmers started to rely on JavaScript for their frontend code heavily. Today, most sites use JavaScript to fetch and submit data, use logic, and generate HTML in browsers. JavaScript can also communicate asynchronously with data servers in the background without interrupting the user interaction in the foreground. These features make JavaScript not only an important language but a necessary language for modern web development.

What are the main uses of JavaScript?

JavaScript is a text-based programming language used for client- and server-side development. Web developers have used JavaScript since its inception to add simple interactivity to web pages like modals, animated elements, or image slideshows. While that is still one of its primary uses, Javascript has evolved to building complete web applications. SPAs, or single page applications, depend on JavaScript-based frameworks like React, Angular, and Vue to bring a desktop-like application experience to the browser. However, it's important to note that web browsers aren't places that make good use of the programming language. Javascript is also popular for building web services and back-end infrastructure with Node.js. React Native, Xamarin, Ionic, and NativeScript frameworks use JavaScript for developing phone apps as well.

React vs. Angular vs. Vue: what is the best JavaScript framework?

hoosing the best JavaScript framework for your web project depends on what you are looking for. React is a popular framework, which means you will find a lot of community support if you need help. It is also considered relatively easy to learn but is being developed at a rapid pace. Angular is a framework that makes data binding easy so that you can template an application faster. It also uses the RxJS library to simplify asynchronous programming and Typescript (which compiles to JavaScript) for a cleaner, less error-prone development process. Some cons of Angular are that it can have a steep learning curve and can be complex. Vue is a lightweight framework, so it is easy to learn, very performant, and flexible. Some cons of Vue are limited plugins, and its flexibility can lead to irregular code.

What is JSON and what is it used for?

Because of the evolution of the JavaScript language, JavaScript has a variety of techniques for creating objects. But, ultimately in the background, JavaScript is using a syntax called JSON. JSON stands for JavaScript Object Notation and is a standard text-based format used to represent objects in JavaScript. The same basic types of data represented in Javascript can also be represented in JSON, including strings, numbers, arrays, booleans, and JavaScript objects. Although JSON is based on the JavaScript object, it is not just used in JavaScript. It is also used as a format to transfer data from a web browser to a server and vice versa because of the format's simplicity and small size. The JSON format is used in REST APIs for this purpose and has replaced XML as the standard format for many APIs. Because of this, just about any language you use will have a method of converting data into JSON to interact with REST APIs.

What is AJAX and what is it used for?

AJAX stands for Asynchronous JavaScript and XML. AJAX is a technology that developers use to create better, faster and more interactive web applications. AJAX uses XHTML for content, CSS to style the page, and JavaScript for controlling content dynamically. AJAX allows you to update a web page without reloading the page (this technique is called a “SPA” or Single Page Application), request data for the page after it has loaded, receive data after the page has loaded, and send data to the server in the background. Despite XML being part of the acronym that makes up AJAX, AJAX can send and receive data in any format, including JSON or plain text. While traditional web applications use synchronous methods to send and receive information from a web server, AJAX can use asynchronous API calls in the background without blocking activity in the browser. AJAX is a data-driven rather than a page-driven technology.

CSS-CLASS/ID/DIV Syntax

<!--CLASS & ID & DIV-->

Theory : 

Class:
A class is a keyword used to define a group of elements that share common properties.
It is used to apply styles or behaviors to a group of elements.
Classes can be applied to multiple elements on a page.
Syntax: <element class="class_name">

ID:

An ID is a unique identifier used to identify a single element on a page.
It is used to target a specific element for styling or scripting.
IDs should be unique within a document.
Syntax: <element id="id_name">

DIV:

A DIV is an HTML element that represents a generic block-level container.
It is used to group elements together and create sections on a page.
DIVs can be styled using CSS to change their appearance.
Syntax: <div>

Differences:

Class: Can be applied to multiple elements, while ID should be unique.
ID: Used to target a specific element, while class is used to group elements.
DIV: Is an HTML element that represents a container, while class and ID are attributes used to style or identify elements.

<!doctype html>

<html>


<head>



<title>Webpage With Style</title>



<style type="text/css">



.red {



color:red;



}



.large {



font-size: 200%;



}



#green {



color:green;

}



.underlined {



text-decoration: underline;



}



#first-section {

color:blue;

background-color: pink;

width:100px;

}

#second-section {

color: red;

background-color: yellow;

width:200px;

}

</style>



</head>



<body>



<div id="first-section">

<p>The quick brown fox jumped over the lazy dog.</p>



<p>Wow, I love internal CSS!</p>



</div>



<p class="red large">The quick brown fox jumped over the lazy dog.</p>



<p class="large">Wow, I love internal CSS!</p>



<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>



<div id="second-section"><h1 class="red">CSS is cool!</h1></div>



</body>



</html>

OUTPUT:

HTML5-Syntax for tables

Major tags used in HTML tables 

<table>

<tr>

<th>

<td>

<thead>

<tbody>

border=

<! tables>

<!doctype html>

<! doctype declaration>

<html>

<! The beggining of the html code>

<head>

<! The head section begins>

    <title>

        CODE-4Tables

        

    </title> 

    <! The title is the name of the browser tab>

</head>

<! The end of the head section>

<body>

<! The body section begins>    

    <table>

    <! Table declaration>

        <thead>

        

            <tr>

                <th>Name</th>

                <th>Fav</th>

                <! Table head data>

            </tr>

        </thead><! This is the head of the table>

        <tr>

        <! Table row declaration>

            <td>Niel</td>

            <td>Red</td>

            <! Table data declaration and definition>

        </tr><! Table row complete>

        <tr>

        <! Table row declaration>

            <td>Dad</td>

            <td>Blue</td>

            <! Table data declaration and definition>

        </tr>

        <tr>   

        <! Table row declaration>

            <td>Niel</td>

            <td>Black</td>

            <! Table data declaration and definition>

        </tr>

        <tr>

        <! Table row declaration>

            <td>Isha</td>

            <td>While</td>

            <! Table data declaration and definition>

        </tr>

        <tr><! Table row declaration>

            <td>Mumma</td>

            <td>Green</td>

            <! Table data declaration and definition>

        </tr>

        

    </table>

</body>

</html>

The code of the above code looks like :

HTML5-Code Syntax for forms

<!forms>

<!doctype html> <! doctype declaration>

<html>  <!start of the html webpage> 

<head>  <!start of the head section of the webpage>

<title> <!title declaration that appears on the browser tab name>

 CODE-3

</title>   <! title end>

</head>    <! head end>

<h1>Forms</h1>

    <hr>    <!insert a break in the webpage>

    <body>  <!start of the body section of the body>

        <p>Username <input type="text" value="your username"> </p>    

        <!accept text input for usename>

        <p>Password <input type="password"></p>     

        <!accept password>

        <p>Stay Logged <input type="checkbox"></p>  

        <!checkbox to see accept if user wants to stay logged in>

        <p>Under 18 <input type="radio" name="age" value="u18"></p> 

        <!radio button to determine the approxmiate age of the user>

        <p>Over 18 <input type="radio" name="age" value="o18"></p>  

        <!radio button to determine the approxmiate age of the user>

        <p>Faveriote Food : <select> 

            <!seletion dropbox to accept one of the predefined options>

                

            <option>Burger</option>  

            <!option declaration>

            <option >Pizza</option> 

             <!option declaration>

            <option selected>Fries</option>     

            <!option declaration>

            <option>Momos</option>      

            <!option declaration>

            <option>Soft Drink</option>    

             <!option declaration>

        </select> </p>     

         <!end of the selection element>

            

        <p><input type="submit" Submit></p>   

          <!submit button to accept all the data enterd by the user>   

        <hr>      

          <!insert break in the webpage>

    

</body>     <!end of the body section>

</html>     <!end of the html code>

Different HTML tags and their uses

<!--..--> 

This tag is used to add a comment in the code.

EXAMPLE: <!doctype html>

____________________________________________________________________________________________

<html> 

This tag defines the root if a html document. In simpler term it is the gate/entrance of the html code. 

This is where it all begins.

____________________________________________________________________________________________

</html>

This tag closes the opened html root. In simpler terms it is the ending of the html

doc/code.

____________________________________________________________________________________________

<head> 

This tag contains the metadata i.e. the data about the data or the information for                         the  information.

___________________________________________________________________________________

</head> 

This tag defines the end or closing of the head section.

_______________________________________________________________________________________________

<body>  

This tag is the beginning of the body of the webpage where the main context of                      

the website.

_______________________________________________________________________________________________

</body> 

  This tag shows the end of the body section of the webpage.

_______________________________________________________________________________________________

<title> 

This tag defines the title i.e. what we see on the browser tab, the name of the tab.

_______________________________________________________________________________________________

</title> 

 This tag defines the ending of the title tag.

_______________________________________________________________________________________________

<h1> 
  

This tag is used to define the header1. 

It is the biggest header of the html doc.

This tag is ended with a </h> following the entered context of the header. 

If we use header 2,3,4,5 or 6 /<h2> with every next header the size of the header                         reduces.

_________________________________________________________________________________

<p>

   

This tag is used to initiate a paragraph in the webpage.    

The context of the paragraph is written in between <p> and </p> tags.

_______________________________________________________________________________________________

<br> (<br  /> in xhtml)

This tag defines a single line break in a paragraph. This tag is a self closing tag.    

___________________________________________________________________________________

<b> </b> /<bold> </bold>

This tag is used to make the text of the context look bold.

___________________________________________________________________________________

<i> </i> / <em> </em>

This tag is used to make the text of the context look italic.

_______________________________________________________________________________________________

 <u> </u> / <ins> </ins>

This tag is used to underline the text of the context.

__________________________________________________________________________________



This tag is used to make the text of the context appear as a subscript.   

___________________________________________________________________________________



This tag is used to make the text of the context appear as a superscript/super text.

_______________________________________________________________________________________________

         

<del> </del>

Ths is tag is used to make the text of the context appear as a struck out text.

_______________________________________________________________________________________________

<hr> (<hr /> in xhtml)

This tag is used to put a horizontal rule in betweeen the context of the webpage. This is also a self closing tag like <br>.

___________________________________________________________________________________

<ul> </ul>

This tag is used to make a list of terms in a unordered manner.

_______________________________________________________________________________________________

<ol> </ol>  (<ol type="a"> for alphabetical list/ "I" for roman numerals)

This tag is used to make a list of terms  in a ordered manner.

___________________________________________________________________________________

<li> </li>

This tag is used to add terms in ordered/unordered list.

_______________________________________________________________________________________________

<img src="IMAGE DIRECTORTY ADDRESS / IMAGE URL" width="XXX"px height="XXX"px aliigh="left">

This tag is used to add images in webpage.

_______________________________________________________________________________________________

<input type="text" value ="your name" placeholder="enter username">

This tag is used to used to accept text input for username/name in a form.

_______________________________________________________________________________________________

<input type="checkbox">

This tag is used to check/confirm certain parameters in a form.

___________________________________________________________________________________

<input type="radio"

This tag is used to add radio buttons to select from a number of options in a form.

___________________________________________________________________________________

<select>

    <option> option1 </option>

    <option selected> option2 </option>

</select>

This tag is used to create a dropdown box with multiple option to select with.

The tag with the selected term is selected by default.

_______________________________________________________________________________________________

<table> </table>

This tag is used to create a table in the webpage.

___________________________________________________________________________________

<thead>   

    <tr>

            <th>

            Name for the head data of the table 

            </th>

    </tr>

</thead>

This tag is used to create the main heads of the created table.

_______________________________________________________________________________________________

<tr> </tr>

This tag is used to create rows in table.

_______________________________________________________________________________________________

<td> </td>

This tag is used to enter table data in the declared rows of a table.

_______________________________________________________________________________________________

<