├── .prettierrc.json
├── CODEOWNERS
├── images
├── firefox2.png
└── firefox-icon.png
├── .github
├── dependabot.yml
├── CODEOWNERS
├── PULL_REQUEST_TEMPLATE
├── ISSUE_TEMPLATE
│ ├── config.yml
│ └── bug.yml
└── labels.json
├── .editorconfig
├── README.md
├── styles
└── style.css
├── CODE_OF_CONDUCT.md
├── REVIEWING.md
├── scripts
└── main.js
├── index.html
├── SECURITY.md
├── CONTRIBUTING.md
└── LICENSE
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # These owners are the default owners for everything in this repo.
2 | * @mdn/content-team
3 |
--------------------------------------------------------------------------------
/images/firefox2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/beginner-html-site-scripted/HEAD/images/firefox2.png
--------------------------------------------------------------------------------
/images/firefox-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/beginner-html-site-scripted/HEAD/images/firefox-icon.png
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: github-actions
4 | directory: /
5 | schedule:
6 | interval: weekly
7 | commit-message:
8 | prefix: "ci(deps): "
9 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: https://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | [*]
7 | indent_style = space
8 | indent_size = 2
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Beginner HTML (HyperText Markup Language) site scripted
2 |
3 | A simple one page website created to help complete beginners learn HTML basics, which in this repo has also had some script added to help beginners learn JavaScript basics. The scripting is explained over the course of the [JavaScript basics](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics) course.
4 |
5 | ## Live site
6 |
7 | [Run the example live](https://mdn.github.io/beginner-html-site-scripted/).
8 |
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # ----------------------------------------------------------------------------
2 | # CODEOWNERS
3 | # ----------------------------------------------------------------------------
4 | # Order is important. The last matching pattern takes precedence.
5 | # See: https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
6 | # ----------------------------------------------------------------------------
7 |
8 | /.github/workflows/ @mdn/engineering
9 | /.github/CODEOWNERS @mdn/engineering
10 | /SECURITY.md @mdn/engineering
11 |
--------------------------------------------------------------------------------
/styles/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 10px;
3 | font-family: 'Open Sans', sans-serif;
4 | }
5 |
6 |
7 | h1 {
8 | font-size: 60px;
9 | text-align: center;
10 | }
11 |
12 | p, li {
13 | font-size: 16px;
14 | line-height: 2;
15 | letter-spacing: 1px;
16 | }
17 |
18 |
19 | html {
20 | background-color: #00539F;
21 | }
22 |
23 | body {
24 | width: 600px;
25 | margin: 0 auto;
26 | background-color: #FF9500;
27 | padding: 0 20px 20px 20px;
28 | border: 5px solid black;
29 | }
30 |
31 | h1 {
32 | margin: 0;
33 | padding: 20px 0;
34 | color: #00539F;
35 | text-shadow: 3px 3px 1px black;
36 | }
37 |
38 | img {
39 | display: block;
40 | margin: 0 auto;
41 | }
42 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE:
--------------------------------------------------------------------------------
1 |
2 |
3 | ### Description
4 |
5 |
6 |
7 | ### Motivation
8 |
9 |
10 |
11 | ### Additional details
12 |
13 |
14 |
15 | ### Related issues and pull requests
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Community Participation Guidelines
2 |
3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines.
4 | For more details, please read the
5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/).
6 |
7 | ## How to Report
8 | For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
9 |
10 |
16 |
--------------------------------------------------------------------------------
/REVIEWING.md:
--------------------------------------------------------------------------------
1 | # Reviewing guide
2 |
3 | ## Values and guidelines
4 |
5 | All reviewers must abide by the [Code of Conduct](CODE_OF_CONDUCT.md); they are also protected by the Code of Conduct.
6 | A reviewer should not tolerate poor behavior and is encouraged to [report any behavior](CODE_OF_CONDUCT.md#Reporting_violations) that violates the Code of Conduct.
7 |
8 | Everyone participating must follow our [Community Participation Guidelines](CODE_OF_CONDUCT.md#Community_Participation_Guidelines)
9 |
10 | ## Review process
11 |
12 | The MDN Web Docs team has a well-defined review process that must be followed by reviewers in all repositories under the GitHub MDN organization.
13 | This process is described in detail on the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) page.
14 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: true
2 | contact_links:
3 | - name: Content or feature request
4 | url: https://github.com/mdn/mdn/issues/new/choose
5 | about: Propose new content for MDN Web Docs or submit a feature request using this link.
6 | - name: MDN GitHub Discussions
7 | url: https://github.com/orgs/mdn/discussions
8 | about: Does the issue involve a lot of changes, or is it hard to split it into actionable tasks? Start a discussion before opening an issue.
9 | - name: MDN Web Docs on Discourse
10 | url: https://discourse.mozilla.org/c/mdn/learn/250
11 | about: Need help with assessments on MDN Web Docs? We have a support community for this purpose on Discourse.
12 | - name: Help with code
13 | url: https://stackoverflow.com/
14 | about: If you are stuck and need help with code, StackOverflow is a great resource.
15 |
--------------------------------------------------------------------------------
/scripts/main.js:
--------------------------------------------------------------------------------
1 | // Image switcher code
2 |
3 | const myImage = document.querySelector("img");
4 |
5 | myImage.addEventListener("click", () => {
6 | const mySrc = myImage.getAttribute("src");
7 | if (mySrc === "images/firefox-icon.png") {
8 | myImage.setAttribute("src", "images/firefox2.png");
9 | } else {
10 | myImage.setAttribute("src", "images/firefox-icon.png");
11 | }
12 | });
13 |
14 |
15 | // Personalized welcome message code
16 |
17 | let myButton = document.querySelector('button');
18 | let myHeading = document.querySelector('h1');
19 |
20 | function setUserName() {
21 | let myName = prompt('Please enter your name.');
22 | if(!myName) {
23 | setUserName();
24 | } else {
25 | localStorage.setItem('name', myName);
26 | myHeading.innerHTML = 'Mozilla is cool, ' + myName;
27 | }
28 | }
29 |
30 | if(!localStorage.getItem('name')) {
31 | setUserName();
32 | } else {
33 | let storedName = localStorage.getItem('name');
34 | myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
35 | }
36 |
37 | myButton.addEventListener("click", () => {
38 | setUserName();
39 | });
40 |
41 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | My test page
6 |
7 |
8 |
9 |
10 |
Mozilla is cool
11 |
12 |
13 |
At Mozilla, we’re a global community of
14 |
15 |
16 |
technologists
17 |
thinkers
18 |
builders
19 |
20 |
21 |
working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.
22 |
23 |
Read the Mozilla Manifesto to learn even more about the values and principles that guide the pursuit of our mission.
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug.yml:
--------------------------------------------------------------------------------
1 | name: "Bug report"
2 | description: Report an unexpected problem or unintended behavior.
3 | labels: ["needs triage"]
4 | body:
5 | - type: markdown
6 | attributes:
7 | value: |
8 | ### Before you start
9 |
10 | **Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community!
11 |
12 | ↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started.
13 |
14 | ---
15 | - type: textarea
16 | id: problem
17 | attributes:
18 | label: What information was incorrect, unhelpful, or incomplete?
19 | validations:
20 | required: true
21 | - type: textarea
22 | id: expected
23 | attributes:
24 | label: What did you expect to see?
25 | validations:
26 | required: true
27 | - type: textarea
28 | id: references
29 | attributes:
30 | label: Do you have any supporting links, references, or citations?
31 | description: Link to information that helps us confirm your issue.
32 | - type: textarea
33 | id: more-info
34 | attributes:
35 | label: Do you have anything more you want to share?
36 | description: For example, steps to reproduce a bug, screenshots, screen recordings, or sample code
37 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Overview
4 |
5 | This policy applies to MDN's website (`developer.mozilla.org`), backend services, and GitHub repositories in the [`mdn`](https://github.com/mdn) organization. Issues affecting other Mozilla products or services should be reported through the [Mozilla Security Bug Bounty Program](https://www.mozilla.org/en-US/security/bug-bounty/).
6 |
7 | For non-security issues, please file a [content bug](https://github.com/mdn/content/issues/new/choose), a [website bug](https://github.com/mdn/fred/issues/new/choose) or a [content/feature suggestion](https://github.com/mdn/mdn/issues/new/choose).
8 |
9 | ## Reporting a Vulnerability
10 |
11 | If you discover a potential security issue, please report it privately via .
12 |
13 | If you prefer not to use HackerOne, you can report it via .
14 |
15 | ## Bounty Program
16 |
17 | Vulnerabilities in MDN may qualify for Mozilla's Bug Bounty Program. Eligibility and reward amounts are described on .
18 |
19 | Please use the above channels even if you are not interested in a bounty reward.
20 |
21 | ## Responsible Disclosure
22 |
23 | Please do not publicly disclose details until Mozilla's security team and the MDN engineering team have verified and fixed the issue.
24 |
25 | We appreciate your efforts to keep MDN and its users safe.
26 |
--------------------------------------------------------------------------------
/.github/labels.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "good first issue",
4 | "color": "028c46",
5 | "description": "A good issue for newcomers to get started with."
6 | },
7 | {
8 | "name": "help wanted",
9 | "color": "028c46",
10 | "description": "If you know something about this, we would love your help!"
11 | },
12 | {
13 | "name": "needs info",
14 | "color": "028c46",
15 | "description": "This needs more information to review or act on."
16 | },
17 | {
18 | "name": "needs triage",
19 | "color": "028c46",
20 | "description": "Triage needed by staff and/or partners. Automatically applied when an issue is opened."
21 | },
22 | {
23 | "name": "expert help needed",
24 | "color": "028c46",
25 | "description": "This needs more information from a subject matter expert (SME)."
26 | },
27 | {
28 | "name": "idle",
29 | "color": "028c46",
30 | "description": "Issues and pull requests with no activity for three months."
31 | },
32 | {
33 | "name": "on hold",
34 | "color": "028c46",
35 | "description": "Waiting on something else before this can be moved forward."
36 | },
37 | {
38 | "name": "for later",
39 | "color": "028c46",
40 | "description": "Not planned at this time."
41 | },
42 | {
43 | "name": "needs content update",
44 | "color": "028c46",
45 | "description": "Needs update to the content to support this change."
46 | },
47 | {
48 | "name": "chore",
49 | "color": "028c46",
50 | "description": "A routine task."
51 | },
52 | {
53 | "name": "enhancement",
54 | "color": "028c46",
55 | "description": "Improves an existing feature."
56 | },
57 | {
58 | "name": "bug",
59 | "color": "c05964",
60 | "description": "Indicates an unexpected problem or unintended behavior."
61 | },
62 | {
63 | "name": "wontfix",
64 | "color": "c05964",
65 | "description": "Deemed to be outside the scope of the project or would require significant time and resources to fix."
66 | },
67 | {
68 | "name": "effort: small",
69 | "color": "866dc1",
70 | "description": "Task is a small effort."
71 | },
72 | {
73 | "name": "effort: medium",
74 | "color": "866dc1",
75 | "description": "Task is a medium effort."
76 | },
77 | {
78 | "name": "effort: large",
79 | "color": "866dc1",
80 | "description": "Task is large effort."
81 | },
82 | {
83 | "name": "p0",
84 | "color": "6e8bc1",
85 | "description": "Urgent. We will address this as soon as possible."
86 | },
87 | {
88 | "name": "p1",
89 | "color": "6e8bc1",
90 | "description": "We will address this soon and will provide capacity from our team for it in the next few releases."
91 | },
92 | {
93 | "name": "p2",
94 | "color": "6e8bc1",
95 | "description": "We want to address this but may have other higher priority items."
96 | },
97 | {
98 | "name": "p3",
99 | "color": "6e8bc1",
100 | "description": "We don't have visibility when this will be addressed."
101 | }
102 | ]
103 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contribution guide
2 |
3 | 
4 |
5 | - [Ways to contribute](#ways-to-contribute)
6 | - [Finding an issue](#finding-an-issue)
7 | - [Asking for help](#asking-for-help)
8 | - [Pull request process](#pull-request-process)
9 | - [Forking and cloning the project](#forking-and-cloning-the-project)
10 |
11 | Welcome 👋 Thank you for your interest in contributing to MDN Web Docs. We are happy to have you join us! 💖
12 |
13 | As you get started, you are in the best position to give us feedback on project areas we might have forgotten about or assumed to work well.
14 | These include, but are not limited to:
15 |
16 | - Problems found while setting up a new developer environment
17 | - Gaps in our documentation
18 | - Bugs in our automation scripts
19 |
20 | If anything doesn't make sense or work as expected, please open an issue and let us know!
21 |
22 | ## Ways to contribute
23 |
24 | We welcome many different types of contributions including:
25 |
26 | - Identifying and filing issues.
27 | - Providing feedback on existing issues.
28 | - Engaging with the community and answering questions.
29 | - Contributing documentation or code.
30 | - Promoting the project in personal circles and social media.
31 |
32 | ## Finding an issue
33 |
34 | We have issues labeled `good first issue` for new contributors and `help wanted` suitable for any contributor.
35 | Good first issues have extra information to help you make your first contribution a success.
36 | Help wanted issues are ideal when you feel a bit more comfortable with the project details.
37 |
38 | Sometimes there won't be any issues with these labels, but there is likely still something for you to work on.
39 | If you want to contribute but don't know where to start or can't find a suitable issue, speak to us on [Matrix](https://matrix.to/#/#mdn:mozilla.org), and we will be happy to help.
40 |
41 | Once you find an issue you'd like to work on, please post a comment saying you want to work on it.
42 | Something like "I want to work on this" is fine.
43 | Also, mention the community team using the `@mdn/community` handle to ensure someone will get back to you.
44 |
45 | ## Asking for help
46 |
47 | The best way to reach us with a question when contributing is to use the following channels in the following order of precedence:
48 |
49 | - [Start a discussion](https://github.com/orgs/mdn/discussions)
50 | - Ask your question or highlight your discussion on [Matrix](https://matrix.to/#/#mdn:mozilla.org).
51 | - File an issue and tag the community team using the `@mdn/community` handle.
52 |
53 | ## Pull request process
54 |
55 | The MDN Web Docs project has a well-defined pull request process which is documented in the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests).
56 | Make sure you read and understand this process before you start working on a pull request.
57 |
58 | ## Forking and cloning the project
59 |
60 | The first step in setting up your development environment is to [fork the repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo) and [clone](https://docs.github.com/en/get-started/quickstart/fork-a-repo#cloning-your-forked-repository) the repository to your local machine.
61 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | CC0 1.0 Universal
2 |
3 | Statement of Purpose
4 |
5 | The laws of most jurisdictions throughout the world automatically confer
6 | exclusive Copyright and Related Rights (defined below) upon the creator and
7 | subsequent owner(s) (each and all, an "owner") of an original work of
8 | authorship and/or a database (each, a "Work").
9 |
10 | Certain owners wish to permanently relinquish those rights to a Work for the
11 | purpose of contributing to a commons of creative, cultural and scientific
12 | works ("Commons") that the public can reliably and without fear of later
13 | claims of infringement build upon, modify, incorporate in other works, reuse
14 | and redistribute as freely as possible in any form whatsoever and for any
15 | purposes, including without limitation commercial purposes. These owners may
16 | contribute to the Commons to promote the ideal of a free culture and the
17 | further production of creative, cultural and scientific works, or to gain
18 | reputation or greater distribution for their Work in part through the use and
19 | efforts of others.
20 |
21 | For these and/or other purposes and motivations, and without any expectation
22 | of additional consideration or compensation, the person associating CC0 with a
23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
25 | and publicly distribute the Work under its terms, with knowledge of his or her
26 | Copyright and Related Rights in the Work and the meaning and intended legal
27 | effect of CC0 on those rights.
28 |
29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
30 | protected by copyright and related or neighboring rights ("Copyright and
31 | Related Rights"). Copyright and Related Rights include, but are not limited
32 | to, the following:
33 |
34 | i. the right to reproduce, adapt, distribute, perform, display, communicate,
35 | and translate a Work;
36 |
37 | ii. moral rights retained by the original author(s) and/or performer(s);
38 |
39 | iii. publicity and privacy rights pertaining to a person's image or likeness
40 | depicted in a Work;
41 |
42 | iv. rights protecting against unfair competition in regards to a Work,
43 | subject to the limitations in paragraph 4(a), below;
44 |
45 | v. rights protecting the extraction, dissemination, use and reuse of data in
46 | a Work;
47 |
48 | vi. database rights (such as those arising under Directive 96/9/EC of the
49 | European Parliament and of the Council of 11 March 1996 on the legal
50 | protection of databases, and under any national implementation thereof,
51 | including any amended or successor version of such directive); and
52 |
53 | vii. other similar, equivalent or corresponding rights throughout the world
54 | based on applicable law or treaty, and any national implementations thereof.
55 |
56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
59 | and Related Rights and associated claims and causes of action, whether now
60 | known or unknown (including existing as well as future claims and causes of
61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
62 | duration provided by applicable law or treaty (including future time
63 | extensions), (iii) in any current or future medium and for any number of
64 | copies, and (iv) for any purpose whatsoever, including without limitation
65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
66 | the Waiver for the benefit of each member of the public at large and to the
67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
68 | shall not be subject to revocation, rescission, cancellation, termination, or
69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
70 | by the public as contemplated by Affirmer's express Statement of Purpose.
71 |
72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
73 | judged legally invalid or ineffective under applicable law, then the Waiver
74 | shall be preserved to the maximum extent permitted taking into account
75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
77 | non transferable, non sublicensable, non exclusive, irrevocable and
78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
80 | provided by applicable law or treaty (including future time extensions), (iii)
81 | in any current or future medium and for any number of copies, and (iv) for any
82 | purpose whatsoever, including without limitation commercial, advertising or
83 | promotional purposes (the "License"). The License shall be deemed effective as
84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
85 | License for any reason be judged legally invalid or ineffective under
86 | applicable law, such partial invalidity or ineffectiveness shall not
87 | invalidate the remainder of the License, and in such case Affirmer hereby
88 | affirms that he or she will not (i) exercise any of his or her remaining
89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
90 | and causes of action with respect to the Work, in either case contrary to
91 | Affirmer's express Statement of Purpose.
92 |
93 | 4. Limitations and Disclaimers.
94 |
95 | a. No trademark or patent rights held by Affirmer are waived, abandoned,
96 | surrendered, licensed or otherwise affected by this document.
97 |
98 | b. Affirmer offers the Work as-is and makes no representations or warranties
99 | of any kind concerning the Work, express, implied, statutory or otherwise,
100 | including without limitation warranties of title, merchantability, fitness
101 | for a particular purpose, non infringement, or the absence of latent or
102 | other defects, accuracy, or the present or absence of errors, whether or not
103 | discoverable, all to the greatest extent permissible under applicable law.
104 |
105 | c. Affirmer disclaims responsibility for clearing rights of other persons
106 | that may apply to the Work or any use thereof, including without limitation
107 | any person's Copyright and Related Rights in the Work. Further, Affirmer
108 | disclaims responsibility for obtaining any necessary consents, permissions
109 | or other rights required for any use of the Work.
110 |
111 | d. Affirmer understands and acknowledges that Creative Commons is not a
112 | party to this document and has no duty or obligation with respect to this
113 | CC0 or use of the Work.
114 |
115 | For more information, please see
116 |
117 |
--------------------------------------------------------------------------------
12 |
13 |