new customizing

Author: hayley

docs/index.md

@@ -13,7 +13,7 @@ This project is under active development and there are possibilities of changes.
 
 ## What To Expect 
 
-I hope that this thorough documentation will help you deploy, customize and troubleshoot your Starter course. Ines provides some wonderful instructions in her `README.md` file, but I noticed there were a few notes I wanted to add to it for my colleagues and others attempting to make their course so that they can save time on troubleshooting. 
+I hope that this thorough documentation will help you deploy, customize and troubleshoot your starter course. Ines provides some wonderful instructions in her `README.md` file, but I noticed there were a few notes I wanted to add to it for my colleagues and others attempting to make their course so that they can save time on troubleshooting. 
 
 You will be working with different file types including `.md` (and potentially `.rmd`), `.json`, `.py` and `.txt`. 
 You may need to know _some_ Html for additional customization, however by no means in-depth. 
@@ -101,7 +101,7 @@ this should output the following:
 v10.13.0
 ```
 
-Now that we have this done, Gatsby's installation and building the page should be must easier. 
+Now that we have this done, Gatsby's installation and building process should be much easier. 
 
 ### Install Gatsby 
 
@@ -112,14 +112,25 @@ npm install -g gatsby-cli
 ```
 ***NOTE: you will not need to update your dependencies here. 
 
+### Clone or Install the Repository
+
+There are 2 methods in which this step can be done.
+
+a) Simply clone the [starter course repo](https://github.com/ines/course-starter-python)
+b) [Import](https://github.com/new/import) and install this repo
+
+Make sure that you ***merge all the changes on the other branches to the master one** if you do not create a pull request for `electron` and `feature/deep-links` branches your course will not successfully deploy.*
+
+One you have done this you will need to locate yourself to the root of the repo. 
+
 ## Running on local Server 
 
 Next, we must  install all relevant dependencies by running the following: 
 ```
 npm install 
 ```
 
-***NOTE: you will be prompted to `run "npm audit fix" to fix them`. I do not recommend doing this as it will burn your site down. 
+***NOTE: you will be prompted to `run "npm audit fix" to fix them`. I do not recommend doing this as it will burn your site down.***  
 the output below will still build your course: 
 ```
 found 572 vulnerabilities (4 low, 4 moderate, 564 high)
@@ -130,12 +141,17 @@ and finally to build the site on your local:
 ```
 npm run dev    
 ```
+
 Delivering this as an output (copy and paste this address into any browser) : 
 ```
-You can now view DSCI-571 in the browser.
+You can now view course-starter-python in the browser.
 
   http://localhost:8000/
 ```
+This should be the begining of a functioning starter-course! 
+
+
+Now that you have a website that is deploying on your local server we can now begin the steps to customize it to your own taste. 
 
 
 ## Customization
@@ -146,8 +162,15 @@ There is a lot of different areas to make your site unique but below we are goin
 
 _It's important to attribute Naome Ross and Julia Silge's courses for this section as they are responsible for the code pasted below_ 
 
-Unlike Ines's [Spacy Course](https://course.spacy.io/), you may want an introduction similar to what [Julia Silge](https://supervised-ml-course.netlify.com/) and [Naome Ross](https://noamross.github.io/gams-in-r-course/) did for their courses. 
+## Customization
+
+There is a lot of different areas to make your site unique but below we are going to edit the files systematically. 
+
+### Introduction on Homepage
+
+_It's important to attribute Naome Ross and Julia Silge's courses for this section as they are responsible for the code pasted below_ 
 
+Unlike Ines's [Spacy Course](https://course.spacy.io/), you may want an introduction similar to what [Julia Silge](https://supervised-ml-course.netlify.com/) and [Naome Ross](https://noamross.github.io/gams-in-r-course/) did for their courses. 
 
 They introduced their courses with a brief summary
 
@@ -203,13 +226,61 @@ you will need to paste the new classes as follows below into the document.
 
 If you want to play with the measurements this is a welcomed opportunity to customize your course further. 
 
+This can be done by doing the following:
+
+- Navigate into the `src/pages/` and open `index.js` 
+
+You will be adding a new `<section>` (Html code) under `<Layout isHome>` and inbetween the following two lines shown below : between 
+```
+<Layout isHome>
+   <Logo className={classes.logo} aria-label={siteMetadata.title} /> # HERE
+            {chapters.map(({ slug, title, description }) => (
+```
+Here is an example of the code you can add.
+
+```
+<section>
+                <h1 className={classes.subtitle}> INSERT CATCHY TAG LINE HERE </h1>
+                <div className={classes.introduction}>
+                <p>
+                    FILLER WORDS HERE. WHAT IS YOUR COURSE ABOUT? DINOSAURS? NEURAL NETS? HOW TO SURVIVE EVENTS WITH THE INLAWS? WRITE IT HERE! 
+                </p>
+                </div>
+            </section>
+```
+
+Since we are adding new class names will are going to need to edit the document that formats the class name. This can be found in `src/styles/` in the doc `index.module.sass`. 
+
+you will need to paste the new classes as follows below into the document. 
+
+```
+.subtitle
+    font-family: var(--font-display)
+    width: 600px
+    height: auto
+    max-width: 100%
+    margin: 0 auto 1rem
+    display: block
+    text-align: center
+
+.introduction
+    width: var(--width-container)
+    max-width: 100%
+    padding: 1rem
+    margin: 0 auto
+    display: block
+    text-align: left
+```
+
+If you want to play with the measurements this is a welcomed opportunity to customize your course further. 
+
 ### Course Homepage Information 
 
 Here is where we will be changing all the homepage information including Course Name, "About This Course", "About Me", Website and Source. All of these factors are edited in the `meta.json` file located at the root of the repo. Ines has provided [a detailed discription](https://github.com/ines/course-starter-python#metajson) of what each component is responsible for. I am simply going to add some points that could be considered helpful when navigating in this documents  
 
 | Setting              | Additional Notes: |
 | -------------------- | ----------------- |
-| `courseId`           | Ines does not have this parameter in her spacy course, however deleting this will not let the course function properly so not having this setting is not an option unless you want to explore what makes her spacy course repo different than her course-starter repo.  |
+| `courseId`           | Ines does not have this parameter in her spacy course, however deleting this will not let the course function properly so not having this setting is not an option unless you want to explore what makes her spacy course repo different than her course-starter repo. This `courseId` is reflected once you compile your site and it reads `You can now view "courseId" in the browser.`  |
 | `slogan`             | This will show up once you deploy your site and it will be show in the image of the link that you send.  |
 | `juniper.branch`     | We will address this further when building a binder but note that the branch here specified is called binder. That means that we will need to edit the `requirements.txt` file and push it to the binder branch|