second batch of fixes for dev garage tutorials

tutorials/ui5-webcomponents-react-routing/ui5-webcomponents-react-routing.md

@@ -11,6 +11,9 @@ author_profile: https://github.com/Lukas742
 # Add Routing to a UI5 Web Components for React Project
 <!-- description --> Use routes to navigate between different pages using UI5 Web Components for React.
 
+## Prerequisites
+- Complete the tutorial [Create an Analytical Dashboard via UI5 Web Components for React](ui5-webcomponents-react-dashboard).
+
 ## You will learn
 -  How to refactor code into different React components
 -  How to create multiple pages
@@ -39,11 +42,11 @@ export function Detail() {
 ### Add Router
 
 
-1. Install `react-router-dom`.
+1. Install `react-router-dom`:
 
     [React Router](https://reactrouter.com) is a collection of navigational components that compose declaratively with your application.
 
-    Execute the following line in the terminal in your root location of the project.
+    Execute the following command in the terminal in your root location of the project.
 
    ```Shell
    npm install react-router-dom
@@ -76,9 +79,9 @@ export function Detail() {
    }
    ```
 
-2. Refactor `MyApp.tsx`.
+2. Refactor `MyApp.tsx`:
 
-    Some refactoring is necessary now. Extract every component and the corresponding logic except for the `ShellBar` from `MyApp.tsx` and move it to `Home.tsx`.
+    Some refactoring is necessary now to turn `MyApp.tsx` into a navigation container that displays other components based on the route. Extract every component and the corresponding logic except for the `ShellBar` from `MyApp.tsx` and move it to `Home.tsx`.
 
     `MyApp.tsx` should now look like this:
 
@@ -399,7 +402,7 @@ Your current URL now displays the `#/home` path. If you replace `home` with `det
 ### Handle navigation
 
 
-Except for changing the URL of the App users don't have options to navigate to the `Detail` page. The page could contain some more information about activities and should therefore be connected to the `Progress Card`.
+Currently user don't have any options to navigate to the `Detail` page (except for changing the URL). The page could contain some more information about activities and should therefore be connected to the header of the `Progress Card`.
 
 1. Go into your `Home` component and add `interactive` and `onClick={handleProgressHeaderClick}` to your second `CardHeader` component.
 
@@ -418,7 +421,7 @@ Except for changing the URL of the App users don't have options to navigate to t
    >
    ```
 
-2. Define the `handleProgressHeaderClick` function as follows. And import the `useNavigate` hook from `react-router-dom`.
+2. Define the `handleProgressHeaderClick` function as follows (inside the `Home()` function definition). And import the `useNavigate` hook from `react-router-dom`.
 
    ```TypeScript / TSX
    import { useNavigate } from "react-router-dom";
@@ -430,21 +433,14 @@ Except for changing the URL of the App users don't have options to navigate to t
    };
    ```
 
-    Now it is possible to navigate to the `Details` component, but right now, there is no way to go back except for the back button of the browser and typing in the URL manually.
+    Now it is possible to navigate to the `Details` component by pressing the `CardHeader`, but right now, there is no way to go back except for the back button of the browser and typing in the URL manually.
 
-3. Navigate back to the Home Screen
+3. Navigate back to the home screen:
 
-    Normally when you click on the Logo of the app, it should send you back to your `Home` screen. Let's implement that.
+    Usually when you click the logo of an app, it should send you back to the `Home` screen. Let's implement that.
 
     Go into your `MyApp.tsx` file where your `ShellBar` is located and add an `onLogoClick` prop. The function is almost the same as for the `onHeaderClick`, but this time the destination should be the default page.
 
-   ```TypeScript / TSX
-   const navigate = useNavigate();
-   const handleLogoClick = () => {
-     navigate("./");
-   };
-   ```
-
    ```TypeScript / TSX
    <ShellBar
      logo={<img src={reactLogo} alt="Company Logo" />}
@@ -457,6 +453,15 @@ Except for changing the URL of the App users don't have options to navigate to t
      onLogoClick={handleLogoClick}
    >
    ```
+   ```TypeScript / TSX
+   import { useNavigate } from "react-router-dom";
+   ```
+   ```TypeScript / TSX
+   const navigate = useNavigate();
+   const handleLogoClick = () => {
+     navigate("./");
+   };
+   ```
 
 
 ### Code overview

tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md

@@ -11,6 +11,9 @@ author_profile: https://github.com/Lukas742
 # Add Custom Styles and Components for UI5 Web Components for React
 <!-- description --> Add custom styles and custom components to your application using UI5 Web Components for React.
 
+## Prerequisites
+- Complete the tutorial [Add Routing to a UI5 Web Components for React Project](ui5-webcomponents-react-routing).
+
 ## You will learn
 -  How to change style of existing components
 -  How to style own components
@@ -54,7 +57,7 @@ If you want to add a custom component to your app, but still want to use the sty
 
 In this step we will use [CSS Modules](https://github.com/css-modules/css-modules) and inline styling to style a custom component.
 
-> **Note:** The Vite template already includes support for CSS Modules, so you can use them out of the box.
+> **Note:** The Vite template this project is using already includes support for CSS Modules, so you can use them out of the box.
 
 1. Create a custom component `MyCustomElement.tsx` under `./src` with following content:
 
@@ -70,15 +73,18 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module
    };
    ```
 
-2. Explicitly import `@ui5/webcomponents-react-base` package
+2. Explicitly import `@ui5/webcomponents-react-base` package:
 
     `@ui5/webcomponents-react-base` is already installed by `@ui5/webcomponents-react`, but as we want to import the `ThemingParameters` in the following step, it's recommended adding the package to the dependencies as well.
 
    ```shell
    npm install @ui5/webcomponents-react-base
    ```
 
-3. Add inline-styles to apply `ThemingParameters` to the `<span>`
+    > **Note:**
+    When facing issues with installing, please ensure you're using the same [minor version](https://semver.org/#summary) as the other `@ui5/webcomponents*` packages. To pin the version manually, run the command `npm install @ui5/webcomponents-react-base@<version>`.
+
+3. Add inline-styles to apply `ThemingParameters` to the `<span>`:
 
    ```TypeScript / TSX
    <span style={{ color: ThemingParameters.sapNegativeColor, fontSize: ThemingParameters.sapFontHeader1Size }}>
@@ -88,9 +94,9 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module
 
     The global CSS variables contain all publicly available styling parameters. With this it is possible to style custom components with the standardized styles of the UI5 Web Components.
 
-4. Add styling using CSS Modules
+4. Add styling using CSS Modules:
 
-    First create a new file `MyCustomElement.module.css` in the same folder as `MyCustomElement.tsx` with the following content:
+    First, create a new file `MyCustomElement.module.css` in `src` with the following content:
 
    ```CSS
     .container {
@@ -141,29 +147,29 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module
    ```
     ![Custom Element](01_customElement.png)
 
-   Now you can see, that the element has the same `fontFamily` and uses the same semantic colors as UI5 Web Components for React.
+   As you can see the custom element has the same `fontFamily` and uses the same semantic colors as UI5 Web Components for React.
 
 ### SAP UI Common CSS
 
-It's often required setting more complex styles for e.g. layouting. For this it's recommended using CSS classes of the [SAP UI Common CSS](https://sap.github.io/fundamental-styles/?path=/docs/common-css-introduction--docs) library which is also following the Fiori design guidelines.
+It's often required to define more complex styles, for example for layouting. In this case, it's recommended to use the [SAP UI Common CSS](https://sap.github.io/fundamental-styles/?path=/docs/common-css-introduction--docs) library and its CSS classes, which also follow the SAP Fiori design guidelines.
 
 One example is applying a responsive content padding to the content of the dashboard:
 
-1. Install Common CSS
+1. Install Common CSS:
 
    ```shell
    npm i @sap-ui/common-css
    ```
 
-2. Import the required classes in `Home.tsx`
+2. Import the required classes in `Home.tsx`:
 
    ```ts
    import '@sap-ui/common-css/dist/sap-content-paddings.css';
    import '@sap-ui/common-css/dist/sap-container-type.css';
    ```
-3. Apply the classes on elements
+3. Apply the classes on elements:
 
-    Add `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class:
+    Add a `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class:
 
    ```tsx
    <div className="sap-container-type-inline-size">
@@ -173,7 +179,7 @@ One example is applying a responsive content padding to the content of the dashb
         ...
    ```
 
-    Remove `style` from the outer `FlexBox` and apply the `sap-content-paddings-container` class:
+    Also remove the `style` from the outer `FlexBox` and apply the `sap-content-paddings-container` class:
 
    ```tsx
    <FlexBox
@@ -193,4 +199,4 @@ If you enjoyed this tutorial, you can help us out a lot by starring our repo and
 
 
 
----
+---