├── .devcontainer
    └── devcontainer.json
├── .github
    ├── CODEOWNERS
    ├── ISSUE_TEMPLATE.md
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   └── main.yml
├── .gitignore
├── .vscode
    └── settings.json
├── CONTRIBUTING.md
├── LICENSE
├── NOTICE
├── README.md
├── assets
    ├── apartment.png
    ├── avatar-1.png
    ├── avatar-2.png
    ├── avatar-3.png
    ├── avatar-4.png
    ├── beach.png
    ├── chill-out.mp3
    ├── ella-northridge.png
    ├── flowers.png
    ├── richard-klein.png
    ├── samson-brown.png
    ├── traveling.png
    └── writing-in-a-journal.mp4
├── end
    ├── 01-03-inline-vs-block-elements.html
    ├── 01-04-nesting-elements.html
    ├── 01-05-non-semantic-elements.html
    ├── 02-03-text-content.html
    ├── 02-04-forms.html
    ├── 02-05-tables.html
    ├── 02-06-media-content.html
    ├── 03-01-code-comments.html
    ├── 03-02-debugging-html.html
    ├── 04-01-create-a-blog-post-list.html
    ├── 04-02-create-a-class-schedule.html
    ├── 04-03-create-an-office-hours-schedule.html
    ├── 04-04-create-a-flower-delivery-service.html
    ├── 05-01-the-dom.html
    └── 05-02-dynamically-generate-html-elements-with-javascript.html
├── favicon.ico
├── images
    ├── beach.png
    ├── ella-northridge.png
    ├── richard-klein.png
    └── samson-brown.png
└── start
    ├── 01-03-inline-vs-block-elements.html
    ├── 01-04-nesting-elements.html
    ├── 01-05-non-semantic-elements.html
    ├── 02-03-text-content.html
    ├── 02-04-forms.html
    ├── 02-05-tables.html
    ├── 02-06-media-content.html
    ├── 03-01-code-comments.html
    ├── 03-02-debugging-html.html
    ├── 04-01-create-a-blog-post-list.html
    ├── 04-02-create-a-class-schedule.html
    ├── 04-03-create-an-office-hours-schedule.html
    ├── 04-04-create-a-flower-delivery-service.html
    ├── 05-01-the-dom.html
    └── 05-02-dynamically-generate-html-with-javascript.html


/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extensions": [
 3 |     "GitHub.github-vscode-theme",
 4 |     "esbenp.prettier-vscode",
 5 |     "dbaeumer.vscode-eslint",
 6 |     "ritwickdey.LiveServer",
 7 |     "stylelint.vscode-stylelint"
 8 |     // Additional Extensions Here
 9 |   ],
10 |   "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc" //Set Terminal Prompt to $
11 | }
12 | 
13 | // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference
14 | 


--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # Codeowners for these exercise files:
2 | # * (asterisk) denotes "all files and folders"
3 | # Example: * @producer @instructor
4 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | BEFORE POSTING YOUR ISSUE:
 3 | - These comments won't show up when you submit the issue.
 4 | - Please use the sections below to provide information about the issue.
 5 | - Be specific: Add as much detail as possible.
 6 | -->
 7 | 
 8 | ## Issue Overview
 9 | <!-- A brief overview of the issue --->
10 | 
11 | ## Describe your environment
12 | <!-- Provide details about your environment: what editor, browser, and other software you are using and any other specifics to your setup -->
13 | 
14 | ## Steps to Reproduce
15 | <!-- Provide an unambiguous set of steps to reproduce this bug. Include code to reproduce, if relevant. Include a live link if available. -->
16 | 1.
17 | 2.
18 | 3.
19 | 4.
20 | 
21 | ## Expected Behavior
22 | <!-- What behavior did you expect? -->
23 | 
24 | ## Current Behavior
25 | <!-- What happened instead of the expected behavior? Describe the difference. -->
26 | 
27 | ## Possible Solution
28 | <!-- Optional: Do you have a fix or a suggestion on how to fix the issue? -->
29 | 
30 | ## Screenshots / Video
31 | <!-- Optional: Add any screenshots or video of the issue if available. -->
32 | 
33 | ## Related Issues
34 | <!-- List related issues -->
35 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!-- This repository *does not* accept pull requests (PRs). All pull requests will be closed. See CONTRIBUTING.md for further details. -->
2 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Copy To Branches
 2 | on:
 3 |   workflow_dispatch:
 4 | jobs:
 5 |   copy-to-branches:
 6 |     runs-on: ubuntu-latest
 7 |     steps:
 8 |       - uses: actions/checkout@v2
 9 |         with:
10 |           fetch-depth: 0
11 |       - name: Copy To Branches Action
12 |         uses: planetoftheweb/copy-to-branches@v1.2
13 |         env:
14 |           key: main
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | .tmp
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.bracketPairColorization.enabled": true,
 3 |   "editor.cursorBlinking": "solid",
 4 |   "editor.fontFamily": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace",
 5 |   "editor.fontLigatures": false,
 6 |   "editor.fontSize": 22,
 7 |   "editor.formatOnPaste": true,
 8 |   "editor.formatOnSave": true,
 9 |   "editor.lineNumbers": "on",
10 |   "editor.matchBrackets": "always",
11 |   "editor.minimap.enabled": false,
12 |   "editor.smoothScrolling": true,
13 |   "editor.tabSize": 2,
14 |   "editor.useTabStops": true,
15 |   "emmet.triggerExpansionOnTab": true,
16 |   "explorer.openEditors.visible": 0,
17 |   "files.autoSave": "afterDelay",
18 |   "screencastMode.onlyKeyboardShortcuts": true,
19 |   "terminal.integrated.fontSize": 18,
20 |   "workbench.activityBar.visible": true,
21 |   "workbench.colorTheme": "Visual Studio Dark",
22 |   "workbench.fontAliasing": "antialiased",
23 |   "workbench.statusBar.visible": true,
24 |   "liveServer.settings.root": "/docs",
25 |   "prettier.enable": true,
26 |   "eslint.alwaysShowStatus": false,
27 |   "liveServer.settings.donotVerifyTags": true,
28 |   "liveServer.settings.port": 5501
29 | }
30 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | 
2 | Contribution Agreement
3 | ======================
4 | 
5 | This repository does not accept pull requests (PRs). All pull requests will be closed.
6 | 
7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license.
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | LinkedIn Learning Exercise Files License Agreement
  2 | ==================================================
  3 | 
  4 | This License Agreement (the "Agreement") is a binding legal agreement
  5 | between you (as an individual or entity, as applicable) and LinkedIn
  6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning
  7 | exercise files in this repository (“Licensed Materials”), you agree to
  8 | be bound by the terms of this Agreement. If you do not agree to these
  9 | terms, do not download or use the Licensed Materials. 
 10 | 
 11 | 1. License.
 12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn
 13 | members during their LinkedIn Learning subscription a non-exclusive,
 14 | non-transferable copyright license, for internal use only, to 1) make a
 15 | reasonable number of copies of the Licensed Materials, and 2) make
 16 | derivative works of the Licensed Materials for the sole purpose of
 17 | practicing skills taught in LinkedIn Learning courses.
 18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject
 19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members
 20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable
 21 | copyright license to distribute the Licensed Materials, except the
 22 | Licensed Materials may not be included in any product or service (or
 23 | otherwise used) to instruct or educate others.
 24 | 
 25 | 2. Restrictions and Intellectual Property. 
 26 | - a. You may not to use, modify, copy, make derivative works of, publish,
 27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the
 28 | Licensed Materials, except as expressly set forth above in Section 1. 
 29 | - b. Linkedin (and its licensors) retains its intellectual property rights
 30 | in the Licensed Materials. Except as expressly set forth in Section 1,
 31 | LinkedIn grants no licenses.
 32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any
 33 | alleged infringement or misappropriation of any intellectual property rights
 34 | of any third party based on modifications you make to the Licensed Materials,
 35 | ii) any claims arising from your use or distribution of all or part of the
 36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold
 37 | harmless, and indemnify LinkedIn and its affiliates (and our and their
 38 | respective employees, shareholders, and directors) from any claim or action
 39 | brought by a third party, including all damages, liabilities, costs and
 40 | expenses, including reasonable attorneys’ fees, to the extent resulting from,
 41 | alleged to have resulted from, or in connection with: (a) your breach of your
 42 | obligations herein; or (b) your use or distribution of any Licensed Materials.
 43 | 
 44 | 3. Open source. This code may include open source software, which may be
 45 | subject to other license terms as provided in the files. 
 46 |  
 47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS”
 48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY,
 49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY
 50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR
 51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR
 52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS
 53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING
 54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A
 55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT.
 56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND
 57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE
 58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA.  NO ADVICE OR
 59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR
 60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT
 61 | EXPRESSLY STATED IN THESE TERMS.
 62 | 
 63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT,
 64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING
 65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER
 66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU
 67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL:
 68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT,
 69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT
 70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS
 71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND
 72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR
 73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE
 74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS.
 75 | 
 76 | 6. Termination. This Agreement automatically terminates upon your breach of
 77 | this Agreement or termination of your LinkedIn Learning subscription. On
 78 | termination, all licenses granted under this Agreement will terminate
 79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this
 80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue
 81 | the availability of some or all of the Licensed Materials at any time for any
 82 | reason.
 83 | 
 84 | 7. Miscellaneous. This Agreement will be governed by and construed in
 85 | accordance with the laws of the State of California without regard to conflict
 86 | of laws principles. The exclusive forum for any disputes arising out of or
 87 | relating to this Agreement shall be an appropriate federal or state court
 88 | sitting in the County of Santa Clara, State of California. If LinkedIn does
 89 | not act to enforce a breach of this Agreement, that does not mean that
 90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does
 91 | not create a partnership, agency relationship, or joint venture between the
 92 | parties.  Neither party has the power or authority to bind the other or to
 93 | create any obligation or responsibility on behalf of the other. You may not,
 94 | without LinkedIn’s prior written consent, assign or delegate any rights or
 95 | obligations under these terms, including in connection with a change of
 96 | control. Any purported assignment and delegation shall be ineffective. The
 97 | Agreement shall bind and inure to the benefit of the parties, their respective
 98 | successors and permitted assigns. If any provision of the Agreement is
 99 | unenforceable, that provision will be modified to render it enforceable to the
100 | extent possible to give effect to the parties’ intentions and the remaining
101 | provisions will not be affected. This Agreement is the only agreement between
102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior
103 | agreements relating to the Licensed Materials.  
104 | 
105 | Last Updated: March 2019
106 | 


--------------------------------------------------------------------------------
/NOTICE:
--------------------------------------------------------------------------------
 1 | Copyright 2023 LinkedIn Corporation
 2 | All Rights Reserved.
 3 | 
 4 | Licensed under the LinkedIn Learning Exercise File License (the "License").
 5 | See LICENSE in the project root for license information.
 6 | 
 7 | Please note, this project may automatically load third party code from external 
 8 | repositories (for example, NPM modules, Composer packages, or other dependencies). 
 9 | If so, such third party code may be subject to other license terms than as set 
10 | forth above. In addition, such third party code may also depend on and load 
11 | multiple tiers of dependencies. Please review the applicable licenses of the 
12 | additional dependencies.
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HTML for Programmers
 2 | This is the repository for the LinkedIn Learning course HTML for Programmers. The full course is available from [LinkedIn Learning][lil-course-url].
 3 | 
 4 | ![HTML for Programmers][lil-thumbnail-url] 
 5 | 
 6 | It’s not surprising that HTML gets overlooked by modern programmers. Programmers often find that HTML is not much like their familiar programming language turf, but having a better understanding of this foundational web technology can enhance your skills as a web developer and allow you to create more robust web applications. In this course, Emma Bostian highlights the practical skills programmers should know about HTML—the anatomy of an HTML element, the difference between blocks and inline elements, and how to properly nest HTML elements. This course is not meant to be a complete overview of HTML—you won’t learn about every individual HTML tag—but instead a comprehensive overview of semantic HTML, showing you how to architect an accessible web page. Join Emma in this course for some hands-on experience with this essential web development language.
 7 | 
 8 | 
 9 | ### Instructor
10 | 
11 | Emma Bostian 
12 |                             
13 | Software Engineer
14 | 
15 |                             
16 | 
17 | Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/emma-bostian).
18 | 
19 | [lil-course-url]: https://www.linkedin.com/learning/html-for-programmers?dApp=59033956
20 | [lil-thumbnail-url]: https://media.licdn.com/dms/image/C560DAQHKNJ3LBCSNYg/learning-public-crop_675_1200/0/1679683700880?e=2147483647&v=beta&t=emOK6Xsxz5R7qgdsfJlj3-zatW-yzR7NynCHzCjTE7I
21 | 


--------------------------------------------------------------------------------
/assets/apartment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/apartment.png


--------------------------------------------------------------------------------
/assets/avatar-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/avatar-1.png


--------------------------------------------------------------------------------
/assets/avatar-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/avatar-2.png


--------------------------------------------------------------------------------
/assets/avatar-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/avatar-3.png


--------------------------------------------------------------------------------
/assets/avatar-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/avatar-4.png


--------------------------------------------------------------------------------
/assets/beach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/beach.png


--------------------------------------------------------------------------------
/assets/chill-out.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/chill-out.mp3


--------------------------------------------------------------------------------
/assets/ella-northridge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/ella-northridge.png


--------------------------------------------------------------------------------
/assets/flowers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/flowers.png


--------------------------------------------------------------------------------
/assets/richard-klein.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/richard-klein.png


--------------------------------------------------------------------------------
/assets/samson-brown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/samson-brown.png


--------------------------------------------------------------------------------
/assets/traveling.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/traveling.png


--------------------------------------------------------------------------------
/assets/writing-in-a-journal.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/assets/writing-in-a-journal.mp4


--------------------------------------------------------------------------------
/end/01-03-inline-vs-block-elements.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Inline vs. Block Elements</title>
 9 | </head>
10 | 
11 | <body>
12 |   <h1>Explore California</h1>
13 |   <p>The official state flag of California was designed by William Todd and first used on June 14, 1846. The flag was
14 |     not
15 |     officially adopted until 1911. The flag features a grizzly bear, a red bar, a star and is one of the most
16 |     recognizable
17 |     state flags in the Nation.
18 |   </p>
19 | 
20 |   <h2>Tour Spotlight</h2>
21 |   <p>This month's spotlight package is <a href="https://explorecalifornia.org/">Cycle California</a>. Whether you are
22 |     looking for some serious downhill thrills to a
23 |     relaxing ride along the coast, you'll find something to love in Cycle California.
24 |   </p>
25 |   <p>Join us each month as we publish a new <a href="https://explorecalifornia.org/">Explore California</a> video
26 |     podcast, with featured tours, customer photos, and some
27 |     exciting new features
28 |   </p>
29 | 
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/end/01-04-nesting-elements.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Nesting Elements</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div>
13 |     <img src="../assets/richard-klein.png" alt="Richard Klein avatar" />
14 |     <h3>Richard Klein</h3>
15 |     <p><a href="https://goo.gl/maps/gecFfuiYXsty1NTy7">Gothenburg</a>, Sweden</p>
16 |     <button>Add Friend</button>
17 |   </div>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/end/01-05-non-semantic-elements.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Non-Semantic Elements</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div>
13 |     <img src="../assets/richard-klein.png" alt="Richard Klein avatar">
14 |     <h3>Richard Klein</h3>
15 |     <p>Gothenburg, <span style="color: blue;">Sweden</span></p>
16 |     <button>Add Friend</button>
17 |   </div>
18 | 
19 |   <div>
20 |     <img src="../assets/ella-northridge.png" alt="Ella Northridge avatar">
21 |     <h3>Ella Northridge</h3>
22 |     <p>Karlsruhe, <span style="color: blue;">Germany</span></p>
23 |     <button>Add Friend</button>
24 |   </div>
25 | 
26 |   <div>
27 |     <img src="../assets/samson-brown.png" alt="Samson Brown avatar">
28 |     <h3>Samson Brown</h3>
29 |     <p>Red Hook, <span style="color: blue;">USA</span></p>
30 |     <button>Add Friend</button>
31 |   </div>
32 | 
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/end/02-03-text-content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Text Content</title>
 9 | </head>
10 | 
11 | <body>
12 |   <h1>The Perfect Baked Potato</h1>
13 |   <h2>How To Bake A Potato</h2>
14 | 
15 |   <h2>Baked Potato FAQ</h2>
16 |   <h3>What Type Of Potato Should I Use?</h3>
17 | 
18 |   <h2>Baked Potato Toppings</h2>
19 | 
20 |   <h2>The Perfect Baked Potato Recipe</h2>
21 | 
22 |   <h3>Description</h3>
23 |   <p>Today I’m going to share with you my great great grandmother’s recipe for a baked potato.</p>
24 | 
25 |   <p>Now, you might be thinking to yourself… “it’s a baked potato, how hard could it be.” But it wasn’t until Easter
26 |     last year when I was preparing dinner with my own mother when I realized how much better a plain baked potato could
27 |     be.</p>
28 | 
29 |   <p>Whether you realize it or not, many factors contribute to how rich and buttery your baked potatoes taste. And there
30 |     are
31 |     a multitude of toppings that can take you from zero to 100 real quick! Today I’ll share with you my family secrets
32 |     so you can wow your own family this holiday season.</p>
33 | 
34 |   <h3>Ingredients</h3>
35 |   <ul>
36 |     <li>5 Russet potatoes</li>
37 |     <li>5 tbsp butter, cut into one tbsp pieces</li>
38 |     <li>Coarse sea salt</li>
39 |     <li>5 strips of bacon, cooked and chopped</li>
40 |     <li>Chives to taste</li>
41 |   </ul>
42 | 
43 | 
44 |   <h3>Instructions</h3>
45 |   <ol>
46 |     <li>Wash potatoes and pierce all over with a fork</li>
47 |     <li>Preheat oven to 450 degrees Fahrenheit</li>
48 |     <li>Bake potatoes in oven for 25 minutes</li>
49 |     <li>Once cooked, top with butter, bacon, chives and sea salt</li>
50 |   </ol>
51 | 
52 | 
53 | </body>
54 | 
55 | </html>


--------------------------------------------------------------------------------
/end/02-04-forms.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Forms</title>
 9 | </head>
10 | <body>
11 |   <form action="" method="post">
12 |     <label for="full-name">Full name</label>
13 |     <br>
14 |     <input type="text" id="full-name" placeholder="Emma Bostian">
15 |     <br>
16 | 
17 |     <label for="email">Email address</label>
18 |     <br>
19 |     <input type="email" id="email" placeholder="bostian@gmail.com">
20 |     <br>
21 | 
22 |     <label for="telephone">Phone number</label>
23 |     <br>
24 |     <input type="tel" id="telephone" placeholder="845-111-6621">
25 |     <br>
26 | 
27 |     <label for="date">Date</label>
28 |     <br>
29 |     <input type="date" id="date">
30 |     <br>
31 | 
32 |     <label for="num-guests">Number of guests</label>
33 |     <br>
34 |     <select name="num-guests" id="num-guests">
35 |       <option value="1">1</option>
36 |       <option value="2">2</option>
37 |       <option value="3">3</option>
38 |       <option value="4">4</option>
39 |     </select>
40 |     <br>
41 | 
42 |     <button type="submit">Submit</button>
43 |   </form>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/end/02-05-tables.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Tables</title>
 9 | </head>
10 | 
11 | <body>
12 |   <table>
13 |     <thead>
14 |       <tr>
15 |         <th>Name</th>
16 |         <th>Breed</th>
17 |         <th>Age</th>
18 |         <th>Owner</th>
19 |       </tr>
20 |     </thead>
21 |     <tbody>
22 |       <tr>
23 |         <td>Sparky</td>
24 |         <td>Dog</td>
25 |         <td>4</td>
26 |         <td>Jasmine</td>
27 |       </tr>
28 |       <tr>
29 |         <td>Lulu</td>
30 |         <td>Rabbit</td>
31 |         <td>2</td>
32 |         <td>Rocky</td>
33 |       </tr>
34 |       <tr>
35 |         <td>Cheeto</td>
36 |         <td>Lizard</td>
37 |         <td>15</td>
38 |         <td>Don</td>
39 |       </tr>
40 |     </tbody>
41 |     <table>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/end/02-06-media-content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Media Content</title>
 9 | </head>
10 | 
11 | <body>
12 |   <!-- Images -->
13 |   <img src="../assets/beach.png" alt="Beach at sunset with a dark pier.">
14 |   <img src="https://explorecalifornia.org/_images/mission_look.jpg"
15 |     alt="A person standing on a beach with rocks in the distance.">
16 |   <!-- Audio -->
17 |   <audio controls>
18 |     <source type="audio/mp3" src="../assets/chill-out.mp3">
19 |   </audio>
20 |   <!-- Video -->
21 |   <video width="450" height="275" controls>
22 |     <source src="../assets/writing-in-a-journal.mp4" type="video/mp4">
23 |     Your browser doesn't support the video tag.
24 |   </video>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/end/03-01-code-comments.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Code Comments</title>
 9 | </head>
10 | 
11 | <body>
12 |   <h1>My Blog Post</h1>
13 |   <!-- This is a comment about my code -->
14 |   <p>This is my blog post content. It's really really interesting!</p>
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/end/03-02-debugging-html.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Debugging HTML</title>
 8 | </head>
 9 | <body>
10 |   <header>
11 |     <nav>
12 |       <ul>
13 |         <li><a href="##">Home</a></li>
14 |         <li><a href="#">About</a></li>
15 |         <li><a href="#">Work</a></li>
16 |         <li><a href="#">Contact</a></li>
17 |       </ul>
18 |     </nav>
19 |   </header>
20 |   <main>
21 |     <div>
22 |       <h1>This is my title</h1>
23 |     </div>
24 |   </main>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/end/04-01-create-a-blog-post-list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create A Blog Post List</title>
 9 | </head>
10 | 
11 | <body>
12 |   <h1>My Blog Posts</h1>
13 |   <!-- Text: -->
14 |   <!-- blogs -->
15 |   <div>
16 |     <!-- blog wrapper -->
17 |     <div>
18 |       <!-- blog content -->
19 |       <div>
20 |         <h2>The Art Of Growing Sunflowers - Why It's Not As Easy As You Might Think</h2>
21 |         <p>Known as one of the happiest flowers, sunflowers seem like they'd be easy to grow...or do they.</p>
22 |         <span>Gardening</span>
23 |         <span>5 min read</span>
24 |       </div>
25 |       <img src="../assets/flowers.png"
26 |         alt="A yellow flower and a purple flower surrounded by other pink and yellow flowers.">
27 |     </div>
28 | 
29 |     <!-- blog wrapper -->
30 |     <div>
31 |       <!-- blog content -->
32 |       <div>
33 |         <h2>4 Ways I've Made Extra Income To Pay Off My Mortgage</h2>
34 |         <p>It's not an easy path, but the road to financial freedom sure is worth it.</p>
35 |         <span>Finance</span>
36 |         <span>8 min read</span>
37 |       </div>
38 |       <img src="../assets/apartment.png" alt="A modern white apartment building with a blue sky.">
39 |     </div>
40 | 
41 |     <!-- blog wrapper -->
42 |     <div>
43 |       <!-- blog content -->
44 |       <div>
45 |         <h2>How To Travel The World Full Time On A Budget</h2>
46 |         <p>Tips on how you can travel for cheap and experience the world.</p>
47 |         <span>Travel</span>
48 |         <span>4 min read</span>
49 |       </div>
50 |       <img src="../assets/traveling.png" alt="A person wearing a hat in the airport with a clock in the background.">
51 |     </div>
52 |   </div>
53 | 
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/end/04-02-create-a-class-schedule.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create A Class Schedule</title>
 9 | </head>
10 | 
11 | <body>
12 |   <table>
13 |     <thead>
14 |       <tr>
15 |         <th>Class</th>
16 |         <th>Teacher</th>
17 |         <th>Room</th>
18 |         <th>Day</th>
19 |         <th>Time</th>
20 |       </tr>
21 |     </thead>
22 |     <tbody>
23 |       <tr>
24 |         <td>Economics</td>
25 |         <td>Rhys</td>
26 |         <td>AG12</td>
27 |         <td>MWF</td>
28 |         <td>9:00 - 10:15</td>
29 |       </tr>
30 |       <tr>
31 |         <td>European History</td>
32 |         <td>Brown</td>
33 |         <td>RH9</td>
34 |         <td>TR</td>
35 |         <td>10:00 - 12:00</td>
36 |       </tr>
37 |       <tr>
38 |         <td>Calculus II</td>
39 |         <td>Simon</td>
40 |         <td>R255</td>
41 |         <td>F</td>
42 |         <td>17:00 - 20:00</td>
43 |       </tr>
44 |       <tr>
45 |         <td>French</td>
46 |         <td>McGinness</td>
47 |         <td>AG9</td>
48 |         <td>MWF</td>
49 |         <td>11:30 - 12:50</td>
50 |       </tr>
51 |       <tr>
52 |         <td>Computer Science</td>
53 |         <td>Rogers</td>
54 |         <td>RB13</td>
55 |         <td>TRF</td>
56 |         <td>15:00 - 16:00</td>
57 |       </tr>
58 |     </tbody>
59 |   </table>
60 | </body>
61 | 
62 | </html>


--------------------------------------------------------------------------------
/end/04-03-create-an-office-hours-schedule.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create An Office Hours Schedule</title>
 9 | </head>
10 | 
11 | <body>
12 |   <table>
13 |     <tr>
14 |       <td></td>
15 |       <th scope="col">Monday</th>
16 |       <th scope="col">Tuesday</th>
17 |       <th scope="col">Wednesday</th>
18 |       <th scope="col">Thursday</th>
19 |       <th scope="col">Friday</th>
20 |     </tr>
21 |     <tr>
22 |       <th scope="row">9:00 - 11:00</th>
23 |       <td>Open</td>
24 |       <td>Closed</td>
25 |       <td>Open</td>
26 |       <td>Closed</td>
27 |       <td>Open</td>
28 |     </tr>
29 |     <tr>
30 |       <th scope="row">11:00 - 12:00</th>
31 |       <td>Closed</td>
32 |       <td>Open</td>
33 |       <td>Closed</td>
34 |       <td>Open</td>
35 |       <td>Open</td>
36 |     </tr>
37 |     <tr>
38 |       <th scope="row">12:00 - 14:00</th>
39 |       <td>Open</td>
40 |       <td>Closed</td>
41 |       <td>Open</td>
42 |       <td>Closed</td>
43 |       <td>Open</td>
44 |     </tr>
45 |     <tr>
46 |       <th scope="row">14:00 - 16:00</th>
47 |       <td>Open</td>
48 |       <td>Open</td>
49 |       <td>Open</td>
50 |       <td>Open</td>
51 |       <td>Closed</td>
52 |     </tr>
53 |     <tr>
54 |       <th scope="row">16:00 - 18:00</th>
55 |       <td>Closed</td>
56 |       <td>Open</td>
57 |       <td>Closed</td>
58 |       <td>Open</td>
59 |       <td>Closed</td>
60 |     </tr>
61 |   </table>
62 | </body>
63 | 
64 | </html>


--------------------------------------------------------------------------------
/end/04-04-create-a-flower-delivery-service.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create A Flower Delivery Service</title>
 9 | </head>
10 | 
11 | <body>
12 |   <form action="">
13 |     <!-- contact section-->
14 |     <div>
15 |       <!-- recipient details -->
16 |       <div>
17 |         <h2>Recipient Details</h2>
18 |         <label for="recipient-name">Full name</label> <br>
19 |         <input type="text" id="recipient-name"> <br>
20 | 
21 |         <label for="recipient-telephone">Telephone Number</label> <br>
22 |         <input type="tel" id="recipient-telephone"> <br>
23 | 
24 |         <label for="recipient-address">Address</label> <br>
25 |         <input type="text" id="recipient-address">
26 |       </div>
27 |       <!-- sender details -->
28 |       <div>
29 |         <h2>Sender Details</h2>
30 |         <label for="sender-name">Full Name</label> <br>
31 |         <input type="text" id="sender-name"> <br>
32 | 
33 |         <label for="sender-email">Email Address</label> <br>
34 |         <input type="email" id="sender-email"> <br>
35 |       </div>
36 |     </div>
37 |     <!-- order section-->
38 |     <div>
39 |       <h2>Order</h2>
40 |       <label for="bouquet-select">Bouquet Type</label> <br>
41 |       <select name="bouquet-type" id="bouquet-select">
42 |         <option value="basic">Basic Bouquet - $24.99</option>
43 |         <option value="premium">Premium Bouquet - $49.99</option>
44 |         <option value="premium-plus">Premium Bouquet + Chocolate - $69.99</option>
45 |       </select> <br>
46 | 
47 |       <label for="message-textarea">Message</label> <br>
48 |       <textarea name="message" id="message-textarea"></textarea> <br>
49 | 
50 |       <button type="submit">Checkout</button>
51 |     </div>
52 |   </form>
53 | </body>
54 | 
55 | </html>


--------------------------------------------------------------------------------
/end/05-01-the-dom.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>The DOM</title>
 9 | </head>
10 | 
11 | <body>
12 |   <header id="header">
13 |     <nav id="nav">
14 |       <ul id="nav-list">
15 |         <li id="item-one"><a href="#" id="link-one">Link 1</a></li>
16 |         <li id="item-two"><a href="#" id="link-two">Link 2</a></li>
17 |         <li id="item-three"><a href="#" id="link-three">Link 3</a></li>
18 |       </ul>
19 |     </nav>
20 |   </header>
21 | 
22 |   <script>
23 |     const header = document.querySelector('#header');
24 |     const nav = header.childNodes[1];
25 |     const list = nav.childNodes[1];
26 |     const firstListItem = list.childNodes[1];
27 |     const firstLink = firstListItem.childNodes[0];
28 |     console.log(firstLink);
29 |   </script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/end/05-02-dynamically-generate-html-elements-with-javascript.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Dynamically Generate HTML Elements With JavaScript</title>
 9 | </head>
10 | 
11 | <body>
12 |   <!-- Generate this for each node
13 |   <div>
14 |     <img src="" alt="">
15 |     <h3></h3>
16 |     <p><a href=""></a></p>
17 |     <button></button>
18 |   </div> -->
19 |   <div class="wrapper"></div>
20 | 
21 |   <script>
22 |     const socials = [
23 |       {
24 |         name: 'Mai Sarabia',
25 |         city: 'Berlin',
26 |         country: 'Germany',
27 |         avatar: '../assets/avatar-1.png'
28 |       },
29 |       {
30 |         name: 'Elsa Johansson',
31 |         city: 'Oslo',
32 |         country: 'Norway',
33 |         avatar: '../assets/avatar-2.png'
34 |       },
35 |       {
36 |         name: 'Shonda Green',
37 |         city: 'San Francisco',
38 |         country: 'USA',
39 |         avatar: '../assets/avatar-3.png'
40 |       },
41 |       {
42 |         name: 'Daniel Nagy',
43 |         city: 'Budapest',
44 |         country: 'Hungary',
45 |         avatar: '../assets/avatar-4.png'
46 |       }
47 |     ];
48 | 
49 |     const wrapper = document.querySelector('.wrapper');
50 |     socials.forEach(user => {
51 |       let socialWrapper = document.createElement('div');
52 |       socialWrapper.style = 'border: 1px solid black';
53 | 
54 |       let avatar = document.createElement('img');
55 |       avatar.src = user.avatar;
56 |       avatar.alt = user.name;
57 |       socialWrapper.appendChild(avatar);
58 | 
59 |       let name = document.createElement('h3');
60 |       name.innerText = user.name;
61 |       socialWrapper.appendChild(name);
62 | 
63 |       let location = document.createElement('p');
64 |       location.innerText = user.country;
65 | 
66 |       let city = document.createElement('a');
67 |       city.src = '#';
68 |       city.appendChild(document.createTextNode(`${user.city}, `));
69 | 
70 |       location.prepend(city);
71 |       socialWrapper.appendChild(location);
72 | 
73 |       let addFriendButton = document.createElement('button');
74 |       addFriendButton.innerText = 'Add Friend';
75 |       socialWrapper.append(addFriendButton);
76 | 
77 | 
78 |       wrapper.appendChild(socialWrapper);
79 |     })
80 |   </script>
81 | </body>
82 | 
83 | </html>


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/favicon.ico


--------------------------------------------------------------------------------
/images/beach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/images/beach.png


--------------------------------------------------------------------------------
/images/ella-northridge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/images/ella-northridge.png


--------------------------------------------------------------------------------
/images/richard-klein.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/images/richard-klein.png


--------------------------------------------------------------------------------
/images/samson-brown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinkedInLearning/html-for-programmers-4360013/0145ff979a2ae84487309e053d29559f2a325bac/images/samson-brown.png


--------------------------------------------------------------------------------
/start/01-03-inline-vs-block-elements.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Inline vs. Block Elements</title>
 8 | </head>
 9 | <body>
10 |   <h1>Explore California</h1>
11 |   <p>The official state flag of California was designed by William Todd and first used on June 14, 1846. The flag was not
12 |   officially adopted until 1911. The flag features a grizzly bear, a red bar, a star and is one of the most recognizable
13 |   state flags in the Nation.
14 | </p>
15 | 
16 |   <h2>Tour Spotlight</h2>
17 |   <p>This month's spotlight package is <a href="https://explorecalifornia.org/">Cycle California</a>. Whether you are looking for some serious downhill thrills to a
18 |   relaxing ride along the coast, you'll find something to love in Cycle California.
19 |   </p>
20 |   <p>Join us each month as we publish a new <a href="https://explorecalifornia.org/">Explore California</a> video podcast, with featured tours, customer photos, and some
21 |   exciting new features
22 | </p>
23 |   
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/start/01-04-nesting-elements.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Nesting Elements</title>
 8 | </head>
 9 | 
10 | <body>
11 | 
12 | </body>
13 | 
14 | </html>


--------------------------------------------------------------------------------
/start/01-05-non-semantic-elements.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Non-Semantic Elements</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <img src="../assets/richard-klein.png" alt="Richard Klein avatar">
12 |   <h3>Richard Klein</h3>
13 |   <p>Gothenburg, Sweden</p>
14 |   <button>Add Friend</button>
15 | 
16 |   <img src="../assets/ella-northridge.png" alt="Ella Northridge avatar">
17 |   <h3>Ella Northridge</h3>
18 |   <p>Karlsruhe, Germany</p>
19 |   <button>Add Friend</button>
20 | 
21 |   <img src="../assets/samson-brown.png" alt="Samson Brown avatar">
22 |   <h3>Samson Brown</h3>
23 |   <p>Red Hook, USA</p>
24 |   <button>Add Friend</button>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/start/02-03-text-content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Text Content</title>
 9 | </head>
10 | 
11 | <body>
12 |   The Perfect Baked Potato
13 |   How To Bake A Potato
14 |   Baked Potato FAQ
15 |   What Type Of Potato Should I Use?
16 |   Baked Potato Toppings
17 |   The Perfect Baked Potato Recipe
18 |   Description
19 |   Today I’m going to share with you my great great grandmother’s recipe for a baked potato.
20 |   Now, you might be thinking to yourself… “it’s a baked potato, how hard could it be.” But it wasn’t until Easter
21 |   last
22 |   year when I was preparing dinner with my own mother when I realized how much better a plain baked potato could be.
23 |   Whether you realize it or not, many factors contribute to how rich and buttery your baked potatoes taste. And there
24 |   are
25 |   a multitude of toppings that can take you from zero to 100 real quick! Today I’ll share with you my family secrets
26 |   so
27 |   you can wow your own family this holiday season.
28 | 
29 |   Ingredients
30 |   5 Russet potatoes
31 |   5 tbsp butter, cut into one tbsp pieces
32 |   Coarse sea salt
33 |   5 strips of bacon, cooked and chopped
34 |   Chives to taste
35 | 
36 |   Instructions
37 |   Wash potatoes and pierce all over with a fork
38 |   Preheat oven to 450 degrees Fahrenheit
39 |   Bake potatoes in oven for 25 minutes
40 |   Once cooked, top with butter, bacon, chives and sea salt
41 | 
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/start/02-04-forms.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Forms</title>
 9 | </head>
10 | <body>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/start/02-05-tables.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Tables</title>
 8 | </head>
 9 | <body>
10 |   
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/start/02-06-media-content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Media Content</title>
 9 | </head>
10 | 
11 | <body>
12 |   <!-- Images -->
13 |   <!-- Audio -->
14 |   <!-- Video -->
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/start/03-01-code-comments.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Code Comments</title>
 9 | </head>
10 | 
11 | <body>
12 |   <h1>My Blog Post</h1>
13 |   This is a comment about my code
14 |   <p>This is my blog post content. It's really really interesting!</p>
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/start/03-02-debugging-html.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Debugging HTML</title>
 9 | </head>
10 | 
11 | <body>
12 |   <haeder>
13 |     <nav>
14 |       <ul>
15 |         <li><a href="##">Home</a></li>
16 |         <li><a href="#">About</a></li>
17 |         <li><a href="#">Work</a></li>
18 |         <li><a href="#">Contact</a></li>
19 |       </ul>
20 |     </nav>
21 |   </header>
22 |   <main>
23 |     <div>
24 |       <h1>This is my title
25 |     </div>
26 |     </h1>
27 |   </main>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/start/04-01-create-a-blog-post-list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create A Blog Post List</title>
 9 | </head>
10 | 
11 | <body>
12 |   <!-- Text: -->
13 |   The Art Of Growing Sunflowers - Why It's Not As Easy As You Might Think
14 |   Known as one of the happiest flowers, sunflowers seem like they'd be easy to grow...or do they.
15 |   Gardening
16 |   5 min read
17 | 
18 |   4 Ways I've Made Extra Income To Pay Off My Mortgage
19 |   It's not an easy path, but the road to financial freedom sure is worth it.
20 |   Finance
21 |   8 min read
22 | 
23 |   How To Travel The World Full Time On A Budget
24 |   Tips on how you can travel for cheap and experience the world.
25 |   Travel
26 |   4 min read
27 | 
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/start/04-02-create-a-class-schedule.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create A Class Schedule</title>
 9 | </head>
10 | 
11 | <body>
12 |   
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/start/04-03-create-an-office-hours-schedule.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create An Office Hours Schedule</title>
 9 | </head>
10 | 
11 | <body>
12 |   
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/start/04-04-create-a-flower-delivery-service.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Create A Flower Delivery Service</title>
 9 | </head>
10 | 
11 | <body>
12 |   
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/start/05-01-the-dom.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>The DOM</title>
 9 | </head>
10 | 
11 | <body>
12 |   <header id="header">
13 |     <nav id="nav">
14 |       <ul id="nav-list">
15 |         <li id="item-one"><a href="#" id="link-one">Link 1</a></li>
16 |         <li id="item-two"><a href="#" id="link-two">Link 2</a></li>
17 |         <li id="item-three"><a href="#" id="link-three">Link 3</a></li>
18 |       </ul>
19 |     </nav>
20 |   </header>
21 |   
22 |   <script>
23 |     
24 |   </script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/start/05-02-dynamically-generate-html-with-javascript.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Dynamically Generate HTML Elements With JavaScript</title>
 9 | </head>
10 | 
11 | <body>
12 |   <!-- Generate this for each node
13 |   <div>
14 |     <img src="" alt="">
15 |     <h3></h3>
16 |     <p><a href=""></a></p>
17 |     <button></button>
18 |   </div> -->
19 |   <div class="wrapper"></div>
20 | 
21 |   <script>
22 |     const socials = [
23 |       {
24 |         name: 'Mai Sarabia',
25 |         city: 'Berlin',
26 |         country: 'Germany',
27 |         avatar: '../assets/avatar-1.png'
28 |       },
29 |       {
30 |         name: 'Elsa Johansson',
31 |         city: 'Oslo',
32 |         country: 'Norway',
33 |         avatar: '../assets/avatar-2.png'
34 |       },
35 |       {
36 |         name: 'Shonda Green',
37 |         city: 'San Francisco',
38 |         country: 'USA',
39 |         avatar: '../assets/avatar-3.png'
40 |       },
41 |       {
42 |         name: 'Daniel Nagy',
43 |         city: 'Budapest',
44 |         country: 'Hungary',
45 |         avatar: '../assets/avatar-4.png'
46 |       }
47 |     ];
48 | 
49 |   </script>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------