Skip to content

Commit c462099

Browse files
gitdagraygitdagray
committed
starting lesson 6
1 parent a3ab6e5 commit c462099

File tree

4 files changed

+155
-0
lines changed

4 files changed

+155
-0
lines changed

‎06_lesson/about.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="author" content="Dave Gray">
7+
<meta name="description" content="Hi, I'm Dave Gray. This page is about me.">
8+
<title>About Me</title>
9+
<link rel="icon" href="html5.png" type="image/x-icon">
10+
<link rel="stylesheet" href="main.css" type="text/css">
11+
</head>
12+
13+
<body>
14+
<h1>Hi, I'm Dave Gray</h1>
15+
16+
<hr>
17+
18+
<p>
19+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, laborum. Eum iure, ea, corporis odit
20+
excepturi accusamus fugit blanditiis non ipsa, quae asperiores enim esse maiores ipsum illum? Incidunt, ducimus!
21+
</p>
22+
23+
<hr>
24+
25+
<ul>
26+
<li>
27+
Download an <a href="html5.png" download>HTML5 favicon</a>
28+
</li>
29+
<li>
30+
Contact me at <a href="mailto:random@email.com">my email address</a>.
31+
</li>
32+
<li>
33+
Dial <a href="tel:+1234567890">my phone number</a>.
34+
</li>
35+
<li>
36+
Open <a href="https://www.google.com/" target="_blank">Google</a> in a new tab.
37+
</li>
38+
</ul>
39+
40+
<hr>
41+
&lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;
42+
<p>
43+
<a href="/">Back to Home</a>
44+
</p>
45+
</body>
46+
47+
</html>

‎06_lesson/html5.png‎

648 Bytes
Loading

‎06_lesson/index.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="author" content="Dave Gray">
7+
<meta name="description" content="This page contains all the things I am learning how to create as I learn HTML.">
8+
<title>My First Web Page</title>
9+
<link rel="icon" href="html5.png" type="image/x-icon">
10+
<link rel="stylesheet" href="main.css" type="text/css">
11+
</head>
12+
13+
<body>
14+
<h1>My Goals for the Year</h1>
15+
16+
<hr>
17+
18+
<nav>
19+
<ul>
20+
<li>
21+
<a href="#html">Learning HTML</a>
22+
</li>
23+
<li>
24+
<a href="#vacation">Planning a Vacation</a>
25+
</li>
26+
</ul>
27+
</nav>
28+
29+
<hr>
30+
31+
<section id="html">
32+
<h2>I'm Ready to Learn HTML</h2>
33+
<p>This is my first web page.</p>
34+
35+
<h3>My Daily Schedule</h3>
36+
<p>Let me tell you how:</p>
37+
<ol>
38+
<li>...I learn more about web dev.</li>
39+
<li>...I plan out my schedule.</li>
40+
<li>...I use resources from <abbr title="Mozilla Developer Network">
41+
<a href="https://developer.mozilla.org/">MDN</a>
42+
</abbr>.</li>
43+
</ol>
44+
</section>
45+
46+
<hr>
47+
48+
<section id="vacation">
49+
<h2>I Am Also Planning a Vacation</h2>
50+
<p>I've been working hard and <em>really need a getaway</em>.</p>
51+
<p>I live in <abbr title="Kansas">KS</abbr> so I want visit a beach.</p>
52+
53+
<h3>Place I'd Like to Visit</h3>
54+
<ul>
55+
<li>
56+
<p>I've heard good things about the Caribbean.</p>
57+
</li>
58+
<li>
59+
<p>I've heard good things about going here:</p>
60+
<address>
61+
Margaritaville Island Reserve Riviera Cancún<br>
62+
Bahia Petempich Puerto Morelos, Mexico<br>
63+
Colonia Morelos, México 77580
64+
</address>
65+
</li>
66+
</ul>
67+
<!-- TODO: Add more places -->
68+
<h3>Places I Want to Avoid</h3>
69+
<dl>
70+
<dt>North Pole</dt>
71+
<dd>I hear this is <strong>cold</strong>!</dd>
72+
73+
<dt>South Pole</dt>
74+
<dd>This is also cold.</dd>
75+
76+
<dt>Mountain Tops</dt>
77+
<dd>These are also cold.</dd>
78+
</dl>
79+
</section>
80+
81+
<hr>
82+
&lt;&lt;&lt; &copy; <a href="about.html">Dave Gray</a> &gt;&gt;&gt;
83+
<p>
84+
<a href="#">Back to Top</a>
85+
</p>
86+
</body>
87+
88+
</html>

‎06_lesson/main.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
html {
2+
font-size: 22px;
3+
}
4+
5+
body {
6+
background-color: #333;
7+
color: whitesmoke;
8+
}
9+
10+
a {
11+
color: aliceblue;
12+
}
13+
14+
a:visited {
15+
color: lightgray;
16+
}
17+
18+
a:hover, a:active {
19+
color: #eee;
20+
}

0 commit comments

Comments
 (0)