codevember2020/index.html at main · davidhartsough/codevember2020 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1, initial-scale=1, shrink-to-fit=no"
    />
    <title>Codevember 2020</title>
    <meta
      name="description"
      content="Take on the Codevember 2020 challenge and build something awesome with code this November!"
    />
    <meta
      name="keywords"
      content="codevember, 2020, code, November, challenge, project, web, website, program, learn"
    />
    <meta name="author" content="David Hartsough" />
    <meta property="og:title" content="Codevember 2020" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://codevember2020.netlify.com" />
    <meta
      property="og:image"
      content="https://codevember2020.netlify.com/logo512.png"
    />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:alt" content="Codevember logo" />
    <meta property="og:locale" content="en_US" />
    <meta
      property="og:description"
      content="Take on the Codevember 2020 challenge and build something awesome with code this November!"
    />
    <meta property="og:site_name" content="Codevember 2020" />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org/",
        "@type": "WebSite",
        "name": "Codevember 2020",
        "url": "https://codevember2020.netlify.com",
        "keywords": "codevember, 2020, code, November, challenge, project, web, website, program, learn",
        "description": "Take on the Codevember 2020 challenge and build something awesome with code this November!",
        "image": "https://codevember2020.netlify.com/logo512.png",
        "author": {
          "@type": "Person",
          "name": "David Hartsough"
        }
      }
    </script>
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./apple-touch-icon.png"
    />
    <link rel="icon" type="image/png" sizes="32x32" href="./icon32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="./icon16.png" />
    <link rel="manifest" href="./site.webmanifest" />
    <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#1d201f" />
    <meta name="msapplication-TileColor" content="#1d201f" />
    <meta name="theme-color" content="#1d201f" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="Codevember 2020" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Codevember 2020" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-48XQEZTMPH"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-48XQEZTMPH");
    </script>
    <meta
      name="google-site-verification"
      content="JHL6wFoniD3QB9EPqtOyA03oEJ2c8GTE-ibGjVJd9Hc"
    />
  </head>
  <body>
    <main>
      <header>
        <h1 id="title">Codevember 2020</h1>
        <img id="logo" src="./logo512.png" alt="logo" />
        <p>Turn this into your own dope website.</p>
      </header>
      <h2>10 Simple Steps</h2>
      <ol>
        <li>
          <a
            href="https://codesandbox.io/s/codevember-2020-2oi9p?file=/index.html"
            target="_blank"
          >
            Open this project in CodeSandbox
          </a>
        </li>
        <li>
          Sign in to CodeSandbox
          <span class="small"> (with either Google or GitHub) </span>
        </li>
        <li>
          Fork this project
          <span class="small">
            (by clicking the Fork button at the top right)
          </span>
        </li>
        <li>
          Open the <code>index.html</code> file in the sandbox's code editor.
          <span class="small">(It should already be open for you.)</span>
        </li>
        <li>
          Replace "Codevember 2020" on line 60 with your name
          <ul>
            <li>
              <span class="small">Example: </span>
              <code>&lt;h1&gt;Heat Wave Dave&lt;/h1&gt;</code>
            </li>
            <li class="small">
              Once you've finished typing, the browser preview window on the
              right should automatically reload and show your name
            </li>
          </ul>
        </li>
        <li>
          Congratulations! You've just started coding! Keep changing things and
          seeing what happens.
          <span class="small">
            (You can begin simply by changing all code in this boilerplate that
            looks like <code>__TITLE__</code> or <code>__AUTHOR__</code> in
            <code>index.html</code> and <code>site.webmanifest</code> to
            whatever you'd like.)
          </span>
        </li>
        <li>
          Think of something cool to build, and start Googling how to do it in
          HTML, CSS, and JS.
          <span class="small">
            (Googling how to do stuff is 90% of what most web developers do on a
            regular basis. You're virtually a web dev now!)
          </span>
        </li>
        <li>
          <a
            href="https://join.slack.com/t/friendsworldwide/shared_invite/zt-5kvvpz2a-mUWEut6Roud2C8frURrCcQ"
            target="_blank"
            >Join the Friends Worldwide Slack group</a
          >
          to get help, discuss ideas, or just have a good time.
        </li>
        <li>
          Once you've built your dope website, you're gonna wanna share it!
          <a href="https://forms.gle/QRgKSpjKsjHYjPei7" target="_blank">
            Add your project to the list of Codevember 2020 projects
          </a>
        </li>
        <li>
          <a
            href="https://docs.google.com/spreadsheets/d/1mtB901s23fh_NSshC3h2_gXz_TsvtTIJ9dbYcY5893w/edit?usp=sharing"
            target="_blank"
          >
            Check out everyone else's projects
          </a>
        </li>
      </ol>
      <hr />
      <div id="theme">
        <p>
          If you'd like to randomly generate a theme for your project, please
          use this handy tool to your liking!
        </p>
        <p>The instructions for this one are simple:</p>
        <ol>
          <li>Click the button to generate a random theme</li>
          <li>Pick the first one that makes you laugh</li>
          <li>Use that theme as your project prompt!</li>
        </ol>
        <p id="random-theme"></p>
        <p id="or">OR</p>
        <p id="alternative"></p>
        <button type="button" id="generate">Generate Random Theme</button>
      </div>
    </main>
    <script src="./index.js"></script>
    <script src="./generator.js"></script>
  </body>
</html>