starting lesson 6

gitdagray · Dec 18, 2021 · c462099 · c462099
1 parent a3ab6e5
commit c462099
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 0 deletions.
diff --git a/06_lesson/about.html b/06_lesson/about.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="author" content="Dave Gray">
+    <meta name="description" content="Hi, I'm Dave Gray. This page is about me.">
+    <title>About Me</title>
+    <link rel="icon" href="html5.png" type="image/x-icon">
+    <link rel="stylesheet" href="main.css" type="text/css">
+</head>
+
+<body>
+    <h1>Hi, I'm Dave Gray</h1>
+
+    <hr>
+
+    <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, laborum. Eum iure, ea, corporis odit
+        excepturi accusamus fugit blanditiis non ipsa, quae asperiores enim esse maiores ipsum illum? Incidunt, ducimus!
+    </p>
+
+    <hr>
+
+    <ul>
+        <li>
+            Download an <a href="html5.png" download>HTML5 favicon</a>
+        </li>
+        <li>
+            Contact me at <a href="mailto:[email protected]">my email address</a>.
+        </li>
+        <li>
+            Dial <a href="tel:+1234567890">my phone number</a>.
+        </li>
+        <li>
+            Open <a href="https://www.google.com/" target="_blank">Google</a> in a new tab.
+        </li>
+    </ul>
+
+    <hr>
+    &lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;
+    <p>
+        <a href="/">Back to Home</a>
+    </p>
+</body>
+
+</html>
diff --git a/06_lesson/html5.png b/06_lesson/html5.png
diff --git a/06_lesson/index.html b/06_lesson/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="author" content="Dave Gray">
+    <meta name="description" content="This page contains all the things I am learning how to create as I learn HTML.">
+    <title>My First Web Page</title>
+    <link rel="icon" href="html5.png" type="image/x-icon">
+    <link rel="stylesheet" href="main.css" type="text/css">
+</head>
+
+<body>
+    <h1>My Goals for the Year</h1>
+
+    <hr>
+
+    <nav>
+        <ul>
+            <li>
+                <a href="#html">Learning HTML</a>
+            </li>
+            <li>
+                <a href="#vacation">Planning a Vacation</a>
+            </li>
+        </ul>
+    </nav>
+
+    <hr>
+
+    <section id="html">
+        <h2>I'm Ready to Learn HTML</h2>
+        <p>This is my first web page.</p>
+
+        <h3>My Daily Schedule</h3>
+        <p>Let me tell you how:</p>
+        <ol>
+            <li>...I learn more about web dev.</li>
+            <li>...I plan out my schedule.</li>
+            <li>...I use resources from <abbr title="Mozilla Developer Network">
+                    <a href="https://developer.mozilla.org/">MDN</a>
+                </abbr>.</li>
+        </ol>
+    </section>
+
+    <hr>
+
+    <section id="vacation">
+        <h2>I Am Also Planning a Vacation</h2>
+        <p>I've been working hard and <em>really need a getaway</em>.</p>
+        <p>I live in <abbr title="Kansas">KS</abbr> so I want visit a beach.</p>
+
+        <h3>Place I'd Like to Visit</h3>
+        <ul>
+            <li>
+                <p>I've heard good things about the Caribbean.</p>
+            </li>
+            <li>
+                <p>I've heard good things about going here:</p>
+                <address>
+                    Margaritaville Island Reserve Riviera Cancún<br>
+                    Bahia Petempich Puerto Morelos, Mexico<br>
+                    Colonia Morelos, México 77580
+                </address>
+            </li>
+        </ul>
+        <!-- TODO: Add more places -->
+        <h3>Places I Want to Avoid</h3>
+        <dl>
+            <dt>North Pole</dt>
+            <dd>I hear this is <strong>cold</strong>!</dd>
+
+            <dt>South Pole</dt>
+            <dd>This is also cold.</dd>
+
+            <dt>Mountain Tops</dt>
+            <dd>These are also cold.</dd>
+        </dl>
+    </section>
+
+    <hr>
+    &lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;
+    <p>
+        <a href="#">Back to Top</a>
+    </p>
+</body>
+
+</html>
diff --git a/06_lesson/main.css b/06_lesson/main.css
@@ -0,0 +1,20 @@
+html {
+    font-size: 22px;
+}
+
+body {
+    background-color: #333;
+    color: whitesmoke;
+}
+
+a {
+    color: aliceblue;
+}
+
+a:visited {
+    color: lightgray;
+}
+
+a:hover, a:active {
+    color: #eee;
+}