Added info about the project folder and how the article works

eshanrnh · eshanrnh · commit c9ccf7c23f57 · 2025-05-07T12:23:19.000+02:00
diff --git a/10/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md b/10/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
@@ -1,17 +1,27 @@
----
+# CSS and Images
 
+Our homepage is currently missing the CSS and image files. To include these files:
 
----
+1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.
 
-# CSS and Images
+{% hint style="info" %}
+The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
+{% endhint %}
 
-Our homepage is currently missing the CSS and image files. To include these files:
+2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.
+3. Paste them inside the **wwwroot** folder of your Umbraco project.
+4. Go to the **HomePage** template in the **Settings** section.
+5. Make sure the stylesheet reference in the HTML is `/css/main.css`.
+
+    ![Stylesheet reference](images/stylesheet-reference.png)
+
+## Stylesheet Reference
+
+Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`
 
-1. Navigate to the **MyCustomUmbracoProject** folder and the **Custom Umbraco Template** folder in File Explorer.
-2. Copy the **CSS** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder.
-3.  Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`. \\
+* Check the **Network** tab to confirm no CSS or image files are missing.
+* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.
 
-    <figure><img src="images/Master-Template.png" alt=""><figcaption></figcaption></figure>
-4.  Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`
+## How Static Files Are Served
 
-    The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places.
+Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
diff --git a/13/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md b/13/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
@@ -2,11 +2,26 @@
 
 Our homepage is currently missing the CSS and image files. To include these files:
 
-1. Navigate to the **MyCustomUmbracoProject** folder and the **Custom Umbraco Template** folder in File Explorer.
-2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder.
-3.  Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`.
+1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.
 
-    ![Stylesheet reference](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/Master-Template.png)
-4.  Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`
+{% hint style="info" %}
+The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
+{% endhint %}
 
-    The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places.
+2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.
+3. Paste them inside the **wwwroot** folder of your Umbraco project.
+4. Go to the **HomePage** template in the **Settings** section.
+5. Make sure the stylesheet reference in the HTML is `/css/main.css`.
+
+    ![Stylesheet reference](images/stylesheet-reference.png)
+
+## Stylesheet Reference
+
+Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`
+
+* Check the **Network** tab to confirm no CSS or image files are missing.
+* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.
+
+## How Static Files Are Served
+
+Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md b/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
@@ -2,11 +2,26 @@
 
 Our homepage is currently missing the CSS and image files. To include these files:
 
-1. Navigate to the **MyCustomUmbracoProject** folder and the **Custom Umbraco Template** folder in File Explorer.
-2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder.
-3. Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`.
+1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.
+
+{% hint style="info" %}
+The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
+{% endhint %}
+
+2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.
+3. Paste them inside the **wwwroot** folder of your Umbraco project.
+4. Go to the **HomePage** template in the **Settings** section.
+5. Make sure the stylesheet reference in the HTML is `/css/main.css`.
 
     ![Stylesheet reference](images/stylesheet-reference.png)
-4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`
 
-    The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places.
+## Stylesheet Reference
+
+Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`
+
+* Check the **Network** tab to confirm no CSS or image files are missing.
+* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.
+
+## How Static Files Are Served
+
+Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
diff --git a/15/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md b/15/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
@@ -2,11 +2,26 @@
 
 Our homepage is currently missing the CSS and image files. To include these files:
 
-1. Navigate to the **MyCustomUmbracoProject** folder and the **Custom Umbraco Template** folder in File Explorer.
-2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder.
-3. Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`.
+1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.
+
+{% hint style="info" %}
+The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
+{% endhint %}
+
+2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.
+3. Paste them inside the **wwwroot** folder of your Umbraco project.
+4. Go to the **HomePage** template in the **Settings** section.
+5. Make sure the stylesheet reference in the HTML is `/css/main.css`.
 
     ![Stylesheet reference](images/stylesheet-reference.png)
-4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`
 
-    The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places.
+## Stylesheet Reference
+
+Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`
+
+* Check the **Network** tab to confirm no CSS or image files are missing.
+* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.
+
+## How Static Files Are Served
+
+Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
diff --git a/16/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md b/16/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
@@ -2,11 +2,26 @@
 
 Our homepage is currently missing the CSS and image files. To include these files:
 
-1. Navigate to the **MyCustomUmbracoProject** folder and the **Custom Umbraco Template** folder in File Explorer.
-2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder.
-3. Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`.
+1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.
+
+{% hint style="info" %}
+The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
+{% endhint %}
+
+2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.
+3. Paste them inside the **wwwroot** folder of your Umbraco project.
+4. Go to the **HomePage** template in the **Settings** section.
+5. Make sure the stylesheet reference in the HTML is `/css/main.css`.
 
     ![Stylesheet reference](images/stylesheet-reference.png)
-4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`
 
-    The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places.
+## Stylesheet Reference
+
+Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`
+
+* Check the **Network** tab to confirm no CSS or image files are missing.
+* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.
+
+## How Static Files Are Served
+
+Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
