add resources for 11th, 13th and 18th Apr

2019-04-11/README.md

@@ -0,0 +1,19 @@
+# Tech Karo - April 11, 2019
+
+## Objective
+Students should be able to:
+- Upload their code on Github
+- Publish their website on Github Pages
+
+## In-Class
+- Sign Up for a [Github](https://github.com/) account
+- Use Github & Github Pages to publish code / website - [playlist uploaded on Youtube](https://www.youtube.com/playlist?list=PLyJQFJk781TKKw_A76R91noLMhZ35l1NO)
+- Describe your repo / add Github Pages link in the README.md file
+
+![Screen Shot 2019-04-13 at 11 15 27](https://user-images.githubusercontent.com/10798986/56405084-f4def100-6283-11e9-8b31-4f2cecfe1921.png)
+
+## Additional Resources
+- [How to write a well-formatted README on Github](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
+
+## Post-Class
+- Upload all your HTML tasks on Github, and publish them on Github Pages

2019-04-13/README.md

@@ -0,0 +1,17 @@
+# Tech Karo - April 13, 2019
+
+## Objective
+Students should be able to:
+- Use the Issues tab in a Github repo
+
+## In-Class
+- Create a new Github Issue
+- Write well-formattted comments in issues
+- Link repo code (permalink) in issue
+- Reference issue in commit message
+
+## Additional Resources
+- [Check out the FreeCodeCamp repo for sample issues](https://github.com/freeCodeCamp/freeCodeCamp)
+
+## Post-Class
+- Ambassadors are instructed to check assignments and provide feedback via Github Issues

2019-04-18/README.md

@@ -0,0 +1,100 @@
+# Tech Karo - April 18, 2019
+
+## In-Class
+
+We studied:
+
+- HTML Forms Validations
+- Boolean attributes
+- Some new VSCode Extensions
+- Some new HTML tags
+
+---
+
+### HTML Form Validations:
+
+To make sure the user enters data in the correct format.
+
+**Examples:**
+
+- Age should be a positive number, i.e. greater than 0
+- Full name should be a required field
+- Email field should not accept home address
+
+Please refer to the repo code for further information
+
+---
+
+### Boolean Attributes
+
+Boolean means "true/false". A boolean attribute has only 2 values:
+
+- Its presence means value is true
+- Its absence means value is false
+
+**Examples:**
+- [`required` attribute in `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required)
+- [`autofocus` attribute in `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus)
+- [`disabled` attribute in `<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled)
+
+---
+
+### Some new VSCode extensions
+
+We checkout the following amazing VSCode extensions and we highly recommend that you install them:
+
+- [Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer) (To preview HTML output inside VSCode)
+- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) (To automatically rename paired HTML tag)
+
+---
+
+### Some new HTML Tags / Concepts
+
+We also studied the following HTML tags / concepts:
+
+- [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)
+- [`<hgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup)
+- [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
+- [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
+- [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
+- [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
+- [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)
+- [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+- [`<figure>` / `<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
+- [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) / [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+  - Please checkout out the [other Form-related HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms) tags also, like [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
+  - Practice the `<label>` tag and its `for` attribute
+- [input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
+
+**Semantic HTML Layout Elements Diagram**
+We have studied the following Semantic HTML Layout elements:
+`<header>`, `<footer>`, `<section>`, `<article>`, `<main>`, `<aside>` and `<nav>`
+
+[Here's a useful diagram from w3schools](https://www.w3schools.com/html/html5_semantic_elements.asp):
+
+![Screen Shot 2019-04-19 at 17 42 22](https://user-images.githubusercontent.com/10798986/56424709-e10aad80-62ca-11e9-9b59-0322c831d7dc.png)
+
+**Difference Between**
+```
+<button>Click Me!</button>
+``` 
+and 
+```
+<input type="button" value="Click Me!">
+```
+
+You cannot add images/icons inside an `<input type="button">`
+
+---
+
+## Additional Resources
+
+- [Check out the FreeCodeCamp repo for sample issues](https://github.com/freeCodeCamp/freeCodeCamp)
+- [Read more about HTML Form Validations](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation)
+- Practice more [form-related HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
+- Practice different [input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)
+---
+
+## Post-Class
+
+- Ambassadors are instructed to check assignments and provide feedback via Github Issues

2019-04-18/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Practicing Form Validations</title>
+  </head>
+  <body>
+    <form action="thanks.html" target="_blank">
+      <fieldset>
+        <label for="fullNameInput">Full Name </label>
+        <!-- Using "autofocus" boolean attribute to focus keyboard on this input element when the page loads -->
+        <!-- Using required attribute for form validation -->
+        <input id="fullNameInput" autofocus required />
+      </fieldset>
+      <fieldset>
+        <label for="ageInput">Age </label>
+        <!-- Using "min", "max", "type" and "required" attributes for form validations -->
+        <input id="ageInput" min="1" max="100" type="number" required />
+      </fieldset>
+      <fieldset>
+        <label for="emailInput">Email: </label>
+        <!-- Using "type" and "required" attributes for form validations -->        
+        <input id="emailInput" type="email" required />
+      </fieldset>
+      <fieldset>
+        <label for="pwdInput">Password: </label>
+        <!-- Using "required" attributes for form validations -->        
+        <input id="pwdInput" type="password" required />
+      </fieldset>
+      <fieldset>
+        <label for="happyInput">Password: </label>
+        <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#Additional_attributes -->
+        <input id="happyInput" type="range" min="0" max="100" step="5" required />
+      </fieldset>
+      <input type="submit" value="Sign Up!">
+    </form>
+  </body>
+</html>

2019-04-18/thanks.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Thank You!</title>
+</head>
+<body>
+    <h1>Thank you for contacting us!</h1>
+</body>
+</html>