diff --git a/LectureCodeExamples/Week1/CSSICode/ExternalFile.css b/LectureCodeExamples/Week1/CSSICode/ExternalFile.css
new file mode 100755
index 0000000000000000000000000000000000000000..9469602521c316e47589b54009d1bc8a6912e7e9
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/ExternalFile.css
@@ -0,0 +1,7 @@
+h1 {
+ color: red;
+}
+
+p {
+ font-size: 2em;
+}
diff --git a/LectureCodeExamples/Week1/CSSICode/ExternalFile.html b/LectureCodeExamples/Week1/CSSICode/ExternalFile.html
new file mode 100755
index 0000000000000000000000000000000000000000..e4fd69021f313a3d93f9017dfccb898142737232
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/ExternalFile.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <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>
diff --git a/LectureCodeExamples/Week1/CSSICode/InternalStyle.html b/LectureCodeExamples/Week1/CSSICode/InternalStyle.html
new file mode 100755
index 0000000000000000000000000000000000000000..b10bcd0491095dac0bbcff27654553eaf2d9513e
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/InternalStyle.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Internal Style</title>
+ <style>
+ h1 {
+ color: blue;
+ }
+
+ p {
+ font-size: 1.5em;
+ }
+ </style>
+ <link rel="stylesheet" href="ExternalFile.css" type="text/css">
+</head>
+
+<body>
+ <h1>Introduction to CS</h1>
+ <p>The following courses are provided by the Department of Computer Science.
+ </p>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/CSSICode/PropInheritance.css b/LectureCodeExamples/Week1/CSSICode/PropInheritance.css
new file mode 100755
index 0000000000000000000000000000000000000000..d7aa100aeed763c717ccf80976df523cbc353fa0
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/PropInheritance.css
@@ -0,0 +1,13 @@
+article {
+ color: red;
+ border: medium solid;
+}
+
+h2 {
+ color: blue;
+}
+
+article h2 {
+ color: inherit;
+ /* h2 inside article will be red color (not blue)*/
+}
diff --git a/LectureCodeExamples/Week1/CSSICode/PropInheritance.html b/LectureCodeExamples/Week1/CSSICode/PropInheritance.html
new file mode 100755
index 0000000000000000000000000000000000000000..e0959aba0e24e526b1871f8163bdfeb21758558c
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/PropInheritance.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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/LectureCodeExamples/Week1/CSSICode/Selectors.css b/LectureCodeExamples/Week1/CSSICode/Selectors.css
new file mode 100755
index 0000000000000000000000000000000000000000..c751da4ccc85dab2e4254caa1a3e8cce4b4bf430
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/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:white;
+}
+
+a:hover {
+ color: red;
+}
+
+a:active {
+ color: yellow;
+}
+
+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: dashed; /* try solid, dashed, groove, ridge, inset, outset */
+ border-color: red;
+ border-width: .25em;
+ text-align: center; /* try left, right */
+}
+
+th {
+ background-color: #F5DEB3;
+ padding: 8px;
+}
+
+td {
+ background-color: white;
+}
+
+/* class selector */
+.terpStyle1 {
+ color: red;
+ font-style: italic;
+ text-align: center;
+}
+
+/* class selector */
+.terpStyle2 {
+ color: gray;
+ font-style: oblique;
+ text-align: center;
+}
+
+/* class selector */
+.terpStyle3 {
+ 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/LectureCodeExamples/Week1/CSSICode/Selectors.html b/LectureCodeExamples/Week1/CSSICode/Selectors.html
new file mode 100755
index 0000000000000000000000000000000000000000..c766877751485a40df942e555f4a99285984be49
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/Selectors.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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="terpStyle1">
+ 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="terpStyle2 terpStyle3">
+ 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="terpStyle1">
+ 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="terpStyle2">
+ 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/LectureCodeExamples/Week1/CSSICode/SizeRemVsEm.css b/LectureCodeExamples/Week1/CSSICode/SizeRemVsEm.css
new file mode 100755
index 0000000000000000000000000000000000000000..40b51a24feebbfc008ed30f161b4dd02f8857ca6
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/SizeRemVsEm.css
@@ -0,0 +1,37 @@
+html {
+ font-size: 10px;
+}
+
+body {
+ font-size: 20px; /* Affect #p2, #p3 */
+ font-family: Arial, Helvetica, serif;
+ width: 50rem; /* Try 25, 50 , and em */
+ height: 100rem; /* Try 75, 50 and em */
+}
+
+/* To get a sense for rem */
+#p1 {
+ font-size: 1rem;
+ border-style: solid;
+ border-color: red;
+}
+
+/* To get a sense for em */
+#p2 {
+ /* Using em, so it will rely on body font-size */
+ font-size: 1em;
+ border-style: solid;
+ border-color: red;
+}
+
+/* To show <strong> inherits p3's font-size */
+#p3 {
+ font-size: 2em;
+ border-style: solid;
+ border-color: rgb(43, 0, 255);
+}
+
+strong {
+ /* twice font-size of p3 */
+ font-size: 2em; /* equivalent to 8rem */
+}
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSICode/SizeRemVsEm.html b/LectureCodeExamples/Week1/CSSICode/SizeRemVsEm.html
new file mode 100755
index 0000000000000000000000000000000000000000..1c662beaf47abdd1b5e43f6fb19125bb035acde8
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSICode/SizeRemVsEm.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Width/Height</title>
+ <link rel="stylesheet" href="SizeRemVsEm.css">
+</head>
+
+<body>
+ <div>
+ <p id="p1">First Paragraph:<br>
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+
+ <p id="p2">Second Paragraph:<br>
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+
+ <p id="p3">Third Paragraph:<br>
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ <strong>you can do for your country</strong>
+ </p>
+
+ </div>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/CSSICode/bus.gif b/LectureCodeExamples/Week1/CSSICode/bus.gif
new file mode 100755
index 0000000000000000000000000000000000000000..45595ec5801640e52f62f3560a820e0925f833f0
Binary files /dev/null and b/LectureCodeExamples/Week1/CSSICode/bus.gif differ
diff --git a/LectureCodeExamples/Week1/CSSIICode/AttributeSelector.html b/LectureCodeExamples/Week1/CSSIICode/AttributeSelector.html
new file mode 100755
index 0000000000000000000000000000000000000000..0330893bc9fa183fd5a4d3d1fac5a35fe36223c1
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/AttributeSelector.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Child Selectors</title>
+
+ <style>
+ a:link {
+ color: blue;
+ }
+
+ a[title] { /* any a with a title attribute */
+ color: green;
+ }
+
+ a[title="news"] { /* any a with title attribute set to "news" */
+ color: red;
+ }
+
+ input[type = "submit"] { color:purple; text-decoration: underline; }
+ input[type = "submit"]:active { font-size: .75em; }
+ </style>
+
+<body>
+ <h1>Attribute Selector</h1>
+ <p>
+ <a href="http://www.umd.edu">UMD Page</a><br>
+ <a href="http://www.cs.umd.edu" title="CS Page">CS Page</a><br>
+ <a href="http://www.umd.edu" title="news">News</a><br><br>
+ <input type="submit">
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/Background.html b/LectureCodeExamples/Week1/CSSIICode/Background.html
new file mode 100755
index 0000000000000000000000000000000000000000..fa2c413c5773b3b9dfa5524fe037c828d7d342f6
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/Background.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Background</title>
+ <style>
+ /* The following properties can be apply to other elements like p, div, etc.*/
+ body {
+ /* Background properties */
+ background-color: silver;
+ background-image: url(campusBldg.jpg);
+ background-size: 50% 50%; /* Try cover, auto auto */
+ background-repeat: no-repeat; /* Try repeat-y, no-repeat, repeat */
+ background-attachment: fixed; /* Try scroll */
+ background-position: center; /* Try top, right, bottom, left */
+
+ /* Sample shorthand background property */
+ /* background: silver url(campusBldg.jpg) repeat-x fixed center; */
+
+ /* Next description includes image from the internet */
+ /* background-image: url(https://background-tiles.com/overview/white/patterns/large/1029.png); */
+ }
+ </style>
+</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>
+
+ <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>
+ 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>
+ 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>
+ 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>
+ 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>
+ 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>
+ 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>
+ 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>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/BoxModel.html b/LectureCodeExamples/Week1/CSSIICode/BoxModel.html
new file mode 100755
index 0000000000000000000000000000000000000000..8572f5461bb9b34ea367921774ff06abf1428f49
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/BoxModel.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Box Model Tests</title>
+
+ <style>
+ html {
+ font-size: 20px;
+ }
+
+ body {
+ font-family: arial, sans-serif;
+ color: black;
+ background-color: silver;
+ width: 15rem;
+ height: 20rem;
+ border-style: solid;
+ border-color: green;
+ border-width: 0.5em;
+ padding: 1em; /* Change to 0 em, 1 ... 6 em */
+ margin: 5em; /* Change to 0 em, 1 ... 6 em */
+ /* Try
+ padding-left: 5em;
+ margin-left: 5em;
+ */
+ }
+
+ p {
+ border-color: red;
+ border-width: 0.5em;
+ border-style: double;
+ background-color: yellow;
+
+ /* margin-top: 10em; */ /* try padding-top */
+ }
+
+ div {
+ border-color: purple;
+ border-width: 0.5em;
+ border-style: groove;
+ border-radius: 1em; /* Creates round corners */
+ }
+ </style>
+</head>
+
+<body>
+ <p>
+ First paragraph
+ </p>
+
+ <div>
+ div area
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/ChildSelector.html b/LectureCodeExamples/Week1/CSSIICode/ChildSelector.html
new file mode 100755
index 0000000000000000000000000000000000000000..407ef15e566cc75651e757b63961f9953540f14e
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/ChildSelector.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Child Selectors</title>
+
+ <style>
+ body p {
+ color: red;
+ }
+
+ div > p {
+ color: blue;
+ }
+
+ div > div {
+ color: green;
+ }
+ </style>
+
+<body>
+ <h1>Child Selectors</h1>
+ <p>
+ First paragraph
+ </p>
+
+ <div>
+ <p>
+ Paragraph in div
+ </p>
+ <p>
+ Second paragraph in div
+ </p>
+ <div>
+ div child of div
+ </div>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/DescendantSelector.css b/LectureCodeExamples/Week1/CSSIICode/DescendantSelector.css
new file mode 100755
index 0000000000000000000000000000000000000000..580d7a681378d622703f5b1aa36b72ded39fa026
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/DescendantSelector.css
@@ -0,0 +1,15 @@
+body {
+ font-family: arial, sans-serif;
+}
+
+a {
+ font-size: 2em;
+ color: green;
+}
+
+/* When anchor (a) found inside of li override definition */
+li a {
+ font-size: 3em;
+ font-style: italic;
+ color: red;
+}
diff --git a/LectureCodeExamples/Week1/CSSIICode/DescendantSelector.html b/LectureCodeExamples/Week1/CSSIICode/DescendantSelector.html
new file mode 100755
index 0000000000000000000000000000000000000000..1ec1e78541ea788e292c6e6903b0cc17d91b13aa
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/DescendantSelector.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Descendant Selectors</title>
+ <link rel="stylesheet" href="DescendantSelector.css">
+</head>
+
+<body>
+ <h1>Local News</h1>
+ <p>
+ <a href="http://www.diamondbackonline.com/" title="City News">Diamondback</a>
+ </p>
+
+ <h2>World News</h2>
+ <ul>
+ <li><a href="http://www.cnn.com/" title="World News">CNN</a></li>
+ <li>Nightly News</li>
+ </ul>
+</body></html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/GoogleFont.html b/LectureCodeExamples/Week1/CSSIICode/GoogleFont.html
new file mode 100755
index 0000000000000000000000000000000000000000..f20a0a3652a3b188c15eeb7c5892229c84deb130
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/GoogleFont.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="zxx">
+
+<head>
+ <meta charset="utf-8">
+ <title>Google Fonts</title>
+ <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
+
+ <style>
+ /*
+ Alternative to font link above. You use @import in CSS files
+ (NOT IN HTML)
+ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
+ */
+
+ #para2 {
+ font-family: Ubuntu; /* Google's font */
+ }
+ </style>
+</head>
+
+<body>
+ <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>
+
+ <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>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/MediaQuery.html b/LectureCodeExamples/Week1/CSSIICode/MediaQuery.html
new file mode 100755
index 0000000000000000000000000000000000000000..d0c831313451726217384281d070f1724153918b
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/MediaQuery.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="zxx"> <!-- Notice NOT using "en" -->
+
+<head>
+ <meta charset="utf-8">
+ <title>Media Query Tests</title>
+ <style>
+ /* rule will be applied if the size is up to 600px */
+ @media only screen and (max-width: 600px) {
+ body {
+ background-color: purple;
+ }
+ }
+ span {
+ color: red;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Lorem ipsum (<span>Reduce Window Size for Color Change</span>)</h1>
+ <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt dolores esse
+ fuga aliquid, corrupti ut fugit inventore animi illo rerum, voluptas dolorum
+ blanditiis eius voluptatem, ex corporis reprehenderit! Ex, aspernatur cum!
+ Dignissimos dolores unde, est nostrum dolore libero ab molestias inventore
+ incidunt odit saepe a odio necessitatibus optio, ducimus nulla expedita eaque
+ adipisci. Magnam temporibus sunt, corporis voluptas labore hic ad consequuntur
+ corrupti, explicabo eaque ex, molestiae ipsa itaque incidunt quaerat saepe a.
+ Ab minus illo eligendi facilis debitis repudiandae, nemo amet natus eius
+ explicabo impedit? Mollitia quidem officiis reiciendis incidunt numquam dolor
+ voluptatum, sequi excepturi eligendi, illo qui aliquam dignissimos! Similique
+ neque voluptate molestias autem necessitatibus dolorem? Porro iusto assumenda
+ officia saepe voluptate eaque ducimus nisi molestias esse dolor beatae
+ perspiciatis blanditiis suscipit tempora aut distinctio, illo quas illum
+ recusandae, et quo ea deleniti accusamus!
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/PseudoElementsUniv.css b/LectureCodeExamples/Week1/CSSIICode/PseudoElementsUniv.css
new file mode 100755
index 0000000000000000000000000000000000000000..db7bcfc8e80d3062d662718baf3fbc398da20e52
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/PseudoElementsUniv.css
@@ -0,0 +1,28 @@
+html {
+ font-size: 14px;
+}
+
+body {
+ font-family: sans-serif;
+ /* notice, using serif */
+}
+
+* {
+ color: teal;
+}
+
+p * {
+ /* Note that only descendants (not p itself) are affected by this style */
+ color: red;
+}
+
+/* Try first-line instead of first-letter as well */
+p::first-letter {
+ font-weight: bold;
+ font-size: 4rem;
+ /* try with em */
+}
+
+#end::first-letter {
+ color: blue;
+}
diff --git a/LectureCodeExamples/Week1/CSSIICode/PseudoElementsUniv.html b/LectureCodeExamples/Week1/CSSIICode/PseudoElementsUniv.html
new file mode 100755
index 0000000000000000000000000000000000000000..4ebfac3ca5c8b275cc89fa7d932882f9dae00606
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/PseudoElementsUniv.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="PseudoElementsUniv.css" type="text/css">
+ <title>Pseudoelements</title>
+
+ <!-- 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 <span> public higher education in America</span>
+ 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>
+
+ <p id="end">
+ University of MD.
+ </p>
+
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/CSSIICode/ShorthandProperties.css b/LectureCodeExamples/Week1/CSSIICode/ShorthandProperties.css
new file mode 100755
index 0000000000000000000000000000000000000000..eeea7c59d9b31cb31e9ec3d6e0f73243fe3f88e8
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/ShorthandProperties.css
@@ -0,0 +1,49 @@
+body {
+ /* Note multiple values are given as "fallback"s. */
+ font-family: arial, Helvetica, sans-serif;
+}
+
+.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;
+
+
+ /* Description defining the color of each side */
+ border-color: red green blue yellow;
+}
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIICode/ShorthandProperties.html b/LectureCodeExamples/Week1/CSSIICode/ShorthandProperties.html
new file mode 100755
index 0000000000000000000000000000000000000000..5c16268bdb09e5a45c0a563b590d3ae064d81243
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIICode/ShorthandProperties.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Shorthand Properties</title>
+ <link rel="stylesheet" href="ShorthandProperties.css">
+</head>
+
+<body>
+ <h1>Not Using Shorthands</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>
+
+ <h2>Using Shorthands</h2>
+
+ <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/LectureCodeExamples/Week1/CSSIICode/bus.gif b/LectureCodeExamples/Week1/CSSIICode/bus.gif
new file mode 100755
index 0000000000000000000000000000000000000000..45595ec5801640e52f62f3560a820e0925f833f0
Binary files /dev/null and b/LectureCodeExamples/Week1/CSSIICode/bus.gif differ
diff --git a/LectureCodeExamples/Week1/CSSIICode/campusBldg.jpg b/LectureCodeExamples/Week1/CSSIICode/campusBldg.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..0a965bf27cc8fc0d180b454e4b775cfdd38d108d
Binary files /dev/null and b/LectureCodeExamples/Week1/CSSIICode/campusBldg.jpg differ
diff --git a/LectureCodeExamples/Week1/CSSIICode/sean-unsplash.jpg b/LectureCodeExamples/Week1/CSSIICode/sean-unsplash.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..ac24428d566c85f8c9f3545b60ff1a8d7b7ddd3e
Binary files /dev/null and b/LectureCodeExamples/Week1/CSSIICode/sean-unsplash.jpg differ
diff --git a/LectureCodeExamples/Week1/CSSIIICode/CustomProperties.html b/LectureCodeExamples/Week1/CSSIIICode/CustomProperties.html
new file mode 100755
index 0000000000000000000000000000000000000000..8df8265fa79acc6e47fa7fd16b5f148207c5d8f6
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/CustomProperties.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Width/Height</title>
+
+ <style>
+ :root {
+ --my-favorite-color: rgb(128, 0, 119);
+ --my-size: .5em;
+ }
+
+ p {
+ background-color: var(--my-favorite-color, green);
+ font-size: calc(var(--my-size) * 2);
+ }
+ </style>
+</head>
+
+<body>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum diam a diam facilisis, eget scelerisque
+ diam elementum. In vitae venenatis ipsum, at faucibus erat. Aenean mauris est, elementum in odio vitae, aliquet
+ ultricies orci. Fusce metus leo, elementum in lorem nec, vulputate aliquet ante. Pellentesque suscipit quis
+ turpis at luctus. Duis placerat interdum ex, eu bibendum ante consectetur sit amet. Class aptent taciti sociosqu
+ ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eu mi sit amet ante mattis rutrum et in
+ quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eget
+ venenatis mi. Aliquam erat volutpat. Curabitur in hendrerit massa.
+
+ </p>
+ <p>
+ Nulla id odio pellentesque, eleifend nisi eu, venenatis nibh. Maecenas tristique euismod massa, eget venenatis
+ metus porta eu. Aenean sit amet est tortor. Mauris ornare nunc luctus augue gravida interdum. Proin ut lectus
+ semper, finibus dolor ac, rhoncus magna. Nullam in vehicula diam, quis imperdiet lacus. Quisque faucibus ligula
+ eget ante varius, sed rutrum dui sagittis. Proin tincidunt sagittis viverra.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/FlexDisplayProperty.html b/LectureCodeExamples/Week1/CSSIIICode/FlexDisplayProperty.html
new file mode 100755
index 0000000000000000000000000000000000000000..42270f4b880aa9113057afb8c86aa7b9a94907d5
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/FlexDisplayProperty.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Flex Display Property</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem; /* Using rem */
+ }
+
+ #container {
+ display: flex; /* Change to block */
+ flex-direction: row; /* row is the default, try column. row-reverse */
+ align-items: center; /* try center, flex-start, flex-end */
+ justify-content: space-around; /* try space-between, space-evenly */
+ width:36rem; /* Try 60rem */
+ height:40rem;
+ border: 1rem solid green;
+ }
+
+ #item1 {
+ background-color: red;
+ width:6rem;
+ height:8rem;
+ }
+
+ #item2 {
+ background-color: blue;
+ width:10rem;
+ height:10rem;
+ }
+
+ #item3 {
+ background-color: orange;
+ width:12rem;
+ height:8rem;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container">
+ <p id="item1">
+ First item
+ First item
+ </p>
+ <p id="item2">
+ Second item
+ Second item
+ </p>
+ <p id="item3">
+ Third item
+ Third item
+ </p>
+ </div>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/CSSIIICode/FloatI.html b/LectureCodeExamples/Week1/CSSIIICode/FloatI.html
new file mode 100755
index 0000000000000000000000000000000000000000..1b4dc780f4adb2f6dff43eac5ba220e0d546aa04
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/FloatI.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Float</title>
+ <style>
+ :root { /* Notice the use of :root vs .html */
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ width: 40rem;
+ }
+
+ #UMDGlobeImgNone {
+ float: none;
+ }
+
+ #UMDGlobeImgFloatLeft {
+ float: left;
+ }
+
+ #UMDGlobeImgFloatRight {
+ float: right;
+ }
+
+ </style>
+</head>
+
+<body>
+ <h2>float: none</h2>
+ <p>
+ The University of Maryland, College Park is a public research university, the
+ flagship campus of the University System of Maryland and the original 1862
+ <img id="UMDGlobeImgNone" src="UMDGlobe.png" width="73" height="73" alt="UMGGlobe">land-grant
+ institution in the State. It is one of only 62 members of the Association of
+ American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is
+ committed to achieving excellence as the State's primary center of research and
+ graduate education and the institution of choice for undergraduate students of
+ exceptional ability and promise. Note: reduce the size of the window.
+ </p>
+
+ <h2>float: left</h2>
+ <p>
+
+ The University of Maryland, College Park is a public research university, the
+ flagship campus of the University System of Maryland and the original 1862
+ <img id="UMDGlobeImgFloatLeft" src="UMDGlobe.png" width="73" height="73" alt="UMGGlobe">land-grant
+ institution in the State. It is one of only 62 members of the Association of
+ American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is
+ committed to achieving excellence as the State's primary center of research and
+ graduate education and the institution of choice for undergraduate students of
+ exceptional ability and promise. Note: reduce the size of the window.
+ </p>
+
+ <h2>float: right</h2>
+ <p>
+
+ The University of Maryland, College Park is a public research university, the
+ flagship campus of the University System of Maryland and the original 1862
+ <img id="UMDGlobeImgFloatRight" src="UMDGlobe.png" width="73" height="73" alt="UMGGlobe">land-grant
+ institution in the State. It is one of only 62 members of the Association of
+ American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is
+ committed to achieving excellence as the State's primary center of research and
+ graduate education and the institution of choice for undergraduate students of
+ exceptional ability and promise. Note: reduce the size of the window.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/FloatII.html b/LectureCodeExamples/Week1/CSSIIICode/FloatII.html
new file mode 100755
index 0000000000000000000000000000000000000000..910cca82b73b4dc6843d42f1e3ecf5a87ce3d091
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/FloatII.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Float</title>
+ <style>
+ :root {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ width: 50rem;
+ }
+
+ h1 {
+ text-align: center;
+ }
+
+ nav {
+ float: left;
+ }
+
+ nav ul {
+ list-style-type: none;
+ margin-right: 1em;
+ }
+
+ div {
+ float: right;
+ }
+
+ footer {
+ text-align: center;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>UMCP</h1>
+ <nav>
+ <ul>
+ <li><a href="#">Alumni</a></li>
+ <li><a href="#">Faculty</a></li>
+ <li><a href="#">Staff</a></li>
+ <li><a href="#">Parents</a></li>
+ <li><a href="#">Media</a></li>
+ </ul>
+ </nav>
+
+ <div>
+ <ul>
+ <li><a href="#">Local</a></li>
+ <li><a href="#">Department</a></li>
+ <li><a href="#">State</a></li>
+ <li><a href="#">Media</a></li>
+ </ul>
+ </div>
+
+ <main>
+ <p>
+ The University of Maryland, College Park is a public research university, the flagship campus
+ of the University System of Maryland
+ and the original 1862 land-grant institution in the State. It is one of only 62 members of the
+ Association of American Universities,an organization composed of the leading research
+ universities in the United States and Canada. The University of Maryland is committed to
+ achieving excellence as the State's primary center of research and graduate education and
+ the institution of choice for undergraduate students of exceptional ability and promise.
+ <strong>Note: reduce the size of the window.</strong>
+ </p>
+
+ <p>
+ The University creates and applies knowledge for the benefit of the economy and
+ culture of the State, the region, the nation, and beyond. As the flagship of the University
+ System of Maryland, the University shares its research, educational, cultural, and
+ technological strengths with businesses, government, and other educational institutions.
+ The University advances knowledge, provides outstanding and innovative instruction,
+ and nourishes a climate of intellectual growth in a broad range of academic disciplines
+ and interdisciplinary fields.
+ </p>
+ </main>
+
+ <footer>
+ <p>
+ University of Maryland College Park.
+ </p>
+ </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/Grid.html b/LectureCodeExamples/Week1/CSSIIICode/Grid.html
new file mode 100755
index 0000000000000000000000000000000000000000..2aaad75a92e6a2648c9d3d026089170fb3521b55
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/Grid.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Flex Display Property</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ body {
+ font-size: 1.5em;
+ }
+
+ /* main is the container */
+ .container {
+ display: grid;
+ border: .25em solid green;
+ grid-template-columns: 4em 4em; /* we can use auto instead of 4em */
+ grid-template-rows: 2em 2em;
+ justify-content: space-around; /* try space-between, space-evenly*/
+ text-align: center;
+ /* You can modify gaps with the following two properties
+ currently disabled */
+ /*
+ row-gap: 1em;
+ column-gap: 1em;
+ */
+ }
+
+ div {
+ border: .125em solid blue;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <div>One</div>
+ <div>Two</div>
+ <div>Three</div>
+ <div>Four</div>
+ </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/GridTemplateAreas.html b/LectureCodeExamples/Week1/CSSIIICode/GridTemplateAreas.html
new file mode 100755
index 0000000000000000000000000000000000000000..79a702220ca3480b8968aadd10c67ceee912cfc7
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/GridTemplateAreas.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Flex Display Property</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ body {
+ font-size: 1.5em;
+ /* Using rem */
+ }
+
+ /* main is the container */
+ main {
+ display: grid;
+ /* Change to block */
+ grid-template-areas:
+ "header header"
+ /* spans across two cells */
+ "nav content"
+ "footer footer";
+
+ /* one-third and two-thirds */
+ grid-template-columns: 1fr 2fr;
+ }
+
+ header {
+ background-color: red;
+ grid-area: header;
+ text-align: center;
+ }
+
+ nav {
+ background-color: green;
+ grid-area: nav;
+ }
+
+ div {
+ background-color: yellow;
+ grid-area: content;
+ }
+
+ footer {
+ background-color: orange;
+ grid-area: footer;
+ text-align: center;
+ }
+ </style>
+</head>
+
+<body>
+ <main>
+ <header>The Local News</header>
+ <nav>
+ <a href="http://www.cnn.com/">CNN</a>
+ <a href="https://today.umd.edu/">UMD Today</a>
+ </nav>
+ <div>
+ HERE IS THE PAGE CONTENT
+ </div>
+ <footer>Fear the turtle</footer>
+ </main>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/InlineBlockNoneDisplayProperty.html b/LectureCodeExamples/Week1/CSSIIICode/InlineBlockNoneDisplayProperty.html
new file mode 100755
index 0000000000000000000000000000000000000000..d41cb5891b0d0b86b84a37d2efef2b004cb2a2a3
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/InlineBlockNoneDisplayProperty.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Display Property</title>
+ <style>
+ #list1 {
+ display: inline;
+ /* Default is inline; use none to remove list */
+ }
+
+ #list2 a {
+ display: block;
+ }
+
+ #list3 a {
+ display: block;
+ border-style: solid;
+ background-color: yellow;
+ width: 6em;
+ /* Commenting out this property shows block property */
+ text-decoration: none;
+ margin: .25em;
+ text-align: center;
+ }
+ </style>
+</head>
+
+<body>
+ <h2>List #1: inline (default) display property for <a></h2>
+ <div id="list1">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ </div>
+
+ <h2>List #2: block display property for <a></h2>
+ <div id="list2">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ </div>
+
+ <h2>List #3: Block display property for <a> border, background color, width,
+ text-decoration, margin, text-align</h2>
+ <div id="list3">
+ <a href="#">Syllabus</a>
+ <a href="#">Schedule</a>
+ <a href="#">Homework</a>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/PositionAbsoluteContainingBlockBody.html b/LectureCodeExamples/Week1/CSSIIICode/PositionAbsoluteContainingBlockBody.html
new file mode 100755
index 0000000000000000000000000000000000000000..5d97696648e7ce52c0e8005446032ab6215d92e2
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/PositionAbsoluteContainingBlockBody.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Positioning</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ border: 1rem solid green;
+ width: 60rem;
+ height: 50rem;
+ }
+ * {
+ /* Important: to better understanding positioning,
+ we are setting the padding and margin of all
+ elements to zero */
+ padding: 0;
+ margin: 0;
+ }
+
+ p {
+ position: absolute; /* Containing block is the body block */
+ width: 20rem;
+ border-style: solid;
+
+ left: 0rem;
+ top: 0rem;
+ }
+ </style>
+</head>
+
+<body>
+ <p>
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ </p>
+ <p>
+ A second paragraph here.
+ </p>
+ <p>
+ A third paragraph here.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/PositionAbsoluteContainingBlockDiv.html b/LectureCodeExamples/Week1/CSSIIICode/PositionAbsoluteContainingBlockDiv.html
new file mode 100755
index 0000000000000000000000000000000000000000..318f7f8b1b20a0af501f54afa5bc33413d7474d3
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/PositionAbsoluteContainingBlockDiv.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Positioning</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ border: 1rem solid green;
+ width: 60rem;
+ height: 50rem;
+ }
+ * {
+ /* Important: to better understanding positioning,
+ we are setting the padding and margin of all
+ elements to zero */
+ padding: 0;
+ margin: 0;
+ }
+
+ div {
+ top: 4rem;
+ left: 4rem;
+ width: 40rem;
+ height: 40rem;
+ position: fixed; /* Change this to static to see effect of absolute below */
+ border: 1rem solid red;
+ }
+
+ p {
+ position: absolute; /* Containing block is the div */
+ width: 20rem;
+ border-style: solid;
+
+ left: 0rem;
+ top: 0rem;
+ }
+
+ </style>
+</head>
+
+<body>
+ <div> <!-- Paragraph is now in div -->
+ <p>
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ </p>
+ <p>
+ A second paragraph here.
+ </p>
+ <p>
+ A third paragraph here.
+ </p>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/PositionFixed.html b/LectureCodeExamples/Week1/CSSIIICode/PositionFixed.html
new file mode 100755
index 0000000000000000000000000000000000000000..4ead5e1c1bd2c2e39d21e1c77d1d31a7a4b55c44
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/PositionFixed.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Positioning</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ }
+ * {
+ /* Important: to better understanding positioning,
+ we are setting the padding and margin of all
+ elements to zero */
+ padding: 0;
+ margin: 0;
+ }
+
+ p {
+ position: fixed; /* Only change from PositionStatic.html */
+ width: 20rem;
+ border-style: solid;
+
+ /* The following NOW has effect */
+ left: 5rem; /* try 0 */
+ top: 10rem; /* try 0 */
+ }
+ </style>
+</head>
+
+<body>
+ <p>
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ </p>
+ <p>
+ A second paragraph here.
+ </p>
+ <p>
+ A third paragraph here.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/PositionRelative.html b/LectureCodeExamples/Week1/CSSIIICode/PositionRelative.html
new file mode 100755
index 0000000000000000000000000000000000000000..e6db2028f3c9471d126c8ffa4171f302c0dfc8b7
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/PositionRelative.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Positioning</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ }
+ * {
+ /* Important: to better understanding positioning,
+ we are setting the padding and margin of all
+ elements to zero */
+ padding: 0;
+ margin: 0;
+ }
+
+ p {
+ position: relative; /* Only change from PositionStatic.html */
+ width: 20rem;
+ border-style: solid;
+
+ /* The following NOW has effect (space occupied by element still present) */
+ left: 5rem; /* try 0 */
+ top: 10rem; /* try 0 */
+ }
+ </style>
+</head>
+
+<body>
+ <p>
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ </p>
+ <p>
+ A second paragraph here.
+ </p>
+ <p>
+ A third paragraph here.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/PositionStatic.html b/LectureCodeExamples/Week1/CSSIIICode/PositionStatic.html
new file mode 100755
index 0000000000000000000000000000000000000000..b74adb3085b76db0ed6cabcc16d12f974367219f
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/PositionStatic.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Positioning</title>
+ <meta charset="UTF-8"> <!-- Can be in uppercase -->
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ }
+ * {
+ /* Important: to better understanding positioning,
+ we are setting the padding and margin of all
+ elements to zero */
+ padding: 0;
+ margin: 0;
+ }
+
+ p {
+ position: static;
+ width: 20rem;
+ border-style: solid;
+
+ /* The following has no effect */
+ left: 5rem;
+ top: 10rem;
+ }
+ </style>
+</head>
+
+<body>
+ <p>
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ The first paragraph we see.
+ </p>
+ <p>
+ A second paragraph here.
+ </p>
+ <p>
+ A third paragraph here.
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/PositioningZIndex.html b/LectureCodeExamples/Week1/CSSIIICode/PositioningZIndex.html
new file mode 100755
index 0000000000000000000000000000000000000000..ebcd78279fc82c1a86cfc591a25c2808bb56b1d1
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/PositioningZIndex.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <title>Positioning Example</title>
+
+ <meta charset="UTF-8">
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ body {
+ font-size: 1.5rem;
+ }
+ #container {
+ width: 40rem;
+ height: 20rem;
+ border: .25rem solid green;
+ background-color: gray;
+ }
+
+ #par1 {
+ position: relative;
+ top: 5rem;
+ left: 4rem;
+ background-color: orange;
+
+ /* Change to 1 and #par2 z-index to 2 */
+ z-index: 2;
+ }
+
+
+ #par2 {
+ position: relative;
+ top: 2rem;
+ left: 6rem;
+ background-color: aqua;
+
+ /* Change to 2 and #par1 z-index to 1 */
+ z-index: 1;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container">
+ <p id="par1">
+ Fourth paragraph in the document.
+ Fourth paragraph in the document.
+ Fourth paragraph in the document.
+ </p>
+ <p id="par2">
+ Fifth paragraph in the document.
+ Fifth paragraph in the document.
+ Fifth paragraph in the document.
+ </p>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/CSSIIICode/TableFormatting.html b/LectureCodeExamples/Week1/CSSIIICode/TableFormatting.html
new file mode 100755
index 0000000000000000000000000000000000000000..2c4745b4553dae1542e5e612b7522016001237ac
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/TableFormatting.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Tables</title>
+ <style>
+ table, td, th {
+ border: 1px solid gray
+ }
+
+ /* try odd below (replace 2n with 3n, even, odd) */
+ /* afterwards use td instead of tr */
+ /* replace tr with ul to see list effect */
+ tr:nth-child(2n) {background-color: silver}
+ </style>
+</head>
+
+<body>
+ <h1>Scores table</h1>
+ <table>
+ <thead>
+ <tr>
+ <th>Assignment</th>
+ <th>Grade</th>
+ <th>Day</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>Project #1</td>
+ <td>100</td>
+ <td>Wed</td>
+ </tr>
+ <tr>
+ <td>Project #2</td>
+ <td>90</td>
+ <td>Fri</td>
+ </tr>
+ <tr>
+ <td>Project #3</td>
+ <td>85</td>
+ <td>Thu</td>
+ </tr>
+ <tr>
+ <td>Project #4</td>
+ <td>87</td>
+ <td>Tue</td>
+ </tr>
+ <tr>
+ <td>Project #5</td>
+ <td>90</td>
+ <td>Mon</td>
+ </tr>
+ </tbody>
+
+ <tfoot>
+ <tr>
+ <td colspan="3">UMCP CS Dept</td>
+ </tr>
+ </tfoot>
+ </table>
+
+ <ul>
+ <li>Exam #1</li>
+ <li>Exam #2</li>
+ <li>Exam #3</li>
+ <li>Exam #4</li>
+ <li>Exam #5</li>
+ </ul>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/CSSIIICode/UMDGlobe.png b/LectureCodeExamples/Week1/CSSIIICode/UMDGlobe.png
new file mode 100755
index 0000000000000000000000000000000000000000..10957cd38c312cba41f9546a8bdfd2f426d07cea
Binary files /dev/null and b/LectureCodeExamples/Week1/CSSIIICode/UMDGlobe.png differ
diff --git a/LectureCodeExamples/Week1/CSSIIICode/WidthHeight.html b/LectureCodeExamples/Week1/CSSIIICode/WidthHeight.html
new file mode 100755
index 0000000000000000000000000000000000000000..4c2189eeb2fb7b178de3fb9a173528e69cf54f87
--- /dev/null
+++ b/LectureCodeExamples/Week1/CSSIIICode/WidthHeight.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Width/Height</title>
+
+ <style>
+ html {
+ font-size: 10px;
+ }
+
+ #p1 {
+ width: 20rem;
+ height: 10rem;
+ border: 1rem outset red;
+ }
+
+ #p2 {
+ width: 20rem;
+ height: 10rem;
+ padding-left:2rem;
+ border: 1rem inset blue;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="content">
+ <p id="p1">First Paragraph:<br>
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+
+ <p id="p2">Second Paragraph:<br>
+ And so, my fellow Americans: ask not what your country can do for you - ask what
+ you can do for your country.
+ </p>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLICode/BasicHTMLSkeleton.html b/LectureCodeExamples/Week1/HTMLICode/BasicHTMLSkeleton.html
new file mode 100755
index 0000000000000000000000000000000000000000..d635e443182104ac7fd1c558a79e83ea90546eb3
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/BasicHTMLSkeleton.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8"> <!-- character encoding -->
+
+ <!-- For responsive page and proper scaling based on device -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <meta name="description" content="Basic HTML5 Document">
+ <meta name="keywords" content="HTML5, Responsive">
+ <link rel="icon" href="umd.png" type="image/png">
+ <title>HTML TEMPLATE</title>
+</head>
+
+<body>
+ <strong><q>YOUR HTML CODE GOES HERE</q></strong>
+
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt iusto quod suscipit
+ earum consequuntur! Aliquam harum neque debitis reprehenderit eum omnis odit,
+ optio corrupti a cupiditate amet, possimus animi mollitia?
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
+ possimus sit sed, doloribus ipsam sequi maxime tempora placeat earum
+ eum. Alias dolore accusantium omnis consequuntur? Assumenda accusantium
+ est id autem quo?
+ </p>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/HTMLICode/CharacterReferences.html b/LectureCodeExamples/Week1/HTMLICode/CharacterReferences.html
new file mode 100755
index 0000000000000000000000000000000000000000..d9eb01f991d08032a16554502ffcbee4f2c6c4f6
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/CharacterReferences.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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>
+
+ <br><br>
+ <table>
+ <tr>
+ <th>Unicode</th>
+ <th>Symbol</th>
+ </tr>
+ <tr>
+ <td>Clover</td>
+ <td>♠</td>
+ </tr>
+ <tr>
+ <td>SHAMROCK</td>
+ <td>☘</td>
+ </tr>
+ <tr>
+ <td>BLACK CHESS QUEEN</td>
+ <td>♛</td>
+ </tr>
+ </table>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLICode/CommonTags.html b/LectureCodeExamples/Week1/HTMLICode/CommonTags.html
new file mode 100755
index 0000000000000000000000000000000000000000..2cca51813585df8de38eeaccde1323bc2eb5b0e1
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/CommonTags.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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>
+ 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. Notice the use
+ of the <strong> tag inside the <pre> tag.
+ </p>
+
+ <pre>
+ import javax.swing.*;
+ public static void main(String[] args) {
+ <strong>System.out.println("Fear the turtle");</strong>
+ }
+ </pre>
+
+ <p>Java code printed using <p> tags:
+ </p>
+
+ <p>
+ 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>
+ </p>
+ <p>
+ ðŸˆ
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLICode/CourseDescription.pdf b/LectureCodeExamples/Week1/HTMLICode/CourseDescription.pdf
new file mode 100755
index 0000000000000000000000000000000000000000..2ecccb308e65ab33ad1b661da38f77e5448f0a37
Binary files /dev/null and b/LectureCodeExamples/Week1/HTMLICode/CourseDescription.pdf differ
diff --git a/LectureCodeExamples/Week1/HTMLICode/DataPage.html b/LectureCodeExamples/Week1/HTMLICode/DataPage.html
new file mode 100755
index 0000000000000000000000000000000000000000..416bc236153b1304d280eeb669219a73ad046722
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/DataPage.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zxx">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Data Page</title>
+ <style>
+ #p1 {
+ margin-bottom: 70rem;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Bookmarks</h1>
+ <p id="p1">
+ <a href="http://www.cnn.com">CNN Web Page</a>
+ <a href="http://www.cbs.com">CBS Web Page</a>
+ <a href="http://www.nbc.com">NBC Web Page</a>
+ <a href="http://www.pbs.com">PBS Web Page</a>
+ </p>
+
+ <h1 id="data">Data Sources</h1> <!-- id attribute allow us to create bookmark -->
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, quibusdam. Commodi iure sapiente maiores reiciendis repudiandae iste labore consectetur quam unde dolores, nesciunt eligendi repellat qui quod? Delectus, ipsam maiores.
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea autem error quidem earum. Voluptas ipsa harum doloribus facilis? Tempora sequi unde cum cumque culpa ad aliquam vitae nesciunt soluta odit voluptatem, a corporis deleniti dolorem rerum quisquam reiciendis voluptatum placeat? Quae sequi, aut quam mollitia tenetur architecto quo ipsam soluta veritatis, velit iure neque a ducimus consectetur? Nesciunt modi consectetur eaque beatae atque maxime saepe sapiente tempore cupiditate, non quae. Quidem quos expedita eum fuga aliquid autem natus ab deleniti, illum repudiandae, aliquam ea placeat dolorum excepturi nobis porro officia magni at tempora iusto temporibus nostrum nemo? Soluta culpa aspernatur quas odio sint aperiam repellendus consequuntur quis odit aliquid? Cumque sit est non officiis autem quod exercitationem accusantium fugiat, voluptate illo consequatur deserunt, doloremque quisquam, corporis molestiae beatae minima quaerat esse consectetur assumenda laborum. Quasi, ducimus? Nostrum animi quo qui porro reprehenderit. Aspernatur harum suscipit, sequi molestias id itaque! Accusantium eligendi neque saepe? Porro repudiandae beatae tempora, illum reprehenderit unde consequatur, atque totam aut, recusandae debitis natus a exercitationem soluta eaque fuga voluptates voluptas deleniti harum? Tempora deserunt similique quae consequuntur, culpa distinctio, odit possimus nulla nam accusantium fugit. Enim quia nobis possimus obcaecati perspiciatis doloremque deserunt facilis aspernatur quas maiores tempore, harum ipsa incidunt cupiditate a sint commodi culpa eos ratione. Libero error necessitatibus non asperiores est sapiente dignissimos natus animi iure eius? Ad qui asperiores inventore aliquam dolorum aliquid laborum, voluptatibus laboriosam velit temporibus aperiam amet. Excepturi facere consequuntur inventore illum quibusdam non! Eum labore libero omnis eius provident magnam temporibus voluptates consequatur? Enim quasi maxime animi unde labore alias vitae quidem quo minima, sit aliquid corrupti voluptates? Itaque pariatur eius fugiat molestiae sit eaque iste in praesentium ipsa illo expedita, nisi corporis totam nihil quos ab quo soluta quasi minima excepturi alias id fuga velit? Illo recusandae incidunt fuga repudiandae molestiae dolorem temporibus corrupti neque minus, dolor et odit, doloribus odio voluptatibus vero esse aspernatur aperiam! Odio quisquam provident inventore quam, hic iusto? Voluptate necessitatibus sequi, accusantium at dicta accusamus. Minus quod quibusdam quidem obcaecati cupiditate doloribus consequatur vero itaque perspiciatis sed quos, voluptate aspernatur aut explicabo? Voluptate rem temporibus iusto, esse, obcaecati id unde sunt enim a quam veniam quasi, cumque aspernatur dolores ratione impedit voluptatem ea eos magnam vero eum necessitatibus. Aliquid voluptas obcaecati a soluta fugiat officiis eligendi quidem nulla necessitatibus cum pariatur, maiores id. Doloribus itaque possimus minima delectus inventore, tempora voluptatum recusandae incidunt voluptates voluptatibus labore alias fugiat distinctio accusantium autem in quod deleniti officiis consectetur sunt, ipsam officia adipisci molestias! Cupiditate provident laboriosam minima quae saepe suscipit minus exercitationem perferendis, laudantium ipsa, voluptas debitis perspiciatis in velit adipisci voluptatum ipsam temporibus veritatis hic officia. Illo ab quisquam officiis sequi iusto natus voluptatum ducimus neque itaque enim explicabo, rem quo sint dolores exercitationem minima et impedit cumque. Libero praesentium aliquid temporibus tenetur, nobis reiciendis dolore. Minima voluptatem qui accusamus ratione nobis quae facilis amet officia rerum voluptates, aperiam ducimus libero expedita incidunt voluptas, corrupti tenetur ea voluptatibus. Eveniet voluptatum facere culpa pariatur quis eligendi! Iste error pariatur, exercitationem nihil animi porro architecto sit deserunt voluptatibus! Inventore facilis quaerat omnis temporibus incidunt placeat, labore sed saepe laboriosam possimus veniam esse magnam quo. Inventore itaque ducimus ab, nostrum, quia, aut sequi eum officiis reiciendis quo nemo est modi cupiditate ea omnis doloribus. Ut accusamus quidem, et cupiditate officiis earum doloribus illo, harum necessitatibus sit nihil eaque molestiae libero at, quo excepturi quisquam animi nulla similique optio eveniet voluptatum dolores atque ad? Impedit temporibus hic provident, perferendis delectus quam amet cum esse, voluptatibus et ea labore officiis aspernatur unde a veritatis. Unde nostrum quaerat assumenda expedita eum totam repudiandae laudantium molestias, doloribus voluptates amet ex minus alias aspernatur rem inventore, corporis, aliquid in cum? Culpa reiciendis minus iusto quasi expedita molestias mollitia esse ratione atque velit! Iure veritatis facere amet voluptates commodi cupiditate, deleniti magnam sapiente odio dolores voluptatum accusantium dolore nisi voluptas? Vitae enim provident quasi corrupti ipsam soluta sit fugit amet deleniti quos velit possimus, quas aliquid dolores est quam praesentium quis, facilis nemo nisi unde voluptate? Nam quod laborum dignissimos quisquam maiores nemo inventore eius impedit sequi blanditiis. Unde veniam neque omnis quidem nostrum dolores velit adipisci odit alias vel, illum, assumenda quisquam consequatur asperiores molestiae accusantium. Soluta iure repellendus magnam quidem ea sit cumque at illum ducimus repudiandae consectetur corrupti, aperiam unde velit a pariatur quibusdam optio accusantium sequi nam. Iusto quidem quod optio porro, architecto nostrum reiciendis rem. Ullam repudiandae voluptatem excepturi facere fugiat nostrum nihil, optio voluptate porro impedit culpa qui dolorum? Incidunt ipsum nostrum doloribus dignissimos quisquam itaque sapiente sint, ut deleniti! Doloribus recusandae, officiis, saepe quaerat vitae nesciunt suscipit excepturi, illum ex deleniti porro eligendi? Vel magnam deserunt asperiores possimus dolorem temporibus quisquam unde id beatae pariatur nostrum totam veritatis numquam hic at quia, commodi sunt, excepturi perspiciatis ipsum cumque molestias? Nulla quaerat ullam qui iure neque sed temporibus aperiam voluptate nesciunt velit, eligendi perspiciatis iste impedit veritatis ipsum architecto commodi debitis perferendis? Dolore deleniti autem iste laborum suscipit ratione quis earum quas odit, cumque tenetur, alias vitae rerum excepturi fuga corporis laboriosam numquam quia. Quis doloribus ut ipsum cumque perferendis doloremque laborum voluptatibus aspernatur vel? Sunt maiores modi eveniet accusantium ea soluta officiis aliquam unde, nobis accusamus, minus fugit, dicta laborum commodi provident asperiores excepturi ipsa ullam culpa veniam pariatur. Provident porro reiciendis at minima, totam culpa consequuntur sapiente incidunt hic laudantium neque? Labore magni animi perferendis a praesentium deleniti laboriosam repellendus ratione numquam maiores, minima quia aperiam voluptas aspernatur aut atque ducimus mollitia quibusdam rerum corporis pariatur culpa! Recusandae nostrum iste illum dolores delectus harum asperiores obcaecati, dolorem officiis quidem tenetur amet, voluptates soluta perferendis? Possimus molestias ratione, rerum reiciendis eaque ad iusto sunt esse dolorem! Nobis nihil, doloribus eos, corporis vero dignissimos laudantium illum vel perferendis accusamus soluta dolore obcaecati, ipsa iste aperiam! Inventore libero asperiores est exercitationem! Rerum quaerat magni ab, minus suscipit, laborum alias dignissimos, rem minima omnis illo corporis repudiandae quos sapiente voluptates molestiae est? Optio ducimus aspernatur nostrum possimus veniam!
+
+ </p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLICode/Image.html b/LectureCodeExamples/Week1/HTMLICode/Image.html
new file mode 100755
index 0000000000000000000000000000000000000000..2aa78f8095812eba5fc5a621e002e42c56eb5d8b
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/Image.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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>
+
+ <p>Galaxy photo next to Testudo
+ <!-- Images placed next to each other (notice title attribute)-->
+ <img src="testudo.jpg" title="testudito" width="84" height="111" alt="Testudos' image'">
+ <img src="galaxy.jpeg" width="100" height="200" alt="galaxy">
+ </p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLICode/Links.html b/LectureCodeExamples/Week1/HTMLICode/Links.html
new file mode 100755
index 0000000000000000000000000000000000000000..5708a958e5113d708fab18c8a667114ec2fad8bb
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/Links.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>Links</title>
+ <style>
+ #p1 {
+ margin-bottom: 70rem;
+ }
+ </style>
+</head>
+
+<body>
+ <h1>Link Examples</h1>
+ <p id="p1">
+ <a href="http://www.cnn.com">CNN Web Page</a>
+
+ <br><br>
+
+ Hover over the image.
+ <a href="https://unsplash.com/photos/fUnfEz3VLv4"><img src="galaxy.jpeg" width="100" alt="galaxy"></a>
+
+ <br><br>
+ <a href="Image.html">Image Example Page</a><br>
+
+ <!-- Bookmarks allow us to jump to specific parts of a page -->
+ <a href="#courseInfo">Course Info Bookmark</a><br>
+
+ <!-- If the bookmark is in another page it can be accessed as follows: -->
+ <a href="DataPage.html#data">Bookmark to Data</a><br>
+
+ <!-- <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>
+
+ <br><br>
+ <strong>Empty space follows (scroll down).</strong>
+ </p>
+
+ <h2 id="courseInfo">Course Info</h2> <!-- id attribute allow us to create bookmark -->
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero culpa corporis
+ delectus nisi quod ullam
+ quisquam, laborum temporibus voluptas saepe blanditiis quasi earum, nobis beatae
+ autem inventore nostrum atque
+ voluptate laudantium. Corrupti, facere. Corporis aspernatur vitae ipsam veritatis
+ dolore quaerat, alias dolorum
+ labore beatae expedita aliquid dicta cumque inventore et omnis fuga officia ab?
+ Perspiciatis hic aliquam,
+ consequatur incidunt laborum reiciendis id eligendi quo? Vel blanditiis vero
+ voluptates ex officiis commodi
+ inventore officia, autem delectus voluptatum dolores reprehenderit perspiciatis
+ suscipit. Explicabo modi
+ sapiente nulla aut eligendi.
+ </p>
+
+ <a href="#">Current Page Link</a> <!-- top -->
+
+ <ul>
+ <li><a href="https://en.es-static.us/upl/2013/09/sunrise-red-sea-Graham-Telford-e1489764712368.jpg">
+ <img src="https://en.es-static.us/upl/2013/09/sunrise-red-sea-Graham-Telford-e1489764712368.jpg"
+ alt="sunset" width="200">
+ </a>
+ </li>
+ <li><a href="CourseDescription.pdf">CourseDescription.pdf</a></li>
+ <li><a href="#">Link to current page (top)</a></li> <!-- Current page link -->
+ </ul>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLICode/Lists.html b/LectureCodeExamples/Week1/HTMLICode/Lists.html
new file mode 100755
index 0000000000000000000000000000000000000000..9498620775c214ccd4bd0f4891d94af4411962da
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/Lists.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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/LectureCodeExamples/Week1/HTMLICode/MetaExample.html b/LectureCodeExamples/Week1/HTMLICode/MetaExample.html
new file mode 100755
index 0000000000000000000000000000000000000000..a3b5954dfdbb36c8434fb062b8602f9b1a918e3e
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/MetaExample.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8"> <!-- character encoding -->
+ <!-- For responsive page and proper scaling based on device -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <meta name="description" content="Basic HTML5 Document">
+ <meta name="keywords" content="HTML5, Responsive"> <!-- for search engine optimization (SEO) -->
+ <meta name="author" content="CMSC335">
+
+ <meta http-equiv="refresh" content="2"> <!-- content represents seconds for page refresh -->
+ <title>Meta Tags Example</title>
+</head>
+
+<body>
+ <h1>meta tags example</h1>
+ <div id="display"></div>
+ <p>
+ Clock is possible due to the meta tag.
+ </p>
+ <script>
+ document.querySelector("#display").textContent = new Date();
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/HTMLICode/TableNoBorders.html b/LectureCodeExamples/Week1/HTMLICode/TableNoBorders.html
new file mode 100755
index 0000000000000000000000000000000000000000..e4992470dbf1e17a30555db8d116b493b1ec35bc
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/TableNoBorders.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Table No Borders</title>
+</head>
+
+<body>
+ <table>
+ <caption>Basic Table</caption>
+ <tr>
+ <th></th>
+ <th>Exam1</th>
+ <th>Exam2</th>
+ </tr>
+ <tr>
+ <td>Student1</td>
+ <td>10</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ </table>
+</body></html>
diff --git a/LectureCodeExamples/Week1/HTMLICode/TableTheadTbody.html b/LectureCodeExamples/Week1/HTMLICode/TableTheadTbody.html
new file mode 100755
index 0000000000000000000000000000000000000000..8b989d39560c723409bbffeb1aee192ac11ff83b
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/TableTheadTbody.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Tables</title>
+ <style>
+ table, td, th {
+ border: 1px solid gray
+ }
+
+ </style>
+</head>
+
+<body>
+ <table>
+ <thead>
+ <tr>
+ <th>Assignment</th>
+ <th>Grade</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>Project #1</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td>Project #2</td>
+ <td>90</td>
+ </tr>
+ </tbody>
+
+ <tfoot>
+ <tr>
+ <td colspan="2">UMCP CS Dept</td>
+ </tr>
+ </tfoot>
+ </table>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/HTMLICode/TableWithBorders.html b/LectureCodeExamples/Week1/HTMLICode/TableWithBorders.html
new file mode 100755
index 0000000000000000000000000000000000000000..7cf6953aced280fe0013dc088376195c39c5b35e
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/TableWithBorders.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Tables</title>
+ <style>
+ table, td, th {
+ border: 1px solid gray
+ }
+ </style>
+</head>
+
+<body>
+ <table> <!-- Adding attribute border="1" creates border, but does not validate -->
+ <caption><em>Table Border 1</em></caption>
+ <tr>
+ <th></th>
+ <th>Exam1</th>
+ <th>Exam2</th>
+ </tr>
+ <tr>
+ <td>Student1</td>
+ <td>10</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ </table>
+
+ <!-- Table with colspan -->
+ <table>
+ <caption><em>Table with colspan</em></caption>
+
+ <tr>
+ <th colspan="2">Exam1</th><th>Exam2</th>
+ </tr>
+ <tr>
+ <td>Student1</td>
+ <td>10</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ </table>
+
+ <!-- Table with rowspan (notice thead/tbody) -->
+ <table>
+ <caption><em>Table with rowspan</em></caption>
+ <thead>
+ <tr>
+ <th></th>
+ <th>Exam1</th>
+ <th>Exam2</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Student1</td>
+ <td>10</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td rowspan="3">Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr> <!-- Notice only two entries -->
+ <td>40(Retaken)</td>
+ <td>400(Retaken)</td>
+ </tr>
+ <tr> <!-- Notice only two entries -->
+ <td>60(Retaken)</td>
+ <td>600(Retaken)</td>
+ </tr>
+ </tbody>
+ </table>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLICode/TableWithBordersLongTable.html b/LectureCodeExamples/Week1/HTMLICode/TableWithBordersLongTable.html
new file mode 100755
index 0000000000000000000000000000000000000000..b64ca4c244e9b9ff52da5f0025b92e0d510c6919
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLICode/TableWithBordersLongTable.html
@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Long Table</title>
+ <style>
+ table, td, th {
+ border: 1px solid gray
+ }
+ </style>
+</head>
+
+<body>
+ <p>In Chrome, try <strong>Print...</strong> and then selecting
+ <strong>"Save as PDF"</strong>.
+ <em>Notice how headers appear on each page.</em>
+ </p>
+ <!-- long table -->
+ <table>
+ <caption><em>Long Table</em></caption>
+ <thead>
+ <tr>
+ <th></th>
+ <th>Exam1</th>
+ <th>Exam2</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Student1</td>
+ <td>10</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <th>Student2</th>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ <tr>
+ <td>Student2</td>
+ <td>20</td>
+ <td>200</td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr><td colspan="3">CS Department (UMCP) ©</td></tr>
+ </tfoot>
+ </table>
+</body></html>
diff --git a/LectureCodeExamples/Week1/HTMLICode/galaxy.jpeg b/LectureCodeExamples/Week1/HTMLICode/galaxy.jpeg
new file mode 100755
index 0000000000000000000000000000000000000000..10bddddeb9dee234cde13822911b649293fde29c
Binary files /dev/null and b/LectureCodeExamples/Week1/HTMLICode/galaxy.jpeg differ
diff --git a/LectureCodeExamples/Week1/HTMLICode/testudo.jpg b/LectureCodeExamples/Week1/HTMLICode/testudo.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..87fe5c80bab6a13bda15eeb0717acdfc449cc4d6
Binary files /dev/null and b/LectureCodeExamples/Week1/HTMLICode/testudo.jpg differ
diff --git a/LectureCodeExamples/Week1/HTMLICode/umd.png b/LectureCodeExamples/Week1/HTMLICode/umd.png
new file mode 100755
index 0000000000000000000000000000000000000000..fc19781b95f8a785ded6ea29fcca0a1ca8ac9d62
Binary files /dev/null and b/LectureCodeExamples/Week1/HTMLICode/umd.png differ
diff --git a/LectureCodeExamples/Week1/HTMLIICode/BlockInline.html b/LectureCodeExamples/Week1/HTMLIICode/BlockInline.html
new file mode 100755
index 0000000000000000000000000000000000000000..243dceaf22e1ab003fee791f02f17a96fa3d39b4
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLIICode/BlockInline.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Block/Inline Elements</title>
+</head>
+
+<body>
+ <p>This is a paragram and represents a block element. It extends the full width of the page. <strong>Try resizing this page and see how the paragraph changes</strong></p><p>Even though this HTML is
+ part on the first line it will be display vertically.</p>
+ <h1>Heading which is a block element</h1><ul><li>list is also a block element</li></ul>
+ <p>Images are inline elements <img src="testudo.jpg" alt="testudo's image"><img src="umd.png" alt="umd's image"><img src="testudo.jpg" alt="testudo's image">and appear one after another on a line.
+ <img src="testudo.jpg" alt="testudo's image">
+ <img src="testudo.jpg" alt="testudo's image">
+ <img src="testudo.jpg" alt="testudo's image">
+ <strong>Try resizing the page and see how the images are repositioned.</strong>
+ </p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLIICode/GlobalAttributes.html b/LectureCodeExamples/Week1/HTMLIICode/GlobalAttributes.html
new file mode 100755
index 0000000000000000000000000000000000000000..d8ac206b57d1f6263b8a73f6ab8fbbefc831378d
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLIICode/GlobalAttributes.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Global Attributes</title>
+ <style>
+ table,
+ th,
+ td {
+ border: 0.125em solid black;
+ }
+
+ </style>
+</head>
+
+<body>
+ <h1>Global Attributes</h1>
+ <p contenteditable>This is a paragraph can be modify by the user. Click on
+ this and edit the text.
+ </p>
+ <!-- <hr> creates a horizontal rule -->
+ <hr>
+
+ <h2>Schedule</h2>
+ <table>
+ <tr>
+ <th>Day</th>
+ <th>Supervisor</th>
+ </tr>
+ <tr>
+ <td>Monday</td>
+ <td contenteditable>John (can be changed)</td>
+ </tr>
+ </table>
+
+ <hr>
+ <h2>Todo List (Feel free to add more tasks or edit current ones)</h2>
+ <ol contenteditable>
+ <li>Study</li>
+ <li>Work on the project</li>
+ </ol>
+
+ <hr>
+ <h2>Draggable Image</h2>
+ <p>
+ <img src="testudo.jpg" alt="testudo's image" draggable="true">
+ </p>
+
+ <hr>
+ <h2>Dragged Element Will Be Copied (can copy multiple times)</h2>
+ <div contenteditable dropzone="copy">
+ </div>
+
+ <hr>
+ <h2>To See Hidden</h2>
+ <p>
+ The secret text below is hidden. Edit HTML and remove hidden attribute
+ </p>
+ <h3>Secret Is</h3>
+ <p hidden>
+ The secret is to submit the project early.
+ </p>
+
+
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/HTMLIICode/Html5Elements.html b/LectureCodeExamples/Week1/HTMLIICode/Html5Elements.html
new file mode 100755
index 0000000000000000000000000000000000000000..1219ca6880a93e5336918fe95d0ebdf954fef41b
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLIICode/Html5Elements.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<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>
+
+ <main>
+ <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>
+ </main>
+ <footer>
+ ©UMCP
+ </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLIICode/Miscellaneous.html b/LectureCodeExamples/Week1/HTMLIICode/Miscellaneous.html
new file mode 100755
index 0000000000000000000000000000000000000000..8e35ff4477a4298e5e55070a52f51b25923c42db
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLIICode/Miscellaneous.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Miscellaneous Elements</title>
+</head>
+
+<body>
+ <h1>Miscellaneous</h1>
+ <h2>details Tag</h2>
+ <details>
+ <summary>What the final exam will cover (click to expand)</summary>
+ All topics discussed in lecture and lab<br>
+ (including projects). Make sure you go<br>
+ over the practice material we have<br>
+ posted.
+ </details>
+
+ <h2>figure/figcaption tags</h2>
+ <figure>
+ <img src="testudo.jpg" alt="testudo's img">
+ <figcaption>School's Mascot</figcaption>
+ </figure>
+
+ <h2>meter/mark tag</h2>
+ <p>Representing <mark>78 out of a 100</mark> graphically:
+ <meter value="78" min="0" max="100"></meter>
+ </p>
+
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/HTMLIICode/UsingIFrames.html b/LectureCodeExamples/Week1/HTMLIICode/UsingIFrames.html
new file mode 100755
index 0000000000000000000000000000000000000000..e3ee9c66ae7da752d4dcb3c2013422909faafa99
--- /dev/null
+++ b/LectureCodeExamples/Week1/HTMLIICode/UsingIFrames.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Miscellaneous Elements</title>
+</head>
+
+<body>
+ <h1>ifFrame Examples</h1>
+ <iframe src="GlobalAttributes.html" title="Global Attributes"></iframe>
+
+ <iframe src="Miscellaneous.html" width="500" height="300" title="Miscellaneous">
+ </iframe>
+ <br>
+ <hr>
+
+ <iframe width="300" height="300" src="https://www.youtube.com/embed/tgbNymZ7vqY">
+ </iframe>
+
+ <!-- Will not display the site -->
+ <iframe src="https://www.cnn.com" title="CNN"> </iframe>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/LectureCodeExamples/Week1/HTMLIICode/testudo.jpg b/LectureCodeExamples/Week1/HTMLIICode/testudo.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..87fe5c80bab6a13bda15eeb0717acdfc449cc4d6
Binary files /dev/null and b/LectureCodeExamples/Week1/HTMLIICode/testudo.jpg differ
diff --git a/LectureCodeExamples/Week1/HTMLIICode/umd.png b/LectureCodeExamples/Week1/HTMLIICode/umd.png
new file mode 100755
index 0000000000000000000000000000000000000000..fc19781b95f8a785ded6ea29fcca0a1ca8ac9d62
Binary files /dev/null and b/LectureCodeExamples/Week1/HTMLIICode/umd.png differ
diff --git a/LectureCodeExamples/Week1/JavaScriptIntroCode/SqrTable.html b/LectureCodeExamples/Week1/JavaScriptIntroCode/SqrTable.html
new file mode 100755
index 0000000000000000000000000000000000000000..ffbfde8de89df35df504cd0b6888968506d18074
--- /dev/null
+++ b/LectureCodeExamples/Week1/JavaScriptIntroCode/SqrTable.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <title>Square Root Table</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ let 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=\"2\">");
+ 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>");
+ document.writeln(Math.sqrt(currValue) + "</td></tr>");
+ currValue = currValue + 1;
+ }
+
+ document.writeln("</table>");
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureCodeExamples/Week1/JavaScriptIntroCode/TemplateJS.html b/LectureCodeExamples/Week1/JavaScriptIntroCode/TemplateJS.html
new file mode 100755
index 0000000000000000000000000000000000000000..396ae523a3f55c82f804810e4b2c8524b9e7cb3b
--- /dev/null
+++ b/LectureCodeExamples/Week1/JavaScriptIntroCode/TemplateJS.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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.
+
+ "use strict";
+
+ let value = 10;
+ console.log("value is: " + value);
+ document.writeln("Output available in the console");
+
+ /* Your JavaScript here */
+
+ </script>
+</body>
+
+</html>
diff --git a/LectureSlides/Week1/CSSI.pdf b/LectureSlides/Week1/CSSI.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..d3e46b12ae831526ac1e7fa23be5535d35cc8898
Binary files /dev/null and b/LectureSlides/Week1/CSSI.pdf differ
diff --git a/LectureSlides/Week1/CSSII.pdf b/LectureSlides/Week1/CSSII.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..7c92d9dbbf9217c4affdf3bf7a3f1899668a5d20
Binary files /dev/null and b/LectureSlides/Week1/CSSII.pdf differ
diff --git a/LectureSlides/Week1/CSSIII.pdf b/LectureSlides/Week1/CSSIII.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..feb308786d35b76fd885df1bc6309cca3562edf7
Binary files /dev/null and b/LectureSlides/Week1/CSSIII.pdf differ
diff --git a/LectureSlides/Week1/Fundamentals.pdf b/LectureSlides/Week1/Fundamentals.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..3acbfe3493ff2c5310719b4c5e4645c6f4f9c8b6
Binary files /dev/null and b/LectureSlides/Week1/Fundamentals.pdf differ
diff --git a/LectureSlides/Week1/HTMLI.pdf b/LectureSlides/Week1/HTMLI.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..38e476d8e01cb0011512289bae7366fe132af984
Binary files /dev/null and b/LectureSlides/Week1/HTMLI.pdf differ
diff --git a/LectureSlides/Week1/HTMLII.pdf b/LectureSlides/Week1/HTMLII.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..b7328f89e76a4cad2567a89abaaaf6be3b9f5574
Binary files /dev/null and b/LectureSlides/Week1/HTMLII.pdf differ
diff --git a/LectureSlides/Week1/JavaScriptIntro.pdf b/LectureSlides/Week1/JavaScriptIntro.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..8b57ef5490199c02386bf4288a54aa2ac51aeccd
Binary files /dev/null and b/LectureSlides/Week1/JavaScriptIntro.pdf differ