How to Install Visual Studio Code on Windows?
Visual Studio Code is the most popular code editor and the IDEs provided by Microsoft for writing different programs and
languages. It allows the users to develop new code bases for their applications and allow them to successfully optimize
them and debug them properly. It is a very user-friendly code editor and it is supported on all the different types of operating
systems like Windows, macOS, and Linux. It has the support for all the languages like C, C++, Java, Python, JavaScript,
React, Node JS, etc.
It is the most popular code editor in India also. It allows users with different types of in-app installed extensions for the
different types of their supported languages. It allows the programmers to write the code with ease with the help of these
extensions. Also, Visual Studio Code has a great vibrant software UI with amazing night mode features. It suggests auto
complete code to the users which suggests the users complete their code with full ease.
Installing Visual Studio Code on Windows
Follow the below steps to install Visual Studio Code on Windows:
Step 1: Visit the official website of the Visual Studio Code using any web browser like Google Chrome, Microsoft Edge,
etc.
Step 2: Press the “Download for Windows” button on the website to start the download of the Visual Studio Code
Application.
Step 3: When the download finishes, then the Visual Studio Code icon appears in the downloads folder.
Step 4: Click on the installer icon to start the installation process of the Visual Studio Code. Step 5: After the Installer
opens, it will ask you for accepting the terms and conditions of the Visual Studio Code. Click on I accept the agreement
and then click the Next button.
Step 6: Choose the location data for running the Visual Studio Code. It will then ask you for browsing the location. Then
click on Next button.
Step 7: Then it will ask for beginning the installing setup. Click on the Install button.
Step 8: After clicking on Install, it will take about 1 minute to install the Visual Studio Code on your device.
Step 9: After the Installation setup for Visual Studio Code is finished, it will show a window like this
below. Tick the “Launch Visual Studio Code” checkbox and then click Next.
Step 10: After the previous step, the Visual Studio Code window opens successfully. Now you can
create a new file in the Visual Studio Code window and choose a language of yours to begin your
programming journey!
So this is how we successfully installed Visual Studio Code on our Windows system.
Below are the tools you need to set up with the environment to start writing TypeScript code:
• [Link] – [Link] is the environment in which you will run the TypeScript compiler.
• TypeScript compiler – a [Link] module that compiles TypeScript into JavaScript. If you use JavaScript for [Link], you can install the ts
node module. It is a TypeScript execution and REPL for [Link]
• Visual Studio Code – It is a code editor that supports TypeScript. However, you can use your favourite editor. If
you use VS Code, you can install the following extension to speed up the development process:
• Live Server – It allows you to launch a development local Server with the hot reload feature.
INSTALL [Link]
Installing [Link] is very simple. You just need to follow the below steps –
• Download the latest [Link] version from the official website.
• Execute the downloaded package and follow the steps.
• Verify the installation from your terminal. by executing the command node -v. If you see the version you downloaded, it means the installation is
successful.
INSTALL TYPESCRIPT
Once you install the Node, you can install the typescript compiler using the following command from the command prompt
npm install -g typescript
INSTALL VISUAL STUDIO CODE
Next, we will need a Code editor. You have many choices here. For this tutorial, we will use Visual Studio Code. You can download it from the
official
[Link] CONFIGURE VISUAL STUDIO CODE (IDE) FOR JAVASCRIPT
DEVELOPMENT
You can read my previous post to know how you can set up your Visual Studio Code for JavaScript development. It is valid for TypeScript as well.
How to configure Visual Studio Code (IDE) for JavaScript Development
← Introduction to TypeScript How To Install Apache Server on Google Cloud Virtual Machine and Execute Hello World →
INSTALL LIVE SERVER
To install the Live Server extension, you follow these steps:
• Click the Extensions tab to find the extensions for VS Code.
• Type the live server to search for it.
• Click the
install
button to install the extension.
Create a Webpage Layout using Semantic elements.
<!DOCTYPE html>
<html>
<head><style>
article
padding:5px;
border:dotted 3px #ff006e;
margin-top:5px;
header
padding:0px;
text-align:center;
aside
margin-top:5px;
background-color:#f0eaea;
padding:5px;
text-align:center;
font-style:italic;
border:double 3px #b200ff; }
section
padding:5px;
border:dashed 3px #0026ff;
margin-top:5px;
}
footer
{
padding:5px;
text-align:center;
font-weight:bold;
nav
text-align:center;
ul li
display:inline;
padding-left:5px;
padding-right:5px;
text-align:left;
font-size:16px;
font-weight:bold;
<title>Sample HTML5 Layout</title>
</style>
</head>
<body>
<header>
<h1>This is page heading</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li> <li><a
href="#">About Us</a></li> <li><a
href="#">Contact Us</a></li> </ul>
</nav>
<article>
<h1>This is article heading</h1>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</article>
<aside>
<figure>
<img src="images/[Link]" height="100px" width="100px" />
<figcaption>Figure caption goes here</figcaption> </figure>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</aside>
<section>
<h1>This is a section heading</h1>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</section>
<footer>
<hr />
Copyright (C) 2013. All rights reserved.
</footer>
</body>
</html>
Add audio & video elements to webpage.
Definition and Usage
The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the
first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
Attributes
Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as soon as it is ready
controls controls Specifies that audio controls should be displayed (such as a play/pause button etc)
loop loop Specifies that the audio will start over again, every time it is finished muted muted Specifies that
the audio output should be muted
preload auto
Specifies if and how the author thinks the audio should be loaded when
metadata
the page loads
none
src URL Specifies the URL of the audio file
Example
<!DOCTYPE html>
<html>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output
Definition and Usage
The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
The <video> tag contains one or more <source> tags with different video sources. The browser will choose the
first source it supports.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the
<video> element.
There are three supported video formats in HTML: MP4, WebM, and OGG.
Optional Attributes
Attribute Value Description
autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every time it is finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play
button
preload auto
Specifies if and how the author thinks the video should be loaded when
metadata
the page loads
none
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Output
Drawing 2D graphics using Canvas
CANVAS tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes,
texts, gradient, and adding images. By default, it does not contain borders and text.
Note: This tag is new in HTML5.
Syntax:
<canvas id = "script"> Contents... </canvas>
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
How to Draw Graphics using
Canvas in HTML5 ?
</title>
<style>
#FirstCanvas {
width: 300px;
height: 300px;
border: 3px solid red;
background-color: blue; }
</style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>
Output:
Output:
Program to find current location using Geolocation
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = [Link]("demo");
function getLocation() {
if ([Link]) {
[Link](showPosition); }
else {
[Link] = "Geolocation is not supported by this browser."; }
}
function showPosition(position) {
[Link] = "Latitude: " + [Link] +
"<br>Longitude: " + [Link];
</script>
</body>
</html>
OUTPUT
Click the button to get your coordinates.
Try It
Latitude: 17.3965312
Longitude: 78.6006016
Explain for local Storage & Session Storage
What is HTML Web Storage?
With web storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more
secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Web
storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
HTML Web Storage Objects
HTML web storage provides two objects for storing data on the client:
• [Link] - stores data with no expiration date
• [Link] - stores data for one session (data is lost when the browser tab is closed)
Before using web storage, check browser support for localStorage and sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
The localStorage Object
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is
closed, and will be available the next day, week, or year.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
[Link]("lastname", "FSB");
// Retrieve
[Link]("result").innerHTML = [Link]("lastname");
} else {
[Link]("result").innerHTML = "Sorry, your browser does not support Web Storage...";
</script>
</body>
</html>
OUTPUT
FSB
The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The
data is deleted when the user closes the specific browser tab.
The following example counts the number of times a user has clicked a button, in the current session:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if ([Link]) {
[Link] = Number([Link])+1;
} else {
[Link] = 1;
[Link]("result").innerHTML = "You have clicked the button " + [Link] + " time(s) in
this session.";
} else {
[Link]("result").innerHTML = "Sorry, your browser does not support web storage..."; }
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
OUTPUT
Click me!
You have clicked the button 1 time(s) in this session.
Click the button to see the counter increase.
Close the browser tab (or window), and try again, and the counter is reset.
Styling the text & fonts using CSS3 properties.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<p class="a">CSS text style example</p>
<style>
.a {
background-color: lightgrey;
font-weight: bold;
font-style: italic;
font-size: 45px;
color: blue;
text-shadow: 1px 1px 0px red;
letter-spacing: 3px;
text-indent: 50px;
direction: rtl;
text-align: center;
text-transform: UPPERCASE;
text-decoration: overline;
text-decoration-color: red;
text-decoration-style: WAVY;
word-spacing: 10px;
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
OUTPUT
Styling Lists & Links using CSS3 properties.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
background-color: yellow;
text-decoration: none;
}
a:visited {
background-color: cyan;
a:hover {
color: hotpink;
background-color: lightgreen;
text-decoration: underline;
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<h2>Styling a link with background-color property</h2>
<p><b><a href="[Link]" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
OUTPUT
Styling a link with background-color property
This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective. Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
Styling lists using CSS3 properties.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
list-style-type: NUMBER;
ul {
background: #3399ff;
padding: 20px;
list-style-type: square;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
</style>
</head>
<body>
<h1>Styling Lists With Colors</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
OUTPUT
Styling tables using CSS3 properties.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
th {
height: 70px;
td {
text-align: center;
height: 50px;
vertical-align: bottom;
table, th, td {
border: 1px dashed;
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Output
Styling webpage backgrounds using CSS3 properties.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
h1 {
background-color: green;
opacity: 0.7;
div {
background-color: lightblue;
p{
background-color: yellow;
</style>
</head>
<body>
<h1>CSS background-color
example!</h1> <div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Demonstrate Form Validation.
<html>
<head>
<script>
function A() {
var name =
[Link];
var email =
[Link];
var phone =
[Link];
var what =
[Link];
var password =
[Link];
var address =
[Link];
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //Javascript reGex for Email Validation. var
regPhone=/^\d{10}$/; // Javascript reGex for Phone Number validation. var regName = /\d+$/g; // Javascript
reGex for Name validation
if (name == "" || [Link](name)) {
[Link]("Please enter your name properly.");
[Link]();
return false;
if (address == "") {
[Link]("Please enter your address.");
[Link]();
return false;
if (email == "" || ) { [Link]("Please
enter a valid e-mail address."); [Link]();
return false;
if (password == "") {
alert("Please enter your password");
[Link]();
return false;
if([Link] <6){
alert("Password should be atleast 6 character long");
[Link]();
return false;
if (phone == "" || ) {
alert("Please enter valid phone number.");
[Link]();
return false;
}
if ([Link] == -1) {
alert("Please enter your course.");
[Link]();
return false;
return true;
</script>
<style>
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
form {
margin: 0 auto;
width: 600px;
</style>
</head>
<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1> <form
name="RegForm" onsubmit="return A()" method="post">
<p>Name: <input type="text"
size="65" name="Name" /></p>
<br />
<p>Address: <input type="text"
size="65" name="Address" /> </p>
<br />
<p>E-mail Address: <input type="text"
size="65" name="EMail" /></p>
<br />
<p>Password: <input type="text"
size="65" name="Password" /></p>
<br />
<p>Telephone: <input type="text"
size="65" name="Telephone" /></p> <br />
<p>
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BBA</option>
<option>BCA</option>
<option>[Link]</option>
<option>[Link].</option>
</select>
</p>
<br />
<br />
<p>Comments: <textarea cols="55"
name="Comment"> </textarea></p>
<p>
<input type="submit"
value="send" name="Submit" /> <input
type="reset"
value="Reset" name="Reset" /> </p>
</form>
</body>
</html>
OUTPUT
Demonstrate DOM methods
HTML DOM methods, there are six different methods in which users can access or manipulate HTML elements using
JavaScript:
• HTML DOM getElementById() Method
• HTML DOM getElementsByClassName() Method
• HTML DOM getElementsByName() Method
• HTML DOM getElementsByTagName() Method
• HTML DOM querySelector() Method
• HTML DOM querySelectorAll() Method
HTML DOM getElementById(): This method is used when developers have defined certain HTML elements with IDs
that uniquely identify the same elements in the whole document. It returns an Element object which matches the
specified ID in the method. If the ID does not exist in the document, it simply returns null.
<!DOCTYPE html>
<html>
<body>
<h2>hello</h2>
<!-- Paragraph element with an id of "hi" -->
<p id="hi">HI</p>
<script>
const paragraph =
[Link]("hi");
[Link](
"The selected element is " + paragraph
);
</script>
</body>
</html>
HELLO
HI
HTML DOM getElementsByClassName(): This method is used when there are multiple HTML elements with the same
class name. It returns a collection of all objects which match the specified class in the method. Syntax:
[Link](className);
<!DOCTYPE html>
<html>
<body>
<h2>HELLO</h2>
<!-- Div elements with class names
of "HI EVERYONE" -->
<div class="HI EVERYONE">HI</div>
<div class="HI EVERYONE">TO</div>
<div class="HI EVERYONE">EVERYONE</div>
<script>
const divs = [Link](
"HI EVERYONE"
);
[Link](divs);
// Select first element with
// class "HI EVERYONE"
[Link](divs[0]);
</script>
</body>
</html>
Output:
HELLO
HI
TO
EVERYONE
HTML DOM getElementsByName(): In Javascript, getElementsByName() returns a NodeList of objects which match a
particular name attribute in the HTML document.
Syntax:
[Link](nameAttribute);
<!DOCTYPE html>
<html>
<body>
<h2>HI</h2>
<!-- Input elements with name
attributes of "HELLO" -->
<input type="text" placeholder="Text input"
name="HELLO" />
<input type="number" placeholder="Number input"
name="HELLO" />
<script>
const inputs = [Link]("HELLO");
[Link](inputs);
// Select second element with
// name attribute "HELLO"
[Link](inputs[1]);
</script>
</body>
</html>
OUTPUT
HTML DOM getElementsByTagName(): The getElementsByTagName() returns a HTMLCollection of objects which
match a tag name in the HTML document.
Syntax:
[Link](tagName);
<!DOCTYPE html>
<html>
<body>
<!-- Various HTML elements with
different tag names -->
<div>HI</div>
<p>HELLO</p>
<p>For</p>
<p>YOU</p>
<script>
const p = [Link]("p");
[Link](p);
// Select third element with tag name "p"
[Link](p[2]);
</script>
</body>
</html>
OUTPUT
HI
HELLO
FOR
YOU
HTML DOM querySelector(): This method returns the first match of an element that is found within the HTML
document with the specific selector. If there is no match, null is returned.
Syntax:
[Link](selector);
<!DOCTYPE html>
<html>
<body>
<!-- Various HTML elements with
different tag names -->
<div class="HI">HI</div>
<p>HELLO</p>
<p id="para">For</p>
<p>YOU</p>
<script>
// Using "." for prefix class selector
const div =
[Link](".HI");
// Using tag name for tag selector
const firstParagraph =
[Link]("p");
// Using "#" prefix for ID selector
const secondParagraph =
[Link]("#para");
[Link](
div, firstParagraph, secondParagraph
);
</script>
</body>
</html>
OUTPUT:
HI
HELLO
FOR
YOU
HTML DOM querySelectorAll(): This method returns a static NodeList of all elements that are found within the HTML
document with the specific selector.
Syntax:
[Link](selector);
<!DOCTYPE html>
<html>
<body>
<!-- Various HTML elements with
different tag names -->
<div class="HI">WELCOME</div>
<div class="HI">TO</div>
<div class="HI">BCA</div>
<div class="HI">CLASS</div>
<p>Geeks</p>
<script>
// Using "." for prefix class selector
const divs =
[Link](".HI");
[Link](divs);
</script>
</body>
</html>
OUTPUT
WELCOME
TO
BCA
CLASS