-
Notifications
You must be signed in to change notification settings - Fork 796
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added link to starter code for Chapter 6
- Loading branch information
Showing
12 changed files
with
219 additions
and
2 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| <<< © <a href="about.html">Dave Gray</a> >>> | ||
| <p> | ||
| <a href="/">Back to Home</a> | ||
| </p> | ||
| </body> | ||
|
|
||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <!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> | ||
| <header> | ||
| <h1>My Goals for the Year</h1> | ||
|
|
||
| <nav aria-label="primary-navigation"> | ||
| <ul> | ||
| <li> | ||
| <a href="#html">Learning HTML</a> | ||
| </li> | ||
| <li> | ||
| <a href="#vacation">Planning a Vacation</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <hr> | ||
| <main> | ||
| <article id="html"> | ||
| <h2>I'm Ready to Learn HTML</h2> | ||
| <p>This is my first web page.</p> | ||
| <section> | ||
| <h3>HTML5</h3> | ||
| <img src="img/html_logo_300x300.png" alt="HTML5 Logo" title="I am learning HTML5" width="300" | ||
| height="300"> | ||
| <figure> | ||
| <figcaption>An Example of HTML5 code</figcaption> | ||
| <p> | ||
| <code><h1>Hello World!</h1></code> | ||
| </p> | ||
| </figure> | ||
| </section> | ||
| <section> | ||
| <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> | ||
| <aside> | ||
| <details> | ||
| <summary>Guess the <mark>number of hours</mark> I code per day</summary> | ||
| <p>I start at <time datetime="08:00">8 am</time> and I write code for <time datetime="PT3H">3 | ||
| hours</time> every morning.</p> | ||
| </details> | ||
| </aside> | ||
| </section> | ||
| </article> | ||
|
|
||
| <hr> | ||
|
|
||
| <article 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> | ||
|
|
||
| <section> | ||
| <h3>Places I'd Like to Visit</h3> | ||
| <ul> | ||
| <li> | ||
| <p>I've heard good things about the Caribbean.</p> | ||
| <figure> | ||
| <img src="img/caribbean.jpg" alt="Caribbean Beach" | ||
| title="I want to visit a Caribbean beach." width="400" height="225" loading="lazy"> | ||
| <figcaption> | ||
| Caribbean Beach Getaway | ||
| </figcaption> | ||
| </figure> | ||
| </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> | ||
| <figure> | ||
| <img src="img/vacation.jpg" alt="Cancun Vacation" title="It's 5 o'Clock Somewhere!" | ||
| width="400" height="267" loading="lazy"> | ||
| <figcaption> | ||
| A Caribbean Vacation Image | ||
| </figcaption> | ||
| </figure> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| <!-- TODO: Add more places --> | ||
| <section> | ||
| <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> | ||
| </article> | ||
| </main> | ||
| <hr> | ||
| <footer> | ||
| <p> | ||
| <<< © <a href="about.html">Dave Gray</a> >>> | ||
| </p> | ||
| <p> | ||
| <a href="#">Back to Top</a> | ||
| </p> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
e2afe2eThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
table, tr, td, td, caption {
border: 1px solid #eee;
font-family: 'Courier New', Courier, monospace;
border-collapse: collapse;
padding: 0.5rem;
}