Merge pull request #1253 from Avaiga/tutorial_dl_button

Better download button, punctuation

docs/tutorials/articles/sales_dashboard/step_01/step_01.md

@@ -3,13 +3,13 @@ hide:
   - toc
 ---
 
-The full code for this step is available 
-[here](https://github.com/Avaiga/taipy-course-gui/blob/develop/2_visual_elements/main.py){: .tp-btn target='blank' }
-
 Let's start by creating a simple page with 3 components: a selector to select a category of items, 
 a bar chart which displays the sales of the top 10 countries for this category and 
 a table which displays data for the selected category
 
+[Download the code](https://github.com/Avaiga/taipy-course-gui/blob/develop/2_visual_elements/main.py){: .tp-btn target='blank' }
+
+
 ![Step 1 Application](images/simple_app.png){ width=90% : .tp-image-border }
 
 Let's start by importing the necessary libraries:

docs/tutorials/articles/sales_dashboard/step_02/step_02.md

@@ -3,12 +3,11 @@ hide:
   - toc
 ---
 
-The full code for this step is available 
-[here](https://github.com/Avaiga/taipy-course-gui/tree/develop/3_styling){: .tp-btn target='blank' }
-
 This step will be about styling the application. We will add more filters, layout the visual element and 
 regroup them in parts.
 
+[Download the code](https://github.com/Avaiga/taipy-course-gui/tree/develop/3_styling){: .tp-btn target='blank' }
+
 ![Styling Application](images/styling_app.png){ width=90% : .tp-image-border }
 
 We can still use the same code as the previous step, but let's recreate the page from scratch:
@@ -157,7 +156,7 @@ Check out the styling part of [button](../../../../refmans/gui/viselements/gener
 
 This will add a margin to the top of the button to align it with the filters.
 We can also add properties to all Taipy buttons by applying properties to the `taipy-button` class
-(You can find these class names by inspecting the page on a visual element)
+(You can find these class names by inspecting the page on a visual element).
 
 ```css
 .taipy-button {

docs/tutorials/articles/sales_dashboard/step_03/step_03.md

@@ -3,11 +3,10 @@ hide:
   - toc
 ---
 
-The full code for this step is available 
-[here](https://github.com/Avaiga/taipy-course-gui/tree/develop/4_charts){: .tp-btn target='blank' }
-
 In this part we will embed a Plotly map figure in our application.
 
+[Download the code](https://github.com/Avaiga/taipy-course-gui/tree/develop/4_charts){: .tp-btn target='blank' }
+
 ![Map embedded in application](images/map.png){ width=90% : .tp-image-border }
 
 For this purpose, we will use the `generate_map` function defined 

docs/tutorials/articles/sales_dashboard/step_04/step_04.md

@@ -3,11 +3,10 @@ hide:
   - toc
 ---
 
-The full code for this step is available 
-[here](https://github.com/Avaiga/taipy-course-gui/tree/develop/5_multipage){: .tp-btn target='blank' }
-
 In this part we will add a second page to our application and a sidebar menu to navigate between pages.
 
+[Download the code](https://github.com/Avaiga/taipy-course-gui/tree/develop/5_multipage){: .tp-btn target='blank' }
+
 ![Sidebar Menu](images/menu.png){ width=90% : .tp-image-border }
 
 Using the same code as the previous steps, let's add a root page which will contain the sidebar menu
@@ -87,7 +86,6 @@ def menu_option_selected(state, action, info):
 The callback signature for `menu` visual element is described [here](../../../../refmans/gui/viselements/generic/menu.md).
 Here we extract the page URL from the `info` dictionary and use the `navigate` function to change the page.
 
-You can learn more about multi-page navigation [here](../../../../userman/gui/pages/navigate/index.md)
 
 Lastly, we can add some CSS to resize the images and make the login button smaller:
 
@@ -102,4 +100,4 @@ Lastly, we can add some CSS to resize the images and make the login button small
 }
 ```
 
-You can learn more about multi-page navigation [here](../../../../userman/gui/pages/navigate/index.md)
+You can learn more about multi-page navigation [here](../../../../userman/gui/pages/navigate/index.md).