update styles for tutorial

Author: HansUXdev

01-CRUD.md

@@ -3,7 +3,7 @@ title: "Introduction to Mongo"
 logoImg: "https://raw.githubusercontent.com/HansUXdev/JavaScript-First/884d95cce59c213f6bb2af7e6d54977b7e06b048/logo.drawio.svg"
 theme : "night"
 transition: "slide"
-# highlightTheme: "monokai"
+highlightTheme: "dracula"
 slideNumber: true
 # loop: true
 # autoSlide: 5000 
@@ -16,6 +16,7 @@ enableChalkboard: false
 ---
 
 <style>
+.line.focus{background:none;font-size: xx-large;color:#5cc4ea;}
 #logo > img {max-height: 10.5em;}
 .p1{padding:1em; border:none}
 </style>
@@ -77,7 +78,6 @@ Key VS Column { .fragment }
 :::block
 Document VS Record { .fragment }
 
-Key: values 
 :::
 
 
@@ -92,9 +92,25 @@ Values have a datatype
 
 ### What is C.R.U.D.?
 
-[![](assets/CRUD.drawio.svg)]()
-{ .fragment .p1}
 
+:::block
+[![](assets/CRUD.drawio.svg)]() 
+
+{style=width:50%;float:left; height:50%}
+
+:::
+
+:::block
+**C**reate with `insert( )` { .fragment }
+
+**R**ead with `find( )` { .fragment }
+
+**U**pdate with `update( )` { .fragment }
+
+**D**elete with `remove( )`  { .fragment }
+
+{style=width:50%;float:right; height:50%}
+:::
 
 ---
 
@@ -150,7 +166,7 @@ call the database and the collection {.fragment .current-only data-code-focus=11
 
 add another lawyer from the state bar, "Doug" {.fragment .current-only data-code-focus=18-18}
 
-**DELETES** a disbar the lawyer "Doug" {.fragment .current-only data-code-focus=20-20}
+**DELETE** the lawyer "Doug" {.fragment .current-only data-code-focus=20-20}
 
 
 {style=width:20%;float:right}

lessons/00-local-docker.md

@@ -4,12 +4,12 @@ Here we are applying the idea of [GhostPlate](https://github.com/HansUXdev/Ghost
 
 # How to use?:
 See that button?
-Click it with your right index finger and wait.
-If you use any other finger I will bite it off.
-[![Open in Gitpod](http://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io#https://github.com/gitpod-io/gitpod-status)
+Click it.
 
+<p align="center">  
+   <a href="https://gitpod.io/#https://github.com/HansUXdev/MongoLearnPodt"><img src="http://gitpod.io/button/open-in-gitpod.svg" alt="Open on GitPod" height="50px"/></a>  
+</p>
 
-Then follow the directions inside the GitPod. Don't worry its still better than Microsoft documentation...
 
 ## Unit Learning Objective
 Students should be to:
@@ -29,9 +29,6 @@ Students should be to:
 3. Distinguish between the name of a docker image (mongo) and the container name (learn-mongo)
 4. Use NPM Scripts to store docker commands such as docker exec for mongo shell
 
-# About me
-Hans McMurdy is an experianced web developer and coding teacher.
-
 ## About
 This is a brief mongo tutorial in GitPod and originally built for docker and docker compose which you can see [here](https://github.com/HansUXdev/OSS-Books/tree/master/JavaScript-First/00-JavaScript-DataBases/mongo).
 
@@ -95,6 +92,9 @@ This is a brief mongo tutorial in GitPod and originally built for docker and doc
       - ```docker exec -it learn-mongo mongo```
 
 # Conclusion
+
 ## Key learnings
+
 ## Tips and advice
+
 ## Final thoughts and next steps