Skip to content

Commit ff8ae78

Browse files
jfrabonijfraboni
committed
Update README.md
1 parent 1b64cdd commit ff8ae78

File tree

1 file changed

+215
-0
lines changed

1 file changed

+215
-0
lines changed

‎README.md

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# studies
22
A website page to record our programming studies...
33

4+
## Setup
45

56
1. In your Cloud9 workspace for your website project, in the **ROOT directory of your website project**, create a file called:
67
studies.html
@@ -38,3 +39,217 @@ A website page to record our programming studies...
3839
</body>
3940
</html>
4041
````
42+
43+
**NOTE:** In the above markdown, we're loading <a href="jquery.com" target="_blank">jQuery</a> and the <a href="https://github.com/blairvanderhoof/gist-embed" target="_blank">Gist Embed</a> library - these libraries will allow us to embed into our `studies.html` page, our GitHub gists containing our code examples for our studies notes. You can read more about those libraries at the links provided.
44+
45+
3. We are already linking to a custom CSS file, so we need to create this file. If your website workspace does not already have a `css` directory, create one now in the ROOT directory of your website. Into this `css` directory, create a file called `studies.css`. Open this `studies.css` file and into paste the following CSS rules:
46+
47+
````CSS
48+
body {
49+
background: rgb(125, 198, 205);
50+
color: rgb(45, 45, 45);
51+
padding: 10px;
52+
font-family: arial;
53+
}
54+
55+
header {
56+
font-size: 1.5em;
57+
font-weight: bold;
58+
}
59+
60+
[id=all-contents] {
61+
max-width: 800px;
62+
margin: auto;
63+
}
64+
65+
66+
/* Main navigation menu */
67+
68+
nav {
69+
background: rgb(239, 80, 41);
70+
margin: 0 auto;
71+
display: flex;
72+
padding: 10px;
73+
}
74+
75+
nav header {
76+
display: flex;
77+
align-items: center;
78+
color: rgb(255, 255, 255);
79+
flex: 1;
80+
}
81+
82+
nav ul {
83+
list-style-image: none;
84+
}
85+
86+
nav li {
87+
display: inline-block;
88+
padding: 0 10px;
89+
}
90+
91+
nav a {
92+
text-decoration: none;
93+
color: #fff;
94+
}
95+
96+
97+
/* Main container area beneath menu */
98+
99+
main {
100+
background: rgb(245, 238, 219);
101+
display: flex;
102+
flex-direction: column;
103+
}
104+
105+
[class=sidebar] {
106+
margin-right: 25px;
107+
padding: 10px;
108+
}
109+
110+
[class=sidebar] img {
111+
width: 200px;
112+
}
113+
114+
[class=content] {
115+
flex: 1;
116+
padding: 15px;
117+
}
118+
119+
.content h1, h2, h3, h4, h5, h6 {
120+
margin: 10px;
121+
}
122+
123+
.content section > a {
124+
text-decoration: none;
125+
}
126+
````
127+
128+
**NOTE:** These CSS rules contain the default styles from hte `first-website` project, so if you've pimped-out your styles to your liking, you'll need to edit these CSS style rules to match your fancypants styles.
129+
130+
4. Fantastic! But now we need to link our `studies.html` page in the nav-bar of each page in our website, otherwise, our users will not be able to navigate to our `studies.html` and see how smart we are: Open both the **ROOT** `index.html` file of your website, and the `portfolio.html` file, and edit the `<nav></nav>` of each page to it matches this (note the inclusion of the new studies `<li></li>`):
131+
132+
````HTML
133+
<nav>
134+
<header>Sheba's Glorious Website</header>
135+
<ul>
136+
<li><a href="index.html">Home</a></li>
137+
<li><a href="portfolio.html">Portfolio</a></li>
138+
<li><a href="studies.html">Studies</a></li>
139+
</ul>
140+
</nav>
141+
````
142+
143+
5. Save all your pages, and if your Apache webserver is running, you should be able to see a **Studies** link in your nav-bar, and you should be able to navigate to the `studies.html` page from each page in your website.
144+
145+
## Create a JSBin per JavaScript Subtopic
146+
147+
1. Login to JSBin via GitHub.
148+
2. Create a new JSBin, and select **File > Add description**, and give your JSBin a description and `<title>` to match the name of the subtopic you're exemplifying, for example, "Variables".
149+
3. Implement your JSBin to illustrate the various concepts of the JavaScript subtopic you're exemplifying. You should have code examples that clearly show you understand the concept. Use single-line or multiline comments to explain your code. **Ensure your code works and is valid** by running your JSBin!
150+
151+
````javascript
152+
/*
153+
* VARIABLES:
154+
*
155+
* 0. To hold things in memory during the life-cycle of a program, we can use variables. Variables
156+
* are named identifiers that can point to values of a particular type, like a Number, String,
157+
* Boolean, Array, Object or another data-type. Variables are called so because once created, we
158+
* can CHANGE the value (and type of value) to which they point.
159+
*
160+
* 1. To create a variable we use the keyword, var, followed by a name (id or alias) for our
161+
* variable.
162+
*
163+
* 2. There are 2 phases of using variables: declaration and initialization (or assignment).
164+
*/
165+
166+
// 1. declaration //
167+
var myName;
168+
169+
/*
170+
* At the declaration phase, the variable myName is undefined because we have NOT initialized
171+
* it to anything
172+
*/
173+
console.log(myName); // prints => undefined
174+
175+
// 2. initialization or assignment //
176+
myName = 'john';
177+
console.log(myName); // prints => john
178+
179+
// 3. re-assignment //
180+
myName = 'bob';
181+
console.log(myName); // prints => bob
182+
183+
// NOTE: We can assign and re-assign anything to a variable - we cannot do this with constants //
184+
var myVariable = 1;
185+
var myVariable = true;
186+
myVariable = "someString";
187+
````
188+
189+
4. Once you're cool with your code and you're sure it works, you want to create a **GitHub Gist** of your JSBin. In JSBin, select **File > Export as gist**. This will create an anonymous gist - and in the top of JSBin, click on the yellow tab at the top of the page that says, "Gist created! Open in new tab". This will bring you to the anonymous gist at GitHub.
190+
5. Next, YOU MUST NEXT FORK this anonymous gist so that it is paired with your own GitHub account. Do this by clicking the "Fork" button in top-right corner.
191+
6. Once you've forked your gist, you can optionally delete unused sub-files of the gist: JSBin will create separate gist files for the `html` portion of the gist, which in this case, are not needed - you are only interested in the `.js` sub-file in the gist, it will be called something like `jsbin.jihure.js`, where `jihure` is the JSBin id for your bin. Yuo've created your gist, pat yourself on the back, smoke'em if you got'em!
192+
193+
## Embed the Gist in your Studies
194+
195+
1. Back in your `studies.html` page, find the **content** `<div></div>` tag that looks like this:
196+
197+
````HTML
198+
<div class="content">
199+
<h1>Javascript</h1>
200+
<!-- YOUR NOTE SECTIONS GO BELOW HERE -->
201+
202+
203+
<!-- YOUR NOTE SECTIONS GO ABOVE HERE -->
204+
</div>
205+
````
206+
207+
...and between the comments that read `YOUR NOTE SECTIONS GO BELOW HERE` and `YOUR NOTE SECTIONS GO ABOVE HERE`, and per study note (gist), paste in the following `<section></section>`, this one exemplifying **Variables**:
208+
209+
````HTML
210+
<section>
211+
<hr>
212+
<a href="#variables"><h2>Variables</h2></a>
213+
<code data-gist-id="4ae6dead16cdb2271041" data-gist-file="jsbin.jihure.js" data-gist-hide-footer="true"></code>
214+
</section>
215+
````
216+
217+
2. Importantly, in the `<code></code>` tag, replace the `data-gist-id` attribute with your gist id (the id can be found back on your GitHub gist page, as the last number in the URL of the gist), for example, `https://gist.github.com/jfraboni/4ae6dead16cdb2271041` - the gist id here is, `4ae6dead16cdb2271041`
218+
3. Finally, also in the `<code></code>`, replace the `data-gist-file` with the name of the gist sub-file, which you can find on the GitHub gist page, within the header of the of the JavaScript gist sub-file. For example, the sub-file embedded from the gist at <a href="`https://gist.github.com/jfraboni/4ae6dead16cdb2271041`" target="_blank">https://gist.github.com/jfraboni/4ae6dead16cdb2271041</a> is `jsbin.jihure.js`.
219+
4. Okay, once you do this, save your changes, then flip back to your `studies.html` page and refresh, you should see your nice section header for the subtop, plus your gist right below this, exemplifying your smartness!
220+
5. Ensure you have JavaScript subtops exemplifying the following:
221+
1. Variables
222+
2. Datatypes (Simple & Complex):
223+
1. Number
224+
2. String
225+
3. Boolean
226+
4. Array
227+
5. Object
228+
6. Function
229+
7. undefined
230+
8. null
231+
9. NaN
232+
10. Google Infinity and -Infinity
233+
3. Operators:
234+
1. Assignment
235+
2. Arithmetic
236+
3. Comparison
237+
4. Logical
238+
5. Binary (!, typeOf, -)
239+
6. Turnary (a ? b : c)
240+
4. String manipulation
241+
5. Control flow: if, else-if, else
242+
6. Loops: while, for, for-in
243+
1. Be able to loop any number of times, forward counting up to some limit, backward counting down to 0
244+
2. Loop over an Array, forwards and backwards
245+
3. Loop over an Object, forwards and backwards ( hint: `keys = Object.keys(myObject);` )
246+
7. Functions: programs within programs!
247+
1. The two phases to using functions: First we must ___? Next we can execute (or two other words for executing a function?) a function by?
248+
2. What’s the difference between a function’s parameters and arguments PASSED to a function?
249+
3. What’s the syntax for a NAMED function?
250+
4. How do we assign a function to a variable?
251+
5. Functions can OPTIONALLY take inputs and OPTIONALLY return a single value, how do we specify inputs, and how do we return a value?
252+
6. NOTE: Primitive (simple) values are passed to a function BY COPY, complex by reference. Try it!
253+
7. Scope: Functions can see and modify variables in parent or global scopes. The inverse is NOT true.
254+
8. Closures: Functions form closures around the data they house. If an object returned from the Function and is held in memory somewhere (referenced), that closure stays ALIVE, and data can continue to exist in these closures! (See: our meeting-room app for an example!) (ALSO, see: <a href="understand-javascript-closures-with-ease" target="_blank">Understanding JavaScript Closures with Ease)
255+

0 commit comments

Comments
 (0)