Add forms lists and tables

README.md

@@ -4,6 +4,7 @@ demo_html_in_action
 HTML in action!
 
 
+**NOTE:** *This repo is copyrighted material for your private use only and not to be shared outside of Viking Code School.*
 
 
 

forms.html

@@ -34,20 +34,23 @@ <h1>Sign Up Form</h1>
           <legend>Credentials</legend>
 
           <label for="email">Email</label>
-          <input type="text" name="email">
+          <input type="email" name="email" placeholder="Email" required>
 
           <label for="password">Password</label>
-          <input type="text" name="password">
+          <input type="password" name="password" placeholder="Password" required>
+
+          <label for="password-confirm">Password</label>
+          <input type="password" name="password-confirm" placeholder="Retype your passowrd" required>
         </fieldset>
 
         <fieldset>
           <legend>Name:</legend>
 
           <label for="first-name">First Name</label>
-          <input type="text" name="first-name">
+          <input type="text" name="first-name" placeholder="First name">
 
           <label for="first-name">First Name</label>
-          <input type="text" name="first-name">
+          <input type="text" name="first-name" placeholder="Last name">
         </fieldset>
 
         <fieldset>
@@ -72,7 +75,7 @@ <h1>Sign Up Form</h1>
           <br>
           <label for="about">About</label>
           <br>
-          <textarea name="about"></textarea>
+          <textarea name="about" placeholder="Tell us about yourself..."></textarea>
 
           <br>
           <label for="hobbies">Hobbies</label>

lists.html

@@ -25,8 +25,51 @@ <h1>HTML in Action</h1>
     </header>
 
 
-    <!-- Image -->
-    <img src="/assets/images/html5.png" alt="HTML5">
+    <!-- Unordered Lists -->
+    <h2>Unordered Lists</h2>
+    <ul>
+      <li>Bananas</li>
+      <li>Oranges</li>
+      <li>Apples</li>
+      <li>Pears</li>
+    </ul>
+
+
+    <!-- Ordered Lists -->
+    <h2>Ordered Lists</h2>
+    <ol>
+      <li>Bananas</li>
+      <li>Oranges</li>
+      <li>Apples</li>
+      <li>Pears</li>
+    </ol>
+
+
+    <!-- Nested Lists -->
+    <h2>Nested Lists</h2>
+    <ol>
+      <li>Bananas</li>
+      <li>Oranges</li>
+      <li>Apples</li>
+      <li>Pears</li>
+      <li>
+        <ul>
+          <li>Bananas</li>
+          <li>Oranges</li>
+          <li>Apples</li>
+          <li>Pears</li>
+          <li>
+            <ol>
+              <li>Bananas</li>
+              <li>Oranges</li>
+              <li>Apples</li>
+              <li>Pears</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+
 
     <!-- Main Footer -->
     <footer>

tables.html

@@ -25,8 +25,45 @@ <h1>HTML in Action</h1>
     </header>
 
 
-    <!-- Image -->
-    <img src="/assets/images/html5.png" alt="HTML5">
+    <!-- Simple Table -->
+    <h2>Simple Table</h2>
+    <table>
+      <tr>
+        <td>First Name</td>
+        <td>Last Name</td>
+      </tr>
+      <tr>
+        <td>John</td>
+        <td>Doe</td>
+      </tr>
+      <tr>
+        <td>Jane</td>
+        <td>Doe</td>
+      </tr>
+    </table>
+
+
+    <!-- Table with Head and Body -->
+    <h2>Table with <code>thead</code> and <code>tbody</code></h2>
+    <table>
+      <thead>
+        <tr>
+          <th>First Name</th>
+          <th>Last Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>John</td>
+          <td>Doe</td>
+        </tr>
+        <tr>
+          <td>Jane</td>
+          <td>Doe</td>
+        </tr>
+      </tbody>
+    </table>
+
 
     <!-- Main Footer -->
     <footer>