bitovi · chasenlehara · Aug 20, 2024 · Jun 18, 2024 · Jun 20, 2024 · Jun 20, 2024
diff --git a/src/angular/10-updating-service-params/updating-service-params.md b/src/angular/10-updating-service-params/updating-service-params.md
@@ -15,14 +15,14 @@ In this part, we will:
 ## Problem
 
 <img src="../static/img/angular/10-updating-service-params/before.png"
-  style="border: solid 1px black; max-width: 400px;"/>
+  style="border: solid 1px black;" width="400"/>
 
 Now that we are able to capture a user’s state and city preferences, we want to only return restaurants in the selected city. Modify the `getRestaurants` method in the **src/app/restaurant/restaurant.service.ts** file to take two string parameters, one for city, and one for state.
 
 The requested URL with params should look like this: `'/api/restaurants?filter[address.state]=IL&filter[address.city]=Chicago'`
 
 <img src="../static/img/angular/10-updating-service-params/after.png"
-  style="border: solid 1px black; max-width: 400px;"/>
+  style="border: solid 1px black;" width="400"/>
 
 ## What you need to know
 

diff --git a/src/angular/14-building-order-form/building-order-form.md b/src/angular/14-building-order-form/building-order-form.md
@@ -141,7 +141,7 @@ Now let’s add the markup to our order component implementing the tabs widget.
 
 Now when we view the order form of our route, we’ll see a nice form and tabs for lunch and dinner menu options.
 
-![Place My Order App tabs](../static/img/angular/pmo-tabs-working.gif 'Place My Order App tabs')
+<img alt="Place My Order App tabs" src="../static/img/angular/pmo-tabs-working.gif">
 
 ## Problem 3: Create a `menu-items` component
 

diff --git a/src/angular/15-directive/15-directive.md b/src/angular/15-directive/15-directive.md
@@ -10,7 +10,7 @@
 While filling out the `phone number` field, you might have noticed that users can type in both letters and numbers. This is a problem because we do not want users entering letters in the `phone number` field.
 
 <img src="../static/img/angular/15-directives/order-form-thumbnails.png"
-style="border: solid 1px black; max-width: 420px;"/>
+style="border: solid 1px black;" width="420"/>
 
 In order to fix this, we will create an Attribute Directive that will change the behavior of the Phone Input Field, and will ensure that only numbers can be entered in the field.
 

diff --git a/src/angular/2-building-first-app/building-first-app.md b/src/angular/2-building-first-app/building-first-app.md
@@ -24,7 +24,7 @@ In this part, we will:
 We want to create a new Angular application and update it to say **Place My Order App: Coming Soon!** in an `<h1>` element.
 
 <img src="../static/img/angular/2-generate-an-app/after.png"
-  style="border: solid 1px black; max-width: 320px;"/>
+  style="border: solid 1px black;" width="320"/>
 
 ## What you need to know
 
@@ -44,7 +44,7 @@ If you’re looking for a code editor (aka IDE) to improve your Angular developm
 
 <a href="https://code.visualstudio.com/">VS Code</a> is Microsoft’s modern take on an IDE for app development (P.S. TypeScript is a Microsoft Open Source project). VS Code has built in TypeScript support for syntax highlighting, IntelliSense code completion, and linting.
 
-<a href="../static/img/vs-code-screenshot.png"><img src="../static/img/vs-code-screenshot.png" width="100%" alt="Visual Studio Code screenshot" /></a>
+<a href="../static/img/vs-code-screenshot.png"><img src="../static/img/vs-code-screenshot.png" alt="Visual Studio Code screenshot" /></a>
 
 Helpful Plugins:
 
@@ -55,7 +55,7 @@ Helpful Plugins:
 
 <a href="https://www.jetbrains.com/webstorm/download/">Webstorm</a> is a platform by JetBrains that is loved for its great code refactoring assistance and version control integration, but it does require a paid subscription.
 
-<a href="../static/img/webstorm-screenshot.png"><img src="../static/img/webstorm-screenshot.png" width="100%" alt="Webstorm screenshot" /></a>
+<a href="../static/img/webstorm-screenshot.png"><img src="../static/img/webstorm-screenshot.png" alt="Webstorm screenshot" /></a>
 
 Helpful Plugins:
 
@@ -77,7 +77,8 @@ npm install -g @angular/cli@17
 
 Our final goal is to build a restaurant menu and ordering application, which should look something like this:
 
-![Place My Order App screenshot](../static/img/place-my-order.png 'Place My Order App screenshot')
+<img alt="Place My Order App screenshot" src="../static/img/place-my-order.png" width="640">
+
 
 (reminder: You can see a DoneJS implementation of this application at [www.place-my-order.com](http://www.place-my-order.com))
 

diff --git a/src/angular/3-creating-components/creating-components.md b/src/angular/3-creating-components/creating-components.md
@@ -74,7 +74,7 @@ Data can also be passed to child components. Data can be passed with expression
 Create a component that displays a title read from a component’s `title` member.
 
 <img src="../static/img/angular/3-creating-components/home-component.png"
-  style="border: solid 1px black; max-width: 640px;"/>
+  style="border: solid 1px black;" width="640"/>
 
 The component should provide the following HTML:
 
@@ -171,7 +171,7 @@ If you’ve implemented the solution correctly, the tests will pass when you run
 We want to display a list of restaurants in our UI once the data has been set on the restaurants member. It will look like:
 
 <img src="../static/img/angular/3-creating-components/restaurant-component.png"
-  style="border: solid 1px black; max-width: 640px;"/>
+  style="border: solid 1px black;" width="640"/>
 
 > Note: We will fix the missing images in the next step.
 

diff --git a/src/angular/3a-pipes/3a-pipes.md b/src/angular/3a-pipes/3a-pipes.md
@@ -10,12 +10,12 @@
 You may have noticed an image error in our rendered html page. We’re using an API in this demo that wasn’t built for our exact purposes, and we need a different image path for our app to serve.
 
 <img src="../static/img/angular/3-creating-components/restaurant-component.png"
-  style="border: solid 1px black; max-width: 320px;"/>
+  style="border: solid 1px black;" width="320"/>
 
 In this exercise, we will fix the path of the thumbnail images in **src/app/restaurant/restaurant.component.html**.
 
 <img src="../static/img/angular/3b-creating-pipes/restaurant-thumbnails.png"
-  style="border: solid 1px black; max-width: 320px;"/>
+  style="border: solid 1px black;" width="320"/>
 
 Currently the path is written out like:
 

diff --git a/src/angular/4-adding-routing/adding-routing.md b/src/angular/4-adding-routing/adding-routing.md
@@ -82,7 +82,7 @@ Notice that you will be able to click the **Choose a Restaurant** button
 after implementing the solution:
 
 <img alt="Choose a restaurant routing." src="../static/img/angular/4-adding-routing/after.gif"
-  style="border: solid 1px black;" width="90%"/>
+  style="border: solid 1px black;"/>
 
 ## Setup
 

diff --git a/src/angular/5-creating-navigation/creating-navigation.md b/src/angular/5-creating-navigation/creating-navigation.md
@@ -90,7 +90,7 @@ Make your changes in the **src/app/app.component.html** file. The markup structu
 You will know you’ve completed the exercise correctly when you can click the nav items to
 see the UI change and see the active class on the current nav item.
 
-![Place My Order App working nav](../static/img/angular/pmo-working-nav.gif 'Place My Order App working nav')
+<img alt="Place My Order App working nav" src="../static/img/angular/pmo-working-nav.gif">
 
 ✏️ Update the spec file **src/app/app.component.spec.ts** to be:
 

diff --git a/src/angular/7-pull-restaurant-data-into-view/pull-restaurant-data-into-view.md b/src/angular/7-pull-restaurant-data-into-view/pull-restaurant-data-into-view.md
@@ -20,7 +20,7 @@ data from the service API. Instead of two hard coded restaurants, we will
 see a longer list:
 
 <img src="../static/img/angular/7-data-into-view/1-after.png"
-  style="border: solid 1px black; max-width: 640px;"/>
+  style="border: solid 1px black;" width="640"/>
 
 ## P1: What you need to know
 

diff --git a/src/angular/8-state-city-options/state-city-options.md b/src/angular/8-state-city-options/state-city-options.md
@@ -19,12 +19,12 @@ In this part, we will:
 Currently, we are showing a list of all restaurants:
 
 <img src="../static/img/angular/8-state-city-options/before.png"
-  style="border: solid 1px black; max-width: 320px;"/>
+  style="border: solid 1px black;" width="320"/>
 
 We would like our user to be able to filter restaurants based on city and state. To accomplish this,
 we will need to implement a reactive form with two controls, `state` and `city`, that are dropdowns displaying a list of cities and states. It will look like the following:
 
-![Place My Order App city and state dropdowns](../static/img/angular/pmo-dropdowns.gif 'Place My Order App city and state dropdowns')
+<img alt="Place My Order App city and state dropdowns" src="../static/img/angular/pmo-dropdowns.gif">
 
 ## What you need to know
 
@@ -155,7 +155,7 @@ some boilerplate for the state and city `<select>` controls:
 
 When you visit <a href="http://localhost:4200/restaurants">localhost:4200/restaurants</a>, there will now be state and city dropdown options populated with fake data.
 
-![Place My Order App city and state dropdowns](../static/img/angular/pmo-dropdowns.gif 'Place My Order App city and state dropdowns')
+<img alt="Place My Order App city and state dropdowns" src="../static/img/angular/pmo-dropdowns.gif">
 
 ✏️ Update the spec file **src/app/restaurant/restaurant.component.spec.ts** to be:
 

diff --git a/src/angular/angular.md b/src/angular/angular.md
@@ -24,8 +24,7 @@ If you find bugs in this training or have suggestions, create an [issue](https:/
 
 In this guide, we will build this restaurant ordering app with Angular:
 
-<img src="./static/img/place-my-order.png" alt="Place My Order App screenshot"
-  style="max-width: 100%"/>
+<img src="./static/img/place-my-order.png" alt="Place My Order App screenshot"/>
 
 You can see a DoneJS implementation of this application at
 [www.place-my-order.com](http://www.place-my-order.com).

diff --git a/src/debugging-javascript/1-scope.md b/src/debugging-javascript/1-scope.md
@@ -66,7 +66,7 @@ c2();
 
 Chrome’s developers tools allows you to inspect variables in the scope as follows:
 
-<img src="../static/img/debugging/full-closure.png" width="90%" style="border: solid 1px black"/>
+<img src="../static/img/debugging/full-closure.png" style="border: solid 1px black"/>
 
 
 ## The solution

diff --git a/src/debugging-javascript/2-stack.md b/src/debugging-javascript/2-stack.md
@@ -47,7 +47,7 @@ a();
 
 By adding a breakpoint in `d()`, you will see the following in the __Call Stack__:
 
-<img src="../static/img/debugging/stack.png" style="border: solid 1px black; max-width: 429px"/>
+<img src="../static/img/debugging/stack.png" style="border: solid 1px black;" width="429"/>
 
 
 Chrome can also track asynchrounous function calls.  In the following code,
@@ -72,7 +72,7 @@ a();
 
 By adding a breakpoint in `d()`, you will see the following in the __Call Stack__:
 
-<img src="../static/img/debugging/async-stack.png" style="border: solid 1px black; max-width: 429px"/>
+<img src="../static/img/debugging/async-stack.png" style="border: solid 1px black;" width="429"/>
 
 
 ## The solution

diff --git a/src/debugging-javascript/3-proto.md b/src/debugging-javascript/3-proto.md
@@ -53,7 +53,7 @@ console.log(m);
 
 You can inspect the Mammal instance `m` and see its `__proto__` property:
 
-<img src="../static/img/debugging/prototype.png" width="90%"/>
+<img src="../static/img/debugging/prototype.png"/>
 
 
 ## The solution

diff --git a/src/debugging-javascript/4-conditional.md b/src/debugging-javascript/4-conditional.md
@@ -45,7 +45,7 @@ Chrome lets you add conditional breakpoints that break when an expression evalua
 _truthy_.  Right click the line number you’d like to break on and enter the
 expression.
 
-<img src="../static/img/debugging/conditional.png" width="90%"/>
+<img src="../static/img/debugging/conditional.png"/>
 
 
 ## The solution

diff --git a/src/debugging-javascript/debugging-javascript.md b/src/debugging-javascript/debugging-javascript.md
@@ -27,11 +27,11 @@ If you find bugs in this training or have suggestions, create an [issue](https:/
 
 - [learn-to-debug-javascript/scope] - Learn how to see the variables available in the scope.   
 
-  <img src="./static/img/debugging/closure.png" width="300px" style="border: solid 1px black"/>
+  <img src="./static/img/debugging/closure.png" width="300" style="border: solid 1px black"/>
 
 - [learn-to-debug-javascript/call-stack] - Learn how to trace how functions are called.   
 
-  <img src="./static/img/debugging/stack.png" width="300px" style="border: solid 1px black"/>
+  <img src="./static/img/debugging/stack.png" width="300" style="border: solid 1px black"/>
 
 - [learn-to-debug-javascript/prototypes] - Learn how to explore an object’s proto chain.  
 

diff --git a/src/docker/1-what-is-docker/what-is-docker.md b/src/docker/1-what-is-docker/what-is-docker.md
@@ -17,7 +17,7 @@ Docker exists to address these issues. Docker bundles runtime dependencies with
 
 Containers are an abstraction at the app layer that packages application artifacts and dependencies together. The fundamental difference is containers share the same host operating system, but each container runs in it’s own isolated process controlled by the Docker Engine. Containers are more lightweight than VMs and typically boot in seconds instead of minutes.
 
-![Docker Architecture](../static/img/docker/1-what-is-docker/docker-arch.png)
+<img alt="Docker Architecture" src="../static/img/docker/1-what-is-docker/docker-arch.png">
 
 ## Dockerfiles, Images and Containers
 A Dockerfile is used to build a Docker image. A dockerfile is a plain-text file that contains a series of instructions telling Docker what operating system, application dependencies and application source code is required to run the application.
@@ -26,7 +26,7 @@ A Docker image is a static artifact that is built from a Dockerfile and is tagge
 
 A Docker container is a running instance of a Docker image.
 
-![Dockerfile images and containers](../static/img/docker/1-what-is-docker/dockerfile-images-containers.png)
+<img alt="Dockerfile images and containers" src=".../static/img/docker/1-what-is-docker/dockerfile-images-containers.png">
 
 ## Review
 Docker images combine source code with the dependencies required to run an application. Images are built from Dockerfiles and are more lightweight and portable than traditional VMs making them great for both developers and operators.
diff --git a/src/docker/2-build-node-app/build-node-app.md b/src/docker/2-build-node-app/build-node-app.md
@@ -64,7 +64,7 @@ npm start
 ```
 Open your browser to `localhost:3000` and you should see `Hello World!`
 
-![node app in browser](../static/img/docker/2-build-node-app/node-hello-world.png)
+<img alt="node app in browser" src="../static/img/docker/2-build-node-app/node-hello-world.png">
 
 ## What’s next
 Now that we’ve created a simple Node.js app, we are going to containerize it.

diff --git a/src/docker/4-build-and-run-image/build-and-run-image.md b/src/docker/4-build-and-run-image/build-and-run-image.md
@@ -25,7 +25,7 @@ CMD npm start
 ```
 At this point, our directory should look like this
 
-![app directory](../static/img/docker/4-build-and-run-image/app-directory.png)
+<img alt="app directory" src="../static/img/docker/4-build-and-run-image/app-directory.png">
 
 ## Build our image
 Ensure you have docker desktop running on your machine, then open a terminal to your application directory and run

diff --git a/src/dom/dom.md b/src/dom/dom.md
@@ -9,8 +9,18 @@ using it to make a basic tabs widget. We strongly suggest finishing [learn-advan
 ## Before you begin
 
 <a href="https://discord.gg/J7ejFsZnJ4" style="display:flex;align-items:center">
-<img alt="" src="./static/img/discord.png"
-  style="float:left; margin:20px" width="57"/> <span style="display: inline-block;">Click here to join the<br/>Bitovi Community Discord</span></a>
+  <img 
+    alt="" 
+    src="./static/img/discord.png"
+    style="float:left; margin:20px" 
+    width="57"
+  /> 
+  <span style="display: inline-block;">
+    Click here to join the
+    <br/>
+    Bitovi Community Discord
+  </span>
+</a>
 
 Join the Bitovi Community Discord to get help on Bitovi Academy courses or other
 Angular, React, CanJS and JavaScript problems.
@@ -23,7 +33,7 @@ If you find bugs in this training or have suggestions, create an [issue](https:/
 
 The end result of this training is to build a basic, [progressively enhanced](https://en.wikipedia.org/wiki/Progressive_enhancement) tabs widget that looks like:
 
-<img src="./static/img/dog-tabs.png" width="50%"/>
+<img src="./static/img/dog-tabs.png"/>
 
 We will be creating simple versions of many of jQuery’s most useful methods:
 

diff --git a/src/front-end/theory.md b/src/front-end/theory.md
@@ -14,7 +14,7 @@ The following is a bit crazy, but it connects what users, businesses, and develo
 <span style="color:green; font-weight: bold">(green)</span> and tools
 <span style="color:purple; font-weight: bold">(violet)</span>.
 
-![Theory](../../docs/front-end/madness.png "Theory")
+<img alt="Theory" src="../../docs/front-end/madness.png">
 
 ## The Goal
 

diff --git a/src/javascript/7-classes.md b/src/javascript/7-classes.md
@@ -238,4 +238,4 @@ For a deep dive on the mechanics of class inheritance, checkout
 goes into detail about how the `[[HomeObject]]` internal property is used to enable the `super`
 keyword.
 
-<img src="https://docs.google.com/drawings/d/e/2PACX-1vRw9Jbz-_KHQsYE_7YmfibHznMvgHlooBRgKrafsyzNzQcDs-xZy4GuYJWDcc09PM6uX30V4riPbKX-/pub?w=872&amp;h=327" style="max-width: 100%;">
+<img src="https://docs.google.com/drawings/d/e/2PACX-1vRw9Jbz-_KHQsYE_7YmfibHznMvgHlooBRgKrafsyzNzQcDs-xZy4GuYJWDcc09PM6uX30V4riPbKX-/pub?w=872&amp;h=327">
diff --git a/src/javascript/javascript.md b/src/javascript/javascript.md
@@ -38,4 +38,4 @@ If you find bugs in this training or have suggestions, create an [issue](https:/
 At the end, you should have a firm understanding of the core features of JavaScript.  We will
 be building the following mental model:
 
-<a href="./static/img/js-handout.png"><img src="./static/img/js-handout.png" width="50%"/></a>
+<a href="./static/img/js-handout.png"><img src="./static/img/js-handout.png"/></a>
diff --git a/src/ngrx/1-why-ngrx/why-ngrx.md b/src/ngrx/1-why-ngrx/why-ngrx.md
@@ -69,7 +69,7 @@ Selectors are functions that extract data from the state. Selectors can return d
 To help you understand how Redux pieces work together, let’s take a look at the most basic representation of how data is passed around in an application that uses Redux, also known as a _one-way data flow_, [taken from the Redux Official Documentation](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#state-management).
 
 <figure>
-    <img src="../static/img/ngrx/1-why-ngrx/ngrx-one-way-data-flow.png" alt="One-way data flow" style="width: 640px">
+    <img src="../static/img/ngrx/1-why-ngrx/ngrx-one-way-data-flow.png" alt="One-way data flow" width="640">
     <figcaption style="text-align: center; width: 640px">One-way Data Flow (<a href="https://redux.js.org/tutorials/essentials/part-1-overview-concepts">Source</a>)</figcaption>
 </figure>
 
@@ -87,7 +87,7 @@ Data goes through the following steps:
 NgRx abstracts away from _one-way data flow_ to represent its own Store implementation pieces and interaction with external entities, such as Components and Services, to what is referred to as the _State Management Lifecycle_.
 
 <figure>
-    <img src="../static/img/ngrx/1-why-ngrx/state-management-lifecycle.png" alt="NgRx State Management Lifecycle diagram" style="width: 640px">
+    <img src="../static/img/ngrx/1-why-ngrx/state-management-lifecycle.png" alt="NgRx State Management Lifecycle diagram" width="640">
     <figcaption style="text-align: center; width: 640px">NgRx State Management Lifecycle (<a href="https://ngrx.io/guide/store">Source</a>)</figcaption>
 </figure>
 

diff --git a/src/program-management-with-jira/0-jira-account-setup.md b/src/program-management-with-jira/0-jira-account-setup.md
@@ -20,10 +20,10 @@ The following video walks through:
 3. Creating the `Itsy Marketplace` that will serve as the program project. [1:09](https://youtu.be/Wcv92pAlryk?t=69)
 4. Creating the Order, Store, and Payment projects that will be used for individual product team projects. [1:53](https://youtu.be/Wcv92pAlryk?t=113)
 
-<iframe class="block-16-by-9 drop-shadow-center-black" src="https://www.youtube.com/embed/Wcv92pAlryk" alt="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe class="block-16-by-9 drop-shadow-center-black" src="https://www.youtube.com/embed/Wcv92pAlryk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 ## Upgrading to Jira Premium
 
 The following video walks through upgrading Jira to a premium account that can use Advanced plans:
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/VbHdITtjlNE" alt="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe class="block-16-by-9" src="https://www.youtube.com/embed/VbHdITtjlNE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
diff --git a/src/program-management-with-jira/11-scheduling.md b/src/program-management-with-jira/11-scheduling.md
@@ -35,7 +35,7 @@ The following video walk through the steps to set-up and use the Auto-scheduler:
 8. <code>[8:23](https://youtu.be/5bcDZFDjKgs?list=PL--xV5crGpX_EdvA-rcDXVC4qjiujYTKE&t=503)</code> Verify the epics are scheduled correctly
 
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/5bcDZFDjKgs" alt="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe class="block-16-by-9" src="https://www.youtube.com/embed/5bcDZFDjKgs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 
 ## Exercise