forked from uwcartlab/webmapping
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathfile.html
212 lines (205 loc) · 31.7 KB
/
file.html
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<h3 id="returnhomepreviouschapterintroductionnextchapterchapter02"><a href="../../../">Return Home</a> | <a href="../Introduction">Previous Chapter</a> | <a href="../Chapter02">Next Chapter</a></h3>
<h1 id="chapter01settingupyourworkspace">Chapter 01: Setting Up Your Workspace</h1>
<p>Welcome to the first chapter of Web Mapping! Chapter 01 includes three lessons and Activities 1 & 2:</p>
<ul>
<li>In Lesson 1, we will introduce text editors and some basic "boilerplate" HTML used to structure your website.</li>
<li>In Lesson 2, we will discuss how to efficiently set up your web directory and host it through a localhost development server.</li>
<li>In Lesson 3, we will set-up a GitHub account you will use for cloud storage, version control, web hosting, and collaboration with other developers. If you already have used Github in other courses, this will be review. However, you still must commit a "repo" as part of the Activity 1, so please still read carefully.</li>
</ul>
<p>After this chapter, you should be able to:</p>
<ul>
<li>Set-up boilerplate for use as the base of your website</li>
<li>Build a website directory hosted on a localhost server</li>
<li>Create a GitHub repository for your website and sync it with your local directory</li>
</ul>
<h2 id="howtoreadandusethelessons">How to Read and Use the Lessons</h2>
<p>We break each chapter's material into a set of 3-4 lessons that you should complete sequentially, with many lessons having subsections that treat specific topics. All lessons are formatted the same way:</p>
<p>As you read, we include many <a href="https://en.wikipedia.org/wiki/Hyperlink">links</a> that point to additional reference material. This material is for your reference only, and we recommend returning to these materials when you get stuck at different steps. Importantly, you may want to cycle back to these links towards the end of the course to debug issues specific to your final project, so it is helpful to get a sense of what information is included in the links.</p>
<blockquote>
<h3 id="occasionallyalinkdoescontainrequiredreadingadditionaldownloadsorspecifictasksneededtocompletetheactivitiesweoffsettheserequiredactionstomakethemvisuallyobviousinthetextpleasefollowthesedirectionscarefullyasitwillbedifficulttoadvanceinfuturelessonswithoutfirstcompletingthesetasks"><strong>Occasionally, a link does contain required reading, additional downloads, or specific tasks needed to complete the activities. We offset these required "actions" to make them visually obvious in the text. Please follow these directions carefully, as it will be difficult to advance in future lessons without first completing these tasks.</strong></h3>
</blockquote>
<pre><code>We format example code in code blocks, like this.
You can copy-paste this code into a text editor to make it easier to reference the line numbers.
</code></pre>
<p>We also include <code>in-line code</code> when referencing specific element tags, function and variable names, data values, etc. We <em>italicize</em> the literal names of <em>directories</em> and <em>files</em>. We <strong>bold</strong> and <em>italicize</em> keywords on their first use.</p>
<p>If you have questions, please post them in Discussion forms or e-mail your TA. We also recommend bookmarking the <a href="http://www.w3schools.com/tags/default.asp">W3Schools</a> reference for a general reference on HTML, CSS, and JavaScript during the class. Also, continue to refer back to the Codecademy tutorials (Activity 2 below) as you practice your web mapping knowledge!</p>
<h2 id="lesson1thehtmlboilerplate">Lesson 1: The HTML Boilerplate</h2>
<h3 id="ihtml">I. HTML</h3>
<p>All of your interactive mapping and visualization projects start with HTML. <strong><em>HTML</em></strong> stands for <strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage. We are now on the fifth revision of the HTML specification (hence <strong><em>HTML5</em></strong>). Although often referred to as “code” when used alongside CSS and other web scripting languages like JavaScript, HTML is not a programming language. It instead is a markup language composed of <strong><em>markup</em></strong> <em><strong>tags</strong></em> that describe the content of a webpage. HTML therefore is said to “structure” otherwise unstructured text and image content, while CSS then “styles” this structure. The majority of HTML files are stored in plain text files with an .<em>html</em> extension (e.g., <em>index.html</em> below).</p>
<p>HTML <strong><em>tags</em></strong> are keywords composed of reserved words surrounded by angle brackets, such as <code><html></code> or <code><body></code>. Often these tags come in pairs designating an <em><strong>opening</strong></em> <code><html></code> and <em><strong>closing</strong></em> <code></html></code> tag; properly opened and closed tags are referred to as <em><strong>HTML elements</strong></em>. An HTML document is composed of HTML elements written in plain text using this tag notation. An HTML document therefore is synonymous with a webpage.</p>
<h3 id="iitexteditors">II. Text Editors</h3>
<p><em><strong>Code</strong></em> is just text that gets interpreted by various technologies (e.g., by a web browser for HTML) to complete actions or execute instructions. A <em><strong>text editor</strong></em> is a software program that facilitates the writing of code. Text editors include features that support coding, such as color-coding reserved words in different code languages, automatically applying indentation and closing tags, and even live preview of the code. Text editors are regularly updated with new features, so it is worth continuously reviewing your choice of text editor. Popular text editors include <a href="http://www.aptana.com/">Aptana Studio</a>, <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, and <a href="http://www.sublimetext.com/">Sublime Text</a>.</p>
<p>You are welcomed to use your preferred text editor.</p>
<h3 id="iiithehtmlboilerplate">III. The HTML Boilerplate</h3>
<p>A <em><strong>boilerplate</strong></em> is the minimum starter code needed begin development. For these lessons, we start with the basic <em><strong>HTML boilerplate</strong></em> to simplify your early designs and focus on JavaScript. </p>
<blockquote>
<h3 id="download_unit1zipunit1zip_fromthechapter01filesunzipitandopen_indexhtml_inyourtexteditor"><strong>Download <em><a href="unit-1.zip">unit-1.zip</a></em> from the Chapter 01 files, unzip it, and open <em>index.html</em> in your text editor.</strong></h3>
</blockquote>
<p>The HTML boilerplate code in <em>index.html</em> should look like Example 1.1. Every component <ins><em>must</em></ins> be present in your <em>index.html</em> file, excepting the <code><!-- --></code> comments and IE stylesheet check. Importantly: you must use <em>index.html</em> as the name of the homepage to use the directory name as the endpoint of a web url. For instance <a href="http://www.geography.wisc.edu/cartography/">www.geography.wisc.edu/cartography/</a> is the same as <a href="http://www.geography.wisc.edu/cartography/index.html">www.geography.wisc.edu/cartography/index.html</a>, but shorter and therefore preferred.</p>
<h6 id="example11boilerplatecodein_indexhtml_">Example 1.1: Boilerplate code in <em>index.html</em></h6>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<!--put your external stylesheet links here-->
<link rel="stylesheet" href="css/style.css">
<!--[if IE<9]>
<link rel="stylesheet" href="css/style.ie.css">
<![endif]-->
<!--you can also place internal styles here;
place these within <style> tags-->
</head>
<body>
<!--put your initial page content here-->
<!--you can also use this space for internal scripts;
place these within <script> tags-->
<!--put your external script links here-->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
</code></pre>
<p>Note the neatly indented structure of the markup. This is not strictly required for the code to work; browsers interpret opening and closing tags as the start and end points of HTML elements, not newline or tab characters. However, proper indentation is a convention and best practice that will make your life (and anyone else reading your code) exponentially easier.</p>
<p>Different levels of <em><strong>indentation</strong></em> represent parent-child relationships in the overall tree structure of the document. Think of this structure as analogous to <a href="https://en.wikipedia.org/wiki/Matryoshka_doll">Matryoshka dolls</a> that nest inside one another. In the code above, the <code><html></code> tag is the outermost "doll", the <code><head></code> and <code><body></code> are smaller "dolls" sitting inside the <code><html></code> "doll", and so on. Each new level of indentation is used to represent another nested level of HTML elements, helping you to assess visually how the webpage is structured hierarchically and then identify missing or incorrectly located opening and closing tags. </p>
<p>The <code><!DOCTYPE html></code> tag indicates to the browser that this is an HTML5 file. The <code><html lang="en"></code> tag opens the html code, telling the browser to interpret the code as English. In the <code><head></code> tag, there are two <code><meta></code> tags: the first declares the character set as UTF-8, which interprets the broadest possible range of ASCII characters; the second <code><meta></code> tag sets the width of the page to the width of the device monitor, ensuring that the content stays within the available frame regardless of device size. While there are other options available for the <code><meta name="viewport"></code> tag, this is really the only setting that should ever be used, and it <ins><em>must</em></ins> be included. The <code><title></code> open and closing tags declare the title of the page; text in between these tags will appear in the tab at the top of the browser page. The <code><link></code> tag links out to the website stylesheet, and will be covered further below. Finally, the conditional statement <code><!--[if IE<9]></code>, although it looks like a comment, loads a different stylesheet formatted for old versions of Internet Explorer prior to version 9.</p>
<p>The <code><body></code> will contain the majority of the page content you write in HTML. Below your custom HTML is where you should place your <code><script></code> tags linking to the website's JavaScript. This also will be covered further below.</p>
<p>This is all the code you need to create a basic HTML5 website. If you add something to the body, say:</p>
<h6 id="example12">Example 1.2</h6>
<pre><code><!--Example 1 line 18-->
<body>
Hello World!
</body>
</code></pre>
<p>and then open the file in a browser, you should see what you just added to the page (Figure 1.1):</p>
<p><img src="img/figure1.1.1.png" alt="figure1.1.1.png" /></p>
<h6 id="figure11bodycontentdisplayedonthepage">Figure 1.1: <code><body></code> content displayed on the page</h6>
<p>There are a number of frameworks that have their own boilerplates and directory structures, such as <a href="https://getbootstrap.com/">Bootstrap</a>, used for responsive design across mobile and non-mobile devices. For simplicity's sake, we recommend that you use this boiler plate when completing the following lessons.</p>
<blockquote>
<h3 id="addcontenttothebodyelementandthenloadyour_indexhtml_fileinabrowserandcheckthatyourcontentappearsinthebrowsertabifhtmliscompletelynewtoyouwerecommendsupplementalcodecademytutorialsaspartofactivity2tocompletealongsidejavascripttutorials"><strong>Add content to the body element and then load your <em>index.html</em> file in a browser and check that your content appears in the browser tab. If HTML is completely new to you, we recommend supplemental Codecademy tutorials as part of Activity 2 to complete alongside JavaScript tutorials.</strong></h3>
</blockquote>
<h2 id="lesson2webdirectorysetup">Lesson 2: Web Directory Setup</h2>
<h3 id="ionefilewebpages">I. One-file webpages</h3>
<p><em><strong>One-file webpages</strong></em> reference all styles and scripts <em><strong>internally</strong></em> within the <em>index.html</em> file. For a formal definition, <em><strong>styles</strong></em> are display rules set using <strong><em>CSS</em></strong> or <strong>C</strong>ascading <strong>S</strong>tyle<strong>s</strong>heets. While HTML defines the <em>structure</em> of the content, CSS defines the <em>look</em> of the content. <strong><em>Scripts</em></strong> then are dynamic actions or behaviors applied to content, some data-driven and others interactive, and are written in a web programming language such as <em><strong>JavaScript</strong></em>, the primary language used for web mapping today.</p>
<p>The case of a one-file webpage is trivial: in real life web development, you always reference resources in your directory <strong><em>externally</em></strong> using <code><link></code> tags and <code><script></code> tags with the <code>src</code> attribute. However, it is useful to know that you <em>can</em> include styles and scripts right in the HTML document, particularly because many content management systems like Wordpress might add these requiring subsequent editing.</p>
<p>For example, you can add a <code><style></code> tag to your boilerplate to embed a CSS rule (details below):</p>
<h6 id="example21addingstylesinnbsp_indexhtml_">Example 2.1: Adding styles in <em>index.html</em></h6>
<pre><code><!--Example 1 line 13-->
<!--you can also place internal styles here
place these within <style> tags-->
<style>
#mydiv {
background-color: red;
width: 80%;
margin: 0 auto;
height: 100px;
}
</style>
</head>
<body>
<div id="mydiv">
Hello World!
</div>
</body>
</code></pre>
<p>The result is a red rectangle 100 pixels high that takes up 80 percent of the page width, with no margin, as seen below (Figure 2.1).</p>
<p><img src="img/figure1.2.1.png" alt="figure1.2.1.png" /></p>
<h6 id="figure21theresultofexample21">Figure 2.1: The result of Example 2.1</h6>
<p>You also can add a <code><script></code> tag without a <code>src</code> attribute below the <code><div></code> to add a behavior in JavaScript. In the example below, we add an event listener to the <code><div></code> using the <code>id</code> attribute of the <code><div></code> .</p>
<h6 id="example22addingscriptin_indexhtml_">Example 2.2: Adding script in <em>index.html</em></h6>
<pre><code><div id="mydiv">
Hello World!
</div>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.addEventListener("click", function(){
alert("Hello World!");
});
</script>
</code></pre>
<p>If you click on the div element in your browser, you should see:</p>
<p><img src="img/figure1.2.2.png" alt="figure1.2.2.png" /></p>
<h6 id="figure22theresultofexample22">Figure 2.2: The result of Example 2.2</h6>
<h3 id="iidirectorystructure">II. Directory Structure</h3>
<p>For the real-world projects, internal <code><style></code> and <code><script></code> tags are much too limiting. Instead, separate the working pieces of your website into a well-organized <em><strong>directory structure</strong></em> of files and folders to keep them neat and orderly. Like shelves in a closet, your directory structure is a strategy to keep things organized so you can find them later. You will thank yourself down the road if you begin with a good directory structure to hold and organize your files.</p>
<p>Generally speaking, we use the term "webpage" to describe a single HTML document and "website" to describe the entire directory structure.</p>
<blockquote>
<h3 id="inthe_unit1_directoryyoudownloadedcreatethefollowingnewfolders"><strong>In the <em>unit-1</em> directory you downloaded, create the following new folders:</strong></h3>
<h3 id="js">- <strong>js</strong></h3>
<h3 id="lib">- <strong>lib</strong></h3>
<h3 id="css">- <strong>css</strong></h3>
<h3 id="data">- <strong>data</strong></h3>
<h3 id="img">- <strong>img</strong></h3>
</blockquote>
<p>Let's describe each of these folders in your directory structure:</p>
<ul>
<li><p><em><strong>js</strong></em>: This folder holds your custom JavaScript files, in which you will write the script to make your website—including its web map—dynamic and interactive.</p></li>
<li><p><em><strong>lib</strong></em>: This folder holds any third-party JavaScript code libraries you choose to download and host. These will eventually include <em>jQuery.js</em>, <em>Leaflet.js</em>, <em>D3.js</em>, and potentially others. Some code libraries come with their own CSS stylesheets and images; leave these within the library's directory and place the entire directory within the lib folder to avoid confusion.</p></li>
<li><p><em><strong>css</strong></em>: This folder holds your custom CSS stylesheets.</p></li>
<li><p><em><strong>data</strong></em>: This folder holds data files used to create your thematic web maps, and thus is not necessary for all website. The <em>data</em> folder can hold CSV, GeoJSON, and other formats that we will cover later. You also might wish to keep original Esri Shapefiles in it; these should go in a <em>shapefiles</em> subdirectory within the data folder, since a shapefile in itself is technically a file directory just like a website.</p></li>
<li><p><em><strong>img</strong></em>: This folder holds any images used in your website.</p></li>
</ul>
<p>Notice that the boilerplate <em>index.html</em> file already contains two links to external files. You now can create these files using your text editor. First, create a new file and save it into the <em>css</em> folder as <em>style.css</em>. Next, create <em>main.js</em> in the <em>js</em> folder, again adding a byline comment. We recommend that you put a comment as the first line of code in each file declaring your authorship (Example 2.3), since later you will be sharing this file online through GitHub:</p>
<h6 id="example23authorshipcommentin_stylecss_">Example 2.3: Authorship comment in <em>style.css</em></h6>
<pre><code>/* Stylesheet by Buck E. Badger, 2021 */
</code></pre>
<blockquote>
<h3 id="createnbsp_stylecss_andnbsp_mainjs_textfilesandsaveintothe_css_andnbsp_js_foldersof_unit1_nbsprespectively"><strong>Create <em>style.css</em> and <em>main.js</em> text files and save into the <em>css</em> and <em>js</em> folders of <em>unit-1</em> respectively.</strong></h3>
</blockquote>
<h3 id="iiisettingupadevelopmentserver">III. Setting up a Development Server</h3>
<p>As you develop your website, you will need to preview it in a browser to see what it looks like and to use the browser's helpful set of developer tools. While you can just double-click on the simple HTML examples above for preview in a browser, most websites are accessed over the internet using a server. A <strong><em>server</em></strong> is a piece of software that sends data to a browser over the internet. Figure 2.3 shows a basic server-client architecture, in which the client requests files from your website directory and the server sends them as requested. A server may be across the room, across the country, or even on the other side of the world.</p>
<p><img src="img/figure1.2.3.png" alt="figure1.2.3.png" /></p>
<h6 id="figure23clientserverarchitecture">Figure 2.3: Client-server architecture</h6>
<p>For security reasons, browsers <ins><em>only</em></ins> display webpages correctly if the files are passed through a server. This complicates development, as you do not want to push every change to your website to a server just to preview it. However, you can set up a <em><strong>local development server</strong></em> on your machine to reliably preview dynamic content such as JavaScript before you post online. As with text editors, there are many options for setting up a local development server, with many common ones requiring additional programming knowledge such as Python SimpleHTTPServer and server frameworks including <a href="http://www.wampserver.com/en/">WAMP</a> (for Windows), <a href="https://www.mamp.info/en/">MAMP</a> (for Mac), and <a href="http://lamphowto.com/">LAMP</a> (for Linux).</p>
<p>We use <a href="https://prepros.io/">Prepros</a> in lesson examples for simplicity. Prepros is a "preprocessor" software application that automatically compiles your website and refreshes the browser every time you save files in your web directory. Prepros is available on all Science Hall computers and works on Windows and Mac machines.</p>
<blockquote>
<h3 id="preview_unit1_usingprepros"><strong>Preview <em>unit-1</em> using Prepros.</strong></h3>
</blockquote>
<h2 id="lesson3githubsetup">Lesson 3: GitHub Setup</h2>
<h3 id="iwhatisgithub">I. What is GitHub?</h3>
<p><em><strong><a href="https://github.com/">GitHub</a></strong></em> is a website and project hosting service that uses the <a href="http://git-scm.com/">Git</a> version control system. <em><strong>Git</strong></em> takes a snapshot of your files at a given time, creating a backup that can be shared collaborative when multiple developers are coding at the same time (e.g., your final project). GitHub provides an online suite of tools for cloud storage, sharing, collaboration, and hosting of your projects. It has become standard practice for open-source software developers to keep their projects on GitHub, and you will find yourself accessing various repositories or <strong><em>repos</em></strong> (i.e., web directories) on GitHub as your development experience grows. For example, the Web Mapping workbook materials are hosted at <a href="https://github.com/uwcartlab/webmapping">https://github.com/uwcartlab/webmapping</a> (Figure 3.1):</p>
<p><img src="img/figure1.3.1.png" alt="figure1.3.1.png" /></p>
<h6 id="figure31thegithubrepositoryforthisworkbook">Figure 3.1: The GitHub repository for this workbook</h6>
<p>The way Git works can be a bit confusing, even after repeated use, as it is different from your prior experience uploading and downloading files from a website through your browser. Git first creates a repository <em>within</em> your website directory, rather than uploading an existing, local directory online. While you can see your files in the remote repository through the GitHub website, you do not use the browser to access them. Rather, the original files sit in the website directory you created on your own machine, and you sync or <strong><em>push</em></strong> those files to the remote GitHub repository whenever you make changes. </p>
<p>If you are collaborating on a project with someone else, they can <strong><em>clone</em></strong> your repository from GitHub to their own machine, make changes to website files, then submit a <strong><em>pull request</em></strong> asking you to add changes back to the main repository. You can then sync or <em>pull</em> their changes from their repository to the main repository and from there into your local website directory. You also can <strong><em>fork</em></strong> an existing repository from another GitHub account and propose changes to the main branch using this <em>pull</em> request (more next chapter). Again, there are several options for using Git and GitHub collaboratively, some using command line and thus providing more control over the push, clone, and pull commands (e.g., <a href="https://git-scm.com/downloads">Git Bash</a>).</p>
<p>Again for simplicity, we use <a href="https://desktop.github.com/">GitHub Desktop</a> in lesson examples. GitHub Desktop is more beginner-friendly than alternatives and meshes well with the GitHub website. However, it can be difficult to make sense when something goes wrong in GitHub Desktop, sometimes requiring deleting and recreating the repo; do such destructive rebuilding only when exhausting alternatives with your TA. GitHub Desktop is available on all Science Hall computers and works on Windows and Mac machines.</p>
<h3 id="iisettinguparepository">II. Setting Up a Repository</h3>
<blockquote>
<h3 id="readthegithubguidegettingyourprojectongithubhttpsguidesgithubcomintroductiongettingyourprojectongithubandfollowitsdirectionstocreatearepositoryinyour_unit1_directory"><strong>Read the GitHub Guide <a href="https://guides.github.com/introduction/getting-your-project-on-github/">"Getting your project on GitHub"</a> and follow its directions to create a repository in your <em>unit-1</em> directory.</strong></h3>
</blockquote>
<p>Following the GitHub Guide above, the first step to setting up GitHub is to create a GitHub account if you do not already have one). Go to <a href="https://github.com/">https://github.com/</a>, enter a username, e-mail, and password, and click "Sign up for GitHub."</p>
<p>Then open GitHub Desktop, log in, and drag-and-drop your <em>unit-1</em> directory to create a local repository, following the directions in the GitHub Guide. Alternatively, you can click "Current repository" in the upper-left corner of the application, then click "Add" and choose "Create new repository…". Enter the name of your website, then in "Local path" navigate to the directory <em>containing</em> your website directory, and click "Create repository" (Figure 3.2).</p>
<p>Importantly, if you first navigate to your website directory instead of the folder above it, the application will create a new directory <em>inside</em> your website directory with the same name. Check the path shown in the "local path" text field to ensure you are syncing from the correct location on your computer.</p>
<p><img src="img/figure1.3.2(new).png" alt="figure1.3.2(new).png" /></p>
<h6 id="figure32creatingarepositoryinyour_unit1_directory">Figure 3.2: Creating a repository in your <em>unit-1</em> directory</h6>
<p>Once you've created the repository, open your the <em>unit-1</em> directory on your machine and observe that three new files have been created (Figure 3.3):</p>
<ul>
<li><p><strong>.<em>git</em></strong>, a hidden folder that holds the snapshots of your files,</p></li>
<li><p><strong>.<em>gitattributes</em></strong>, a file specifying settings for the repository, and</p></li>
<li><p><strong>.<em>gitignore</em> (optional)</strong>, a file that lists files in the directory that should not be tracked by the repository.</p></li>
</ul>
<p>Note, if you're using a Mac, these files may be hidden. You can view hidden files by pressing <code>command-shift-dot</code>.</p>
<p><img src="img/figure1.3.3.png" alt="figure1.3.3.png" /></p>
<h6 id="figure33websitedirectorywithrepositoryfiles">Figure 3.3: Website directory with repository files</h6>
<p><ins><em>Never</em></ins> tamper with the directories and files inside of the <em>.git</em> folder, and for the most part you will not need to modify directly the other GitHub files in this class. You can change settings and add to the <em>.gitignore</em> file through the GitHub application gear menu→"Repository" settings in the upper-right corner of the application window. You also can sign in to GitHub, manage your account, and configure Git through the gear menu→"Options". </p>
<p>Follow the rest of the directions in the "<a href="https://guides.github.com/introduction/getting-your-project-on-github/">Getting your project on GitHub</a>" guide. You should end up with both a local repository in your website directory and a copy of the repository on your GitHub web page. Note that it is also possible to work in reverse order—that is, create a new repository on the GitHub website and then copy it over, or <em>clone</em> it, to your machine. The GitHub <a href="https://guides.github.com/activities/hello-world/">Hello World Guide</a> provides details on this reverse process for future reference. We will return to this process in Activity 7.</p>
<p>When you are just figuring things out, you are likely to end up with one or two repositories on GitHub that you will not actually need in the future. When you are sure you no longer need a repository, you can delete it from GitHub by navigating to the repository web page, clicking the "Settings" link on the right-hand side, scrolling down to the "Danger Zone" at the bottom of the page, and clicking "Delete this repository." The GitHub crew was nice enough to take precautions to ensure that you <em>really</em> want to delete the repository before you do it. Thus, be absolutely sure you do not need the repository again, and that no one else is contributing to it, before you delete.</p>
<h3 id="iiilearningandusinggithub">III. Learning and Using GitHub</h3>
<p>There are a number of excellent <a href="https://guides.github.com/">GitHub Guides</a> beyond the introductory guide required above. We recommend that you reference these as you build experience with GitHub. We will use most or all of the covered skills in the following lessons.</p>
<p>From this point, though, the key to becoming comfortable with GitHub is to use it often. This means that <em>every time you make a working change to your website files, you should commit your changes to your local repository and sync it with the repository on GitHub.</em> Working on these lessons with GitHub starts to build a public track record of your work that future employers may look at. Thus, <strong>commit frequently and wisely</strong>!</p>
<h2 id="activity1">Activity 1</h2>
<ol>
<li>Create a website directory called <em>unit-1</em> with an organized directory structure and boilerplate <em>index.html</em>, <em>style.css</em>, and <em>main.js</em> files.</li>
<li>Create a Git repository in your website directory and sync it to your GitHub account.</li>
<li>Submit a zip file (.zip) containing your website directory to Canvas (Geography 575 course only). In the submission comments, paste a link to your GitHub account page.</li>
</ol>
<h2 id="activity2">Activity 2</h2>
<ol>
<li><strong><em>Required</em></strong>: Navigate to codecademy.com and create a free account. Do <em><ins>not</ins></em> sign-up for the Pro paid account.</li>
<li><em>Recommended</em>: If you do not have any programming experience, we recommend first completing the <a href="https://www.codecademy.com/learn/learn-how-to-code">Learn How to Code</a> broad overview of programming concepts (~1 hour).</li>
<li><em>Recommended</em>: If you do not have experience with HTML or want a refresher, we recommend completing Lesson 1 (and only Lesson 1) of the <a href="https://www.codecademy.com/learn/learn-html">Introduction to HTML tutorial</a>. (~1 hour)</li>
<li><em>Recommended</em>: If you do not have experience with CSS or want a refresher, we recommend completing Lessons 1 and 2 of the <a href="https://www.codecademy.com/learn/learn-css">Introduction to CSS tutorial</a>. (~2 hour)</li>
<li><strong><em>Required</em></strong>: Complete Lessons 1-8 of <a href="https://www.codecademy.com/learn/introduction-to-javascript">Introduction to JavaScript</a>. Print a PDF (Ctrl+P in browser; save as a PDF) of your completed table of contents for these tutorials and upload to the Activity 2 assignment to confirm completion. (~6 hours)</li>
</ol>
<p><em>This work is licensed under a <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. <br/> For more information, please contact Robert E. Roth ([email protected]).</em></p>
<h3 id="returnhomepreviouschapterintroductionnextchapterchapter02-1"><a href="../../../">Return Home</a> | <a href="../Introduction">Previous Chapter</a> | <a href="../Chapter02">Next Chapter</a></h3>