Finalize Basic Tutorials (#6425)

doc/tutorials/basic/build_animation.md

@@ -2,11 +2,22 @@
 
 In this tutorial, we will create a *bar chart race* using the [Altair](https://altair-viz.github.io) plotting library and the [`Player`](../../reference/widgets/Player.ipynb) widget.
 
+*Todo: The below is for testing on ios. Clean up*
+
+https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4 NOT PLAYING ON IPHONE
+
 <video controls="" poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png">
  <source src="https://assets.holoviz.org/panel/tutorials/bar_chart_race.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
  Your browser does not support the video tag.
 </video>
 
+../../_static/bar_chart_race_2.mp4 IS PLAYING ON IPHONE
+
+<video controls="" poster="https://assets.holoviz.org/panel/tutorials/bar_chart_race.png">
+ <source src="../../_static/bar_chart_race.mp4" type="video/mp4" style="max-height: 400px; max-width: 100%;">
+ Your browser does not support the video tag.
+</video>
+
 :::{dropdown} Dependencies
 
 ```bash

doc/tutorials/basic/build_todo.md

@@ -11,7 +11,7 @@ In this section, we will work on building a *Todo App* together so that our wind
 When we ask everyone to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
 :::
 
-<iframe src="https://panel-org-build-todo-app.hf.space" frameborder="0" style="width: 100%;height:1000px"></iframe>
+<iframe src="https://panel-org-build-todo-app.hf.space" frameborder="0" style="width: 100%;height:500px"></iframe>
 
 :::{dropdown} Requirements
 

doc/tutorials/basic/index.md

@@ -46,15 +46,62 @@ Start your journey with these foundational tutorials:
 
 ## Master Panel Basics
 
-Once you're comfortable, it's time to dive deeper:
+Once you're comfortable, it's time to dive deeper. Through a series of lessons we will learn about displaying content, arranging it on the page, handling user inputs and then how to improve the UI and UX of our applications.
 
-| Part | Section A | Section B| Section C |
-|--------------------------|---------------------------|-------------------|------------------------------------------------------|
-| **1. Display Content** | [`pn.panel`](pn_panel.md) | [Panes](panes.md) | [Performance Indicators](indicators_performance.md) |
-| **2. Organize Content** | [Layouts](layouts.md) | [Control the Size](size.md) | [Align Content](align.md) |
-| **3. Handle User Input** | [Widgets](widgets.md) | [React to User Input](pn_bind.md) | [Handle State](state.md) |
-| **4. Improve the look** | [Templates](templates.md)| [Designs](design.md) | [Styles](style.md) |
-| **5. Improve the Feel** | [Caching](caching.md) | [Activity Indicators](indicators_activity.md) | [Progressive Updates](progressive_layouts.md) |
+### 1. Display Content
+
+[`pn.panel`](pn_panel.md)
+: Learn to display Python objects easily with `pn.panel`
+
+[Panes](panes.md)
+: Learn to display content by creating Panes.
+
+[Indicators](indicators_performance.md)
+: Visualize key metrics with simple indicators
+
+### 2. Organize Content
+
+[Layouts](layouts.md)
+: Arrange output on the page using layouts.
+
+[Control the Size](size.md)
+: Learn to control the sizing of your components.
+
+[Align Content](align.md)
+: Discover how to align content on the page.
+
+### 3. Handle User Input
+
+[Widgets](widgets.md)
+: Learn about handling user input with widgets.
+
+[React to User Input](pn_bind.md)
+: Learn about reacting to user input by binding it to interactive components.
+
+[Reactive Expressions](pn_rx.md)
+: Learn about handling state and writing entire reactive expressions.
+
+### 4. Improve the Look
+
+[Templates](templates.md)
+: Learn to structure your app with pre-built templates.
+
+[Designs](design.md)
+: Style your apps using pre-built *designs*
+
+[Styles](style.md)
+: Further customize the look and feel by adding CSS styling.
+
+### 5. Improve the Feel
+
+[Caching](caching.md)
+: Leverage caching to enhance the speed and efficiency of your app.
+
+[Activity Indicators](indicators_activity.md)
+: Indicate progress and add notifications to improve the user experience.
+
+[Progressive Updates](progressive_layouts.md)
+: Efficiently and effortlessly update the content in your app with progressive updates.
 
 ## Share Your Creations
 
@@ -77,6 +124,17 @@ Now that you've got the basics down, it's time to put your skills to the test:
 
 Let's start building some amazing wind turbine apps! 🌬️🌀
 
+## Community Tutorials
+
+Want more? Check out some amazing tutorials by the community.
+
+- [3 Ways to Build a Panel Visualization Dashboard - Sophia Yang](https://towardsdatascience.com/3-ways-to-build-a-panel-visualization-dashboard-6e14148f529d) (Blog Post) | [PyTexas 2023](https://www.youtube.com/watch?v=8du4NNoOtII) (Video)
+- [HoloViz: Visualization and Interactive Dashboards in Python - Jean-Luc Stevens](https://www.youtube.com/watch?v=61uHwBlxRug) (Video)
+- [How to create Data Analytics Visualisation Dashboard using Python with Panel/Hvplot in just 10 mins - Atish Jain](https://www.youtube.com/watch?v=__QUQg96SFs) (Video)
+- [Step-by-Step Guide to Create Multi-Page Dashboard using Panel - CoderzColumn](https://www.youtube.com/watch?v=G3M0lQcWpqE) (Video)
+- [Transform a Python script into an interactive, web app and make it performant - Andrew Huang](https://blog.stackademic.com/transform-a-python-script-into-an-interactive-web-app-and-make-it-performant-73fa3b304cdf) (Blog Post)
+- [Using Panel to Build Data Dashboards in Python - Will Norris](https://towardsdatascience.com/using-panel-to-build-data-dashboards-in-python-e87a04c9034d) (Blog Post)
+
 ```{toctree}
 :titlesonly:
 :hidden:
@@ -93,7 +151,7 @@ size
 align
 widgets
 pn_bind
-state
+pn_rx
 caching
 indicators_activity
 progressive_layouts

doc/tutorials/basic/indicators_performance.md

@@ -4,11 +4,14 @@ Welcome to our tutorial on Panel's [indicators](https://panel.holoviz.org/refer
 
 We will delve into the use of Indicators with an example that uses them to visualizes the key metrics of wind turbines in an engaging and insightful manner. The result will be this:
 
-:::{grid-item-card} Windturbines Explorer
-
-:target: https://|gallery-endpoint|.pyviz.demo.anaconda.com/windturbines
+:::{card} Windturbines Explorer
+:link: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/windturbines
 :width: 100%
-Visually explore a dataset of US Windturbines. +++ See source :::
+
+Visually explore a dataset of US Windturbines.
++++
+[See source](../../gallery/windturbines)
+:::
 
 ## Explore Indicators
 

doc/tutorials/basic/panes.md

@@ -10,6 +10,10 @@ In this tutorial, we will learn to display objects with *Panes*:
 A *Pane* is a component that can display an object. It takes an `object` as an argument.
 :::
 
+:::{note}
+You might notice a lot of repetition from the previous section regarding `pn.panel`. Don't worry, it's intentional! We're doing this to empower you with the ability to compare and contrast. While `pn.panel` is incredibly user-friendly and versatile, specific Panes allow you to display output with precision and efficiency. This enables you to construct more intricate and high-performing applications.
+:::
+
 :::{note}
 When we ask you to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
 :::