-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
56 lines (54 loc) · 4.06 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/website.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/website.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">My First Website</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="#">Other Links?</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>My First Website</h1>
<p>Congratulations - You've got your website up and running. From here you can modify any of the files within to change it to whatever you want.</p>
<p>Next steps</p>
<ul>
<li>Change the page title? You probably don't want a site called "My First Website", so change it in index.html - you'll find it in two places, the first is in a <title> tag, the second is further down, in the nav section.</li>
<li>Add a favicon: The little icon that appears to the left of every tab you have open is called a favicon: if you add a file called favicon.ico (a 16x16 pixel image) to your repository, it will appear there for every visitor! You can create one for free <a href="http://onlinefavicon.com/">here!</a></li>
<li>Move this set of instructions to a new area and link to it from the nav</li>
<li>Try adding some new content to this page (index.html). <a href="https://www.w3schools.com/tags/">W3Schools</a> has a list of tags you can include - why not try them out?</li>
<li>Add some images</li>
<li>Add some styling</li>
<li>Add some interaction (show/hide)</li>
<li>Try out different screen sizes</li>
<li>Maybe you want your own domain name instead of github.io? <a href="https://www.namecheap.com/support/knowledgebase/article.aspx/9645/2208/how-do-i-link-my-domain-to-github-pages">This link</a> has details on how you can do this with a namecheap domain name.</li>
<li>Replicate the website using a web server and programming language with a web framework. Potentially do this in several languages e.g. <a href="https://nodejs.org/en/">Node.js</a> & <a href="https://expressjs.com/">Express</a>, <a href="https://www.python.org/">Python</a> & <a href="https://www.djangoproject.com/">Django</a>.</li>
<li>Consider (potentially write a paper) the scenarios where one approach would be used over another. What are the benefits of using static site generators vs dynamic websites? What other static site generators are available, and do they have different compromises?</li>
</ul>
</div>
</body>
</html>