Updating instructions and screenshots to reflect new console UI

Author: mikedeck

WebApplication/2_UserManagement/README.md

@@ -95,15 +95,15 @@ From the Amazon Cognito console select your user pool and then select the **App
 <details>
 <summary><strong>Step-by-step instructions (expand for details)</strong></summary><p>
 
-1. From the Pool Details page for your user pool, select **App clients** from the left navigation bar.
+1. From the Pool Details page for your user pool, select **App clients** from the **General settings** section in the left navigation bar.
 
-1. Click **Add an app client**.
+1. Choose **Add an app client**.
 
-1. Give the app a name such as `WildRydesWebApp`.
+1. Give the app client a name such as `WildRydesWebApp`.
 
 1. **Uncheck** the Generate client secret option. Client secrets aren't supported for use with browser-based applications.
 
-1. Click **Create app client**.
+1. Choose **Create app client**.
 
    <kbd>![Create app client screenshot](../images/add-app.png)</kbd>
 

WebApplication/3_ServerlessBackend/README.md

@@ -61,7 +61,7 @@ Attach the managed policy called `AWSLambdaBasicExecutionRole` to this role to g
 
 1. Select **Roles** in the left navigation bar and then choose **Create new role**.
 
-1. Select **Lambda** for the role type from **AWS Service Role**, then click **Next: Permissions**
+1. Select **Lambda** for the role type from the **AWS service** group, then click **Next: Permissions**
 
     **Note:** Selecting a role type automatically creates a trust policy for your role that allows AWS services to assume this role on your behalf. If you were creating this role using the CLI, AWS CloudFormation or another mechanism, you would specify a trust policy directly.
 
@@ -75,22 +75,28 @@ Attach the managed policy called `AWSLambdaBasicExecutionRole` to this role to g
 
 1. Type `WildRydesLambda` into the filter box on the Roles page and choose the role you just created.
 
-1. On the Permissions tab, click **Add inline policy** link to create a new inline policy.
+1. On the Permissions tab, choose the **Add inline policy** link in the lower right corner to create a new inline policy.
     ![Inline policies screenshot](../images/inline-policies.png)
 
-1. Ensure **Policy Generator** is selected and choose **Select**.
+1. Select **Choose a service**.
 
-1. Select **Amazon DynamoDB** from the **AWS Service** dropdown.
+1. Begin typing `DynamoDB` into the search box labeled **Find a service** and select **DynamoDB** when it appears.
+    ![Select policy service](../images/select-policy-service.png)
 
-1. Select **PutItem** from the Actions list.
+1. Choose **Select actions**.
 
-1. Paste the ARN of the table you created in the previous section in the **Amazon Resource Name (ARN)** field.
+1. Begin typing `PutItem` into the search box labeled **Filter actions** and check the box next to **PutItem** when it appears.
 
-    ![Policy generator screenshot](../images/policy-generator.png)
+1. Select the **Resources** section.
 
-1. Choose **Add Statement**.
+1. With the **Specific** option selected, choose the Add ARN link in the **table** section.
 
-1. Choose **Next Step** then **Apply Policy**.
+1. Paste the ARN of the table you created in the previous section in the **Specify ARN for table** field, and choose **Add**.
+
+1. Choose **Review Policy**.
+
+1. Enter `DynamoDBWriteAccess` for the policy name and choose **Create policy**.
+    ![Review Policy](../images/review-policy.png)
 
 </p></details>
 
@@ -113,39 +119,36 @@ Make sure to configure your function to use the `WildRydesLambda` IAM role you c
 
 1. Click **Create function**.
 
-1. Click on **Author from scratch**.
+1. Keep the default **Author from scratch** card selected.
 
 1. Enter `RequestUnicorn` in the **Name** field.
 
+1. Select **Node.js 6.10** for the **Runtime**.
+
+1. Ensure `Choose an existing role` is selected from the **Role** dropdown.
+
 1. Select `WildRydesLambda` from the **Existing Role** dropdown.
     ![Create Lambda function screenshot](../images/create-lambda-function.png)
 
 1. Click on **Create function**.
 
-1. Click **Configuration**.
-
-1. Select **Node.js 6.10** for the **Runtime**.
-
-1. Leave the default of `index.handler` for the **Handler** field.
-
-1. Copy and paste the code from [requestUnicorn.js](requestUnicorn.js) into the code entry area.
+1. Scroll down to the **Function code** section and replace the exiting code in the **index.js** code editor with the contents of [requestUnicorn.js](requestUnicorn.js).
     ![Create Lambda function screenshot](../images/create-lambda-function-code.png)
 
-1. Scroll to top and click **"Save"** (**Not** "Save and test" since we haven't configured any test event)
+1. Click **"Save"** in the upper right corner of the page.
 
 </p></details>
 
 ## Implementation Validation
 
 For this module you will test the function that you built using the AWS Lambda console. In the next module you will add a REST API with API Gateway so you can invoke your function from the browser-based application that you deployed in the first module.
 
-1. From the main edit screen for your function, select **Configure test event** from "Select a test event..." dropdown list.
+1. From the main edit screen for your function, select **Configure test event** from the the **Select a test event...** dropdown.
     ![Configure test event](../images/configure-test-event.png)
 
-1. Leave "Hello World" there
+1. Keep **Create new test event** selected.
 
-1. Put "TestRequestEvent" into Event name
-    ![Configure test event](../images/configure-test-event-2.png)
+1. Enter `TestRequestEvent` in the **Event name** field
 
 1. Copy and paste the following test event into the editor:
 
@@ -171,10 +174,13 @@ For this module you will test the function that you built using the AWS Lambda c
     }
     ```
 
+    ![Configure test event](../images/configure-test-event-2.png)
 
 1. Click **Create**.
 
-1. Click **Test**.   
+1. On the main function edit screen click **Test** with `TestRequestEvent` selected in the dropdown.   
+
+1. Scroll to the top of the page and expand the **Details** section of the **Execution result** section.
 
 1. Verify that the execution succeeded and that the function result looks like the following:
 ```JSON

WebApplication/4_RESTfulAPIs/README.md

@@ -69,6 +69,9 @@ Use the Amazon API Gateway console to create a new API.
 
 1. Select **New API** and enter `WildRydes` for the **API Name**.
 
+1. Keep `Edge optimized` selected in the **Endpoint Type** dropdown.
+    ***Note***: Edge optimized are best for public services being accessed from the Internet. Regional endpoints are typically used for APIs that are accessed primarily from within the same AWS Region.
+
 1. Choose **Create API**
 
     ![Create API screenshot](../images/create-api.png)
@@ -91,35 +94,37 @@ In the Amazon API Gateway console, create a new Cognito user pool authorizer for
 
 1. Chose **Create New Authorizer**.
 
-    ![Create user pool authorizer screenshot](../images/create-user-pool-authorizer.png)
-
 1. Enter `WildRydes` for the Authorizer name.
 
 1. Select **Cognito** for the type.
 
-1. In the Region drop-down under **Cognito User Pool**, select the Region where you created your Cognito user pool in module 2.
+1. In the Region drop-down under **Cognito User Pool**, select the Region where you created your Cognito user pool in module 2 (by default the current region should be selected).
 
 1. Enter `WildRydes` (or the name you gave your user pool) in the **Cognito User Pool** input.
 
 1. Enter `Authorization` for the **Token Source**.
 
 1. Choose **Create**.
 
+    ![Create user pool authorizer screenshot](../images/create-user-pool-authorizer.png)
+
 #### Verify your authorizer configuration
 
 1. Open a new browser tab and visit `/ride.html` under your website's domain.
 
 1. If you are redirected to the sign-in page, sign in with the user you created in the last module. You will be redirected back to `/ride.html`.
 
-1. Copy the auth token from the notification on the `/ride.html`, 
+1. Copy the auth token from the notification on the `/ride.html`,
 
 1. Go back to previous tab where you have just finished creating the Authorizer
 
-1. Click "Test", paste it into the **Authorization Token** field in the popup dialog.
+1. Click **Test** at the bottom of the card for the authorizer.
+
+1. Paste the auth token into the **Authorization Token** field in the popup dialog.
 
     ![Test Authorizer screenshot](../images/apigateway-test-authorizer.png)
 
-1. Click **Test** button and verify that you see the claims for your user displayed.
+1. Click **Test** button and verify that the response code is 200 and that you see the claims for your user displayed.
 
 </p></details>
 
@@ -137,8 +142,12 @@ Create a new resource called /ride within your API. Then create a POST method fo
 
 1. Ensure the **Resource Path** is set to `ride`.
 
+1. Select **Enable API Gateway CORS** for the resource.
+
 1. Click **Create Resource**.
 
+    ![Create resource screenshot](../images/create-resource.png)
+
 1. With the newly created `/ride` resource selected, from the **Action** dropdown select **Create Method**.
 
 1. Select `POST` from the new dropdown that appears, then **click the checkmark**.
@@ -169,27 +178,7 @@ Create a new resource called /ride within your API. Then create a POST method fo
 
 </p></details>
 
-### 4. Enable CORS
-Modern web browsers prevent HTTP requests from scripts on pages hosted on one domain to APIs hosted on another domain unless the API provides cross-origin resource sharing (CORS) response headers that explicitly allow them. In the Amazon API Gateway console you can add the necessary configuration to send the appropriate CORS headers under the action menu when you have a resource selected. You should enable CORS for POST and OPTIONS on your /ride resource. For simplicity, you can set the Access-Control-Allow-Origin header value to '\*', but in a production application you should always explicitly whitelist authorized domains to mitigate [cross-site request forgery (CSRF)](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29) attacks.
-
-For more information about CORS configurations in general, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
-
-<details>
-<summary><strong>Step-by-step instructions (expand for details)</strong></summary><p>
-
-1. In the Amazon API Gateway console, in the middle panel, select the `/ride` resource.
-
-1. From the **Actions** drop-down list select **Enable CORS**.
-
-1. Use the default settings and choose **Enable CORS and replace existing CORS headers**.
-
-1. Choose **Yes, replace existing values**.
-
-1. Wait for a checkmark to appear next to all the steps.
-
-</p></details>
-
-### 5. Deploy Your API
+### 4. Deploy Your API
 From the Amazon API Gateway console, choose Actions, Deploy API. You'll be prompted to create a new stage. You can use prod for the stage name.
 
 <details>
@@ -207,7 +196,7 @@ From the Amazon API Gateway console, choose Actions, Deploy API. You'll be promp
 
 </p></details>
 
-### 6. Update the Website Config
+### 5. Update the Website Config
 Update the /js/config.js file in your website deployment to include the invoke URL of the stage you just created. You should copy the invoke URL directly from the top of the stage editor page on the Amazon API Gateway console and paste it into the \_config.api.invokeUrl key of your sites /js/config.js file. Make sure when you update the config file it still contains the updates you made in the previous module for your Cognito user pool.
 
 <details>