From 85c4bc8d1cdee868ae2757a371bc457194314902 Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 11:31:32 -0400
Subject: [PATCH 01/12] First commit

---
 index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 4dc0c72..d190726 100644
--- a/index.html
+++ b/index.html
@@ -34,12 +34,13 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
 
-
+  <p>Let start it today!!</p>
   The quickest of brown foxes.
 
 
 
 
+
   <!-- ====================================================== -->
   <!-- ====================================================== -->
   <footer>

From 43682c539a34b6c0041da28689d4635a5866e56f Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 11:43:10 -0400
Subject: [PATCH 02/12] First commit

---
 templates/syntax_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/syntax_template.html b/templates/syntax_template.html
index 6862e5a..660e615 100644
--- a/templates/syntax_template.html
+++ b/templates/syntax_template.html
@@ -1 +1 @@
-HTML uses tags to identify page content. This text, for example, is a paragraph.
\ No newline at end of file
+<p>HTML uses tags to identify page content. This text, for example, is a paragraph.</p>
\ No newline at end of file

From eda953fa12da39e9554823b531b39438f2dca67f Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 11:49:55 -0400
Subject: [PATCH 03/12] finished edits on 'syntax_template.html'

---
 index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/index.html b/index.html
index d190726..4dc0c72 100644
--- a/index.html
+++ b/index.html
@@ -34,9 +34,8 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
 
-  <p>Let start it today!!</p>
-  The quickest of brown foxes.
 
+  The quickest of brown foxes.
 
 
 

From c00c1643a0fb9428432cb83a1b7b1c959b1e5d1f Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 11:52:49 -0400
Subject: [PATCH 04/12] finished edits on 'body_template.html'

---
 templates/body_template.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/body_template.html b/templates/body_template.html
index 837c4bb..74d6a78 100644
--- a/templates/body_template.html
+++ b/templates/body_template.html
@@ -6,7 +6,7 @@
     <title>Basic HTML document</title>
     </head>
     <body>
-        Page content
-        The main page content appears inside the body tag. HTML contains several elements that allow you to properly structure and format your content, which we'll cover later.
+        <h1>Page content</h1>
+        <p>The main page content appears inside the body tag. HTML contains several elements that allow you to properly structure and format your content, which we'll cover later.</p> 
     </body>
 </html>
\ No newline at end of file

From 5c1c215ba46d605ad59abb2696d190ed1dad0d28 Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 11:57:14 -0400
Subject: [PATCH 05/12] finished edits on 'syntax_template.html'

---
 templates/models_template.html | 2 +-
 templates/syntax_template.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/models_template.html b/templates/models_template.html
index 2f6ec67..11455dc 100644
--- a/templates/models_template.html
+++ b/templates/models_template.html
@@ -6,7 +6,7 @@
     <title>Content models</title>
     </head>
         <body>
-                Content models
+                <h1>Content models</h1>
                 In HTML 4 there were only two main content models, block and inline level elements. Block level elements would stack on top of each other in normal document flow while inline level elements typically appear within the flow of text content.
                 In this example the heading 1 and the paragraphs are block level items, while the bold tags and the link below are examples of inline level elements.
                 In HTML5 new content models have been created to expand the structure and semantic capabilities of HTML. There are seven main models: Flow, Metadata, Embedded, Interactive, Heading, Phrasing, and Sectioning. To learn more about them, visit the interactive graphic contained in the W3C HTML5 specfication.
diff --git a/templates/syntax_template.html b/templates/syntax_template.html
index 660e615..5eb671b 100644
--- a/templates/syntax_template.html
+++ b/templates/syntax_template.html
@@ -1 +1 @@
-<p>HTML uses tags to identify page content. This text, for example, is a paragraph.</p>
\ No newline at end of file
+<p>HTML uses tags to identify page content. <i>This text, for example, is a <b>paragraph</b></i></p>
\ No newline at end of file

From fbb68c9d39c5dbfc1da63d567add2b01874c1be0 Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 11:58:34 -0400
Subject: [PATCH 06/12] finished edits on 'body_template.html'

---
 templates/body_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/body_template.html b/templates/body_template.html
index 74d6a78..10a6db1 100644
--- a/templates/body_template.html
+++ b/templates/body_template.html
@@ -7,6 +7,6 @@
     </head>
     <body>
         <h1>Page content</h1>
-        <p>The main page content appears inside the body tag. HTML contains several elements that allow you to properly structure and format your content, which we'll cover later.</p> 
+        <p>The main page content appears inside the <b>body</b> tag. HTML contains several elements that allow you to properly structure and format your content, which we'll cover later.</p> 
     </body>
 </html>
\ No newline at end of file

From 62967850eb73d3d451032ad0e8406ea68b6824bb Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 12:05:04 -0400
Subject: [PATCH 07/12] finished edits on 'body_template.html'

---
 templates/models_template.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/templates/models_template.html b/templates/models_template.html
index 11455dc..7d2d056 100644
--- a/templates/models_template.html
+++ b/templates/models_template.html
@@ -7,9 +7,10 @@
     </head>
         <body>
                 <h1>Content models</h1>
-                In HTML 4 there were only two main content models, block and inline level elements. Block level elements would stack on top of each other in normal document flow while inline level elements typically appear within the flow of text content.
-                In this example the heading 1 and the paragraphs are block level items, while the bold tags and the link below are examples of inline level elements.
-                In HTML5 new content models have been created to expand the structure and semantic capabilities of HTML. There are seven main models: Flow, Metadata, Embedded, Interactive, Heading, Phrasing, and Sectioning. To learn more about them, visit the interactive graphic contained in the W3C HTML5 specfication.
+                <p>In HTML 4 there were only two main content models, block and inline level elements. <b>Block level</b> elements would stack on top of each other in normal document flow while <b>inline level</b> elements typically appear within the flow of text content.</p>
+                <p>In this example the <b>heading 1</b> and the <b>paragraphs</b> are block level items, while the bold tags and the link below are examples of inline level elements.</p>
+                <p>In HTML5 new content models have been created to expand the structure and semantic capabilities of HTML. There are seven main models: <b>Flow, Metadata, Embedded, Interactive, Heading, Phrasing, and Sectioning</b>. To learn more about them, visit the <a href="#">interactive graphic</a> contained in the W3C HTML5 specfication.</p>
+                
         </body>
 </html>
 

From 9f5b3b9a5ece843896a0c5df33041775e55e135e Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 12:10:59 -0400
Subject: [PATCH 08/12] finished edits on 'headings_template.html'

---
 templates/headings_template.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/templates/headings_template.html b/templates/headings_template.html
index 8b39af1..714eafb 100644
--- a/templates/headings_template.html
+++ b/templates/headings_template.html
@@ -5,16 +5,16 @@
     <title>Formatting page content</title>
     </head>
     <body>
-        HTML Essential Training
-        Formatting page content
-        In this series of exercises, we'll explore how to use HTML elements to format basic page content.
-        Adding headings
-        Headings help define the structure of the page and control the hierarchy of the content. You can use heading values ranging from a top-level heading of h1 all the way down to an h6. While there are several competing theories on the exact strategy to use when choosing headings, what really matters is that you are using them in an intelligent  manner, to accurately reflect the importance of your content. It's also important to be consistent in how you use headings across your site, so deciding on when and how to use headings is an important part of planning your site.
-        Using paragraphs
-        The paragraph tag (&lang;p&rang;) is one of the most basic formatting tags, and one that you'll use often. It indicates a paragraph of text, and should be used for each individual paragraph.
-        Line breaks
-        Occasionally you'll need to perform a "soft return," that is, create a new line without using a new paragraph. To do that in HTML, you use the line break tag (&lang;br&rang;). Line break tags are inline, meaning you can use them within headers and paragraphs, and don't require a closing tag.
-        Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the address appeared on a separate line, but still remained within the same paragraph.
-        lynda.com 6410 Via Real Carpinteria, CA 93103.
+        <h1>HTML Essential Training</h1>
+        <h2>Formatting page content</h2>
+        <p>In this series of exercises, we'll explore how to use HTML elements to format basic page content.</p>
+        <h3>Adding headings</h3>
+        <p>Headings help define the structure of the page and control the hierarchy of the content. You can use heading values ranging from a top-level heading of h1 all the way down to an h6. While there are several competing theories on the exact strategy to use when choosing headings, what really matters is that you are using them in an intelligent  manner, to accurately reflect the importance of your content. It's also important to be consistent in how you use headings across your site, so deciding on when and how to use headings is an important part of planning your site.</p>
+        <h3>Using paragraphs</h3>
+        <p>The paragraph tag (&lang;p&rang;) is one of the most basic formatting tags, and one that you'll use often. It indicates a paragraph of text, and should be used for each individual paragraph.</p>
+        <h3>Line breaks</h3>
+        <p>Occasionally you'll need to perform a "soft return," that is, create a new line without using a new paragraph. To do that in HTML, you use the line break tag (&lang;br&rang;). Line break tags are inline, meaning you can use them within headers and paragraphs, and don't require a closing tag.
+            Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the address appeared on a separate line, but still remained within the same paragraph.
+            lynda.com 6410 Via Real Carpinteria, CA 93103.</p>
     </body>
 </html>

From 0347f058b2f6b4574a79b06da5999bc4442b43cc Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 15:34:14 -0400
Subject: [PATCH 09/12] Adding slide assigments

---
 templates/headings_template.html         | 44 +++++++++++++-------
 week1-exercise-from-slide/exercise1.html | 27 ++++++++++++
 week1-exercise-from-slide/exercise2.html | 53 ++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 16 deletions(-)
 create mode 100644 week1-exercise-from-slide/exercise1.html
 create mode 100644 week1-exercise-from-slide/exercise2.html

diff --git a/templates/headings_template.html b/templates/headings_template.html
index 714eafb..c35151c 100644
--- a/templates/headings_template.html
+++ b/templates/headings_template.html
@@ -1,20 +1,32 @@
 <!doctype html>
 <html lang="en">
-    <head>
+
+<head>
     <meta charset="utf-8">
     <title>Formatting page content</title>
-    </head>
-    <body>
-        <h1>HTML Essential Training</h1>
-        <h2>Formatting page content</h2>
-        <p>In this series of exercises, we'll explore how to use HTML elements to format basic page content.</p>
-        <h3>Adding headings</h3>
-        <p>Headings help define the structure of the page and control the hierarchy of the content. You can use heading values ranging from a top-level heading of h1 all the way down to an h6. While there are several competing theories on the exact strategy to use when choosing headings, what really matters is that you are using them in an intelligent  manner, to accurately reflect the importance of your content. It's also important to be consistent in how you use headings across your site, so deciding on when and how to use headings is an important part of planning your site.</p>
-        <h3>Using paragraphs</h3>
-        <p>The paragraph tag (&lang;p&rang;) is one of the most basic formatting tags, and one that you'll use often. It indicates a paragraph of text, and should be used for each individual paragraph.</p>
-        <h3>Line breaks</h3>
-        <p>Occasionally you'll need to perform a "soft return," that is, create a new line without using a new paragraph. To do that in HTML, you use the line break tag (&lang;br&rang;). Line break tags are inline, meaning you can use them within headers and paragraphs, and don't require a closing tag.
-            Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the address appeared on a separate line, but still remained within the same paragraph.
-            lynda.com 6410 Via Real Carpinteria, CA 93103.</p>
-    </body>
-</html>
+</head>
+
+<body>
+    <h1>HTML Essential Training</h1>
+    <h2>Formatting page content</h2>
+    <p>In this series of exercises, we'll explore how to use HTML elements to format basic page content.</p>
+    <h3>Adding headings</h3>
+    <p>Headings help define the structure of the page and control the hierarchy of the content. You can use heading
+        values ranging from a top-level heading of h1 all the way down to an h6. While there are several competing
+        theories on the exact strategy to use when choosing headings, what really matters is that you are using them in
+        an intelligent manner, to accurately reflect the importance of your content. It's also important to be
+        consistent in how you use headings across your site, so deciding on when and how to use headings is an important
+        part of planning your site.</p>
+    <h3>Using paragraphs</h3>
+    <p>The paragraph tag (&lang;p&rang;) is one of the most basic formatting tags, and one that you'll use often. It
+        indicates a paragraph of text, and should be used for each individual paragraph.</p>
+    <h3>Line breaks</h3>
+    <p>Occasionally you'll need to perform a "soft return," that is, create a new line without using a new paragraph. To
+        do that in HTML, you use the line break tag (&lang;br&rang;). Line break tags are inline, meaning you can use
+        them within headers and paragraphs, and don't require a closing tag.
+        Let's say you were formatting an address, for example. You could use line breaks to make sure each line of the
+        address appeared on a separate line, but still remained within the same paragraph.
+        lynda.com 6410 Via Real Carpinteria, CA 93103.</p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/week1-exercise-from-slide/exercise1.html b/week1-exercise-from-slide/exercise1.html
new file mode 100644
index 0000000..9e23746
--- /dev/null
+++ b/week1-exercise-from-slide/exercise1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercise 1</title>
+</head>
+
+<body>
+    <nav>
+        <a href="#">Logo HERE</a>
+        <ul>
+            <li><a href="./exercise2.html">Home</a></li>
+            <li><a href="#">About</a></li>
+            <ul>
+                <li><a href="#">Company</a></li>
+                <li><a href="#">Partners</a></li>
+                <li><a href="#">Our People</a></li>
+            </ul>
+            <li><a href="https://github.com/lyoumbi">Personal Projects</a></li>
+            <li><a href="#">Contacts</a></li>
+        </ul>
+    </nav>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/week1-exercise-from-slide/exercise2.html b/week1-exercise-from-slide/exercise2.html
new file mode 100644
index 0000000..71c5db8
--- /dev/null
+++ b/week1-exercise-from-slide/exercise2.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercise 2</title>
+</head>
+<body>
+    <nav>
+        <a href="#">Logo HERE</a>
+        <ul>
+            <li><a href="./exercise2.html">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="https://github.com/lyoumbi">Personal Projects</a></li>
+            <li><a href="#">Contacts</a></li>
+        </ul>
+    </nav>
+
+    <h1>My Page</h1>
+    <h2>Yup!!</h2>
+    <p>
+        Why end might ask civil again spoil. She dinner she our horses depend. 
+        Remember at children by reserved to vicinity. In affronting unreserved delightful 
+        simplicity ye. Law own advantage furniture continual sweetness bed agreeable perpetual. Oh song well four only head busy it. Afford son she had lively living. Tastes lovers myself too formal season our valley boy. Lived it their their walls might to by young. 
+    </p>
+    <table border="1">
+        <thead>
+            <td>Morning</td>
+            <td>Evinings</td>
+            <td>Nights</td>
+        </thead>
+        <tr>
+            <td>Wake Up</td>
+            <td>Wake Up Again</td>
+            <td>Finally</td>
+        </tr>
+        <tr>
+            <td>Eat, exercises, watch TV at the same time</td>
+            <td>Still Waking Up</td>
+            <td>On with my day</td>
+        </tr>
+        <tr>
+            <td>Sleep</td>
+            <td>Never Mind</td>
+            <td>Sleep</td>
+        </tr>
+    </table>
+
+    <img src="https://c4.wallpaperflare.com/wallpaper/438/435/784/deadpool-love-movies-wallpaper-preview.jpg" alt="Green Grass"/>
+   
+    <footer>No Copy Rights</footer>
+</body>
+</html>
\ No newline at end of file

From e7cff105c758e77cf629ddd642ce4d6efe4e4a9d Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 16:29:29 -0400
Subject: [PATCH 10/12] Finish form and caculator file

---
 week1-exercise-from-slide/calculator.html | 65 +++++++++++++++++++++++
 week1-exercise-from-slide/exercise2.html  |  6 +--
 week1-exercise-from-slide/login-form.html | 25 +++++++++
 3 files changed, 93 insertions(+), 3 deletions(-)
 create mode 100644 week1-exercise-from-slide/calculator.html
 create mode 100644 week1-exercise-from-slide/login-form.html

diff --git a/week1-exercise-from-slide/calculator.html b/week1-exercise-from-slide/calculator.html
new file mode 100644
index 0000000..f3e2325
--- /dev/null
+++ b/week1-exercise-from-slide/calculator.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    table {
+        margin: auto;
+        width: 200px;
+        height: 300px;
+        text-align: center;
+        border:  5px solid green;
+    }
+
+    th, td {
+        border: 1px solid red;
+    }
+
+    th {
+        text-align: right;
+    }
+
+    th:hover {
+        background-color: lightcoral;
+        color: white;
+    }
+</style>
+<body>
+    <table>
+        <thead>
+            <th colspan="4">0.00</th>
+        </thead>
+        <tr>
+            <td>7</td>
+            <td>8</td>
+            <td>9</td>
+            <td>C</td>
+        </tr>
+        <tr>
+            <td>4</td>
+            <td>5</td>
+            <td>6</td>
+            <td>/</td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>2</td>
+            <td>3</td>
+            <td>*</td>
+        </tr>
+        <tr>
+            <td>0</td>
+            <td>00</td>
+            <td>.</td>
+            <td>+</td>
+        </tr>
+        <tr>
+            <td colspan="3">=</td>
+            <td>-</td>
+        </tr>
+    </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/week1-exercise-from-slide/exercise2.html b/week1-exercise-from-slide/exercise2.html
index 71c5db8..b734696 100644
--- a/week1-exercise-from-slide/exercise2.html
+++ b/week1-exercise-from-slide/exercise2.html
@@ -25,9 +25,9 @@ <h2>Yup!!</h2>
     </p>
     <table border="1">
         <thead>
-            <td>Morning</td>
-            <td>Evinings</td>
-            <td>Nights</td>
+            <th>Morning</th>
+            <th>Evinings</th>
+            <th>Nights</th>
         </thead>
         <tr>
             <td>Wake Up</td>
diff --git a/week1-exercise-from-slide/login-form.html b/week1-exercise-from-slide/login-form.html
new file mode 100644
index 0000000..1271419
--- /dev/null
+++ b/week1-exercise-from-slide/login-form.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Form</title>
+</head>
+<body>
+    <h1>Login Form</h1>
+
+    <form action="#" method="post">
+        <div>
+            <label for="email">Email</label>
+            <input type="text" name="email" id="email">
+        </div>
+        <div>
+            <label for="password">Password</label>
+            <input type="password" name="password" id="password">
+        </div>
+        <div>
+            <input type="submit" value="Login">
+        </div>
+    </form>
+</body>
+</html>
\ No newline at end of file

From 05b98a97204ebd274521119774ad22caafb6568c Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Mon, 22 Jun 2020 22:29:59 -0400
Subject: [PATCH 11/12] Resizing all table cells

---
 week1-exercise-from-slide/calculator.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/week1-exercise-from-slide/calculator.html b/week1-exercise-from-slide/calculator.html
index f3e2325..d4430a6 100644
--- a/week1-exercise-from-slide/calculator.html
+++ b/week1-exercise-from-slide/calculator.html
@@ -18,6 +18,10 @@
         border: 1px solid red;
     }
 
+    td {
+        width: 24%;
+    }
+
     th {
         text-align: right;
     }

From 924b5b82a82a44e93818fd6dcd1cfff48e53a1e1 Mon Sep 17 00:00:00 2001
From: Nkyo Lio <nkyoli@gmail.com>
Date: Tue, 23 Jun 2020 11:19:09 -0400
Subject: [PATCH 12/12] finished registration page

---
 week1-exercise-from-slide/exercise2.html    |  2 +-
 week1-exercise-from-slide/login-form.html   | 53 +++++++++++++++------
 week1-exercise-from-slide/registration.html | 51 ++++++++++++++++++++
 3 files changed, 90 insertions(+), 16 deletions(-)
 create mode 100644 week1-exercise-from-slide/registration.html

diff --git a/week1-exercise-from-slide/exercise2.html b/week1-exercise-from-slide/exercise2.html
index b734696..3d47bf9 100644
--- a/week1-exercise-from-slide/exercise2.html
+++ b/week1-exercise-from-slide/exercise2.html
@@ -23,7 +23,7 @@ <h2>Yup!!</h2>
         Remember at children by reserved to vicinity. In affronting unreserved delightful 
         simplicity ye. Law own advantage furniture continual sweetness bed agreeable perpetual. Oh song well four only head busy it. Afford son she had lively living. Tastes lovers myself too formal season our valley boy. Lived it their their walls might to by young. 
     </p>
-    <table border="1">
+    <table style="border:1">
         <thead>
             <th>Morning</th>
             <th>Evinings</th>
diff --git a/week1-exercise-from-slide/login-form.html b/week1-exercise-from-slide/login-form.html
index 1271419..40c75a0 100644
--- a/week1-exercise-from-slide/login-form.html
+++ b/week1-exercise-from-slide/login-form.html
@@ -1,25 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login Form</title>
+    <style>
+        .container {
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            width: 20%;
+        }
+
+        div {
+          width: 95%;
+          margin: 10px 0 5px 10px; 
+        }
+
+        label {
+            width: 20%;
+        }
+
+        
+    </style>
 </head>
-<body>
-    <h1>Login Form</h1>
 
-    <form action="#" method="post">
-        <div>
-            <label for="email">Email</label>
-            <input type="text" name="email" id="email">
-        </div>
-        <div>
-            <label for="password">Password</label>
-            <input type="password" name="password" id="password">
-        </div>
-        <div>
-            <input type="submit" value="Login">
-        </div>
-    </form>
+<body>
+    <div class="container">
+        <h1>Login Form</h1>
+        <form action="#" method="post">
+            <div>
+                <label for="email">Email</label>
+                <input type="text" name="email" id="email">
+            </div>
+            <div>
+                <label for="password">Password</label>
+                <input type="password" name="password" id="password">
+            </div>
+            <div>
+                <input type="submit" value="Login">
+            </div>
+        </form>
+    </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/week1-exercise-from-slide/registration.html b/week1-exercise-from-slide/registration.html
new file mode 100644
index 0000000..9f7463a
--- /dev/null
+++ b/week1-exercise-from-slide/registration.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Registration page</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Registration Page</h1>
+        <div>
+            <label for="firstname">First Name</label>
+            <input type="text" name="firstname" id="firstname">
+        </div>
+        <div>
+            <label for="lastname">Last Name</label>
+            <input type="text" name="lastname" id="lastname">
+        </div>
+        <div>
+            <label for="email">Email</label>
+            <input type="text" name="email" id="email">
+        </div>
+        <div>
+            <label for="password">Password</label>
+            <input type="password" name="password" id="password">
+        </div>
+        <div>
+            <strong>Gender</strong>
+            <input type="radio" name="gender" id="female">
+            <label for="female">Female</label>
+            <input type="radio" name="gender" id="male">
+            <label for="male">Male</label>
+        </div>
+        <div>
+            <label for="date_of_bird">Date Of Bird</label>
+            <input type="date" name="date_of_bird" id="date_of_bird">
+        </div>
+        <div>
+            <strong>Habits</strong>
+            <input type="checkbox" name="habits" id="sports">
+            <label for="sports">You like sports</label>
+            <input type="checkbox" name="habits" id="eat">
+            <label for="eat">You like to eat</label>
+            <input type="checkbox" name="habits" id="sleep">
+            <label for="sleep">You like sleep</label>
+        </div>
+        
+        <input type="submit" value="Register">
+    </div>
+</body>
+</html>
\ No newline at end of file
