1.
visual studio code installation, type script extension
installation in vs code
Let’s get started!
➢ First, download the relevant installer from here. For the purposes of this guide, I will be
walking through the Windows Installation (User Installer, 64-bit version)
➢ Accept the License Agreement
➢ Set a Destination Location (default is fine)
➢ Create a Start Menu Folder (default is fine)
➢ In the next screen, make sure that “Add to PATH” is selected
➢ Press Install
➢ Launch Visual Studio Code and go to Extensions (icon highlighted below, shortcut is Ctrl
+ Shift + X)
➢ Search for Python in the search box and install the first result
➢ And that’s it, hopefully Python is installed! To test it out, let us store our class examples
from 02/20/20 in a folder and open this folder at File > Open Folder.
➢ Open [Link] and you should see it pop up in the editor. Make sure that the
Python 3.7.4 interpreter is selected in the bottom left corner of your screen.
➢ There’s a lot happening on this screen which makes VSC powerful. On the bottom of the
screen there is a terminal window that is pointing to the directory where the folder is
located. You can run your familiar terminal commands here. Other windows here include
an Output window and a Debug Console.
➢ Moreover, we can run our code from within VSC (which makes it great). To check if
everything is working, run the code with Debug > Start Debugging (Shortcut F5). If
everything works, you should see the output in the terminal below!
➢ And that’s it! You now have a great tool for running Python files in this class. If you are
feeling adventurous, you can use “break-points” as well; which stops the execution of the
code at that particular point during debugging and allows for step-by-step debugging. To
set a breakpoint, simply click on the empty space next to a line-number.
[Link] a web page layout using semantic elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic Page</title>
<style>
header, nav, main, aside, footer {
padding: 10px;
border: 1px solid #ccc;
margin: 5px;
}
nav, footer { background: #f0f0f0; }
main { display: flex; }
article { flex: 2; margin-right: 10px; }
aside { flex: 1; }
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>
<main>
<article>
<h2>Main Content</h2>
<p>This is the main article content.</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>Extra info or links.</p>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
OUTPUT:
[Link] audio and video elements to web page
<!DOCTYPE html>
<html>
<body align=center>
<!-- Video -->
<video width="320" height="240" controls>
<source src="C:\Users\Noble 1\Downloads/7955161-uhd_2160_4096_25fps.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br>
<!-- Audio -->
<audio controls>
<source src="C:\Users\Noble 1\Downloads/magical-dramedy-orchestral-sneaky-spell-30-sec-375796.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
OUTPUT:
[Link] 2D graphics using canvas
<!DOCTYPE html>
<html>
<head>
<title>Canvas 2D Drawing</title>
</head>
<body align =center>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
<script>
const canvas = [Link]("myCanvas");
const ctx = [Link]("2d");
// Draw a blue rectangle
[Link] = "blue";
[Link](50, 50, 100, 75);
// Draw a red circle
[Link]();
[Link](250, 100, 40, 0, [Link] * 2);
[Link] = "red";
[Link]();
// Draw a green line
[Link]();
[Link](50, 200);
[Link](350, 200);
[Link] = "green";
[Link] = 4;
[Link]();
// Draw some text
[Link] = "20px Arial";
[Link] = "black";
[Link]("Canvas 2D Drawing", 100, 270);
</script>
</body>
</html>
OUTPUT:
[Link] to find current location using Geolocation
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple Location Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="[Link] />
<style>
body { font-family: sans-serif; padding: 10px; }
#map { height: 60vh; border: 1px solid #ccc; margin-top: 10px; }
</style>
</head>
<body>
<h2>Your Location on Map</h2>
<button onclick="getLocation()">Get My Location</button>
<p id="info">Click the button to get your location.</p>
<div id="map"></div>
<script src="[Link]
<script>
let map = [Link]('map').setView([0, 0], 2);
[Link]('[Link] {
attribution: '© OpenStreetMap'
}).addTo(map);
let marker;
function getLocation() {
if (![Link]) {
alert("Geolocation not supported.");
return;
}
[Link](async (position) => {
const lat = [Link];
const lon = [Link];
[Link]([lat, lon], 15);
if (marker) {
[Link]([lat, lon]);
} else {
marker = [Link]([lat, lon]).addTo(map);
}
const address = await reverseGeocode(lat, lon);
[Link]('info').textContent =
Latitude: ${[Link](6)}, Longitude: ${[Link](6)}\n${address ? "Address: " + address : ""};
}, () => {
alert("Unable to retrieve location.");
});
}
async function reverseGeocode(lat, lon) {
const url = [Link]
try {
const res = await fetch(url, { headers: { 'User-Agent': 'location-demo' } });
const data = await [Link]();
return data.display_name || null;
} catch (e) {
[Link](e);
return null;
}
}
</script>
</body>
</html>
OUTPUT:
[Link] for local storage and session storage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Storage Example</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
div { margin-bottom: 10px; }
button { margin-right: 5px; }
#output { border: 1px solid #ccc; padding: 10px; min-height: 50px; background-color: #f9f9f9; }
</style>
</head>
<body>
<h1>Web Storage Example: Local Storage & Session Storage</h1>
<h2>Local Storage</h2>
<div>
<label for="localStorageInput">Enter data for Local Storage:</label>
<input type="text" id="localStorageInput" placeholder="e.g., username">
<button onclick="setLocalStorage()">Set Local Storage</button>
<button onclick="getLocalStorage()">Get Local Storage</button>
<button onclick="removeLocalStorage()">Remove Local Storage</button>
</div>
<h2>Session Storage</h2>
<div>
<label for="sessionStorageInput">Enter data for Session Storage:</label>
<input type="text" id="sessionStorageInput" placeholder="e.g., session ID">
<button onclick="setSessionStorage()">Set Session Storage</button>
<button onclick="getSessionStorage()">Get Session Storage</button>
<button onclick="removeSessionStorage()">Remove Session Storage</button>
</div>
<h3>Output:</h3>
<div id="output"></div>
<script>
const localStorageInput = [Link]('localStorageInput');
const sessionStorageInput = [Link]('sessionStorageInput');
const outputDiv = [Link]('output');
function appendToOutput(message) {
[Link] += <p>${message}</p>;
}
// Local Storage Functions
function setLocalStorage() {
const value = [Link];
if (value) {
[Link]('myLocalData', value);
appendToOutput(Local Storage: 'myLocalData' set to '${value}');
} else {
appendToOutput("Please enter data for Local Storage.");
}
}
function getLocalStorage() {
const data = [Link]('myLocalData');
if (data) {
appendToOutput(Local Storage: 'myLocalData' retrieved: '${data}');
} else {
appendToOutput("Local Storage: 'myLocalData' not found.");
}
}
function removeLocalStorage() {
[Link]('myLocalData');
appendToOutput("Local Storage: 'myLocalData' removed.");
}
// Session Storage Functions
function setSessionStorage() {
const value = [Link];
if (value) {
[Link]('mySessionData', value);
appendToOutput(Session Storage: 'mySessionData' set to '${value}');
} else {
appendToOutput("Please enter data for Session Storage.");
}
}
function getSessionStorage() {
const data = [Link]('mySessionData');
if (data) {
appendToOutput(Session Storage: 'mySessionData' retrieved: '${data}');
} else {
appendToOutput("Session Storage: 'mySessionData' not found.");
}
}
function removeSessionStorage() {
[Link]('mySessionData');
appendToOutput("Session Storage: 'mySessionData' removed.");
}
</script>
</body>
</html>
OUTPUT:
[Link] text and font using css3 properties
<!DOCTYPE html>
<html>
<head>
<style>
.styled-text {
font-family: Arial, sans-serif;
font-size: 24px;
color: blue;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 4px gray;
}
</style>
</head>
<body>
<p class="styled-text">Styled Text Example</p>
<p class="styled-text">Web Technology</p>
<p class="styled-text">Noble Degree College</p>
</body>
</html>
OUTPUT:
[Link] list and linking using css3 properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled List & Links</title>
<style>
ul {
list-style-type: none; /* Remove bullets */
padding: 0;
}
li {
background: #e0f7fa;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
transition: background 0.3s;
}
li:hover {
background: #b2ebf2;
}
a{
text-decoration: none;
color: #00796b;
font-weight: bold;
}
a:hover {
color: #004d40;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Useful Links</h2>
<ul>
<li><a href="[Link]
<li><a href="[Link]
<li><a href="[Link] Docs</a></li>
</ul>
</body>
</html>
OUTPUT:
[Link] tables using css3 properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f0f0f0;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e0f7fa;
}
</style>
</head>
<body>
<h2>Student Marks</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Math</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>Science</td>
<td>88</td>
</tr>
<tr>
<td>Carol</td>
<td>English</td>
<td>92</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:
[Link] web page backgrounds using css3
properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Background</title>
<style>
body {
background: linear-gradient(to right,black ,blue,green,yellow,red,orange,white);
color: #004d40;
font-family: sans-serif;
text-align: center;
padding: 50px;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page uses a CSS3 gradient background.</p>
</body>
</html>
OUTPUT:
[Link] form validation
<!DOCTYPE html>
<html>
<body align=center>
<form onsubmit="return validateForm()">
<label for="name">First Name:</label>
<input type="text" id="name">
<input type="submit" value="Submit">
</form><br>
<form onsubmit="return validateForm()">
<label for="name">Last Name:</label>
<input type="text" id="name">
<input type="submit" value="Submit">
</form><br>
<form onsubmit="return validateForm()">
<label for="name">Father Name:</label>
<input type="text" id="name">
<input type="submit" value="Submit">
</form><br>
<script>
function validateForm() {
const name = [Link]("name").value;
if (first name === "") {
alert("Name must be filled out");
return false; // Prevent form submission
}
return true; // Allow form submission
}
</script>
</body>
</html>
OUTPUT:
[Link] DOM methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 id="main-title">Welcome to DOM Manipulation</h1>
<ul id="item-list">
<li class="list-item">Item One</li>
<li class="list-item">Item Two</li>
<li class="list-item">Item Three</li>
</ul>
<button id="add-item-btn">Add New Item</button>
<script src="[Link]"></script>
</body>
</html>
OUTPUT:
[Link] html events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Events Demo</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>HTML Events Demonstration</h1>
<div id="event-box">
<p>Mouse over this box!</p>
</div>
<button id="click-btn">Click Me!</button>
<br><br>
<label for="name-input">Type your name:</label>
<input type="text" id="name-input" placeholder="Type here...">
<p id="output-message"></p>
<script src="[Link]"></script>
</body>
</html>
OUTPUT:
[Link] Type script code to perform Arithmatic
Operations
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The + Operator</h2>
<p id="add"></p>
<h2>The - Operator</h2>
<p id="subtract"></p>
<h2>The * Operator</h2>
<p id="multiply"></p>
<h2>The / Operator</h2>
<p id="divide"></p>
<h2>The % Operator</h2>
<p id="modulous"></p>
<script>
let x = 5;
let y = 2;
// Addition
let sum = x + y;
[Link]("add").innerHTML = "5 + 2 = " + sum;
// Subtraction
let diff = x - y;
[Link]("subtract").innerHTML = "5 - 2 = " + diff;
// Multiplication
let product = x * y;
[Link]("multiply").innerHTML = "5 * 2 = " + product;
// Division
let divide = x / y;
[Link]("divide").innerHTML = "5 / 2 = " + divide;
// Modulo Division
let modulus = x % y;
[Link]("modulous").innerHTML = "5 % 2 = " + modulus;
</script>
</body>
</html>
OUTPUT:
[Link] functions in type script
<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript Functions</title>
</head>
<body>
<script>
// 1. User-defined function
function greet() {
[Link]("Hello from a user-defined function!");
}
greet();
// 2. Built-in function
alert("This is a built-in alert function!");
// 3. Math function
let result = [Link](16);
[Link]("Square root of 16 is:", result);
// 4. String function
let message = "javascript";
[Link]("Uppercase:", [Link]());
// 5. Array function
let numbers = [1, 2, 3];
[Link](4);
[Link]("Array after push:", numbers);
// 6. Arrow function
const add = (a, b) => a + b;
[Link]("Addition using arrow function:", add(5, 3));
</script>
<p><h2><u>Steps To see the Output</u></h2>
<h2>[Link] F12 or Right-click → Inspect<br>
[Link] the Console tab in the Developer Tools panel</h></p>
</body>
</html>
OUTPUT: