Update documentation

webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc

@@ -1,8 +1,8 @@
 == Try It! Using the console
 
 Let us try it. Use the console in the dev tools and call the javascript function *webgoat.customjs.phoneHome()*. +
-You should get a response in the console. Your result should look something like:
+You should get a response in the console. Your result should look something like this:
 `phone home said
 {"lessonCompleted:true, ... ,"output":"phone home response is..."`
 Paste the random number, after that, in the text field below.
-(Make sure you got the most recent number, since it is randomly generated each time you call the function)
+(Make sure you got the most recent number since it is randomly generated each time you call the function)

webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment_Network.adoc

@@ -1,6 +1,6 @@
 == Try It! Working with the Network tab
 
-In this assignment you need to find a specific HTTP request and read a randomized number from it.
+In this assignment, you need to find a specific HTTP request and read a randomized number.
-To start click the first button, this wil generate an HTTP request. Try to find the specific HTTP request.
+To start, click the first button. This will generate an HTTP request. Try to find the specific HTTP request.
 The request should contain a field: `networkNum:`
-Copy the number which is displayed afterwards, into the input field below and click on the check button.
+Copy the number displayed afterward into the input field below and click on the check button.

webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc

@@ -1,17 +1,17 @@
 == The Console tab
 
-In the console tab you can see anything, which a loaded JavaScript file may have printed out to it.
+In the console tab, you can see anything that a loaded JavaScript file may have printed out.
 Do not worry if you see something in red. While that is an error, it has probably resolved itself.
-Through the console tab, it is also possible for you to run your own line of JavaScript code.
+Through the console tab, it is also possible for you to run your line of JavaScript code.
 
-Start by clearing console using the shortcut `CTRL+L`.
+Start by clearing the console using the shortcut `CTRL+L.`
 
-To run your own JavaScript, simply click inside of the console and write something like:
+To run your JavaScript, click inside of the console and write something like:
-`console.log("Hello WebGoat!");` Hit enter. Hello WebGoat should now appear in your console.
+`console.log("Hello WebGoat!");` Hit enter. `Hello WebGoat` should now appear in your console.
-The console also allows you to do some basic arithmetic. If you type for example `1+3` and hit
+The console also allows you to do some basic arithmetic. If you type, for example, `1+3` and hit
-enter the console should display 4.
+enter, the console should display 4.
 
 Note: You may see an `undefined` in the console. You can safely  ignore this statement,
-it only means, that the JavaScript function you have called did not return anything, therefore `undefined`.
+it only means that the JavaScript function you have called did not return anything, therefore `undefined.`
 
-image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"]
+image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"]

webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc

@@ -1,22 +1,22 @@
 == The Elements Tab
 
-The elements tab allows you to look at the HTML and CSS code, that are used to define and style the website.
+The elements tab allows you to look at the HTML and CSS code used to define and style the website.
 
 === HTML source
 
-If you hover over one line you can see that a part of the website turns blue. That means that
+If you hover over one line, you can see that a part of the website turns blue. That means that
 this particular HTML line defines this section of the website.
-The elements tab allows you to make changes to every single HTML element. For example if you click inside
+The elements tab allows you to make changes to every single HTML element. For example, if you click inside
-a paragraph (<p>...</p>) Tag you can edit the content of the website. If you have made your changes and then click enter
+a paragraph (<p>...</p>) Tag,  you can edit the content of the website. If you have made your changes and then click enter
-Chrome will actually update the website to show your edits. You can also change the HTML Tag used,
+Chrome will update the website to show your edits. You can also change the HTML Tag used,
-the classes and id's a tag has and much more.
+the classes and id's a tag has, and much more.
 
 image::images/ChromeDev_Elements.jpg[DeveloperToolsElements,500,350,style="lesson-image"]
 
 === CSS source
 
-Underneath the HTML source, you can find information about the CSS which is used to style the
+You can find information about the CSS used to style the
-Website. Like the HTML, you can also edit the CSS and therefore adjust the styling of the website.
+website under the HTML source. Like the HTML, you can also edit the CSS and, therefore, adjust the website's styling.
-You can edit specific values, or turn off individual styling.
+You can edit specific values or turn off individual styling.
 
-image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"]
+image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"]

webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc

@@ -1,19 +1,19 @@
 == Google Chrome Developer Tools
 
-To complete certain assignments you sometimes may have to look at the JavaScript
+To complete certain assignments, you sometimes may have to look at the JavaScript
 source code or run a JavaScript command on your own.
-To do that Google Chrome has a set of tools which allows you to do that and much much more.
+To do that, Google Chrome has a set of tools that allow you to do that and much more.
-While these tools are not specific to Google Chrome, almost every modern browser has a set
+While these tools are not specific to Google Chrome, almost every modern browser has a bunch
-of their own, our introduction will focus on the ones found in Google Chrome.
+of its own. Our introduction will focus on the ones found in Google Chrome.
-You can however still use the browser of your choice, like Firefox or Safari, although some steps of this tutorial
+You can, however still use the browser of your choice, like Firefox or Safari, although some steps of this tutorial
-may be different for you.
+maybe different for you.
 
-Keep in mind that the following tutorial, is not there to teach everything there is about these tools.
+Keep in mind that the following tutorial is not there to teach everything about these tools.
-This tutorial will only focus on the essential knowledge you need to complete certain assignments.
+This tutorial will only focus on the essential knowledge to complete specific assignments.
-Also if you are already familiar with these Tools you can safely skip these lessons.
+Also, if you are already familiar with these tools, you can safely skip these lessons.
 
-To get started, *open the developer tools*. There are multiple ways to open them:
+To get started: *open the developer tools*. There are multiple ways to open them:
 
-1. Right click anywhere in the browser window and select the option _"Inspect"_.
+1. Right-click anywhere in the browser window and select the option _"Inspect"_.
 2. Go to the browser menu (three dots in the top right corner), then go to _"More tools"_ and select the option _"Developer tools"_.
-3. Use the keyboard shortcut _Ctrl + Shift + I_
+3. Use the keyboard shortcut _Ctrl + Shift + I_

webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc

@@ -1,16 +1,16 @@
 == The Sources tab
 
-In the sources tab you can check out the file system and view all the HTML, CSS and JavaScript files that are used, to
+In the sources tab, you can check out the file system and view all the HTML, CSS, and JavaScript files used to
-create the website. Simply click on a file to view its contents.
+create the website. Click on a file to view its contents.
 
 image::images/ChromeDev_Sources.jpg[DeveloperToolsSources,400,500,style="lesson-image"]
 
 == The Network tab
 
-In the Network tab you can view HTTP requests and responses the website has performed.
+In the Network tab, you can view HTTP requests and responses the website has performed.
-If you want more detailed information on a particular request, just click on it.
+Just click on it if you want more detailed information on a particular request.
-In the Timeline above the blue dots represent when these requests and responses have been performed.
+The "Timeline" above the blue dots represents when these requests and responses have been performed.
-You can also see the Requests done in a specific time frame, simply by clicking and dragging on the timeline. Now the window
+You can also see the Requests done in a specific time frame simply by clicking and dragging on the timeline. The window
-below, will only show the requests and responses done in that particular time frame.
+below will only show the requests and responses done in that time frame.
 
-image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"]
+image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"]