PR fixes

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;" width="640px/>
+  style="border: solid 1px black;" width="640px"/>
 
 The component should provide the following HTML:
 

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

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

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

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

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
 

src/web-components/10-custom-events/custom-events.md

@@ -16,7 +16,6 @@ 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;"
   alt="Selecting a marker displays the vehicle associated with that marker." />
 

src/web-components/2-templates/templates.md

@@ -17,7 +17,6 @@ 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;"
   alt="A rectangle for where we will display the map."/>
 

src/web-components/3-map-view/map-view.md

@@ -17,7 +17,6 @@ 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;"
   alt="google-map-view component with a useable slippy map."/>
 

src/web-components/4-bus-tracker-component/bus-tracker.md

@@ -20,7 +20,6 @@ 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;"
   alt="The shell of our bus-tracker component showing a header and a Google map"/>
 

src/web-components/5-listing-routes/listing-routes.md

@@ -16,7 +16,6 @@ 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;"
   alt="A scrollable list of bus routes on top, a map on the bottom." />
 

src/web-components/6-selecting-route/selecting-route.md

@@ -21,7 +21,6 @@ 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;"
   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." />
 

src/web-components/7-display-markers/display-markers.md

@@ -20,7 +20,6 @@ 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;"
   alt="Markers being displayed when a route is selected." />
 

src/web-components/8-customize-header/customize-header.md

@@ -17,7 +17,6 @@ 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;"
   alt="Custom header styles applied to our element." />
 

src/web-components/9-slotted-content/slotted-content.md

@@ -17,7 +17,6 @@ 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;"
   alt="Header customized using slots." />