diff --git a/codeExamples/week1/IntroHTMLCode-2/Coco.jpg b/codeExamples/week1/IntroHTMLCode-2/Coco.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1b068921cff866862a72deb30dd16609c256b956
Binary files /dev/null and b/codeExamples/week1/IntroHTMLCode-2/Coco.jpg differ
diff --git a/codeExamples/week1/IntroHTMLCode-2/DOM Example.html b/codeExamples/week1/IntroHTMLCode-2/DOM Example.html
new file mode 100644
index 0000000000000000000000000000000000000000..01f8089e982be36ef1c3f71efe7472331d81cf9e
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/DOM Example.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>
+ Shape Shed - Examples - CSS + DOM = A Beautiful Couple
+ </title>
+
+ <style type="text/css" media="screen">@import "domExample.css";</style>
+
+</head>
+<body id="front-door">
+
+ <div id="kitchen">
+ <div id="fridge">
+ <p>Extra Pulp OJ</p>
+ </div>
+ <div id="freezer">
+ <p>Ice Cream</p>
+ </div>
+ </div>
+
+ <div id="lounge">
+ <div id="sofa">
+ <p>Newspaper</p>
+ </div>
+ <div id="chair">
+ <p>Cushion</p>
+ </div>
+ </div>
+
+ <div id="bedroom">
+ <div id="bed">
+ <p>Duvet</p>
+ </div>
+ <div id="lamp">
+ <p>Lightbulb</p>
+ </div>
+ </div>
+
+ <div id="bathroom">
+ <div id="shower">
+ <p>Shower Gel</p>
+ </div>
+ <div id="sink">
+ <p>Soap</p>
+ </div>
+ </div>
+ <h1>What's this all about</h1>
+ <p>This is an example showing CSS and the DOM used together. </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/background.css b/codeExamples/week1/IntroHTMLCode-2/background.css
new file mode 100644
index 0000000000000000000000000000000000000000..c823b8cb200db37ba51a8948c530927776edc569
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/background.css
@@ -0,0 +1,19 @@
+body {
+
+ /* background properties */
+ background-color: silver;
+ /* background-image: url(campusBldg.jpg); */
+ background-image: url(Coco.jpg);
+
+ background-repeat: repeat-x repeat-y;
+ /* try repeat-x, repeat-y, no-repeat, repeat */
+
+ background-attachment: scroll;
+ /* try scroll, fixed */
+
+ background-size: 10cm;
+
+ /* shorthand version for above background properties */
+ /* DISABLED background: silver url(Coco.jpg) repeat-y fixed center; */
+
+}
diff --git a/codeExamples/week1/IntroHTMLCode-2/background.html b/codeExamples/week1/IntroHTMLCode-2/background.html
new file mode 100644
index 0000000000000000000000000000000000000000..f52ca2880eaaba4b91a1198089c5dd25dcc5fc69
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/background.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <title>Background</title>
+ <link rel="stylesheet" href="background.css" type="text/css" />
+</head>
+
+<body>
+ <h1>Partnerships</h1>
+
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+
+ <p>
+ Progress on the new M Square Research Park, 128 acres at the
+ College Park Metro station, is another example of such
+ partnerships. Collaboration between the University, the State, the
+ federal government and private sector businesses promise to build
+ UM's research programs in depth and breadth. Several steps occurred
+ this year that advanced the University closer to the complete
+ vision of M Square as a hub for collaborative research initiatives:
+ the National Foreign Language Center moved into the Patapsco
+ Building at M Square and Datastream graduated from the Technology
+ Advancement Program on campus to the Technology Ventures building
+ at M Square. Physically, the site is now primed with 65 acres
+ readied for new building construction. Construction of the first
+ 120,000 square foot spec building is set to begin this October, and
+ the main road, University Research Court, is now completed. The
+ residential component of M Square, which will provide upscale
+ condominiums to researchers and the general public, has received
+ its state approvals. An exciting feature of this condominium
+ project is that the university will own 50 units, which will be
+ allocated on a competitive basis to attract the "best and the
+ brightest" graduate and postdoctoral students and visitors from
+ around the world.
+ </p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/backgroundStretch.css b/codeExamples/week1/IntroHTMLCode-2/backgroundStretch.css
new file mode 100644
index 0000000000000000000000000000000000000000..160b9d3ad6bb40c488c4c18700cc4d65c5cb4e28
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/backgroundStretch.css
@@ -0,0 +1,10 @@
+body {
+ background: url(c3.jpg);
+ background-repeat: no-repeat;
+ /* try repeat-x, repeat-y, no-repeat, repeat */
+
+ background-size: cover;
+ background-position: center; /* try left right */
+}
+
+/* try without the following rule */
diff --git a/codeExamples/week1/IntroHTMLCode-2/backgroundStretch.html b/codeExamples/week1/IntroHTMLCode-2/backgroundStretch.html
new file mode 100644
index 0000000000000000000000000000000000000000..0318225200a571d6a918073fa4aecfacb16188bb
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/backgroundStretch.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Background</title>
+ <link rel="stylesheet" href="backgroundStretch.css" type="text/css" />
+
+</head>
+
+<body>
+ <h1>Partnerships</h1>
+
+ <p>
+ Another sign of community-building is the growth of
+ UM-partnerships. The investment of pivate resources in the UM
+ mission suggests that shared goals -education, innovation, and
+ entrepreneurship--create productive alliances. Such public/private
+ partnerships are helping to make UM education affordable and
+ accessible to all students. Chevy Chase Bank has joined with UM in
+ a partnership that will benefit scholarships and better athletics
+ facilities. Dell and Apple computers have joined forces with the
+ Office of Information Technology to provide affordable computers
+ for students, faculty and staff.
+ </p>
+
+ <p>
+ Progress on the new M Square Research Park, 128 acres at the
+ College Park Metro station, is another example of such
+ partnerships. Collaboration between the University, the State, the
+ federal government and private sector businesses promise to build
+ UM's research programs in depth and breadth. Several steps occurred
+ this year that advanced the University closer to the complete
+ vision of M Square as a hub for collaborative research initiatives:
+ the National Foreign Language Center moved into the Patapsco
+ Building at M Square and Datastream graduated from the Technology
+ Advancement Program on campus to the Technology Ventures building
+ at M Square. Physically, the site is now primed with 65 acres
+ readied for new building construction. Construction of the first
+ 120,000 square foot spec building is set to begin this October, and
+ the main road, University Research Court, is now completed. The
+ residential component of M Square, which will provide upscale
+ condominiums to researchers and the general public, has received
+ its state approvals. An exciting feature of this condominium
+ project is that the university will own 50 units, which will be
+ allocated on a competitive basis to attract the "best and the
+ brightest" graduate and postdoctoral students and visitors from
+ around the world.
+ </p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/boxModel.css b/codeExamples/week1/IntroHTMLCode-2/boxModel.css
new file mode 100644
index 0000000000000000000000000000000000000000..321622a8cbf93b60f3d3424e881f6e72f283bae4
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/boxModel.css
@@ -0,0 +1,69 @@
+/* Setting bigger root font size */
+/* html {
+ font-size: 30px;
+} */
+
+body {
+ font-family: arial, sans-serif;
+ /* width: 25em;
+ height: 25em; */
+ border-style: solid;
+ border-color: blue;
+ padding: 1em;
+ /* change to 0 em, 1 ... 6 em */
+ margin: 1em;
+ /* change to 0 em, 1 ... 6 em */
+}
+
+/* see that with the following rule the paragraph inside
+article inherits the padding of article */
+/* article p {
+ padding: inherit;
+} */
+
+#paddingTests {
+ background-color: gray;
+ color: yellow;
+ /* width: 4em;
+ height: 2em; */
+
+ padding: 1em;
+ /* change to 0 em, 1 ... 6 em */
+ border-color: red;
+ border-style: solid;
+ border-width: 1em;
+ /* change to .5 em */
+}
+
+#marginTests {
+ background-color: gray;
+ color: yellow;
+ width: 30em;
+ height: 20em;
+
+ margin: 2em auto;
+ /* change to 0 em, 1 ... 6 em */
+ /* also test adding auto after 2em */
+
+ border: 5px dashed red;
+}
+
+#outer {
+ width: 6em;
+ border: 1em ridge red;
+}
+
+#inner {
+ border: .5em solid lightblue;
+ padding-left: .5em;
+}
+
+/* this is an adjacent sibling selector */
+p + div{
+ padding: 10em;
+}
+
+/* this is a child selector */
+div > div {
+ color: orangered;
+}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/boxModel.html b/codeExamples/week1/IntroHTMLCode-2/boxModel.html
new file mode 100644
index 0000000000000000000000000000000000000000..2e999e705e0fb175b52c44fb1a3b28366ad9386d
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/boxModel.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Box Model Tests</title>
+ <link rel="stylesheet" href="BoxModel.css" />
+</head>
+
+<body>
+
+ <article id="paddingTests">
+ <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </h1>
+ <p>Facere nostrum saepe temporibus eum, obcaecati possimus quos
+ error cum nesciunt cupiditate at voluptatum magnam voluptas
+ laborum. Suscipit libero voluptas adipisci autem?</p>
+ </article>
+
+ <p id="marginTests">
+ Facere nostrum saepe temporibus eum, obcaecati possimus quos error cum nesciunt
+ cupiditate at voluptatum magnam voluptas laborum. Suscipit libero voluptas
+ adipisci
+ autem?
+ </p>
+
+ <div id="outer">
+ <div id="inner">
+ Testudo
+ </div>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/c3.jpg b/codeExamples/week1/IntroHTMLCode-2/c3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f7e7ec7941d7bb018ce5eb7686994617d1a6873a
Binary files /dev/null and b/codeExamples/week1/IntroHTMLCode-2/c3.jpg differ
diff --git a/codeExamples/week1/IntroHTMLCode-2/descendantSelector.css b/codeExamples/week1/IntroHTMLCode-2/descendantSelector.css
new file mode 100644
index 0000000000000000000000000000000000000000..bed508bcae66ac4ffd1088704919914293916ac8
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/descendantSelector.css
@@ -0,0 +1,15 @@
+body {
+ font-family: arial, sans-serif;
+}
+
+a {
+ font-size: 2em;
+ color: green;
+}
+
+/* When a found in li override previous a definition */
+li a {
+ font-size: 4em;
+ font-style: italic;
+ color: red;
+}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/descendantSelector.html b/codeExamples/week1/IntroHTMLCode-2/descendantSelector.html
new file mode 100644
index 0000000000000000000000000000000000000000..e08a24665b1278d5901c907949646b6f459b62fe
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/descendantSelector.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Descendant Selectors</title>
+ <link rel="stylesheet" href="DescendantSelector.css" />
+</head>
+
+<body>
+ <h1>Local Newspaper</h1>
+ <p>
+ For news about the City of College Park and the University of
+ Maryland you can check the (<a
+ href="http://www.diamondbackonline.com/">Diamondback</a>)
+ </p>
+ <h1>World News</h1>
+ <ul>
+ <li><a href="http://www.cnn.com/">CNN</a></li>
+ <li>Nightly News</li>
+ </ul>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/domExample.css b/codeExamples/week1/IntroHTMLCode-2/domExample.css
new file mode 100644
index 0000000000000000000000000000000000000000..865241056a9fdd411ceaa5c278df85ac86468ce7
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/domExample.css
@@ -0,0 +1,21 @@
+
+/*-----------------------------------------------------------------------------
+Example credit to:
+author: george ornbo
+website: http://www.shapeshed.com
+-----------------------------------------------------------------------------*/
+
+
+
+body
+ {
+ font: 76%/150% "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
+ color: #333366;
+ }
+
+/* This demonstrates accessing and manipulating using the DOM (Document Object Model) */
+/*Color the ice cream red!*/
+
+#kitchen {
+ color: red;
+}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/domExample.html b/codeExamples/week1/IntroHTMLCode-2/domExample.html
new file mode 100644
index 0000000000000000000000000000000000000000..01f8089e982be36ef1c3f71efe7472331d81cf9e
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/domExample.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>
+ Shape Shed - Examples - CSS + DOM = A Beautiful Couple
+ </title>
+
+ <style type="text/css" media="screen">@import "domExample.css";</style>
+
+</head>
+<body id="front-door">
+
+ <div id="kitchen">
+ <div id="fridge">
+ <p>Extra Pulp OJ</p>
+ </div>
+ <div id="freezer">
+ <p>Ice Cream</p>
+ </div>
+ </div>
+
+ <div id="lounge">
+ <div id="sofa">
+ <p>Newspaper</p>
+ </div>
+ <div id="chair">
+ <p>Cushion</p>
+ </div>
+ </div>
+
+ <div id="bedroom">
+ <div id="bed">
+ <p>Duvet</p>
+ </div>
+ <div id="lamp">
+ <p>Lightbulb</p>
+ </div>
+ </div>
+
+ <div id="bathroom">
+ <div id="shower">
+ <p>Shower Gel</p>
+ </div>
+ <div id="sink">
+ <p>Soap</p>
+ </div>
+ </div>
+ <h1>What's this all about</h1>
+ <p>This is an example showing CSS and the DOM used together. </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/externalFile.css b/codeExamples/week1/IntroHTMLCode-2/externalFile.css
new file mode 100644
index 0000000000000000000000000000000000000000..9e049ac394a8d1195a32107042bd6a6968a89d90
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/externalFile.css
@@ -0,0 +1,2 @@
+h1 {color: red;}
+p {font-size: 2em;}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/externalFile.html b/codeExamples/week1/IntroHTMLCode-2/externalFile.html
new file mode 100644
index 0000000000000000000000000000000000000000..ecece5a2844049c2ec65fc0069372721c3d84879
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/externalFile.html
@@ -0,0 +1,12 @@
+<!doctype html>
+ <head>
+ <title>External Style File</title>
+ <!-- The next line connects this file with the style sheet -->
+ <link rel="stylesheet" href="ExternalFile.css" type="text/css" />
+ </head>
+ <body>
+ <h1>Additional information</h1>
+ <p> Additional information can be found through the undergraduate web page.
+ </p>
+ </body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/googleFont.css b/codeExamples/week1/IntroHTMLCode-2/googleFont.css
new file mode 100644
index 0000000000000000000000000000000000000000..fd783a53ecbc76d731617cd33a6c9a8b669c4a56
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/googleFont.css
@@ -0,0 +1,17 @@
+
+#para1 {
+ font-family: Chilanka;
+ background-color: gray;
+ color: yellow;
+ border: 5px dashed red;
+ margin:.5em;
+ padding:.5em;
+}
+
+#para2 {
+ font-family: Ubuntu;
+ border: 1em ridge red;
+ margin:.5em;
+ padding:.5em;
+}
+
diff --git a/codeExamples/week1/IntroHTMLCode-2/googleFont.html b/codeExamples/week1/IntroHTMLCode-2/googleFont.html
new file mode 100644
index 0000000000000000000000000000000000000000..d63367d06d118853e23f493867d6be7f6d8f1dcf
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/googleFont.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Shorthand Properties</title>
+ <link rel="stylesheet" href="googleFont.css" />
+ <link href="https://fonts.googleapis.com/css?family=Chilanka|Ubuntu&display=swap"
+ rel="stylesheet">
+</head>
+
+<body>
+ <p id="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et pariatur,
+ neque libero recusandae unde blanditiis itaque sit. Excepturi maiores aperiam
+ cupiditate necessitatibus suscipit, et praesentium. Quaerat, facere? Voluptates,
+ numquam dicta?</p>
+
+ <p id="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident esse,
+ dolor quae ipsa ipsum dolores sint cum harum, commodi earum amet magnam! Doloribus
+ beatae accusantium ipsam magni quis sequi. Tempore.</p>
+
+ <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
+ esse, dolor quae ipsa ipsum dolores sint cum harum, commodi earum amet magnam!
+ Doloribus beatae accusantium ipsam magni quis sequi. Tempore.</p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/html5Elements.html b/codeExamples/week1/IntroHTMLCode-2/html5Elements.html
new file mode 100644
index 0000000000000000000000000000000000000000..354592bf8f9a44a37f093da0317edbc958729815
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/html5Elements.html
@@ -0,0 +1,71 @@
+<!doctype html>
+
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>HTML5 Elements</title>
+</head>
+
+<body>
+ <header>
+ <h1>Review Site</h1>
+ </header>
+
+ <nav>
+ <a href="http://www.umd.edu">UMD Web Site</a>
+ </nav>
+
+ <article class="programming_languages_reviews">
+ <header>
+ <h2>Java</h2>
+ </header>
+
+ <section class="faculty_reviews">
+ <h2>Faculty Reviews</h2>
+
+ <article class="faculty_review">
+ <h2>Dr. JavaJava</h2>
+ <p>Great Language</p>
+ <footer>
+ <p>Submitted on <time datetime="2016-01-04 17:00">Jan 4</time></p>
+ </footer>
+ </article>
+
+ <article class="faculty_review">
+ <h2>Dr. AssemblyAssembly</h2>
+ <p>I prefer Assembly</p>
+ <footer>
+ <p>Submitted on <time datetime="2016-01-02 14:00">Jan 2</time></p>
+ </footer>
+ </article>
+
+ <article class="faculty_review">
+ <h2>Dr. JavaScript</h2>
+ <p>I prefer JavaScript</p>
+ <footer>
+ <p>Lorem ipsum
+ voluptatem quisquam alias quam itaque enim sit laudantium
+ doloremque fuga laborum
+ officiis accusamus deserunt sint porro? <span
+ style="display: inline-block; margin-top: 100px; ">Aliquid</span> repellat
+ sed quas ipsa vitae, tenetur sit error expedita dicta. In incidunt
+ quaerat odio
+ delectus, magni iste fugit, quis rerum quae similique consequatur
+ consectetur
+ nemo. Laboriosam?</p>
+ </footer>
+ </article>
+ </section>
+
+ <footer>
+ <p>UMCP Java Reviews</p>
+ </footer>
+ </article>
+
+ <footer>
+ ©UMCP
+ </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/iframeExample.html b/codeExamples/week1/IntroHTMLCode-2/iframeExample.html
new file mode 100644
index 0000000000000000000000000000000000000000..a1e8b49269a2cb3f13ccc48d667f4a7824b7b37a
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/iframeExample.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ p{
+ color: rgb(20,40,100, .5);
+ }
+
+ </style>
+
+ </head>
+<body>
+
+<h2>iframe Example</h2>
+<p>Can display just about anything in the frame, you have control over sizing</p>
+
+<iframe src="https://www.cnn.com/" height="200" width="300"></iframe>
+
+</body>
+</html>
diff --git a/codeExamples/week1/IntroHTMLCode-2/internalStyle.html b/codeExamples/week1/IntroHTMLCode-2/internalStyle.html
new file mode 100644
index 0000000000000000000000000000000000000000..3fd9f4de73b353a25040a9db8a98a2c580dc838a
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/internalStyle.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Inline Style</title>
+ <style>
+ h1 {
+ color: blue
+ }
+
+ p {
+ font-size: 1.5em;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Introduction to CS</h1>
+ <p>The following courses are provided by the Department of Computer Science.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/propinheritance.css b/codeExamples/week1/IntroHTMLCode-2/propinheritance.css
new file mode 100644
index 0000000000000000000000000000000000000000..0726469a803ed1c05446049795a336c39e8db8ed
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/propinheritance.css
@@ -0,0 +1,15 @@
+article {
+ color: orchid;
+ /* inherited */
+ border: medium solid;
+ /* not inherited */
+}
+
+h2 {
+ color: forestgreen;
+}
+
+article h2 {
+ color: inherit;
+ /* h2 inside article will be orchid color (not forestgreen)*/
+}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/propinheritance.html b/codeExamples/week1/IntroHTMLCode-2/propinheritance.html
new file mode 100644
index 0000000000000000000000000000000000000000..14f53d02d44309892a90bdaf005349170337d6ff
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/propinheritance.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Inline Style</title>
+ <link rel="stylesheet" href="propinheritance.css">
+</head>
+
+<body>
+ <h1>Introduction to CS</h1>
+ <h2>CSS property inheritance</h2>
+ <article>
+ <h2>H2 with enforced inheritance</h2>
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+
+ <p>
+ Corrupti sit dolores maxime <span>recusandae</span> fugit alias aliquam
+ error inventore! Consequuntur incidunt mollitia, nulla blanditiis
+ nesciunt atque a commodi ipsam totam voluptatem.
+ </p>
+ </article>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/pseudoElements, universal.css b/codeExamples/week1/IntroHTMLCode-2/pseudoElements, universal.css
new file mode 100644
index 0000000000000000000000000000000000000000..5ef336cf8f3bb3c18f5fec49f638815a12e9111e
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/pseudoElements, universal.css
@@ -0,0 +1,30 @@
+body {
+ font-family: sans-serif;
+ /* notice, using serif */
+}
+
+* {
+ color: teal;
+}
+
+div.xxx.yyy {
+ color: blue;
+ font-size: 20px;
+}
+
+p * {
+ /* note that only descendants (not p itself) are affected by this style */
+ color: peachpuff;
+}
+
+/* Try first-line as well */
+p:first-letter {
+ font-weight: bold;
+ font-size: 4rem;
+ /* try with em */
+}
+
+p:first-line {
+ font-weight: 400;
+ font-size: 2em;
+}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/pseudoElements, universal.html b/codeExamples/week1/IntroHTMLCode-2/pseudoElements, universal.html
new file mode 100644
index 0000000000000000000000000000000000000000..f329cd2e9d91a3e1aecbd2a9d0050e9e24f9918f
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/pseudoElements, universal.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Pseudoelements</title>
+ <link rel="stylesheet" href="pseudoElements, universal.css" type="text/css" />
+ <!-- If you omit the type attribute, the browser will make an educated
+ guess at the content type by looking at the rel attribute instead. So
+ it will assume the type is text/css where the rel attribute is
+ stylesheet, for example.
+
+ Read more: https://html.com/attributes/link-type/#ixzz5yTAj77mD -->
+</head>
+
+<body>
+ <h1>Partnerships</h1>
+ <p>
+ The future of <strong> public higher education in America</strong>
+ depends on forming effective partnerships with government,
+ industry, business, faculty and students to carry on the discovery
+ and creation of knowledge that underlies the continuing improvement
+ of our social, civic, economic and cultural lives.
+ </p>
+
+ <p>
+ The President has facilitated the establishment and enhancement of many
+ partnerships that
+ will benefit both the university and the larger society.
+ </p>
+
+ <div class="xxx yyy">Hello World</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/selectors.css b/codeExamples/week1/IntroHTMLCode-2/selectors.css
new file mode 100644
index 0000000000000000000000000000000000000000..5e106ccdbdadf17a9dc114b4dc4c88715c18792d
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/selectors.css
@@ -0,0 +1,100 @@
+/* This is a comment in CSS */
+/* The next line tell us the font to look for. The last line is a generic
+/* font family (serif, sans-serif, monospace)*/
+
+body {
+ font-family: arial, Helvetica, "Times New Roman", sans-serif;
+ /* background: #F5F5DC; */
+ background: rgba(125, 125, 125, 0.5);
+ color: teal;
+ font-size: 90%; /* try different percentages */
+}
+
+a:link {
+ color: blue;
+}
+
+a:visited {
+ color:purple;
+}
+
+a:hover {
+ color: red;
+}
+
+a:active {
+ color: gray;
+}
+
+h1 {
+ color: gray;
+}
+
+
+pre {
+ color: gray;
+ font-style: italic;
+ text-align: center;
+}
+
+pre:hover {
+ font-size: 2em;
+}
+
+strong {
+ color: red;
+}
+
+ol {
+ list-style-type: lower-latin; /* try lower-roman, upper-roman, upper-latin */
+}
+
+ul {
+ color: maroon;
+ list-style-image: url(bus.gif);
+ /* list-style-type: circle; /* try disc, square, none */
+}
+
+table {
+ background-color: black; /* try commenting this out */
+ border-collapse: separate; /* try collapse */
+ border-style: double; /* try solid, dashed, groove, ridge, inset, outset */
+ border-color: red;
+ border-width: .125em;
+ text-align: center; /* try left, right */
+}
+
+th {
+ background-color: #F5DEB3;
+ padding: 8px;
+}
+
+td {
+ background-color: white;
+}
+
+/* class selector */
+.styleOne {
+ color: red;
+ font-style: italic;
+ text-align: center;
+}
+
+/* class selector */
+.styleTwo {
+ color: gray;
+ font-style: oblique;
+ text-align: center;
+}
+
+.styleThree {
+ color: blue;
+ background-color: white;
+}
+
+/* id selector */
+#additionalInfo {
+ color: green;
+ font-weight: bold; /* try normal, bolder, 100, 200, 300, 400 (normal)..., 700 (bold), 900*/
+ text-align: center;
+}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/selectors.html b/codeExamples/week1/IntroHTMLCode-2/selectors.html
new file mode 100644
index 0000000000000000000000000000000000000000..933796eb92e59535a1fb0770ce0ca56cf52a3bfd
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/selectors.html
@@ -0,0 +1,88 @@
+<!doctype html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Class Id Selectors</title>
+ <link rel="stylesheet" href="Selectors.css" />
+</head>
+
+<body>
+ <h1>The Road Not Taken</h1>
+
+ <p> The following is a famous poem by <em>Robert Frost</em>(1874–1963).
+ We will study his work this semester.
+ </p>
+
+ <!-- careful with the identation of pre -->
+ <pre class="styleOne">
+ Two roads diverged in a yellow wood
+ And sorry I could not travel both
+ And be one traveler, long I stood
+ And looked down one as far as I could
+ To where it bent in the undergrowth
+ </pre>
+
+ <!-- notice the use of multiple class selectors -->
+ <pre class="styleTwo styleThree">
+ Then took the other as just as fair
+ And having perhaps the better claim
+ Because it was grassy and wanted wear;
+ Though as for that, the passing there
+ Had worn them really about the same
+ </pre>
+
+ <pre class="styleOne">
+ And both that morning equally lay
+ In leaves no step had trodden black
+ Oh, I kept the first for another day!
+ Yet knowing how way leads onto way
+ I doubted if I should ever come back
+ </pre>
+
+ <pre class="styleTwo">
+ I shall be telling this with a sigh
+ Somewhere ages and ages hence
+ Two roads diverged in a wood
+ And I took the one less traveled by
+ And that has made all the difference
+ </pre>
+
+ <h2>Midterm Paper Questions</h2>
+ <ol>
+ <li>Which road would you travel(<strong>today</strong>)?</li>
+ <li>Which road have you been taken?</li>
+ </ol>
+
+ <h3>Final Paper Questions</h3>
+ <ul>
+ <li>Compare Robert Frost work with another author discussed in lecture.</li>
+ <li>What is the major contribution of Robert Frost's work?</li>
+ </ul>
+
+ <h3>Schedule</h3>
+ <table>
+ <tr>
+ <th>Week</th>
+ <th>Reading</th>
+ <th>Work</th>
+ </tr>
+ <tr>
+ <td>1 </td>
+ <td>Poem</td>
+ <td>Report</td>
+ </tr>
+ <tr>
+ <td>2 </td>
+ <td>Paper</td>
+ <td>Quiz</td>
+ </tr>
+ </table>
+
+ <h3>Additional information</h3>
+ <p id="additionalInfo">You can find additional information in
+ <a href="http://en.wikipedia.org/wiki/The_Road_Not_Taken_(poem)">Wikipedia
+ Reference</a>
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/shorthandProperties.css b/codeExamples/week1/IntroHTMLCode-2/shorthandProperties.css
new file mode 100644
index 0000000000000000000000000000000000000000..629f2d2b2363d6e96484235870a1ba1208540847
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/shorthandProperties.css
@@ -0,0 +1,48 @@
+body {
+ /* note multiple values are given as "fallback"s. */
+ font-family: arial, Helvetica, sans-serif;
+
+ background: #F5F5DC;
+ font-size: 90%;
+}
+
+.noShorthand {
+ /* Font specification */
+ font-style: italic;
+ font-variant: small-caps;
+ font-weight: normal;
+ font-size: .80em;
+ line-height: 1.1em;
+ font-family: Verdana, Arial, sans-serif;
+
+ /* Border specification */
+ border-width: 2em;
+ border-style: solid;
+ border-color: green;
+
+ /* Margin specification */
+ margin-top: 6em;
+ margin-right: 8em;
+ margin-bottom: 4em;
+ margin-left: 2em;
+
+ /* Padding specification*/
+ padding-top: 3em;
+ padding-right: 4em;
+ padding-bottom: 2em;
+ padding-left: 1em;
+}
+
+.withShorthand {
+ /* Font specification */
+ font: italic small-caps normal .80em/1.1em Verdana, Arial, sans-serif;
+
+ /* Border specification */
+ border: 2em solid green;
+
+ /* Margin specification */
+ margin: 6em 8em 4em 2em;
+
+ /* Padding specification*/
+ padding: 3em 4em 2em 1em;
+}
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode-2/shorthandProperties.html b/codeExamples/week1/IntroHTMLCode-2/shorthandProperties.html
new file mode 100644
index 0000000000000000000000000000000000000000..3d136cf2deeda5f89718e884d6fb5fe5a707a428
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode-2/shorthandProperties.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Shorthand Properties</title>
+ <link rel="stylesheet" href="ShorthandProperties.css" />
+</head>
+
+<body>
+ <h1>Partnerships</h1>
+ <p class="noShorthand">
+ The future of public higher education in America depends on forming
+ effective partnerships with government, industry, business, faculty
+ and students to carry on the discovery and creation of knowledge
+ that underlies the continuing improvement of our social, civic,
+ economic and cultural lives.
+ </p>
+
+ <p class="withShorthand">
+ The President has facilitated the establishment and enhancement of
+ many partnerships that will benefit both the university and the
+ larger society.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode/BasicHTMLSkeleton.html b/codeExamples/week1/IntroHTMLCode/BasicHTMLSkeleton.html
new file mode 100644
index 0000000000000000000000000000000000000000..b58e6efcf86fdf13ab81166676fbdbe036007e8f
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode/BasicHTMLSkeleton.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <!-- For responsive page -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="description" content="Basic HTML5 Document" />
+ <meta name="keywords" content="HTML5, Responsive, CMSC389N"/>
+ <link href="favicon.ico" rel="icon" type="image/x-icon" />
+ <title>HTML TEMPLATE</title>
+ </head>
+
+ <body>
+ <ol type = "I">
+ <li>Shakira</li>
+ <li>JLo</li>
+
+ </ol>
+ </body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode/CharacterReferences.html b/codeExamples/week1/IntroHTMLCode/CharacterReferences.html
new file mode 100644
index 0000000000000000000000000000000000000000..f9c6a9cbb178fcd05ac2c5bdd204759dcd9cf418
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode/CharacterReferences.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Character References</title>
+ </head>
+
+<body>
+ <table>
+ <tr> <th>Name</th> <th>Symbol</th> </tr>
+ <tr> <td>Copyright</td> <td>©</td> </tr>
+ <tr> <td>Registered Trademark</td> <td>®</td> </tr>
+ <tr> <td>Ampersand</td> <td>&</td> </tr>
+ <tr> <td>Less than</td> <td><</td> </tr>
+ <tr> <td>Greater than</td> <td>></td> </tr>
+ <tr> <td>Right Arrow</td> <td>→</td> </tr>
+ <tr> <td>Left Arrow</td> <td>←</td> </tr>
+ <tr> <td>Non-breaking space</td> <td> </td> </tr>
+ <tr> <td>Pi</td> <td>π</td> </tr>
+ <tr> <td>Degree</td> <td>°</td> </tr>
+ <tr> <td>Acute</td> <td>´</td> </tr>
+ <tr> <td>Infinity</td> <td>∞</td> </tr>
+ </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode/CommonTags.html b/codeExamples/week1/IntroHTMLCode/CommonTags.html
new file mode 100644
index 0000000000000000000000000000000000000000..e9f4e0bdac919dc0018535b74916bee9fbcb3ad9
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode/CommonTags.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Common Tags</title>
+ </head>
+
+ <body>
+ <h1>Introduction(h1)</h1>
+ <h2>Overview(h2)</h2>
+ <h3>Conclusion(h3)</h3>
+ <h4>References(h4)</h4>
+ <h5>Appendix A(h5)</h5>
+ <h6>Appendix B(h6)</h6>
+
+ <p>
+ This document presents some frequently used tags for the
+ development of html files. For example, the text you are currently
+ reading is enclosed in <p> </p> tags.
+ </p>
+
+ <p>
+ This line illustrates that we <b>can bold</b> easily with the
+ <b> tag.
+ </p>
+
+ <p>
+ Now we are illustrating how we can create superscripts
+ (10<sup>th</sup>) or subscript (log<sub> 2 </sub> n)
+ </p>
+
+ <p>
+ Showing how to generate quotes: <q>To be or not to be</q>
+ </p>
+
+ <p>Java code printed using the pre tags:
+ </p>
+
+ <pre>
+ /* Java code presented using the <strong>pre tag</strong> */
+ import javax.swing.*;
+ public static void main(String[] args) {
+ System.out.println("Hello World");
+ }
+ </pre>
+
+ <p><em>Java code printed using p tags:</em>
+ </p>
+
+ <p>
+ /* Java code presented using the <q>pre tag</q> */
+ import javax.swing.*;
+ public static void main(String[] args) {
+ System.out.println("Hello World");
+ }
+ </p>
+
+ <p>
+ <em>This line has been displayed using the <em>
+ tag</em><br /> <strong>This line has been displayed using the
+ <strong> tag</strong><br /> <b>This line has been
+ displayed using the <b> tag</b><br /> <i>This line has
+ been displayed using the <i> tag</i><br />
+ </p>
+ </body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode/Image.html b/codeExamples/week1/IntroHTMLCode/Image.html
new file mode 100644
index 0000000000000000000000000000000000000000..62d96754c6d5e21d694439dc7a5bd197d99f41ef
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode/Image.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Image</title>
+ </head>
+
+ <body>
+ <p>The School mascot is Testudo.
+ <img src="testudo.jpg" width="84" height="111" alt="Testudos' image'" />
+ </p>
+ </body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode/Links.html b/codeExamples/week1/IntroHTMLCode/Links.html
new file mode 100644
index 0000000000000000000000000000000000000000..67eb7c9023c376702870c054e967956495283351
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode/Links.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Links</title>
+ <style>
+ #p1 {
+ margin-bottom: 70em;
+ }
+ </style>
+ </head>
+
+ <body>
+ <h1>Link Examples</h1>
+ <p id="p1">
+ <a href="http://www.jalopnik.com">Jalopnik Web Page</a>
+
+ <br /><br />
+ <a href="http://www.umd.edu"><img src="testudo.jpg" width="84" height="111" alt="Testudos Image" /></a>
+
+ <br /><br />
+ <a href="Image.html">Image Example Page</a>
+
+ <!-- bookmarks allow us to jump to specific parts of a page -->
+ <a href="#courseInfo">Course Info</a>
+
+ <!-- if the bookmark is in another page it can be accessed as follows: -->
+ <a href="BasicHTMLSkeleton.html">Bookmark to BasicHTMLSkeleton</a>
+
+ <a href="#">Current Page Link</a>
+
+ <!-- Opens page in new window/tab -->
+ <br /><br />
+ <a href="Image.html" target="_blank">Image Example Page in New Window/Tab</a>
+
+ </p>
+ <h2 id="courseInfo">Course Info</h2> <!-- id attribute allow us to create bookmark -->
+ <p>
+ Blah Blah Blah, final office hours will be posted later on piazza. Exercise 1 will be posted at the end of the week.
+ </p>
+
+ <a href="#">Current Page Link</a>
+
+ <ul>
+ <li><a href="description.pdf">description.pdf</a></li>
+ <li><a href="description.pdf" download>description.pdf (with download option)</a></li>
+ </ul>
+ </body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode/Lists.html b/codeExamples/week1/IntroHTMLCode/Lists.html
new file mode 100644
index 0000000000000000000000000000000000000000..b77e94081fa5b0f42bdddcbb1c83a11a62ffa647
--- /dev/null
+++ b/codeExamples/week1/IntroHTMLCode/Lists.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Lists</title>
+ </head>
+
+
+ <body>
+ <h2>Unordered List</h2>
+ <ul>
+ <li>Java</li>
+ <li>PHP</li>
+ </ul>
+
+ <h2>Ordered List</h2>
+ <ol>
+ <li>Java</li>
+ <li>PHP</li>
+ </ol>
+
+ <h2>Ordered List (Reversed)</h2>
+ <ol reversed>
+ <li>Java</li>
+ <li>PHP</li>
+ </ol>
+
+ <h2>Nested Lists</h2>
+ <ol>
+ <li>Old Languages
+ <ol>
+ <li>Fortran</li>
+ <li>C</li>
+ </ol>
+ </li>
+
+ <li>New Languages
+ <ul>
+ <li>JavaScript</li>
+ <li>C#</li>
+ </ul>
+ </li>
+ </ol>
+
+ <h2>Definition List</h2>
+ <dl>
+ <dt>cmsc131</dt>
+ <dd>First Java Course</dd>
+ <dt>cmsc132</dt>
+ <dd>Second Java Course</dd>
+ </dl>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroHTMLCode/favicon.ico b/codeExamples/week1/IntroHTMLCode/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..d06a467e8a4930ec8af8dca28ce3ce6b387dfd6b
Binary files /dev/null and b/codeExamples/week1/IntroHTMLCode/favicon.ico differ
diff --git a/codeExamples/week1/IntroHTMLCode/testudo.jpg b/codeExamples/week1/IntroHTMLCode/testudo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..87fe5c80bab6a13bda15eeb0717acdfc449cc4d6
Binary files /dev/null and b/codeExamples/week1/IntroHTMLCode/testudo.jpg differ
diff --git a/codeExamples/week1/IntroJS/TemplateJS.html b/codeExamples/week1/IntroJS/TemplateJS.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef8ca35d69388bce0f4bc8e2c725521906652eab
--- /dev/null
+++ b/codeExamples/week1/IntroJS/TemplateJS.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>JavaScript Program Template</title>
+</head>
+
+<body>
+ <script>
+ // "use strict"; Defines that JavaScript code should be executed in strict mode.
+ // New in ES5
+ "use strict";
+
+ var i = 10;
+ console.log(i);
+
+ /* Your JavaScript here */
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/blockScope.html b/codeExamples/week1/IntroJS/blockScope.html
new file mode 100644
index 0000000000000000000000000000000000000000..0c9ab320af2d790f9eb7a2ff2d6f3b36cceffdaf
--- /dev/null
+++ b/codeExamples/week1/IntroJS/blockScope.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ main();
+
+ function main() {
+ for (let i = 1; i <= 4; i++) {
+ document.writeln(i + "<br>");
+ }
+ document.writeln("Value if i: " + i); //Generates ReferenceError
+ evaluate(200);
+ }
+
+ function evaluate(x) {
+ if (x >= 100) {
+ let y = x * 100;
+ document.writeln("Value in if: " + y);
+ }
+ //return y; // undefined (see console)
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/consoleEx.html b/codeExamples/week1/IntroJS/consoleEx.html
new file mode 100644
index 0000000000000000000000000000000000000000..41d2ef51c7091d5a02248a40e744feb7eb282a57
--- /dev/null
+++ b/codeExamples/week1/IntroJS/consoleEx.html
@@ -0,0 +1,23 @@
+<!doctype html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ var v1 = prompt("Enter value");
+
+ console.log("First value entered: " + v1);
+ var v2 = Number(prompt("Enter positive value"));
+ if (v2 < 0) {
+ console.error("Negative value provided.");
+ } else {
+ console.info("Positive value provided");
+ }
+ console.warn("You should always start your projects early");
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/const.html b/codeExamples/week1/IntroJS/const.html
new file mode 100644
index 0000000000000000000000000000000000000000..411829891a986de28b5325bf23faf907d0bf9e8c
--- /dev/null
+++ b/codeExamples/week1/IntroJS/const.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ main();
+
+ function main() {
+ const MAX_TEMP = 4;
+
+ document.writeln("Contant value: " + MAX_TEMP);
+ MAX_TEMP = 6; // see console
+ }
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/inputOutput.html b/codeExamples/week1/IntroJS/inputOutput.html
new file mode 100644
index 0000000000000000000000000000000000000000..5b3d033a339d117c43cacc6b02d90891a087da1f
--- /dev/null
+++ b/codeExamples/week1/IntroJS/inputOutput.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Input/Output</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ document.writeln("<strong>" + "Bill Calculation System</strong><br />");
+
+ var costPerCredit, numberOfCredits, tuitionCost;
+
+ /* Reading values from the user */
+ costPerCredit = Number(prompt("Enter cost per credit:"));
+ numberOfCredits = prompt("Enter number of credits:");
+
+ /* Computing cost */
+ tuitionCost = costPerCredit * numberOfCredits;
+
+ document.writeln("<strong>Tuition Cost: </strong>" + tuitionCost);
+ </script>
+</body>
+
+</html>
+
diff --git a/codeExamples/week1/IntroJS/network.html b/codeExamples/week1/IntroJS/network.html
new file mode 100644
index 0000000000000000000000000000000000000000..f5905859bb5e49a935360226c4b0b2d966564f7a
--- /dev/null
+++ b/codeExamples/week1/IntroJS/network.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Network</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ /* You need to allow browser pop-ups to run this program */
+ var network = prompt("Enter network name (abc, cbs)");
+ alert("Network specified is: " + network);
+ var webSite;
+
+ switch (network) {
+ case "abc":
+ webSite = "http://www.abc.com/";
+ break;
+ case "cbs":
+ webSite = "http://www.cbs.com/";
+ break;
+ default:
+ webSite = "http://www.cnn.com/";
+ break;
+ }
+ window.open(webSite);
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/noBlockScope.html b/codeExamples/week1/IntroJS/noBlockScope.html
new file mode 100644
index 0000000000000000000000000000000000000000..a8ee484da7346c11974193d688daa1b0c6b12cbb
--- /dev/null
+++ b/codeExamples/week1/IntroJS/noBlockScope.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ main();
+
+ function main() {
+ document.writeln("Value: " + evaluate(200));
+ }
+ function evaluate(x) {
+ document.writeln("Value of y: " + y + "<br>"); // undefined but does not throw an error
+
+ if (x >= 100) {
+ var y = x * 100;
+ }
+ return y; // accessible
+ }
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/sqrTable.html b/codeExamples/week1/IntroJS/sqrTable.html
new file mode 100644
index 0000000000000000000000000000000000000000..5abc63f6b28141a947f407a0af1e8d107481562c
--- /dev/null
+++ b/codeExamples/week1/IntroJS/sqrTable.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Square Root Table</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ var currValue = 0,
+ maximumValue;
+
+ /* Reading a value from the user and verifying is correct */
+ do {
+ maximumValue = Number(prompt("Enter a value"));
+ if (maximumValue < 0)
+ alert("Invalid value: " + maximumValue);
+ } while (maximumValue < 0);
+
+ /* Generating the table */
+ // document.writeln writes a string of text followed by a newline
+ // character to a document. Try also document.write(...)
+ document.writeln("<table border=\"10\">");
+ document.writeln("<caption><strong>Square Root Table</strong></caption>");
+ document.writeln("<tr><th>Number</th><th>Square Root</th></tr>");
+
+ while (currValue <= maximumValue) {
+ document.writeln("<tr><td>" + currValue + "</td><td>" +
+ Math.sqrt(currValue) + "</td></tr>");
+ currValue = currValue + 1;
+ }
+
+ document.writeln("</table>");
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/strict.html b/codeExamples/week1/IntroJS/strict.html
new file mode 100644
index 0000000000000000000000000000000000000000..17030c4ecf7dd1a54a791adc7eadd6d009d02b15
--- /dev/null
+++ b/codeExamples/week1/IntroJS/strict.html
@@ -0,0 +1,21 @@
+<!doctype html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ /* strict mode requires var */
+ var bookTitle = "JavaScript";
+
+ /* Following variable name not allowed in strict mode */
+ /* var interface = 10; */
+ alert(bookTitle);
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/stringMethods.html b/codeExamples/week1/IntroJS/stringMethods.html
new file mode 100644
index 0000000000000000000000000000000000000000..392d2e6e0377f94cf75174f9d3a039eb25021036
--- /dev/null
+++ b/codeExamples/week1/IntroJS/stringMethods.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>String Methods</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ main();
+
+ function main() {
+ var str1 = prompt("Enter string value");
+ var str2 = prompt("Enter string value"),
+ result;
+
+ /* string comparison */
+ if (str1 < str2) {
+ document.writeln(str1 + " < " + str2);
+ } else if (str1 > str2) {
+ document.writeln(str1 + " > " + str2);
+ } else {
+ document.writeln("str1 equal to str2");
+ }
+
+ if (str1.includes(str2)) {
+ document.writeln("<br>" + str1 + " includes " + str2);
+ } else {
+ document.writeln("<br>" + str1 + " does not include " + str2);
+ }
+
+ if (str1.startsWith("the")) {
+ document.writeln("<br>" + str1 + " starts with \"the\"");
+ } else {
+ document.writeln("<br>" + str1 + " does not start with \"the\"");
+ }
+
+ if (str1.endsWith("ing")) {
+ document.writeln("<br>" + str1 + " ends with \"ing\"");
+ } else {
+ document.writeln("<br>" + str1 + " does not end with \"ing\"");
+ }
+
+ document.writeln("<br>\"Fear the turtle\".indexOf(\"the\")→" +
+ "Fear the turtle".indexOf("the"));
+ document.writeln("<br>\"Fear the turtle\".indexOf(\"boat\")→" +
+ "Fear the turtle".indexOf("boat"));
+ document.writeln("<br>\"Fear the turtle\".indexOf(\"\")→" + "Fear the turtle"
+ .indexOf(""));
+ document.writeln("<br>\"Fear the turtle\".lastIndexOf(\"e\")→" +
+ "Fear the turtle".lastIndexOf("e"));
+
+ document.writeln("<br>" + str1 + ".repeat(5)→" + str1.repeat(5));
+ document.writeln("<br>" + "\"Feartheturtle\".slice(2, 7) " + "Feartheturtle".slice(
+ 2, 7));
+ document.writeln("<br>" + "\"Feartheturtle\".slice(-7) " + "Feartheturtle".slice(-7));
+
+ str1 = prompt("Enter comma separated string");
+ var strArray = str1.split(","),
+ i;
+ document.writeln("String components:<br>")
+ for (i = 0; i < strArray.length; i++) {
+ document.writeln(strArray[i] + " Length: " + strArray[i].length + "<br>");
+ }
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/test.js b/codeExamples/week1/IntroJS/test.js
new file mode 100644
index 0000000000000000000000000000000000000000..594a404cebdacb1f8afd33740dcb970dab8cbb21
--- /dev/null
+++ b/codeExamples/week1/IntroJS/test.js
@@ -0,0 +1 @@
+console.log(isNaN(0));
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/warmUp.html b/codeExamples/week1/IntroJS/warmUp.html
new file mode 100644
index 0000000000000000000000000000000000000000..1fe3d0953a9f2486ea6941fa618f7d1478a019c4
--- /dev/null
+++ b/codeExamples/week1/IntroJS/warmUp.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+ <head>
+
+ </head>
+
+ <body>
+ <article class = "names">
+ <div>
+ <p>
+ Text that is styled
+ </p>
+
+ </div>
+
+
+ </article>
+
+
+ </body>
+
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/wrapper.html b/codeExamples/week1/IntroJS/wrapper.html
new file mode 100644
index 0000000000000000000000000000000000000000..09c4f18996ad2fa1c3f938f4d35fa068f7b0cada
--- /dev/null
+++ b/codeExamples/week1/IntroJS/wrapper.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8" />
+ <title>charAt Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ var name = "Testudo";
+ var letter = name.charAt(1); // autoboxing takes place
+ document.writeln("Letter is " + letter + "<br>");
+
+ // JavaScript engine processing for above code
+ name = "Testudo";
+ var x = new String(name);
+ letter = x.charAt(1);
+
+ //x = null; // x will be destroyed once is no longer needed
+ document.writeln("Letter is " + letter);
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/codeExamples/week1/IntroJS/wrapperType.html b/codeExamples/week1/IntroJS/wrapperType.html
new file mode 100644
index 0000000000000000000000000000000000000000..11ee7a367d637df74f84792c712317b2576a7e16
--- /dev/null
+++ b/codeExamples/week1/IntroJS/wrapperType.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8" />
+ <title>Wrapper object type example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ var name = "Testudo";
+ var objName = new String("Testudo");
+
+ if (name == objName) {
+ document.writeln('Same value');
+ } else {
+ document.writeln('Different value');
+ }
+
+ document.writeln("<br>")
+
+ if (name === objName) {
+ document.writeln('Same type!');
+ } else {
+ document.writeln('Different type');
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file