preliminary work for docsify implementation (up to space game)

1-getting-started-lessons/1-intro-to-programming-languages/README.md

@@ -5,9 +5,10 @@ This lesson covers the basics of programming languages. The topics covered here
 ![Intro Programming](webdev101-programming.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## Pre-Lecture Quiz
+[Pre-lecture quiz](1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md)
 
-### Introduction
+## Introduction
 
 In this lesson, we'll cover:
 
@@ -179,12 +180,13 @@ When a developer wants to learn something new, they'll most likely turn to docum
 
 Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go?
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## Post-Lecture Quiz
+[Post-lecture quiz](1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md)
 
 ## Review & Self Study
 
 Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? 
 
 ## Assignment 
 
-[Reading the Docs](assignment.md)
+[Reading the Docs](1-getting-started-lessons/1-intro-to-programming-languages/assignment.md)

1-getting-started-lessons/2-github-basics/README.md

@@ -5,10 +5,10 @@ This lesson covers the basics of GitHub, a platform to host and manage changes t
 ![Intro GitHub](images/webdev101-github.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
+## Pre-Lecture Quiz
+[Pre-lecture quiz](1-getting-started-lessons/2-github-basics/.github/pre-lecture-quiz.md)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
-
-### Introduction
+## Introduction
 
 In this lesson, we'll cover:
 
@@ -273,7 +273,8 @@ Projects might also have discussion in forums, mailing lists, or chat channels l
 
 Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes.
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## Post-Lecture Quiz
+[Post-lecture quiz](1-getting-started-lessons/2-github-basics/.github/post-lecture-quiz.md)
 
 ## Review & Self Study
 

1-getting-started-lessons/3-accessibility/README.md

@@ -3,7 +3,8 @@
 ![All About Accessibility](webdev101-a11y.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## Pre-Lecture Quiz
+[Pre-lecture quiz](1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md)
 
 > The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
 >
@@ -205,14 +206,15 @@ Take this HTML and rewrite it to be as accessible as possible, given the strateg
 </html>
 ```
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## Post-Lecture Quiz
+[Post-lecture quiz](1-getting-started-lessons/3-accessibility/.github/post-lecture-quiz.md)
 
 ## Review & Self Study
 
 Many governments have laws regarding accessibility requirements. Read up on your home country's accessibility laws. What is covered, and what isn't? An example is [this government web site](https://accessibility.blog.gov.uk/).
 
 ## Assignment
 
-[Analyze a non-accessible web site](assignment.md)
+[Analyze a non-accessible web site](1-getting-started-lessons/3-accessibility/assignment.md)
 
 Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument

2-js-basics/1-data-types/README.md

@@ -5,7 +5,8 @@
 ![JavaScript Basics - Data types](images/webdev101-js-datatypes.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## Pre-Lecture Quiz
+[Pre-lecture quiz](2-js-basics/1-data-types/.github/pre-lecture-quiz.md)
 
 This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
 
@@ -182,13 +183,13 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis
 
 JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## Post-Lecture Quiz
+[Post-lecture quiz](2-js-basics/1-data-types/.github/post-lecture-quiz.md)
 
 ## Review & Self Study
 
 Take a look at [this list of JavaScript exercises](https://css-tricks.com/snippets/javascript/) and try one. What did you learn?
 
 ## Assignment
 
-[Data Types Practice](assignment.md)
-
+[Data Types Practice](2-js-basics/1-data-types/assignment.md)

2-js-basics/2-functions-methods/README.md

@@ -5,7 +5,8 @@
 ![JavaScript Basics - Functions](images/webdev101-js-functions.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## Pre-Lecture Quiz
+[Pre-lecture quiz](2-js-basics/2-functions-methods/.github/pre-lecture-quiz.md)
 
 When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
 
@@ -179,12 +180,13 @@ You've now seen we have three ways to pass a function as a parameter and might b
 
 Can you articulate in one sentence the difference between functions and methods? Give it a try!
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## Post-Lecture Quiz
+[Post-lecture quiz](2-js-basics/2-functions-methods/.github/post-lecture-quiz.md)
 
 ## Review & Self Study
 
 It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax.
 
 ## Assignment
 
-[Fun with Functions](assignment.md)
+[Fun with Functions](2-js-basics/2-functions-methods/assignment.md)

2-js-basics/3-making-decisions/README.md

@@ -5,7 +5,9 @@
 ![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## 
+Pre-Lecture Quiz
+[Pre-lecture quiz](2-js-basics/3-making-decisions/.github/pre-lecture-quiz.md)
 
 Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
 
@@ -158,7 +160,9 @@ if (firstNumber > secondNumber) {
 
 Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## 
+Post-Lecture Quiz
+[Post-lecture quiz](2-js-basics/3-making-decisions/.github/post-lecture-quiz.md)
 
 ## Review & Self Study
 
@@ -168,4 +172,4 @@ Go through Josh Comeau's wonderful [operator lookup](https://joshwcomeau.com/ope
 
 ## Assignment
 
-[Operators](assignment.md)
+[Operators](2-js-basics/3-making-decisions/assignment.md)

2-js-basics/4-arrays-loops/README.md

@@ -5,7 +5,9 @@
 ![JavaScript Basics - Arrays](images/webdev101-js-arrays.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## 
+Pre-Lecture Quiz
+[Pre-lecture quiz](2-js-basics/4-arrays-loops/.github/pre-lecture-quiz.md)
 
 This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.
 
@@ -110,12 +112,15 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
 
 There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## 
+Post-Lecture Quiz
+[Post-lecture quiz](2-js-basics/4-arrays-loops/.github/post-lecture-quiz.md)
+
 
 ## Review & Self Study
 
 Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
 
 ## Assignment
 
-[Loop an Array](assignment.md)
+[Loop an Array](2-js-basics/4-arrays-loops/assignment.md)

3-terrarium/1-intro-to-html/README.md

@@ -3,15 +3,17 @@
 ![Introduction to HTML](images/webdev101-html.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
-## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## Pre-Lecture Quiz
 
-### Introduction:
+[Pre-lecture quiz](3-terrarium/1-intro-to-html/.github/pre-lecture-quiz.md)
+
+### Introduction
 
 HTML, or HyperText Markup Language, is the 'skeleton' of the web. If CSS 'dresses up' your HTML and JavaScript brings it to life, the body of your web application is its HTML. HTML's syntax even reflects that idea, as it includes "head", "body", and "footer" tags.
 
 In this lesson, we're going to use HTML to layout the 'skeleton' of our virtual terrarium's interface. It will have a title and three columns: a right and left column where the draggable plants live, and a center area that will be the actual glass-looking terrarium. By the end of this lesson, you will be able to see the plants in the columns, but the interface will look a little strange; don't worry, in the next section you will add CSS styles to the interface to make it look better.
 
-### Task:
+### Task
 
 On your computer, create a folder called 'terrarium' and inside it, a file called 'index.html'. You can do this in Visual Studio Code after you create your terrarium folder by opening a new VS Code window, clicking 'open folder', and navigating to your new folder. Click the small 'file' button in the Explorer pane and create the new file:
 
@@ -21,15 +23,15 @@ On your computer, create a folder called 'terrarium' and inside it, a file calle
 
 ---
 
-## 1. The DocType and html tags
+## The DocType and html tags
 
 The first line of an HTML file is its doctype. It's a little surprising that you need to have this line at the very top of the file, but it tells older browsers that the browser needs to render the page in a standard mode, following the current html specification.
 
 > Tip: in VS Code, you can hover over a tag and get information about its use from the MDN Reference guides.
 
 The second line should be the `<html>` tag's opening tag, followed right now by its closing tag. These tags are the root elements of your interface.
 
-### Task:
+### Task
 
 Add these lines at the top of your `index.html` file:
 
@@ -42,7 +44,7 @@ Add these lines at the top of your `index.html` file:
 
 ---
 
-## 2. The document's 'head'
+## The document's 'head'
 
 The 'head' area of the HTML document includes crucial information about your web page, also known as [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). In our case, we tell the web server to which this page will be sent to be rendered four things:
 
@@ -52,7 +54,7 @@ The 'head' area of the HTML document includes crucial information about your web
     -   browser information, including `x-ua-compatible` which indicates that the IE=edge browser is supported
     -   information about how the viewport should behave when it is loaded. Setting the viewport to have an initial scale of 1 controls the zoom level when the page is first loaded.
 
-### Task:
+### Task
 
 Add a 'head' block to your document in between the opening and closing `<html>` tags.
 
@@ -69,13 +71,13 @@ Add a 'head' block to your document in between the opening and closing `<html>`
 
 ---
 
-## 3. The document's `body`
+## The document's `body`
 
 ### HTML Tags
 
 In HTML, you add tags to your .html file to create elements of a web page. Each tag usually has an opening and closing tag, like this: `<p>hello</p>` to indicate a paragraph. Create you interface's `<body>` by adding a set of tags inside the `<html>` tag pair; your markup now looks like this:
 
-### Task:
+### Task
 
 ```html
 <!DOCTYPE html>
@@ -98,7 +100,7 @@ One html tag that doesn't need a closing tag is the `<img>` tag, because it has
 
 Create a folder in your app called `images` and in that, add all the images in the [source code folder](../images); (there are 14 images of plants).
 
-### Task:
+### Task
 
 Add those plant images into two columns between the `<body></body>` tags:
 
@@ -163,7 +165,7 @@ Each image has an alt tag that will appear even if you can't see or render an im
 
 ---
 
-## 4. Semantic markup
+## Semantic markup
 
 In general, it's preferable to use 'semantics' when writing HTML. What does that mean? It means that you use HTML tags the way they were designed: to represent its data; so an H1 tag should always be present on a page
 
@@ -177,7 +179,7 @@ Using semantic markup such as having headers be `<h1>` and unordered lists be re
 
 ✅ Take a look at a screen reader and [how it interacts with a web page](https://www.youtube.com/watch?v=OUDV1gqs9GA). Can you see why having non semantic markup might confuse the user?
 
-## 5. The terrarium
+## The terrarium
 
 The last part of this interface involves creating markup that will be styled to create a terrarium.
 
@@ -205,7 +207,9 @@ Add this markup above the last `</div>` tag:
 
 There are some wild 'older' tags in HTML that are still fun to play with, though you shouldn't use deprecated tags such as [these tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) in your markup. Still, can you use the old `<marquee>` tag to make the h1 title scroll horizontally? (if you do, don't forget to remove it afterwards)
 
-## [Post-lecture quiz](.github/post-lecture-quiz.md)
+## Post-Lecture Quiz
+
+[Post-lecture quiz](3-terrarium/1-intro-to-html/.github/post-lecture-quiz.md)
 
 ## Review & Self Study
 
@@ -216,4 +220,4 @@ Learn more about building sites for the web and mobile devices at [Microsoft Lea
 
 ## Assignment
 
-[Practice your HTML: Build a blog mockup](assignment.md)
+[Practice your HTML: Build a blog mockup](3-terrarium/1-intro-to-html/assignment.md)