diff --git a/angular/angular1.md b/angular/angular1.md
new file mode 100644
index 0000000..69fb43c
--- /dev/null
+++ b/angular/angular1.md
@@ -0,0 +1,212 @@
+### :camel: Angular examples
+---
+
+#### Task1: Create a component to display Hello World
+
+```
+
+ng generate component helloworld
+
+app-routing.module.ts
+
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HelloworldComponent } from './helloworld/helloworld.component';
+
+const routes: Routes = [
+  { path: 'hello', component: HelloworldComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+app.component.html
+<router-outlet></router-outlet>
+
+
+
+```
+
+#### Task2: Create angular component calculator
+
+![Screenshot](cal.png)
+
+```
+app.module.ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { CalcComponent } from './calc/calc.component'
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    CalcComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+app.component.ts 
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}
+
+app.component.html
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <calc></calc>
+</div>
+
+calc.component.html
+<div class="container">
+	<div class="header">
+		<h2>
+			Calculator component
+		</h2>	
+	</div>
+
+	<div class="grid">
+		<div class="row">
+			<div class="col-6">
+				<div class="operation">
+					<div class="row">
+						<div class="col-12">
+							<input [(ngModel)]="number1" type="number" name="" placeholder="number">
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-12">
+							<input [(ngModel)]="number2" type="number" name="" placeholder="number">
+						</div>
+					</div>
+					<div>
+						<div class="col-12">
+							<button (click)="add()" class="button">
+								Add 
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-6">
+				<div class="result">
+					<span>
+						Result : {{result}}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+calc.component.ts 
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'calc',
+  templateUrl: 'calc.component.html',
+  styleUrls: ['calc.component.css']
+})
+export class CalcComponent {
+  public number1 : number;
+  public number2 : number;
+  public result : number;
+
+  public add(){
+  	this.result = this.number1 + this.number2
+  }
+}
+```
+
+#### Task3: Create a component to display the heros list as shown below
+
+![Screenshot](heros-list.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```
+
+
+#### Task4: Create a component to handle the messages
+
+![Screenshot](messages.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```
+
+#### Task5: Create a component to handle the hero details
+
+![Screenshot](hero-detail.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```
+
+#### Task5: Create a component to handle the delete
+
+![Screenshot](hero-delete.png)
+
+```
+
+useful commands
+
+ng new angular-hero-app
+
+ng g c heroes
+ng g c hero-detail
+ng g c messages
+
+npm i ng2-search-filter --save
+
+```
diff --git a/angular/cal.png b/angular/cal.png
new file mode 100644
index 0000000..4a0735b
Binary files /dev/null and b/angular/cal.png differ
diff --git a/angular/calc.component.css b/angular/calc.component.css
new file mode 100644
index 0000000..20ca28c
--- /dev/null
+++ b/angular/calc.component.css
@@ -0,0 +1,101 @@
+.grid{
+	width: 100%
+}
+
+.row{
+	width: 100%;
+	display: flex;
+}
+
+
+.col-1 {
+    width: 8.33%;
+}
+
+.col-2 {
+    width: 16.66%;
+}
+
+.col-3 {
+    width: 25%;
+}
+
+.col-4 {
+    width: 33.33%;
+}
+
+.col-5 {
+    width: 41.66%;
+}
+
+.col-6 {
+    width: 50%;
+}
+
+.col-7 {
+    width: 58.33%;
+}
+
+.col-8 {
+    width: 66.66%;
+}
+
+.col-9 {
+    width: 75%;
+}
+
+.col-10 {
+    width: 83.33%;
+}
+
+.col-11 {
+    width: 91.66%;
+}
+
+.col-12 {
+    width: 100%;
+}
+
+.header{
+	width: 100%;
+	background-color: #003A60;
+	height: 100px;
+}
+
+.header h2{
+	line-height: 100px;
+	color: #fff;
+}
+
+.button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+input{
+	border: none;
+	border-bottom: 1px solid grey;
+	width: 80%;
+	margin: 0% 10%;
+	padding: 5%;
+}
+
+.result{
+	background-color: #ddffff;
+	width: 80%;
+	margin: 20px 10px 10px 10px;
+	height: 100px;
+	border-left: 3px solid #2196F3;
+}
+
+.result span{
+	line-height: 100px;
+}
\ No newline at end of file
diff --git a/angular/hero-delete.png b/angular/hero-delete.png
new file mode 100644
index 0000000..cb55f40
Binary files /dev/null and b/angular/hero-delete.png differ
diff --git a/angular/hero-detail.png b/angular/hero-detail.png
new file mode 100644
index 0000000..d198634
Binary files /dev/null and b/angular/hero-detail.png differ
diff --git a/angular/heros-list.png b/angular/heros-list.png
new file mode 100644
index 0000000..225816a
Binary files /dev/null and b/angular/heros-list.png differ
diff --git a/angular/messages.png b/angular/messages.png
new file mode 100644
index 0000000..9a8bf05
Binary files /dev/null and b/angular/messages.png differ
diff --git a/html/html1-form6.png b/html/html1-form6.png
new file mode 100644
index 0000000..6d1668d
Binary files /dev/null and b/html/html1-form6.png differ
diff --git a/html/html1.md b/html/html1.md
index e74d160..687df87 100644
--- a/html/html1.md
+++ b/html/html1.md
@@ -203,4 +203,154 @@
 </html>
 
 
+```
+
+#### Task6: Create the below form using HTML
+
+![Screenshot](html1-form6.png)
+
+```
+<html>
+    <head>
+        <script>
+            function GEEKFORGEEKS() {
+                var name =
+                    document.forms.RegForm.Name.value;
+                var email =
+                    document.forms.RegForm.EMail.value;
+                var phone =
+                    document.forms.RegForm.Telephone.value;
+                var what =
+                    document.forms.RegForm.Subject.value;
+                var password =
+                    document.forms.RegForm.Password.value;
+                var address =
+                    document.forms.RegForm.Address.value;
+                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 == "" || regName.test(name)) {
+                    window.alert("Please enter your name properly.");
+                    name.focus();
+                    return false;
+                }
+ 
+                if (address == "") {
+                    window.alert("Please enter your address.");
+                    address.focus();
+                    return false;
+                }
+                 
+                if (email == "" || !regEmail.test(email)) {
+                    window.alert("Please enter a valid e-mail address.");
+                    email.focus();
+                    return false;
+                }
+                  
+                if (password == "") {
+                    alert("Please enter your password");
+                    password.focus();
+                    return false;
+                }
+ 
+                if(password.length <6){
+                    alert("Password should be atleast 6 character long");
+                    password.focus();
+                    return false;
+ 
+                }
+                if (phone == "" || !regPhone.test(phone)) {
+                    alert("Please enter valid phone number.");
+                    phone.focus();
+                    return false;
+                }
+ 
+                if (what.selectedIndex == -1) {
+                    alert("Please enter your course.");
+                    what.focus();
+                    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 GEEKFORGEEKS()" 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>BTECH</option>
+                    <option>BBA</option>
+                    <option>BCA</option>
+                    <option>B.COM</option>
+                    <option>GEEKFORGEEKS</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>
+
 ```
\ No newline at end of file
diff --git a/html/regform.html b/html/regform.html
new file mode 100644
index 0000000..cf29fae
--- /dev/null
+++ b/html/regform.html
@@ -0,0 +1,142 @@
+<html>
+    <head>
+        <script>
+            function GEEKFORGEEKS() {
+                var name =
+                    document.forms.RegForm.Name.value;
+                var email =
+                    document.forms.RegForm.EMail.value;
+                var phone =
+                    document.forms.RegForm.Telephone.value;
+                var what =
+                    document.forms.RegForm.Subject.value;
+                var password =
+                    document.forms.RegForm.Password.value;
+                var address =
+                    document.forms.RegForm.Address.value;
+                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 == "" || regName.test(name)) {
+                    window.alert("Please enter your name properly.");
+                    name.focus();
+                    return false;
+                }
+ 
+                if (address == "") {
+                    window.alert("Please enter your address.");
+                    address.focus();
+                    return false;
+                }
+                 
+                if (email == "" || !regEmail.test(email)) {
+                    window.alert("Please enter a valid e-mail address.");
+                    email.focus();
+                    return false;
+                }
+                  
+                if (password == "") {
+                    alert("Please enter your password");
+                    password.focus();
+                    return false;
+                }
+ 
+                if(password.length <6){
+                    alert("Password should be atleast 6 character long");
+                    password.focus();
+                    return false;
+ 
+                }
+                if (phone == "" || !regPhone.test(phone)) {
+                    alert("Please enter valid phone number.");
+                    phone.focus();
+                    return false;
+                }
+ 
+                if (what.selectedIndex == -1) {
+                    alert("Please enter your course.");
+                    what.focus();
+                    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 GEEKFORGEEKS()" 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>BTECH</option>
+                    <option>BBA</option>
+                    <option>BCA</option>
+                    <option>B.COM</option>
+                    <option>GEEKFORGEEKS</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>
\ No newline at end of file