HTML Tutorials for Beginners

HTML Tutorial [2023]: A Comprehensive Guide for Beginners

by with No Comment HTML

Introduction to HTML

HTML Tutorials for Beginners

In the vast landscape of web development, HTML (Hypertext Markup Language) stands as the foundational building block. It’s the backbone upon which every web page is constructed. This in-depth guide is tailored exclusively for beginners who aspire to master the art of HTML. We will delve deep into the world of HTML, exploring the essential tools, terminologies, coding practices, and the critical concept of semantics.

Chapter 1: Unveiling the HTML Universe

1.1 What is HTML?

HTML, in its essence, is a markup language, not a programming language. It acts as the structural framework for web pages, defining the content’s layout and hierarchy.

1.2 Anatomy of an HTML Document

  • <!DOCTYPE html>: A declaration that sets the document’s type.
  • <html>: The root element enclosing all content.
  • <head>: Metadata and document-related information.
  • <title>: The title displayed in the browser tab.
  • <meta>: Information about character encoding, keywords, and descriptions.
  • <link>: Links external stylesheets for styling.
  • <script>: Links external JavaScript files or contains inline scripts.
  • <body>: The container for the visible content.

Chapter 2: Structuring Content

2.1 Headings

HTML offers six levels of headings from <h1> (most important) to <h6> (least important). Mastering heading tags is crucial for organising content effectively.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

2.2 Paragraphs and Text Formatting

Learn to use the <p> element for paragraphs and text formatting tags like <em> (italic) and <strong> (bold) to convey emphasis and importance.

<p>This is an <em>italic</em> and <strong>bold</strong> text example.</p>

2.3 Lists

Master the art of creating unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>) to structure content effectively.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

The <a> tag allows you to create hyperlinks. Learn how to link to other web pages or resources within your site.

<a href="https://www.example.com">Visit Example.com</a>

2.5 Images

Incorporate images using the <img> element, and understand the importance of the alt attribute for accessibility and SEO.

<img src="image.jpg" alt="A breathtaking landscape">

Chapter 3: The Essence of Semantics

3.1 Semantic HTML

Delve deep into semantic HTML elements that convey the meaning of the content they enclose. Gain insights into how semantic elements impact accessibility and SEO.

3.2 Semantic Elements

Explore HTML5’s rich set of semantic elements, including <header>, <nav>, <article>, <section>, <aside>, <footer>, and more, and understand their roles in document structure.

<header>
  <h1>Website Header</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

3.3 Importance of Semantic Tags

Learn why using semantic tags is not just a best practice but a necessity in modern web development. Discover how they assist screen readers, search engines, and future-proof your code.

Chapter 4: Beyond the Basics

4.1 Forms

Unlock the potential of HTML forms, exploring input elements, buttons, text areas, checkboxes, and radio buttons. Dive into the intricacies of form attributes and methods.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit" value="Submit">
</form>

4.2 Tables

Master the creation of tables using <table>, <tr>, <td>, and <th> tags. Understand the structure required for organizing tabular data.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

4.3 Embedding Media

Learn how to embed media elements like audio and video using <audio> and <video> tags. Understand the attributes for specifying sources and controls.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Chapter 5: Advanced Techniques

5.1 HTML Entities

Explore the world of HTML entities, special characters, and symbols that can be represented using entity codes.

&copy; for ©
&trade; for ™

5.2 HTML Forms: Advanced Topics

Delve into advanced form concepts, such as form validation, custom styling, and AJAX form submissions, to create robust and user-friendly web forms.

5.3 Web Accessibility

Gain a deep understanding of web accessibility principles and how HTML can be used to create inclusive web experiences for all users.

Chapter 6: Best Practices and Optimization

6.1 Code Validation

Learn the importance of validating your HTML code using tools like the W3C Markup Validation Service.

6.2 SEO-Friendly HTML

Discover techniques to optimize your HTML for search engines by focusing on meta tags, semantic markup, and proper document structure.

6.3 Version Control

Understand the benefits of version control systems like Git for tracking changes, collaborating with others, and managing your HTML projects efficiently.

Conclusion

HTML is a language that forms the backbone of the World Wide Web. This in-depth guide has equipped you with the knowledge and skills needed to master HTML. As you embark on your journey into web development, remember that practice, exploration, and continuous learning are the keys to becoming proficient in the art of HTML. With this foundation, you’re prepared to create web content that’s both functional and meaningful on the ever-evolving digital landscape.

You can learn more from W3Schools for in-depth detail in each topic. Read more on how to get started with HTML.

Want to become a Frontend Developer? You’re just a click away!

Become Frontend Developer Now!

Getting Started with HTML – Easy read in 2023

by with No Comment HTML

In this tutorial, we will discuss getting started with HTML. We will see the basics of HTML, HTML Tags, Head and Body Sections.

What is HTML? 

The HyperText Markup Language or HTML is the standard markup language for documents viewed in Browsers. It very well may be helped by advancements, for example, Cascading Style Sheets and scripting languages like JavaScript. HTML gives a basic structure to the website, whereas CSS or Cascading Style Sheets beautifies the page, and JavaScript provides the functionality to the page.

Let’s jump in learning the HTML

Please note that you will need an IDE or Integrated Development Environment for coding in HTML. There are several IDEs available on the web, such as Visual Studio Code, Sublime Text, Atom. We have prepared the article for installing VS Code and necessary extensions for coding in HTML, CSS.

With the consideration that you have installed your preferred IDE, we begin the HTML tutorials. 

Create a folder and name it according to your preference

Open Visual Studio Code, click on Explorer and Open Folder, click on the recently created folder. Shortcut to open Explorer Window in Control + B. 

Right-click and create a file called index.html. We name the file index because it is the first file that will load in the domain.

We must say the version of HTML to the browser for that, and we have to type the following code. <!DOCTYPE html> . HTML is not case sensitive, so it is not wrong to use upper or lowercase. In convention, we use it in the case mentioned above. 

Under the HTML version we use the tag HTML. Generally, most of the HTML elements will have opening tag and closing tag <html> </html>

Inside the HTML tag, we will have two elements, Head and Body tags. 

In the head tag, we give information about the document to the browser, such as document name, meta information and more. For example, we will use the tag <title> to define the title of the HTML document.

Inside the Body tag, we have information such as images, paragraphs, and other elements which the HTML document will have.

For example, if we create a Tweet structure with a profile image, Twitter handles, and the message, we will first use an img tag to call an image to the document and give paragraph tags. For that, we will need to copy-paste the image file in the folder where we have index.html. In the directory, we can create a folder called images and paste the image there. Img tag has the following syntax, and we can call the absolute path of the image, i.e., direct URL of the image, if the available or relative path to the current index.html file. Next, we will give a paragraph tag for the Twitter handle and message. 

<title>HTML Document</title>
<img src="images/ampersand-tutorials.png">
<p>@ampersandtutorials</p>
<p>Here's our tutorial on HTML!</p>

Following is the output for our corresponding HTML code. But there is no proper layout or structure as we see on Twitter. In the following tutorial, we will see how to beautify the HTML document using CSS. 

getting started with html
getting started with HTML

Now that you have read an article about Getting Started with HTML, You can also check out our courses from Ampersand Academy.

Here is why we should use Visual Studio Code for Web Development – Easy steps Install VS Code in 2021

by with No Comment Web Development

Learn why Visual Studio Code is one of the powerful IDEs used by web developers and follow these easy steps to Install VS Code and extensions

What is VS Code? 

Visual Studio IDE is a full-highlighted development tool for several operating systems like the web and the cloud. It permits clients to easily explore the interface so they can compose their code quickly and precisely. 

With Visual Studio IDE, programmers likewise approach a large group of troubleshooting tools. These help them in profiling bugs and diagnosing them efficiently. Like this, they can deploy their applications confidently, realizing that they have discarded whatever might cause execution errors. 

What is more, Visual Studio IDE fills in as a testing stage too. VS Code allows programmers to recreate how their applications will run in their real-time environment and guarantee they do flawlessly whenever they deploy.

Benefits of Visual Studio Code IDE: 

  1. Precise Coding: Powered by built-in Intellisense AI, VS Code provides hints and descriptions to the developers regarding APIs and helps them autocomplete.
  2. Easy Debugging: Augmented with in-built debugging tools, VS Code empowers developers to debug quickly with support included for languages. It enables programmers to debug locally, remotely and cloud even in the middle of production.
  3. Robust Testing: Powered by powerful testing tools, VS Code enables programmers to test their apps. They can do the testing with little effort, and they can test for multiple languages and frameworks. 
  4. Team Collaboration: Regardless of the developers operating system, VS Code empowers the Developer team to collaborate efficiently and achieve perfection in their application development.
  5. Multiple Extension: Visual Studio Code has several custom-built extensions which programmers can use in their projects

Steps to Install Visual Studio Code:

  1. Go to code.visualstudio.com 
  2. Click and download the stable version for the corresponding operating system such as Windows, Linux, Mac. 
  3. Click on next and complete the installation process.
  4. On the left-hand side of the Visual Studio Code window, there Extensions Tab. Click on the search and search for the extension Prettier – Code Formatter and Live Server by Ritwick Dey and install both the extensions.
  5. Prettier helps make the code beautiful, and the Live server helps launch the website inside the development web server.
Install VS Code
Install VS Code
Install VS Code

Now that you have learnt how to install VS Code. Also, read about How the web work.

Easy read on how to view HTTP Requests and Responses using Google Chrome Dev Tools in 2021

by with No Comment Web Development

In the previous tutorial, we have discussed how the web works. In this tutorial, we will learn how to view HTTP Requests and Responses using Google Chrome Dev Tools.

To understand how to view HTTP Requests and Responses, we will first open Google Chrome and use Google Chrome Dev Tools to learn.

Step 1: Open Google Chrome

Google Chrome

Step 2: Open the website Google.com 

Google Website

Step 3: If you’re using MAC OS, you can navigate to the View, Developer and Developer Tools. In case if you’re using Windows, you can use the shortcut Control + Shift + J or press the F12 key.

Chrome Dev Tools

Step 4: It will open a Chrome Dev Tools Tab at the bottom. It will contain many tabs such as Elements, Console, Source, Network, Performance, Memory, Application. To study HTTP Requests and Responses, we can navigate to the Network Tab. 

Please note, by default Chrome Dev Tools will dock at the bottom; however, by clicking the vertical ellipsis, we can anchor it to Left, Right, Bottom, or open in a new window. Usually, the front-end developers prefer docking the Chrome Dev Tools to the Left. 

Docking Dev Tools to Left

Step 5: Once inside the Chrome Dev Tools, Press Control + R to reload the Window. We reload the Window to send requests from the browser to the server. This action will list the HTTP Requests. At the bottom, we can see the total number of requests, data transferred and more. 

HTTP Requests

Step 6: We can observe the Method of the Request, Status of the Request, Type of the Request. 

Step 7: Once we click on a particular Request, we can see more details such as Headers, Preview and more. Inside Headers, there are several other headers types, and inside Preview, we will see the Live Preview of the HTML document. 

how to view HTTP Requests and Responses
how to view HTTP Requests and Responses

Now that you have learnt about how to view HTTP Requests and Responses. You can check out our courses at Ampersand Academy

Hypothesis Testing in Statistics

Easy read on Hypothesis Testing in Statistics in under 3 mins

by with No Comment Statistics

Learn about hypothesis testing in Statistics, confusion matrix, types of hypothesis testing errors, Type 1 and Type 2 Errors.

What is hypothesis testing in statistics? 

Statistics is full of data, and to find out the critical interpretation from the data, we use Hypothesis Testing. 

Definition: 

Hypothesis Testing helps evaluate two or more mutually exclusive statements on a population using a sample of data from the population. 

Examples: 

In the court of law, in a criminal case, there are two statements. One is the defendant guilty, and the other exclusive to that is that the defendant is innocent. Hypothesis testing helps in arriving at the correct result with the data or evidence from the case. 

Hypothesis Testing in Statistics
Hypothesis Testing in Statistics

Steps in Hypothesis Testing

Step 1: 

Make an initial assumption that a particular statement is correct. The initial assumption is Null Hypothesis (H0). Contradictory to the Null Hypothesis is called Alternate Hypothesis (H1). 

Step 2: 

Start collecting information or insights from the data. In the example above, to prove a defendant is innocent or guilty, we have to collect DNA, Fingerprint, and alibi information. 

Step 3: 

After gathering sufficient evidence to infer. Based on the evidence or data insights, we will either accept the Null Hypothesis or Alternate Hypothesis. 

In the real-time scenario where the population is enormous, we will be analysing the data, i.e., sample data arrived from the population and not entirely on the population. Based on the result of the Sample Data, we will conclude the entire population itself. 

In the sample data, if we have enough insights that the H0 or the Null Hypothesis is correct, we will directly approve H0 and reject the H1 or the Alternate Hypothesis. 

Confusion Matrix in Hypothesis Testing

A confusion matrix, in predictive analytics is an in pairs table that lets us know the pace of false positives, false negatives, true positives and true negatives for a test or indicator. We can make a confusion matrix if we know both the predicted and actual values for a sample set.

Confusion Matrix in Hypothesis Testing
Confusion Matrix in Hypothesis Testing

Inference 1: If we have enough evidence and insight to prove the Null Hypothesis is correct, it is OK. 1st Row 1st Column

Inference 2: If we have enough evidence and insight to reject the Alternate Hypothesis, it is OK. 2nd row 2nd Column

Inference 3: If we know that H0 is correct, but we do not have enough evidence to “Do not reject H0”, this scenario is incorrect and called a Type I Error. 

Inference 4: If we know that H0 is correct, but we do not have enough evidence to “Reject H1”, and we do not have enough evidence to prove H0, this scenario is incorrect and called a Type II Error. 

Type I and Type II errors can be catastrophic, and we have to take extra caution to arrive at the correct results. 

Now that we have learnt about Hypothesis Testing in Statistics, we can read about Sampling in Statistics. If you are interested in learning Data Analysis, we can check out our R Programming course by Ampersand Academy. 

Sampling in Statistics

Easy read on Sampling in Statistics in just 5 mins

by with No Comment Statistics

Learn about Sampling in Statistics — the difference between Sample and Population, Different types of Sampling in Statistics in detail.

Sampling is a method utilized in statistical examination in which we take a predetermined number of observations from a more significant population.

To understand sampling, we must first discuss the difference between Sample and Population. 

Sample:

  • It’s difficult for the Analyst or the Researcher to collect possible detail from the entire group. Instead, they choose a small group from the whole group. 
  • Samples are the subset of the Population that participates in research and represents the Population.
  • Samples come from the Population.

Population:

  • It is a collection from which a sample comes. 
  • It is an exact quantity involved in the entire study. 

Example of Sample and Population

To develop a vaccine for Covid, several companies have come with the research and vaccines they test to read efficacy. The vaccine is for the entire human race, and the Population for this study is all of us. Companies can’t make a study on the whole human race. Hence to make the vaccination quicker, they conduct clinical trials based on a closed group called Sample. That way, the research is quick, efficient and cost-effective. 

What is Sampling in Statistics?

Sampling is a method that allows researchers or analysts to infer knowledge about the Population based on Sample results without needing to investigate every individual. 

Sampling in Statistics
Sampling in Statistics

Advantages of Sampling

  • Reduces the number of individuals in studies
  • Reduces cost
  • Reduces workload
  • High-quality information to arrive at a better conclusion from the results

Categories of Sampling in Statistics

  • Probability Sampling 
  • Non-probability Sampling

Probability Sampling

  • In this sampling, every member of the Population has an equal chance of participating in the study.
  • For example, when we start flipping a coin at every instance, there is an equal chance of getting a “head” or a “tail” irrespective of how many times we flip the coin.

Types of Probability Sampling in Statistics

Types Sampling in Statistics
Types of Sampling in Statistics

Simple Random Sampling: 

  • Every member of the study has an equal chance of selection.
  • Selection depends on chance and randomness.
  • Simple Random Sampling is also called Simple Random Sampling.

Example: 

Consider a meeting that has people from different age groups, ethnicity, sex, colour and creed. If we have to create a sample using Simple Random Sampling, we choose individuals without any bias and randomly. 

Systematic Sampling

  • In Systematic Sampling, we choose the first member randomly and subsequent members systematically

Example:

Consider a class with roll numbers 1 to 40, and if we have to create a Sample by Systematic Sampling method, we choose the first student randomly, say 10. Subsequently, we have to select members like every 4th student from Roll Number 10.

Cluster Sampling

  • Researcher/analyst divide Population into a group called Clusters 
  • Groups can be externally homogenous and internally heterogenous 
  • The analyst creates random clusters
  • Select a member from a single cluster based on Simple Random Clustering

Stratified Sampling

  • Even in stratified sampling, we create a strata group based on specific characteristics and the select member from each stratum.

Example: 

Consider a meeting having people of different ages, sex, ethnicity. In Stratified Sampling, we group people based on age, sex, race. Then we select members from each stratum.

Non-probability Sampling

  • Sampling-based on non-random criteria
  • Not every individual in the Population has a chance of being included in the study.
  • This method is easier and cheaper to implement, but it cannot provide valid statistical inferences. 

Types of Non-probability Sampling in Statistics

Convenience Sampling:

  • Based on convenience 
  • Sampling happens to be most accessible to analysts or researchers.
  • It’s an easy way of sampling and cost-effective but no way to prove if it’s an accurate representation of the entire Population.
  • Convenience Sampling is also called Accidental Sampling.

Snowball Sampling:

  • The first Sample is selected based on random selection.
  • The first Sample then selects the subsequent selections. 
  • Snowball Sampling is also called Network Sampling.

Quota Sampling

  • Used by Market Researchers.
  • Samples are Tailor Selected.
  • Selection based on the proportion of the trait of the Population

Purposive / Judgemental Sampling in Statistics

  • Selection based on Judgement
  • Selection based on Analyst or Researchers
  • Used by Media or Public Surveys

Now that you have read about Sampling in Statistics, you can check our post on Distribution in Statistics. If you wish to learn Data Analytics, check the R Programming course by Ampersand Academy.

Easy Bug fix for input field not visible in angular material dark themes in 2 Steps

by with No Comment Angular

Learn how to Bug fix for input field not visible in angular material dark themes

Angular Material is one of the most favoured User Interfaces for Angular Web Application development. Angular Material is known for its easy binding with Angular Code and web applications built using Angular alongside Angular Material performs better when compared to other UI frameworks.

Although Angular Material has good performance, it is still known for its bugs and glitches when it comes to the user interface. Recently, the current version of Angular Material has this glitch in the coding especially when users incorporate the darker theme especially, the pink-bluegrey.css theme. The main glitch which is noted is that, when a mat-input is incorporated, the field border and the text cursor is not visible. When we look into it, we find that it’s not a bug but a glitch that has to be fixed manually. This can be fixed by simply adding a dark background colour to the division or container which holds the mat input field.

In order to insert the input field, import MatImportModule in app.module.ts first. Later from the documentation site of Angular Material copy and paste the example mat form field. Be cautious to copy-paste the HTML, CSS elements in the respective component. 

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>
<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>
Light Theme Output

By default the theme is indigo-pink and without any glitch, the browser will render the output and form fields will be visible. Now, when you change the theme to pink-bluegrey.css or purple-green.css the form input will not be visible. The following screenshot shows how it is affected. 
In order to fix this glitch, we can simply add the background colour to the form tag which contains the form input. The following coding and screenshot will show the rectified output. In the example-form CSS, add the last three classes to get the desired visible form field output.

Dark Theme Output
.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%; 
    background-color: black;
    color: white;
    padding: 15px
  }
Bug fix for input field not visible in angular material dark themes
Bug fix for input field not visible in angular material dark themes
Get full Source Code of MatInput Fix for Dark Theme from Github
https://github.com/rdineshkumar88/angular-material/tree/master/MatInput-Dark-Theme-Glitch-Fix

Now that you have learnt Bug fix for input field not visible in angular material dark themes. You can also check our tutorial on Scrollable Angule Table. Check our Angular with Angular Material Training from Ampersand Academy

FOR loop to print array

Easy 2 mins tutorial on FOR loop to print array in TypeScript

by with No Comment TypeScript

Learn how to use for loop to print array in TypeScript

In this tutorial, we will learn to use for loop in TypeScript to print array items and all the elements in the array. If you are not aware of creating an array or publishing it, kindly follow the links given below.

Basic of TypeScript: First program in TypeScript

Array in TypeScript: Creating and printing array in TypeScript

To print an array using the for loop, first, you should understand the syntax of FOR loop in TypeScript. Following this, we will see how to use the FOR loop to print an entire array or print a particular element in the array. 

FOR loop to print array
Learn how to use for loop to print array in TypeScript

FOR loop Syntax

for(condition){
	action statement
}

To demonstrate how to create a FOR loop to print an array, first, we need to create an array. Here we are creating an array of students. 

let student_List = [
                        {name:'John', id:12345, class:'Bio'},
                        {name:'Peter', id:12346, class:'Bio'},
                        {name:'Adam', id:12347, class:'IT'}
                        ]

The above statement creates the student list with NAME, ID and CLASS paraments. To print it normally, we can use the console statement. 

console.log(student_List[1])

The above state will print the first student details, along with all the paraments. Now we can see, how to print the array with FOR loop for the same array student_List

for(let x of student_List){
    console.log(x)
}

The above statement will produce a result with all the records and all the details as follows:
{name:’John’, id:12345, class:’Bio’},
{name:’Peter’, id:12346, class:’Bio’},
{name:’Adam’, id:12347, class:’IT’}

To print a particular parameter, i.e., NAME parameter from the above array, use the following code:

for(let x of student_List){
    console.log(x.name)
}

The above statement will produce a result with all the records but with only the NAME parameter. The result is as follows:
John
Peter 
Adam

Now that you have learnt about FOR loop to print array. You can also check our tutorial on Interfaces In TypeScript. Check our Angular with Angular Material Training from Ampersand Academy

Creating and printing array in TypeScript

Easy 2 mins Tutorials in Creating and printing array in TypeScript

by with No Comment TypeScript

Learn Creating and printing array in TypeScript in these quick 2 mins tutorials

In this tutorial, we will learn to create an array using TypeScript. After creating an array, we will be printing the array. If you’re not aware of how to create a variable in TypeScript, you can follow the link mentioned below. It is mandatory to learn the basic initially before learning to create an array. 

First program in TypeScript

Once you have learnt to create essential variables and print them. You’ll be learning how to create an array. Creating an array is similar to creating a variable. The following coding will depict how to create an array variable and pass values to them. 

Open our demo.ts file and clear any existing code which we tried in the last tutorial. Now to create an array, you can use the following code. We are creating an array of employees data.

Creating and printing array in TypeScript
Creating and printing array in TypeScript

let enq_List = [
				{name:"John", id:123, dept:"IT"},
				{name:"Victor", id:124, dept:"Finance"},
				{name:"Doe", id:125, dept:"HR"}
			]

To print the array, we need to call the array name inside the console log. 

console.log(enq_List)

After the console coding, you can follow the same step and convert the file to js and then run the file. 

tsc demo.ts
node demo.js

The output is as follows.

{name:"John", id:123, dept:"IT"}
{name:"Victor", id:124, dept:"Finance"}
{name:"Doe", id:125, dept:"HR"}

Now that you have learnt Creating and printing array in TypeScript. In the next tutorials, we will learn how to access a particular member in an array. Angular with Angular Material Training from Ampersand Academy

First Program in TypeScript

Easy tutorial on creating First program in TypeScript in 2021

by with No Comment TypeScript

Learn how to create the first program in typescript and print it in the command prompt

In this tutorial, we will learn how to create a variable using TypeScript and how to print a variable in TypeScript. We have written this tutorial with the consideration that you have already installed TypeScript, if not, kindly follow the link to install TypeScript in your system.

Getting started with TypeScript

First Program in TypeScript
First Program in TypeScript

Once the TypeScript is installed, you can check the TypeScript version from the command prompt. The coding to check the version is present in the above link.

Now, let’s see how to create a variable and print the variable in TypeScript. By default, we cannot see the output directly from the TypeScript; we will first run the TypeScript file using the command.

tsc filename.ts

The above command will generate the corresponding js file. Once created, we will run the js using the following code.

node filename.js

The above code will create the desired result. We can create a file with extension .ts from any of our code editors such as Brackets, Sublime, Notepad or Visual Code. After creating the ts file, now we can check how to create a variable and print the variable. To create a variable, we will type the following code. 

let name1="John Doe"

The above syntax creates a variable “name1”, and we have assigned the value “John Doe” to it. After creating a variable, we need to print it. To print the variable, we will use the following code. 

console.log(name1)

Now we will go to the command prompt to execute the TypeScript. Open the Command Prompt and navigate to the corresponding directory where you have stored the ts file. Then type 

tsc demo.ts

Please note that demo.ts is the filename we have created for this program. The above command will generate a demo.js file automatically. We can execute only the demo.js file to view the output. You can see the difference in the coding.

var name1 = "John Doe";
console.log(name1);

Now we can run the js file by typing.

node demo.js

The above code will produce the output in the command prompt itself as follows. 

John Doe

Now that you have created the First program in TypeScript, Try practising the first program in TypeScript. In the next tutorial, we will teach how to create an array in TypeScript and print it. Check our Angular with Angular Material Training from Ampersand Academy