Add bootstrap, jquery, instructions for writing help pages in README.md,

layout.css, refactor dir structure
kapunahelewong · Aug 26, 2019 · 63e088b · 63e088b
1 parent 8ea8f30
commit 63e088b
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -57,3 +57,15 @@ Making your first Pull Request (PR) is exciting! Pull Requests are the way we al
  3. Follow the instructions
 
 You are very close to making your name shine on the spotlight. You can do it!
+
+## Adding Help Pages
+
+If you'd like to add a page with instructions for how to use a certain GitHub feature, à la `help-pages/pull-requests.html`, 
+follow these steps:
+
+ 1. Create a new `.html` file in the `help-pages` directory
+ 2. Copy and paste the entire `<head>` section into your new file
+ 3. Copy and paste the `<nav>` section into the `<body>` of the file
+ 4. Make sure to wrap all of your page content in between `<section id="page-content">` and `</section>`
+ 5. Don't forget to add a `dropdown-item` that points to your page in the `nav` section
+ 6. Write to your heart's content and submit a pull request!
diff --git a/help-pages/assets/styles/layout.css b/help-pages/assets/styles/layout.css
@@ -0,0 +1,19 @@
+hr {
+	width: 80%;
+}
+
+nav {
+	margin-bottom: 1em;
+}
+
+#page-content {
+	padding: 1em 5%;
+}
+
+#navbarSupportedContent {
+	justify-content: flex-end;
+}
+
+#navbarSupportedContent .navbar-nav {
+	margin-right: 1em;
+}
diff --git a/help-pages/index.html b/help-pages/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Github Playground</title>
+
+		<!-- Bootstrap CSS -->
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+		<!-- JQuery, Popper, and Bootstrap JS -->
+		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+		<!-- Styles that apply to all help pages -->
+		<link rel="stylesheet" type="text/css" href="assets/styles/layout.css"/>
+	</head>
+	<body>
+		<nav class="navbar navbar-expand-lg navbar-light bg-light">
+		  <a class="navbar-brand" href="./index.html">Git Playground</a>
+		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+		    <span class="navbar-toggler-icon"></span>
+		  </button>
+
+		  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+		    <ul class="navbar-nav">
+		      <li id="pages-dropdown" class="nav-item dropdown">
+		        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		          Help Pages
+		        </a>
+		        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+		          <a class="dropdown-item" href="./pull-requests.html">Pull Requests</a>
+		          <a class="dropdown-item" href="#">Another Page</a>
+		          <a class="dropdown-item" href="#">And Another</a>
+		        </div>
+		      </li>
+		    </ul>
+		  </div>
+		</nav>		
+		<section id="page-content">
+			<h2 class="text-center">Learn Git and Github Collaboratively</h2>
+			<hr/>
+			<p>Welcome! Git playground aims to be a place for beginners and experts alike to learn, practice, or brush up on their Git skills in a welcoming, no-pressure environment. To get started, fork our repo <a href="github.com/kapunahelewong/git-playground">here</a> and check out our README and help pages and you'll be well on your way to improving your Git skills!</p>
+		</section>
+	</body>
+</html>
diff --git a/help-pages/pull-requests.html b/help-pages/pull-requests.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Your first Pull Request</title>
+
+		<!-- Bootstrap CSS -->
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+		<!-- JQuery, Popper, and Bootstrap JS -->
+		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+		<!-- Styles that apply to all help pages -->
+		<link rel="stylesheet" type="text/css" href="assets/styles/layout.css"/>
+	</head>
+	<body>
+		<nav class="navbar navbar-expand-lg navbar-light bg-light">
+		  <a class="navbar-brand" href="./index.html">Git Playground</a>
+		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+		    <span class="navbar-toggler-icon"></span>
+		  </button>
+
+		  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+		    <ul class="navbar-nav">
+		      <li id="pages-dropdown" class="nav-item dropdown">
+		        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		          Help Pages
+		        </a>
+		        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+		          <a class="dropdown-item" href="./pull-requests.html">Pull Requests</a>
+		          <a class="dropdown-item" href="#">Another Page</a>
+		          <a class="dropdown-item" href="#">And Another</a>
+		        </div>
+		      </li>
+		    </ul>
+		  </div>
+		</nav>		
+		<section id="page-content">
+			<h2 class="text-center">This is your first pull request</h2>
+			<ol>
+				<li>Fork this repo</li>
+				<li>Clone this repo on your local</li>
+				<li>Create a new branch</li>
+				<li>In the new local branch make your changes</li>
+				<li>Push your local changes to your forked repo</li>
+				<li>Go to your github forked repo</li>
+				<li>A Pull Request prompt will appear on your forked repo <b>use it</b></li>
+			</ol>
+
+			<ul>
+				<li>If you can't see the PR proompt then use the gray button "New Pull Request" next to the branchs dropdown</li>
+			</ul>
+			<p>Below this p tag there is another p tag with the name and date of the last author. Change it for your own.</p>
+			<p>Sam, July 29 2019</p>
+		</section>
+	</body>
+</html>
diff --git a/pullrequests/index.html b/pullrequests/index.html