diff --git a/src/angular/10-updating-service-params/updating-service-params.md b/src/angular/10-updating-service-params/updating-service-params.md
index c820a7fad..191719dbf 100644
--- 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
index 5c515c44e..39069d78a 100644
--- 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
index b06174e9e..3530b224d 100644
--- 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
index c268e3317..c7b70c8c5 100644
--- 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
index ae941d3f6..7338177b2 100644
--- 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
index 9c01d3e76..a971f39bd 100644
--- 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
index 7abf637dd..1e7b3d8ae 100644
--- 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
index 5e5f60ca5..3802094fd 100644
--- 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
index 091ed2241..9add06c89 100644
--- 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
index bb657abb5..3d3376b87 100644
--- 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
index c37d1a4b4..f80067f53 100644
--- 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
index 5b3873691..45bc566ba 100644
--- 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
index 3986b30dd..d672c1c99 100644
--- 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
index 8ea1312dc..425cba14c 100644
--- 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
index a11c2a258..a8dd55cb8 100644
--- 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
index 5ca3ca660..cc3026135 100644
--- 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
index b1384dd65..50b134990 100644
--- 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.
\ No newline at end of file
diff --git a/src/docker/2-build-node-app/build-node-app.md b/src/docker/2-build-node-app/build-node-app.md
index cea3506a0..181ec04c0 100644
--- 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
index 4ab70dd55..944aa4606 100644
--- 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
index a09416aca..e5092a533 100644
--- 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
index 5c89f8431..6867287ca 100644
--- 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
index 5364db781..1827a57da 100644
--- 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
index 7a0b9c84a..c38f1fd18 100644
--- 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
index a2e76d144..4514ce670 100644
--- 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
index 4e2244ac9..b7fe82c3a 100644
--- 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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/program-management-with-jira/11-scheduling.md b/src/program-management-with-jira/11-scheduling.md
index 08639c79f..8137e4004 100644
--- 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
diff --git a/src/program-management-with-jira/3-cx-board-setup.md b/src/program-management-with-jira/3-cx-board-setup.md
index c0dbb0bb2..61b07b2d8 100644
--- a/src/program-management-with-jira/3-cx-board-setup.md
+++ b/src/program-management-with-jira/3-cx-board-setup.md
@@ -46,7 +46,7 @@ The following video shows how to:
 4. <code>[1:57](https://youtu.be/rBYxqhNGGmQ?t=117)</code> Verify we can create an Initiative
 5. <code>[2:37](https://youtu.be/rBYxqhNGGmQ?t=157)</code> Enable epics to link to a parent initiative.
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/rBYxqhNGGmQ" 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/rBYxqhNGGmQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 ## Create the Continuous Exploration workflow
 
@@ -73,7 +73,7 @@ The following video shows how to:
 
 4. <code>[3:36](https://youtu.be/QZzKaGHZ54o?t=216)</code> Associate initiatives with the Continous Exploration workflow
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/QZzKaGHZ54o" 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/QZzKaGHZ54o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 
 ## Create the Continuous Exploration board
@@ -105,7 +105,7 @@ The following video shows how to:
 
 5. <code>[4:00](https://youtu.be/65C9f6OR4G0?t=240)</code> Fixing duplicate statuses
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/65C9f6OR4G0" 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/65C9f6OR4G0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 
 ## Adding Custom Fields
@@ -128,4 +128,4 @@ To create these custom fields, the video walks through these 4 steps:
 4. <code>[4:19](https://youtu.be/SUcM798b9-w?t=259)</code> Verify custom fields are working
 
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/SUcM798b9-w" 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/SUcM798b9-w" 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/4-ideas.md b/src/program-management-with-jira/4-ideas.md
index 420cf18e8..79c1ce75e 100644
--- a/src/program-management-with-jira/4-ideas.md
+++ b/src/program-management-with-jira/4-ideas.md
@@ -43,7 +43,7 @@ Initiatives in the `Ideas Backlog` are just ideas. Anyone can add them at any ti
 
 
 <img src="../static/img/program-management-with-jira/continuous-exploration-workflow.png"
-	style="border: solid 1px black; min-width: 400px; width: 100%; max-width: 800px"/>
+	style="border: solid 1px black;"/>
 
 The discovery workflow is a process that looks at:
 
@@ -57,7 +57,7 @@ The discovery workflow is a process that looks at:
 
 
 <img src="../static/img/program-management-with-jira/customer-reports.png"
-  style="border: solid 1px black; min-width: 400px; width: 100%; max-width: 800px"/>
+  style="border: solid 1px black;"/>
 
 
 The discovery workflow is out-of-scope for this training. If you’d like to learn more, please vote for the [Product Discovery Process](https://github.com/bitovi/academy/issues/386) training.
diff --git a/src/program-management-with-jira/7-advanced-roadmap-setup.md b/src/program-management-with-jira/7-advanced-roadmap-setup.md
index cf36a8481..5bbe47ff3 100644
--- a/src/program-management-with-jira/7-advanced-roadmap-setup.md
+++ b/src/program-management-with-jira/7-advanced-roadmap-setup.md
@@ -46,4 +46,4 @@ The video walks through these 4 steps:
 7. <code>[3:22](https://youtu.be/MJKAFeN4BjM?list=PL--xV5crGpX_EdvA-rcDXVC4qjiujYTKE&t=202)</code> Verify the plan is working
 
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/MJKAFeN4BjM" alt="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
\ No newline at end of file
+<iframe class="block-16-by-9" src="https://www.youtube.com/embed/MJKAFeN4BjM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
\ No newline at end of file
diff --git a/src/program-management-with-jira/8-estimating.md b/src/program-management-with-jira/8-estimating.md
index 14b74d715..f39ee918e 100644
--- a/src/program-management-with-jira/8-estimating.md
+++ b/src/program-management-with-jira/8-estimating.md
@@ -375,7 +375,7 @@ The following video shows the steps to accomplishing this:
    
 
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/dFldN5ugf74" 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/dFldN5ugf74" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 The following sub-sections detail the process in writing:
 
diff --git a/src/program-management-with-jira/program-management.md b/src/program-management-with-jira/program-management.md
index eb118f80d..ed2ca77b0 100644
--- a/src/program-management-with-jira/program-management.md
+++ b/src/program-management-with-jira/program-management.md
@@ -60,7 +60,7 @@ Thanks Justin and Paul for hosting. And big thanks for open sourcing your traini
 Watch the following instead of reading the rest of the page:
 
 
-<iframe class="block-16-by-9" src="https://www.youtube.com/embed/X3F7cFnKMQc" 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/X3F7cFnKMQc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 
 ## Purpose
diff --git a/src/react-native/02-setting-up-your-environment/setting-up-your-environment.md b/src/react-native/02-setting-up-your-environment/setting-up-your-environment.md
index fdc5b86dc..ecfe33183 100644
--- a/src/react-native/02-setting-up-your-environment/setting-up-your-environment.md
+++ b/src/react-native/02-setting-up-your-environment/setting-up-your-environment.md
@@ -224,7 +224,7 @@ The output of the command should be something like:
 
 ### Objective 6: Launch the Android emulator
 
-<img alt="Screenshot of the Android Emulator running in Android Studio" src="../static/img/react-native/02-setting-up-your-environment/06-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the Android Emulator running in Android Studio" src="../static/img/react-native/02-setting-up-your-environment/06-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 #### Setup 6
 
@@ -511,7 +511,7 @@ C:\Users\bitovi\AppData\Local\Android\Sdk\platform-tools
 
 ### Objective 6: Launch the Android emulator
 
-<img alt="Screenshot of the Android Emulator running in Android Studio" src="../static/img/react-native/02-setting-up-your-environment/06-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the Android Emulator running in Android Studio" src="../static/img/react-native/02-setting-up-your-environment/06-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 #### Setup 6
 
diff --git a/src/react-native/03-creating-a-new-app/creating-a-new-app.md b/src/react-native/03-creating-a-new-app/creating-a-new-app.md
index cfabdb21f..a2f489d87 100644
--- a/src/react-native/03-creating-a-new-app/creating-a-new-app.md
+++ b/src/react-native/03-creating-a-new-app/creating-a-new-app.md
@@ -19,7 +19,7 @@ In this section, you will:
 Create a new React Native application named “Place My Order” that supports TypeScript and can be emulated and tested.
 
 <figure>
-  <img alt="A mobile phone displaying the root page of the newly created application served by the dev server. The page displays a 'Welcome to React Native' header and some miscellaneous instructions that we will be disregarding." src="../static/img/react-native/03-creating-a-new-app/01-solution.png" style="border: 4px solid black; border-radius: 25px; max-height: 638px" />
+  <img alt="A mobile phone displaying the root page of the newly created application served by the dev server. The page displays a 'Welcome to React Native' header and some miscellaneous instructions that we will be disregarding." src="../static/img/react-native/03-creating-a-new-app/01-solution.png" style="border: 4px solid black; border-radius: 25px;" height="638" />
   <figcaption style="font-style: italic">
     Screen capture of the completed exercise.
   </figcaption>
@@ -69,7 +69,7 @@ The first time you run it for a given target will take significantly longer than
 
 ## Objective 2: Add testing infrastructure
 
-<img alt="A mobile phone displaying the root page of the newly created application served by the dev server. The page displays a “Place My Order: Coming Soon!” message." src="../static/img/react-native/03-creating-a-new-app/02-solution.png" style="border: 4px solid black; border-radius: 25px; max-height: 638px" />
+<img alt="A mobile phone displaying the root page of the newly created application served by the dev server. The page displays a “Place My Order: Coming Soon!” message." src="../static/img/react-native/03-creating-a-new-app/02-solution.png" style="border: 4px solid black; border-radius: 25px;" height="638"/>
 
 ### Testing code with React Testing Library
 
diff --git a/src/react-native/04-intro-to-jsx/intro-to-jsx.md b/src/react-native/04-intro-to-jsx/intro-to-jsx.md
index d1c2f8587..210a517ab 100644
--- a/src/react-native/04-intro-to-jsx/intro-to-jsx.md
+++ b/src/react-native/04-intro-to-jsx/intro-to-jsx.md
@@ -19,7 +19,7 @@ In this section, you will:
 
 Now that we have our project set up, let’s update our page to look like the design below:
 
-<img alt="Screenshot of a mobile application interface text “Place My Order: Coming Soon!” and “Illinois“." src="../static/img/react-native/04-intro-to-jsx/01-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of a mobile application interface text “Place My Order: Coming Soon!” and “Illinois“." src="../static/img/react-native/04-intro-to-jsx/01-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### What is JSX?
 
@@ -235,7 +235,7 @@ If you’ve implemented the solution correctly, the tests will pass when you run
 
 Next, we want to render a list of state names in our application:
 
-<img alt="Screenshot of a mobile application interface text “Place My Order: Coming Soon!”, “Illinois“, and “Wisconsin“." src="../static/img/react-native/04-intro-to-jsx/02-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of a mobile application interface text “Place My Order: Coming Soon!”, “Illinois“, and “Wisconsin“." src="../static/img/react-native/04-intro-to-jsx/02-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 To do so, we’ll learn about:
 
diff --git a/src/react-native/07-debugging-devtools/debugging-devtools.md b/src/react-native/07-debugging-devtools/debugging-devtools.md
index 34e04b776..6be808f55 100644
--- a/src/react-native/07-debugging-devtools/debugging-devtools.md
+++ b/src/react-native/07-debugging-devtools/debugging-devtools.md
@@ -17,7 +17,7 @@ In this section, you will:
 
 We will be setting up React DevTools to help us inspect the UI:
 
-<img alt="Screenshot of React DevTools inspecting a component tree. It shows a structured hierarchy of all the components in the view. There is also a Profiler tab." src="../static/img/react-native/07-debugging-devtools/dev-tool-connected.png" style="max-width: 100%;"/>
+<img alt="Screenshot of React DevTools inspecting a component tree. It shows a structured hierarchy of all the components in the view. There is also a Profiler tab." src="../static/img/react-native/07-debugging-devtools/dev-tool-connected.png"/>
 
 ### Using React DevTools
 
@@ -70,7 +70,7 @@ npm run devtools
 
 This should open a separate window that looks like the following image:
 
-<img alt="Screenshot of a window with options for React Native and React DOM. The React Native section suggests opening the in-app developer menu. A notification at the top states the server is waiting for React to connect." src="../static/img/react-native/07-debugging-devtools/dev-tool-not-connected.png" style="max-width: 100%;"/>
+<img alt="Screenshot of a window with options for React Native and React DOM. The React Native section suggests opening the in-app developer menu. A notification at the top states the server is waiting for React to connect." src="../static/img/react-native/07-debugging-devtools/dev-tool-not-connected.png"/>
 
 At this point, DevTools is not connected.
 To connect DevTools to the application, go back to the terminal where you ran `npm run start` and press `r` to reload.
@@ -97,7 +97,7 @@ Modify props:
 
 We will be setting up React Native Debugger to help us debug:
 
-<img alt="Screenshot of the React Native JavaScript Inspector interface. It includes common DevTools tabs such as Console, Sources, Memory, and Profiler." src="../static/img/react-native/07-debugging-devtools/react-native-debugger.png" style="max-width: 100%;"/>
+<img alt="Screenshot of the React Native JavaScript Inspector interface. It includes common DevTools tabs such as Console, Sources, Memory, and Profiler." src="../static/img/react-native/07-debugging-devtools/react-native-debugger.png"/>
 
 ### Using React Native’s debugger
 
@@ -133,7 +133,7 @@ adb shell input keyevent 82
 
 This will open up the dev menu. It should look like the following image:
 
-<img alt="Screenshot of the emulator displaying the React Native Developer Menu. The screen lists various options like Reload, Open Debugger, Change Bundle Location, Show Element Inspector, Disable Fast Refresh, Show Perf Monitor, Settings, and Enable Sampling Profiler." src="../static/img/react-native/07-debugging-devtools/in-app-dev-menu.png" style="max-height: 420px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the emulator displaying the React Native Developer Menu. The screen lists various options like Reload, Open Debugger, Change Bundle Location, Show Element Inspector, Disable Fast Refresh, Show Perf Monitor, Settings, and Enable Sampling Profiler." src="../static/img/react-native/07-debugging-devtools/in-app-dev-menu.png" style="border: 4px solid black; border-radius: 25px;" height="420"/>
 
 Clicking on "Open Debugger" will open up a separate window for debugging.
 
diff --git a/src/react-native/08-styling/styling.md b/src/react-native/08-styling/styling.md
index 10fc24a47..32cf795a0 100644
--- a/src/react-native/08-styling/styling.md
+++ b/src/react-native/08-styling/styling.md
@@ -20,7 +20,7 @@ In this section, you will:
 Styling is a crucial part of building visually appealing and responsive applications.
 Understanding how to effectively use the `style` prop and the `StyleSheet` APIs is fundamental for creating React Native applications.
 
-<img alt="Screenshot of a mobile application interface with new stylings." src="../static/img/react-native/08-styling/01-solution-styling.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of a mobile application interface with new stylings." src="../static/img/react-native/08-styling/01-solution-styling.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### The `style` prop
 
diff --git a/src/react-native/10-managing-state/managing-state.md b/src/react-native/10-managing-state/managing-state.md
index 0ee159f2e..2c4067f7f 100644
--- a/src/react-native/10-managing-state/managing-state.md
+++ b/src/react-native/10-managing-state/managing-state.md
@@ -21,8 +21,8 @@ In this section, you will:
 We will be setting up the application to switch between light mode and dark mode:
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screenshot of the application when it is in light mode." src="../static/img/react-native/10-managing-state/lightMode.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
-  <img alt="Screenshot of the application when it is in dark mode." src="../static/img/react-native/10-managing-state/darkMode.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screenshot of the application when it is in light mode." src="../static/img/react-native/10-managing-state/lightMode.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
+  <img alt="Screenshot of the application when it is in dark mode." src="../static/img/react-native/10-managing-state/darkMode.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Overview of state management
diff --git a/src/react-native/11-navigation/navigation.md b/src/react-native/11-navigation/navigation.md
index bb8df2e90..8b470ff52 100644
--- a/src/react-native/11-navigation/navigation.md
+++ b/src/react-native/11-navigation/navigation.md
@@ -21,7 +21,7 @@ In this section, you will:
 As our application grows in complexity, more screens will be added. The React Navigation library provides a solution that allows us to move between these screens. In this section, we will cover both common navigation patterns used in both Android and iOS applications: tab navigation and stack navigation.
 
 <div style="display: flex; flex-direction: row; gap: 2rem">
-  <img alt="Screen Shot of the StateList in Navigation" src="../static/img/react-native/11-navigation/01-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screen Shot of the StateList in Navigation" src="../static/img/react-native/11-navigation/01-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### What is navigation?
@@ -157,7 +157,7 @@ If you’ve implemented the solution correctly, the tests will pass when you run
 Now that we’ve covered tab navigation, let’s move on to stack navigation. As mentioned in the previous section, most applications use a combination of both tab and stack navigation to create a seamless user experience.
 
 <div style="display: flex; flex-direction: row; gap: 2rem">
-  <img alt="Screen Shot of the CityList in Navigation" src="../static/img/react-native/11-navigation/02-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screen Shot of the CityList in Navigation" src="../static/img/react-native/11-navigation/02-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Stacks
@@ -321,8 +321,8 @@ If you’ve implemented the solution correctly, the tests will pass when you run
 ## Objective 3: Add Restaurant List and Restaurant Details pages with links
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screen Shot of the RestaurantList in Navigation" src="../static/img/react-native/11-navigation/03-solution-restaurants.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
-  <img alt="Screen Shot of the RestaurantDetails in Navigation" src="../static/img/react-native/11-navigation/03-solution-restaurant-details.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screen Shot of the RestaurantList in Navigation" src="../static/img/react-native/11-navigation/03-solution-restaurants.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
+  <img alt="Screen Shot of the RestaurantDetails in Navigation" src="../static/img/react-native/11-navigation/03-solution-restaurant-details.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Setup 3
diff --git a/src/react-native/13-making-http-requests/making-http-requests.md b/src/react-native/13-making-http-requests/making-http-requests.md
index 35c448808..c704f7dbf 100644
--- a/src/react-native/13-making-http-requests/making-http-requests.md
+++ b/src/react-native/13-making-http-requests/making-http-requests.md
@@ -25,7 +25,7 @@ In this section, you will:
 
 So far we’ve only had hard-coded data for our states, cities, and restaurants. Let’s start loading data from an API server, beginning with the list of states!
 
-<img alt="Screenshot of the application when it makes an API call to the states endpoint and is populated the list of states." src="../static/img/react-native/13-making-http-requests/1-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the application when it makes an API call to the states endpoint and is populated the list of states." src="../static/img/react-native/13-making-http-requests/1-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### Defining interfaces for `useState`
 
@@ -288,7 +288,7 @@ Let’s continue our quest to load data from our API and update our `<CitiesList
 
 To do this, we’ll need to include query parameters in our API call to the `/cities` endpoint.
 
-<img alt="Screenshot of the application when it makes an API call to the cities endpoint and is populated the list of cities." src="../static/img/react-native/13-making-http-requests/2-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the application when it makes an API call to the cities endpoint and is populated the list of cities." src="../static/img/react-native/13-making-http-requests/2-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### Including query parameters in API calls
 
@@ -361,8 +361,8 @@ Now that we have two Hooks that fetch data in a similar way, let’s create an `
 While we do this, let‘s add error handling for unsuccessful API requests:
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screenshot of the application when it makes an API call to the cities endpoint and is populated the list of cities." src="../static/img/react-native/13-making-http-requests/2-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
-  <img alt="Screenshot of the application when it makes an API call and the API returns an error." src="../static/img/react-native/13-making-http-requests/3-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screenshot of the application when it makes an API call to the cities endpoint and is populated the list of cities." src="../static/img/react-native/13-making-http-requests/2-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
+  <img alt="Screenshot of the application when it makes an API call and the API returns an error." src="../static/img/react-native/13-making-http-requests/3-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Handle HTTP error statuses
@@ -450,8 +450,8 @@ Let’s finish our quest to load data from our API by creating a Hook to fetch t
 Now that we are able to capture a user’s state and city preferences, we want to only show the restaurants in the selected city:
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screenshot of the application when it makes an API call to the restaurants endpoint and is populated the list of restaurants." src="../static/img/react-native/13-making-http-requests/4-1-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
-  <img alt="Screenshot of the application when it makes an API call to the restaurant endpoint and is populated populated with the restaurants details." src="../static/img/react-native/13-making-http-requests/4-2-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screenshot of the application when it makes an API call to the restaurants endpoint and is populated the list of restaurants." src="../static/img/react-native/13-making-http-requests/4-1-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
+  <img alt="Screenshot of the application when it makes an API call to the restaurant endpoint and is populated populated with the restaurants details." src="../static/img/react-native/13-making-http-requests/4-2-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Setup 4
diff --git a/src/react-native/14-user-inputs/user-inputs.md b/src/react-native/14-user-inputs/user-inputs.md
index 92ff9f893..b8070fd94 100644
--- a/src/react-native/14-user-inputs/user-inputs.md
+++ b/src/react-native/14-user-inputs/user-inputs.md
@@ -25,8 +25,8 @@ Now let’s create a `RestaurantOrder` view for users to start selecting menu it
 We’ll start with switch controls to select menu items, with a message that warns users when no items are selected and a total that shows the sum of the selected items.
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screenshot of the top of the application restaurant order page." src="../static/img/react-native/14-user-input/01-solution-top.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
-  <img alt="Screenshot of the bottom of the application restaurant order page." src="../static/img/react-native/14-user-input/01-solution-bottom.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screenshot of the top of the application restaurant order page." src="../static/img/react-native/14-user-input/01-solution-top.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
+  <img alt="Screenshot of the bottom of the application restaurant order page." src="../static/img/react-native/14-user-input/01-solution-bottom.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Handling checkbox-like behavior with `<Switch>`
@@ -202,7 +202,7 @@ Next, we want to collect the user’s name, phone number, and address as part of
 To do this, we’ll use React Native’s `TextInput` component.
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screenshot of the bottom of the application restaurant order page." src="../static/img/react-native/14-user-input/02-solution-bottom.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screenshot of the bottom of the application restaurant order page." src="../static/img/react-native/14-user-input/02-solution-bottom.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Using the `TextInput` component
diff --git a/src/react-native/16-security-and-auth/security-and-auth.md b/src/react-native/16-security-and-auth/security-and-auth.md
index 05a4fa7ca..276da9e9f 100644
--- a/src/react-native/16-security-and-auth/security-and-auth.md
+++ b/src/react-native/16-security-and-auth/security-and-auth.md
@@ -19,8 +19,8 @@ In this section, you will:
 ## Objective 1: Add Google Sign-In
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screenshot of the Settings tab with a Google “Sign in” button." src="../static/img/react-native/16-security/01-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
-  <img alt="Screenshot of the Settings tab showing a sign-in user and a “Sign out” button." src="../static/img/react-native/16-security/01-solution-signed-in.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screenshot of the Settings tab with a Google “Sign in” button." src="../static/img/react-native/16-security/01-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
+  <img alt="Screenshot of the Settings tab showing a sign-in user and a “Sign out” button." src="../static/img/react-native/16-security/01-solution-signed-in.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Authenticating with OAuth
diff --git a/src/react-native/17-offline-support/offline-support.md b/src/react-native/17-offline-support/offline-support.md
index 4950ccb6f..174512270 100644
--- a/src/react-native/17-offline-support/offline-support.md
+++ b/src/react-native/17-offline-support/offline-support.md
@@ -23,7 +23,7 @@ It’s important to communicate to the user when their device is offline and som
 The way you communicate this info will depend on your application.
 In ours, we’re going to add some text to the Settings view that shows the current connection status.
 
-<img alt="Screenshot of the application settings page with the connection status." src="../static/img/react-native/17-offline-support/01-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the application settings page with the connection status." src="../static/img/react-native/17-offline-support/01-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### Listening for the network connection state
 
@@ -105,8 +105,8 @@ For right now, we’ll write the code for adding and removing favorites in a way
 In the third objective, we’ll expand that to handle syncing when the device comes back online.
 
 <div style="display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap;">
-  <img alt="Screenshot of the application's Restaurant Details screen displaying the add favorite button." src="../static/img/react-native/17-offline-support/02-solution-addFavorites.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
-  <img alt="Screenshot of the application's Restaurant Details screen displaying the remove favorite button." src="../static/img/react-native/17-offline-support/02-solution-removeFavorites.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+  <img alt="Screenshot of the application's Restaurant Details screen displaying the add favorite button." src="../static/img/react-native/17-offline-support/02-solution-addFavorites.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
+  <img alt="Screenshot of the application's Restaurant Details screen displaying the remove favorite button." src="../static/img/react-native/17-offline-support/02-solution-removeFavorites.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 </div>
 
 ### Defining the “favorites” feature
diff --git a/src/react-native/18-maps/maps.md b/src/react-native/18-maps/maps.md
index f56637d0f..238b9b464 100644
--- a/src/react-native/18-maps/maps.md
+++ b/src/react-native/18-maps/maps.md
@@ -21,7 +21,7 @@ A list of restaurants is a good start, but showing them on a map would make it e
 
 Let’s start by adding a map to the application. We’ll add a `Tab` component to switch between the List and Map views.
 
-<img alt="Screenshot of the restaurant view with the title “Green Bay, Wisconsin.” There are two tabs at the top, List and Map, with Map selected. The map below is centered on Green Bay. The bottom tab bar has icons for Place My Order and Settings." src="../static/img/react-native/18-maps/01-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the restaurant view with the title “Green Bay, Wisconsin.” There are two tabs at the top, List and Map, with Map selected. The map below is centered on Green Bay. The bottom tab bar has icons for Place My Order and Settings." src="../static/img/react-native/18-maps/01-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### Rendering Google Maps
 
@@ -184,7 +184,7 @@ npm run start
 
 Navigate to the `Maps` tab of the `RestaurantsList` in your emulator and verify that the Map is rendering.
 
-<img alt="Screenshot of how the application should look for the second solution." src="../static/img/react-native/18-maps/01-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of how the application should look for the second solution." src="../static/img/react-native/18-maps/01-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### Exercise 1
 
@@ -216,7 +216,7 @@ If you’ve implemented the solution correctly, the Map should be rendering in y
 Now that we have a map, let’s add markers for each one of the restaurants.
 When we tap on them, we will navigate to the restaurant detail page, just like we do in the list view.
 
-<img alt="Screenshot of the restaurant view with the title “Green Bay, Wisconsin.” The map is still centered on Green Bay and now has several locations marked with red pins. One of the markers is labeled Cheese Curd City, 230 W Kinzie Street. The bottom tab bar has icons for Place My Order and Settings." src="../static/img/react-native/18-maps/02-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the restaurant view with the title “Green Bay, Wisconsin.” The map is still centered on Green Bay and now has several locations marked with red pins. One of the markers is labeled Cheese Curd City, 230 W Kinzie Street. The bottom tab bar has icons for Place My Order and Settings." src="../static/img/react-native/18-maps/02-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### Adding markers to a map
 
@@ -267,7 +267,7 @@ function MapWithMarker({ initialRegion }) {
 
 Navigate to the `Maps` tab of the `RestaurantsList` in your emulator and verify that the Map is rendering.
 
-<img alt="Screenshot of the restaurant view with the title “Green Bay, Wisconsin.” The map is still centered on Green Bay and now has several locations marked with red pins. One of the markers is labeled Cheese Curd City, 230 W Kinzie Street. The bottom tab bar has icons for Place My Order and Settings." src="../static/img/react-native/18-maps/02-solution.png" style="max-height: 640px; border: 4px solid black; border-radius: 25px;"/>
+<img alt="Screenshot of the restaurant view with the title “Green Bay, Wisconsin.” The map is still centered on Green Bay and now has several locations marked with red pins. One of the markers is labeled Cheese Curd City, 230 W Kinzie Street. The bottom tab bar has icons for Place My Order and Settings." src="../static/img/react-native/18-maps/02-solution.png" style="border: 4px solid black; border-radius: 25px;" height="640"/>
 
 ### Exercise 2
 
diff --git a/src/react-vite/02-setting-up-your-environment/setting-up-your-environment.md b/src/react-vite/02-setting-up-your-environment/setting-up-your-environment.md
index 8d5b9b680..dffe38a12 100644
--- a/src/react-vite/02-setting-up-your-environment/setting-up-your-environment.md
+++ b/src/react-vite/02-setting-up-your-environment/setting-up-your-environment.md
@@ -175,7 +175,7 @@ and "No test files found" will be written to the console.
 Now, let’s updated our generated app to include our own header:
 
 <figure>
-  <img alt="A web browser displaying the root page of the newly created application served by the dev server. The page displays a single level 1 heading with the text 'Place My Order App: Coming Soon!'" src="../static/img/react-vite/02-setting-up-your-environment/04-solution.png" width="600px" />
+  <img alt="A web browser displaying the root page of the newly created application served by the dev server. The page displays a single level 1 heading with the text 'Place My Order App: Coming Soon!'" src="../static/img/react-vite/02-setting-up-your-environment/04-solution.png" width="600" />
   <figcaption style="font-style: italic">
     Screen capture of the completed exercise.
   </figcaption>
diff --git a/src/react-vite/03-intro-to-jsx/intro-to-jsx.md b/src/react-vite/03-intro-to-jsx/intro-to-jsx.md
index 7708274b1..8324e636d 100644
--- a/src/react-vite/03-intro-to-jsx/intro-to-jsx.md
+++ b/src/react-vite/03-intro-to-jsx/intro-to-jsx.md
@@ -19,7 +19,7 @@ In this section, we will:
 
 Now that we have our project set up, let’s update our page to look like the design below:
 
-<img alt="Screenshot of a web application interface titled “Restaurants” showing a single restaurant entry. The entry includes a photo of a sushi plate, an address, a price indicator, business hours, and a green badge stating “Open Now”. There is also a “Details” button to the right. The browser tab indicates “Vite + React + TS” and the URL is “localhost:5173”." src="../static/img/react-vite/03-intro-to-jsx/01-solution.png" style="max-width: 640px;"/>
+<img alt="Screenshot of a web application interface titled “Restaurants” showing a single restaurant entry. The entry includes a photo of a sushi plate, an address, a price indicator, business hours, and a green badge stating “Open Now”. There is also a “Details” button to the right. The browser tab indicates “Vite + React + TS” and the URL is “localhost:5173”." src="../static/img/react-vite/03-intro-to-jsx/01-solution.png" width="640"/>
 
 ### What is JSX?
 
@@ -235,7 +235,7 @@ Take the below HTML and convert it to JSX in `app.tsx`:
 
 Next, we want to render a list of restaurants in our application:
 
-<img alt="Screenshot of the same web application interface from Objective 1, except now there are multiple restaurants listed in the UI." src="../static/img/react-vite/03-intro-to-jsx/02-solution.png" style="max-width: 640px;"/>
+<img alt="Screenshot of the same web application interface from Objective 1, except now there are multiple restaurants listed in the UI." src="../static/img/react-vite/03-intro-to-jsx/02-solution.png" width="640"/>
 
 To do so, we‘ll learn about:
 
@@ -448,7 +448,7 @@ That will produce the following HTML:
 
 🔦 _During development, If you forget to provide a `key` prop for items in an array React will log the following error to the browser’s console:_
 
-<img alt="A browser console with the error message 'Warning: Each child in a list should have a unique 'key' prop." src="../static/img/react-vite/03-intro-to-jsx/react-missing-key-error.png" style="width:100%" />
+<img alt="A browser console with the error message 'Warning: Each child in a list should have a unique 'key' prop." src="../static/img/react-vite/03-intro-to-jsx/react-missing-key-error.png"/>
 
 ### Setup 2
 
diff --git a/src/react-vite/08-stateful-hooks/stateful-hooks.md b/src/react-vite/08-stateful-hooks/stateful-hooks.md
index 5ec2c8a6f..af62b1c05 100644
--- a/src/react-vite/08-stateful-hooks/stateful-hooks.md
+++ b/src/react-vite/08-stateful-hooks/stateful-hooks.md
@@ -22,7 +22,7 @@ Currently, our restaurant list is a static array of restaurants. We want to work
 
 To start, let’s focus on rendering buttons for each state that we can select. Then, when the button for a state is activated, we want to keep track of which state was chosen.
 
-<img alt="A web page titled “Restaurants” from place-my-order.com showing two buttons labeled “Illinois” and “Wisconsin”. There is also a “Current state” paragraph that shows that no state is selected." src="../static/img/react-vite/08-stateful-hooks/01-solution.png" style="max-width:689px">
+<img alt="A web page titled “Restaurants” from place-my-order.com showing two buttons labeled “Illinois” and “Wisconsin”. There is also a “Current state” paragraph that shows that no state is selected." src="../static/img/react-vite/08-stateful-hooks/01-solution.png" width="689">
 
 ### Overview of state management
 
@@ -120,11 +120,11 @@ Let’s create buttons for each state that we can select. Then, when the button
 
 Now that we have buttons for selecting the state, let’s add buttons for selecting the city:
 
-<img alt="The same “Restaurants” web page from before, but this time the “Current state” is “Illinois” and there is a button for selecting “Springfield” as the city. The “Current city” is currently “none.”" src="../static/img/react-vite/08-stateful-hooks/02-solution-2.png" style="max-width:689px">
+<img alt="The same “Restaurants” web page from before, but this time the “Current state” is “Illinois” and there is a button for selecting “Springfield” as the city. The “Current city” is currently “none.”" src="../static/img/react-vite/08-stateful-hooks/02-solution-2.png" width="689">
 
 After selecting both the state and city, we will see those values reflected in our UI:
 
-<img alt="The same “Restaurants” web page from before, but this time the “Current city” is set to “Springfield”." src="../static/img/react-vite/08-stateful-hooks/02-solution-3.png" style="max-width:689px">
+<img alt="The same “Restaurants” web page from before, but this time the “Current city” is set to “Springfield”." src="../static/img/react-vite/08-stateful-hooks/02-solution-3.png" width="689">
 
 ### Setup 2
 
diff --git a/src/react-vite/09-making-http-requests/making-http-requests.md b/src/react-vite/09-making-http-requests/making-http-requests.md
index d021c956a..05092ae50 100644
--- a/src/react-vite/09-making-http-requests/making-http-requests.md
+++ b/src/react-vite/09-making-http-requests/making-http-requests.md
@@ -423,7 +423,7 @@ Let’s finish our quest to load data from our API by creating a Hook to fetch t
 
 Now that we are able to capture a user’s state and city preferences, we want to only show the restaurants in the selected city:
 
-<img alt="A web page titled “Restaurants” from place-my-order.com showing that “Illinois” and “Chicago” are selected. Underneath the dropdowns is a list of restaurants that are in Chicago." src="../static/img/react-vite/09-making-http-requests/05-solution-with-selection.png" style="max-width: 689px;"/>
+<img alt="A web page titled “Restaurants” from place-my-order.com showing that “Illinois” and “Chicago” are selected. Underneath the dropdowns is a list of restaurants that are in Chicago." src="../static/img/react-vite/09-making-http-requests/05-solution-with-selection.png" width="689"/>
 
 ### Setup 5
 
diff --git a/src/react-vite/10-nested-routes/nested-routes.md b/src/react-vite/10-nested-routes/nested-routes.md
index bca2dde56..8019eae0e 100644
--- a/src/react-vite/10-nested-routes/nested-routes.md
+++ b/src/react-vite/10-nested-routes/nested-routes.md
@@ -18,7 +18,7 @@ In this section, we will:
 
 We want to have a component to display individual restaurants details, and want the path to be nested under the restaurants path.
 
-<img alt="Screenshot of the Place My Order app with a nested route, displaying the “/restaurants/lettuce-shack” URL in the browser’s address bar." src="../static/img/react-vite/10-nested-routes/01-solution.png" style="max-width: 640px;"/>
+<img alt="Screenshot of the Place My Order app with a nested route, displaying the “/restaurants/lettuce-shack” URL in the browser’s address bar." src="../static/img/react-vite/10-nested-routes/01-solution.png" width="640"/>
 
 ### Introduction to nested routes
 
@@ -167,7 +167,7 @@ Refactor the router config in **src/main.tsx** to nest the restaurant routes.
 
 We learned to create nested routes, let’s practice by adding another page to our application. Add the order page to the route config and add a link to it.
 
-<img alt="Screenshot of the Place My Order app with a nested route, displaying the “/restaurants/lettuce-shack/order” URL in the browser’s address bar." src="../static/img/react-vite/10-nested-routes/02-solution.png" style="max-width: 640px;"/>
+<img alt="Screenshot of the Place My Order app with a nested route, displaying the “/restaurants/lettuce-shack/order” URL in the browser’s address bar." src="../static/img/react-vite/10-nested-routes/02-solution.png" width="640"/>
 
 ### Setup 2
 
diff --git a/src/react-vite/react.md b/src/react-vite/react.md
index 97af49287..768beb512 100644
--- a/src/react-vite/react.md
+++ b/src/react-vite/react.md
@@ -48,7 +48,7 @@ The second half of the guide will cover more intermediate topics like state mana
 
 Throughout this guide, we’ll be building out a feature-rich Place My Order application, gradually applying all of these concepts to produce a clean and optimized solution!
 
-<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"/>
 
 ## Next steps
 
diff --git a/src/rxjs/rxjs.md b/src/rxjs/rxjs.md
index 5352cf5b8..6acefa9d3 100644
--- a/src/rxjs/rxjs.md
+++ b/src/rxjs/rxjs.md
@@ -75,13 +75,13 @@ be a useful reference for understanding how the tutorial works:
 
 - Open Developer Tools and stack CodePen vertically:
 
-  <img src="./static/img/codepen-stack.png" width="50%" alt="CodePen stacked" alt="CodePen stacked" style="border: solid 1px #808080" />
+  <img src="./static/img/codepen-stack.png" alt="CodePen stacked" style="border: solid 1px #808080" />
 
 - Save your CodePen
 - If you can’t figure out what is breaking, use an [online diff checker](https://www.diffchecker.com/) to
   compare your code with the solution.
 
-  <img src="./static/img/diff-checker.png" width="50%" alt="Diff Checker" alt="DiffChecker" style="border: solid 1px #808080" />
+  <img src="./static/img/diff-checker.png" alt="DiffChecker" style="border: solid 1px #808080" />
 
 ## Prerequisites
 
diff --git a/src/technology-consulting/7-setting-expectations.md b/src/technology-consulting/7-setting-expectations.md
index f35751d38..ff57d55c8 100644
--- a/src/technology-consulting/7-setting-expectations.md
+++ b/src/technology-consulting/7-setting-expectations.md
@@ -17,7 +17,7 @@ The most basic consulting maxim is to exceed expectations. To say this another w
 
 ## The Consulting Trifecta
 
-<img src="../static/img/technology-consulting/goodfastcheap.png" alt="Good fast cheap" width="640px"/>
+<img src="../static/img/technology-consulting/goodfastcheap.png" alt="Good fast cheap" width="640"/>
 
 You may have heard the following maxim: cheap, fast, good… pick two. While this may be useful (and true) for sales discussions, a more useful variation for project planning is:
 
diff --git a/src/typescript/02-ide-support/ide-support.md b/src/typescript/02-ide-support/ide-support.md
index 88b377409..225dfa55a 100644
--- a/src/typescript/02-ide-support/ide-support.md
+++ b/src/typescript/02-ide-support/ide-support.md
@@ -18,13 +18,13 @@ With little to no configuration, IDEs offer built-in debugging, git integration,
 
 <a href="https://code.visualstudio.com/">Visual Studio Code (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.
 
-<img src="../static/img/vs-code-screenshot.png" width="100%" alt="Screenshot of a TypeScript file in VS Code. When the name of a variable is hovered over, VS Code displays a popover with the interface of the variable as well as interface’s implementation so it’s easier to see what is in the interface." />
+<img src="../static/img/vs-code-screenshot.png" alt="Screenshot of a TypeScript file in VS Code. When the name of a variable is hovered over, VS Code displays a popover with the interface of the variable as well as interface’s implementation so it’s easier to see what is in the interface." />
 
 ### WebStorm
 
 <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.
 
-<img src="../static/img/webstorm-screenshot.png" width="100%" alt="Screenshot of a TypeScript file in WebStorm. When the name of a variable is hovered over, WebStorm displays a popover with the interface of the variable." />
+<img src="../static/img/webstorm-screenshot.png" alt="Screenshot of a TypeScript file in WebStorm. When the name of a variable is hovered over, WebStorm displays a popover with the interface of the variable." />
 
 ### StackBlitz
 
@@ -32,7 +32,7 @@ With little to no configuration, IDEs offer built-in debugging, git integration,
 It can be run entirely from the browser and it provides features such as linting, code suggestions, etc.
 You can start a project easily, but you’ll need to sign in with a GitHub account to save your work.
 
-<img src="../static/img/stackblitz-screenshot.png" width="100%" alt="Screenshot of a TypeScript file in StackBlitz. When the name of a variable is hovered over, StackBlitz displays a popover with the interface of the variable." />
+<img src="../static/img/stackblitz-screenshot.png" alt="Screenshot of a TypeScript file in StackBlitz. When the name of a variable is hovered over, StackBlitz displays a popover with the interface of the variable." />
 
 ## Next steps
 
diff --git a/src/typescript/03-setting-up-your-environment/setting-up-your-environment.md b/src/typescript/03-setting-up-your-environment/setting-up-your-environment.md
index bcf6f58b3..5ae684a82 100644
--- a/src/typescript/03-setting-up-your-environment/setting-up-your-environment.md
+++ b/src/typescript/03-setting-up-your-environment/setting-up-your-environment.md
@@ -223,7 +223,7 @@ src/hello-world/greetings.ts:7:35 - error TS2345: Argument of type 'number' is n
                                     ~~~~
 ```
 
-<a href="../static/img/typescript-error-compiling.png"><img alt="A screenshot of an Integrated Development Environment (IDE) showing TypeScript code. The code attempts to greet a user by displaying “Hello,” followed by a user’s name. However, a numeric value is passed instead of a string, causing a compilation error highlighted in the terminal at the bottom." src="../static/img/typescript-error-compiling.png" width="100%"/></a>
+<a href="../static/img/typescript-error-compiling.png"><img alt="A screenshot of an Integrated Development Environment (IDE) showing TypeScript code. The code attempts to greet a user by displaying “Hello,” followed by a user’s name. However, a numeric value is passed instead of a string, causing a compilation error highlighted in the terminal at the bottom." src="../static/img/typescript-error-compiling.png"/></a>
 
 </details>
 
diff --git a/src/typescript/typescript.md b/src/typescript/typescript.md
index e13cae0d8..4171b9ec7 100644
--- a/src/typescript/typescript.md
+++ b/src/typescript/typescript.md
@@ -18,7 +18,7 @@ Please ask questions related to TypeScript in the [TypeScript chat room](https:/
 
 If you find bugs in this training or have suggestions, create an [issue](https://github.com/bitovi/academy/issues) or email `contact@bitovi.com`.
 
-<img alt="TypeScript" src="./static/img/typescript/logo.svg" width="50%"/>
+<img alt="TypeScript" src="./static/img/typescript/logo.svg"/>
 
 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
 
diff --git a/src/web-components/10-custom-events/custom-events.md b/src/web-components/10-custom-events/custom-events.md
index 43c749350..c66025027 100644
--- a/src/web-components/10-custom-events/custom-events.md
+++ b/src/web-components/10-custom-events/custom-events.md
@@ -16,7 +16,7 @@ In this part we will:
 We want to display the bus destination for the selected marker. This should look similar to how the selected route is displayed as an overlay of the map, but float just below the route overlay. When no routes or markers are selected it should be invisible; when it is clicked it should say `Vehicle: DESTINATION`, where destination can be gotten from the vehicle object that is used to construct the marker.
 
 <img src="../static/img/web-components/bt-display-vehicle.gif"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="Selecting a marker displays the vehicle associated with that marker." />
 
 ## How to Solve This Problem
diff --git a/src/web-components/2-templates/templates.md b/src/web-components/2-templates/templates.md
index afb85ca64..103bffa23 100644
--- a/src/web-components/2-templates/templates.md
+++ b/src/web-components/2-templates/templates.md
@@ -17,7 +17,7 @@ In this part, we will:
 The Google map API needs an element to mount the map into. We want our map to be certain dimensions. Create a `250px` tall container for the map using `<template>`. In the end it should look like the CodePen with the grey box below::
 
 <img src="../static/img/web-components/map-view-rect.png"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="A rectangle for where we will display the map."/>
 
 ## How to Solve This Problem
diff --git a/src/web-components/3-map-view/map-view.md b/src/web-components/3-map-view/map-view.md
index 908427679..999b127ce 100644
--- a/src/web-components/3-map-view/map-view.md
+++ b/src/web-components/3-map-view/map-view.md
@@ -17,7 +17,7 @@ In this part we will:
 Create a component where we can display a Google map. Google maps need to be attached to a DOM element, so use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate the HTML and CSS that Google maps builds.
 
 <img src="../static/img/web-components/gmap-slippy.gif"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="google-map-view component with a useable slippy map."/>
 
 ## How to Solve This Problem
diff --git a/src/web-components/4-bus-tracker-component/bus-tracker.md b/src/web-components/4-bus-tracker-component/bus-tracker.md
index 6e36682fc..19a713f85 100644
--- a/src/web-components/4-bus-tracker-component/bus-tracker.md
+++ b/src/web-components/4-bus-tracker-component/bus-tracker.md
@@ -20,7 +20,7 @@ We want to build a component that displays the CTA bus tracker routes and displa
 - The `google-map-view` component we created in the previous section.
 
 <img src="../static/img/web-components/bus-tracker-shell.png"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="The shell of our bus-tracker component showing a header and a Google map"/>
 
 ## How to Solve This Problem
diff --git a/src/web-components/5-listing-routes/listing-routes.md b/src/web-components/5-listing-routes/listing-routes.md
index 594ca4449..9dfeef0eb 100644
--- a/src/web-components/5-listing-routes/listing-routes.md
+++ b/src/web-components/5-listing-routes/listing-routes.md
@@ -16,7 +16,7 @@ In this part we will:
 Our bus-tracker component currently only includes a header and a map. We want to add a routes list so that eventually the user can select a route which will display within the map. At the end of this exercise we want a scrollable list of routes to be displayed.
 
 <img src="../static/img/web-components/bt-list-routes.gif"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="A scrollable list of bus routes on top, a map on the bottom." />
 
 Additionally we have text within the header that says __Loading routes…__ statically. We want to remove this text after the routes have been rendered.
diff --git a/src/web-components/6-selecting-route/selecting-route.md b/src/web-components/6-selecting-route/selecting-route.md
index f71a14c0c..420e7ebd1 100644
--- a/src/web-components/6-selecting-route/selecting-route.md
+++ b/src/web-components/6-selecting-route/selecting-route.md
@@ -21,7 +21,7 @@ Additionally the route name and number should be shown overlaying the map. There
 When a route is selected it should become active and show a checkmark by the name.
 
 <img src="../static/img/web-components/bt-selecting-route.gif"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="Selecting a route from the list and noticing that the item is highlighted as active and the route number and name is shown in an overlay on top of the map." />
 
 ## How to Solve This Problem
diff --git a/src/web-components/7-display-markers/display-markers.md b/src/web-components/7-display-markers/display-markers.md
index 8a87abf00..757253bb1 100644
--- a/src/web-components/7-display-markers/display-markers.md
+++ b/src/web-components/7-display-markers/display-markers.md
@@ -20,7 +20,7 @@ In the previous exercise we fetched a list of vehicles when a route is selected
 When an error occurs in the API it should wipe away any existing markers.
 
 <img src="../static/img/web-components/bt-display-markers.gif"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="Markers being displayed when a route is selected." />
 
 ## How to Solve This Problem
diff --git a/src/web-components/8-customize-header/customize-header.md b/src/web-components/8-customize-header/customize-header.md
index fb0ddf1d1..00c3ee9ef 100644
--- a/src/web-components/8-customize-header/customize-header.md
+++ b/src/web-components/8-customize-header/customize-header.md
@@ -17,7 +17,7 @@ We want the users of our component to be able to customize the styling. For exam
 Open up the styling for this component by providing supported CSS custom properties. In the end a custom header should look something like this:
 
 <img src="../static/img/web-components/bt-header-styles.jpg"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="Custom header styles applied to our element." />
 
 ## How to Solve This Problem
diff --git a/src/web-components/9-slotted-content/slotted-content.md b/src/web-components/9-slotted-content/slotted-content.md
index 9038d89d9..4385791f1 100644
--- a/src/web-components/9-slotted-content/slotted-content.md
+++ b/src/web-components/9-slotted-content/slotted-content.md
@@ -17,7 +17,7 @@ In the previous section we allowed the header to be styled with a few CSS proper
 An easier way to allow consumers of your component to have *complete* control is to use slots. In this part we want to allow the header to be replaced with a custom header. In the end it should look like:
 
 <img src="../static/img/web-components/bt-slotted.jpg"
-  style="border: solid 1px black; max-width: 100%;"
+  style="border: solid 1px black;"
   alt="Header customized using slots." />
 
 ## How to Solve This Problem
diff --git a/static/styles/styles.less b/static/styles/styles.less
index b19c2ff72..2392810d7 100644
--- a/static/styles/styles.less
+++ b/static/styles/styles.less
@@ -517,6 +517,11 @@ a {
   margin-left: 0;
   padding-left: 25px;
 }
+.main-content .body img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
 .main-content .footer {
   display: flex;
   justify-content: space-between;