From 1280861cdd85977f4241563b9807ef3db9eb0743 Mon Sep 17 00:00:00 2001 From: Katia Gatt Date: Tue, 8 Apr 2025 17:12:09 +0200 Subject: [PATCH 1/7] chapter 12 --- book/_toc.yml | 1 + book/syntax_exercises/010.md | 6 +- book/syntax_exercises/012.md | 118 +++++++++++++++++++++++++++++++++++ 3 files changed, 122 insertions(+), 3 deletions(-) create mode 100644 book/syntax_exercises/012.md diff --git a/book/_toc.yml b/book/_toc.yml index 68bb676..23ac43c 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -23,6 +23,7 @@ parts: - file: syntax_exercises/009.md - file: syntax_exercises/010.md - file: syntax_exercises/011.md + - file: syntax_exercises/012.md - file: references.md - file: changelog.md - file: credits.md diff --git a/book/syntax_exercises/010.md b/book/syntax_exercises/010.md index ff3e38a..ccb14a0 100644 --- a/book/syntax_exercises/010.md +++ b/book/syntax_exercises/010.md @@ -67,11 +67,11 @@ The syntax to type a table is a bit cumbersome. You could make use of online too 8. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. -8. Add a commit message. +9. Add a commit message. -9. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). +10. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). -10. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. +11. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. diff --git a/book/syntax_exercises/012.md b/book/syntax_exercises/012.md new file mode 100644 index 0000000..7b22783 --- /dev/null +++ b/book/syntax_exercises/012.md @@ -0,0 +1,118 @@ +# Exercise 12: Use admonitions + +In this exercise, you will learn how to use admonitions to enhance the readability and structure of your TeachBook content. Admonitions are special highlighted blocks that are useful for tips, warnings, notes, and more. + +::::::{topic} Exercise objective +Can you structure your content with different types of admonitions and understand which can be customised? +:::::: + +```{tip} +Admonitions help to guide readers' attention and make your book more accessible. Full documentation is available [here](https://myst-parser.readthedocs.io/en/latest/syntax/admonitions.html). +``` + + +## Using standard admonitions + +1. Open a new or existing Markdown file. + +2. Start by adding a simple `note` admonition. This type uses a **fixed title** ("Note"): + +````md +```{note} +This is a note. It always has the title "Note". +``` +```` + +3. Try adding the following fixed-title admonitions. These cannot have custom titles: + +````md +```{tip} +This is a helpful tip! +``` + +```{warning} +Be careful when editing this file. +``` + +```{attention} +Important: Save your work frequently. +``` +```` + +4. Other fixed-title admonitions are listed below. Try use these in your code using the same format used above. + +- `caution` +- `important` +- `seealso` +- `error` +- `hint` +- `danger` + + +## Custom titles for admonitions + +5. Some admonitions allow you to **specify your own title**. Try the `admonition` directive: + +````md +```{admonition} Did you know? +You can customise the title of this block using the `admonition` directive. +``` +```` + + +6. Similarly, you can customise titles for `dropdown` admonitions: + +````md +```{dropdown} Click to reveal more info +This content is hidden until the user clicks the title. +``` +```` + +7. Dropdowns are great for optional or expandable content. Try nesting content inside a dropdown block:: + +````md +```{dropdown} See the steps +1. Open your file. +2. Write some content. +3. Preview the changes. +``` +```` +8. Check your understanding with the summary table below. + +```{admonition} Summary: Custom vs. Fixed titles +Here’s a quick overview: + +| Fixed Title | Custom Title Allowed | +|----------------------|----------------------| +| `note` | `admonition` | +| `tip` | `dropdown` | +| `warning` | | +| `attention` | | +| `caution` | | +| `important` | | +| `seealso` | | +| `hint` | | +| `danger` | | +| `error` | | +``` + + + +9. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. + +10. Add a commit message. + +11. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). + +12. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. + +```{admonition} Check your understanding +:class: note + +Before moving on, make sure you understand: +- Which admonitions allow custom titles, and which don’t? +- What is the purpose of a dropdown admonition? +- When might you use a `note` vs. an `admonition`? +``` + + From ad32147ec8edc0423dc74b09df583f4495286ada Mon Sep 17 00:00:00 2001 From: Katia Gatt Date: Wed, 9 Apr 2025 16:24:08 +0200 Subject: [PATCH 2/7] final changes --- book/syntax_exercises/012.md | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/book/syntax_exercises/012.md b/book/syntax_exercises/012.md index 7b22783..2b60263 100644 --- a/book/syntax_exercises/012.md +++ b/book/syntax_exercises/012.md @@ -79,25 +79,14 @@ This content is hidden until the user clicks the title. ```` 8. Check your understanding with the summary table below. -```{admonition} Summary: Custom vs. Fixed titles +```{admonition} Summary: Fixed vs. Custom Title Admonitions Here’s a quick overview: -| Fixed Title | Custom Title Allowed | -|----------------------|----------------------| -| `note` | `admonition` | -| `tip` | `dropdown` | -| `warning` | | -| `attention` | | -| `caution` | | -| `important` | | -| `seealso` | | -| `hint` | | -| `danger` | | -| `error` | | +| Fixed Title Admonitions | Custom Title Admonitions | +|------------------------------------------------------------------|-------------------------------| +| `note`, `tip`, `warning`, `attention`, `caution`, `important`, `seealso`, `hint`, `danger`, `error` | `admonition`, `dropdown` | ``` - - 9. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. 10. Add a commit message. From eb28a9f1de62be2167ad2cb71a18e816656fb779 Mon Sep 17 00:00:00 2001 From: Katia Gatt Date: Sun, 13 Apr 2025 17:29:02 +0200 Subject: [PATCH 3/7] Update 012.md --- book/syntax_exercises/012.md | 132 +++++++++++++++++++++++++++++++++-- 1 file changed, 126 insertions(+), 6 deletions(-) diff --git a/book/syntax_exercises/012.md b/book/syntax_exercises/012.md index 2b60263..59b195d 100644 --- a/book/syntax_exercises/012.md +++ b/book/syntax_exercises/012.md @@ -49,7 +49,7 @@ Important: Save your work frequently. - `danger` -## Custom titles for admonitions +## Custom titles & styles for admonitions 5. Some admonitions allow you to **specify your own title**. Try the `admonition` directive: @@ -59,7 +59,6 @@ You can customise the title of this block using the `admonition` directive. ``` ```` - 6. Similarly, you can customise titles for `dropdown` admonitions: ````md @@ -77,6 +76,7 @@ This content is hidden until the user clicks the title. 3. Preview the changes. ``` ```` + 8. Check your understanding with the summary table below. ```{admonition} Summary: Fixed vs. Custom Title Admonitions @@ -87,13 +87,132 @@ Here’s a quick overview: | `note`, `tip`, `warning`, `attention`, `caution`, `important`, `seealso`, `hint`, `danger`, `error` | `admonition`, `dropdown` | ``` -9. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. +9. For these admonitions that allow custom titles (`admonition`, `dropdown`), you can also apply a **custom style** using the `:class:` option. This can be used to change the appearance (e.g. colour or layout) of the block. Try the following examples: -10. Add a commit message. +````md +```{admonition} Pro tip! +:class: tip -11. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). +You can apply styles using the `:class:` option. +``` +```` -12. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. +````md +```{dropdown} Save your work +:class: warning + +Don't forget to save your changes regularly to avoid data loss! +``` +```` + +10. You can apply the `:class: dropdown` to any `admonition`, even if it is not originally a dropdown block. This will allow the admonition to be collapsible, making it useful for sections where you'd like to hide additional content until the reader clicks to expand it. Test this out: + +````md +```{admonition} Extra Info +:class: dropdown + +This content will be hidden until the reader clicks to reveal it. +``` +```` + +11. The table below summarizes the classes that can be used together with the `admonition` and `dropdown`admonitions. Try customize admonitions yourself, using different classes from the table. + + +| Class name | Effect | +|------------------|------------------------------------------------------------------------| +| `tip` | Gives the block a green background (styled like a helpful tip) | +| `warning` | Orange background with a warning-style border | +| `caution` | Yellow caution-style background | +| `error` / `danger` | Red background indicating errors or important warnings | +| `dropdown` | Makes the block collapsible (content is hidden until clicked) | +| `seealso` | Blue background, often used for related info or references | +| `important` | Dark blue or purple background for emphasis | +| `note` | Subtle grey note block | + +12. You can also use **multiple classes** at once by separating them with spaces. For example, `:class: important dropdown` will give you a collapsible, important-looking block. Try mixing and matching these, using the example below as a base: + + +````md +```{admonition} Important: Check this out! +:class: important dropdown + +This content is both highlighted as important and collapsible. +``` +```` + + +## Custom colours for admonitions + +13. It is also possible to use specific colours to customize your admonitions, using built-in Sphinx colour classes. To do so, it is necessary to follow the installation process outlined below: + +**Step A: Install the Package** + +Install the `sphinx-named-colors` package using `pip`: + +``` +pip install sphinx-named-colors +``` + +**Step B: Add to `requirements.txt`** + +Ensure that the package is included in your project's `requirements.txt` to track the dependency: + +``` +sphinx-named-colors +``` + +**Step C: Enable in `_config.yml`** + +In your `_config.yml` file, add the extension to the list of Sphinx extra extensions: + +``` +sphinx: + extra_extensions: + . + . + . + - sphinx_named_colors + . + . + . +``` + +14. Once the installation is done, we can experiment with custom-coloured admonitions! Go ahead and look at the available [Sphinx Named Colours](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html#admonitions), and pick a desired colour. + +15. Once you have chosen a colour, coloured admonitions can be generated in two ways, depending on how you'd like to structure your content. The first method is by adding the name-colour via `:class:` to an existing `admonition` or `dropdown` type block, similar to what was done above. This can be done as follows: + +````md +```{admonition} Custom Colour Example +:class: darkred + +This is a custom coloured admonition using `:class: darkred`. +``` +```` + +16. When using the above method, a new class is introduced: `no-title`. This suppresses printing of the title bar, even if the title is given. Try this out by adding this class to the above code. + +17. The second method of adding coloured admonitions is by directly creating an admonition based on a colour. This method can be used if you'd rather not use the generic type and want a minimal syntax. In this case, the title is optional, and if omitted, the title bar will not appear. Try this out with the code below: + + +````md +```{darkgreen} Optional Title + +This is a green-styled custom admonition. +``` +```` + +18. For the second method using named colour admonitions, a new class is also introduced: `show-bar`. This allows titleless admonitions, which forces printing of the title bar. Try this out using the code above with an omitted title, and this added class. + +19. For both methods, you can also combine classes here, for example, `:class: darkblue dropdown` to make it collapsible and coloured. Test this out, building on the above examples. + + +20. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. + +21. Add a commit message. + +22. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). + +23. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. ```{admonition} Check your understanding :class: note @@ -102,6 +221,7 @@ Before moving on, make sure you understand: - Which admonitions allow custom titles, and which don’t? - What is the purpose of a dropdown admonition? - When might you use a `note` vs. an `admonition`? +- In which ways can you further customize `admonition` blocks? ``` From b4f919d50ad20e289bdabf2f0c175decfb8cbebd Mon Sep 17 00:00:00 2001 From: Katia Gatt Date: Sun, 13 Apr 2025 17:47:26 +0200 Subject: [PATCH 4/7] small update 012.md --- book/syntax_exercises/012.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/book/syntax_exercises/012.md b/book/syntax_exercises/012.md index 59b195d..2a11345 100644 --- a/book/syntax_exercises/012.md +++ b/book/syntax_exercises/012.md @@ -115,7 +115,7 @@ This content will be hidden until the reader clicks to reveal it. ``` ```` -11. The table below summarizes the classes that can be used together with the `admonition` and `dropdown`admonitions. Try customize admonitions yourself, using different classes from the table. +11. The table below summarizes the classes that can be used together with the `admonition` and `dropdown` blocks. Try customize admonitions yourself, using different classes from the table. | Class name | Effect | @@ -177,7 +177,7 @@ sphinx: . ``` -14. Once the installation is done, we can experiment with custom-coloured admonitions! Go ahead and look at the available [Sphinx Named Colours](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html#admonitions), and pick a desired colour. +14. Once the installation is done, we can experiment with custom-coloured admonitions! Go ahead and look at the available [CSS Named Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and pick a desired colour. 15. Once you have chosen a colour, coloured admonitions can be generated in two ways, depending on how you'd like to structure your content. The first method is by adding the name-colour via `:class:` to an existing `admonition` or `dropdown` type block, similar to what was done above. This can be done as follows: @@ -201,7 +201,7 @@ This is a green-styled custom admonition. ``` ```` -18. For the second method using named colour admonitions, a new class is also introduced: `show-bar`. This allows titleless admonitions, which forces printing of the title bar. Try this out using the code above with an omitted title, and this added class. +18. For the second method using named colour admonitions, a new class is also introduced for titleless admonitions: `show-bar`. This forces printing of the title bar. If a title is given, the title will be printed too and adding the class `show-bar` is redundant. Try this out using the code above with an omitted title, and this added class. 19. For both methods, you can also combine classes here, for example, `:class: darkblue dropdown` to make it collapsible and coloured. Test this out, building on the above examples. From d795f3db0fadc739c92a2193f7f667824d4fcc30 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Mon, 14 Apr 2025 09:18:50 +0200 Subject: [PATCH 5/7] Small changes Tom --- book/syntax_exercises/012.md | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/book/syntax_exercises/012.md b/book/syntax_exercises/012.md index 2a11345..b9a7d45 100644 --- a/book/syntax_exercises/012.md +++ b/book/syntax_exercises/012.md @@ -143,17 +143,9 @@ This content is both highlighted as important and collapsible. ## Custom colours for admonitions -13. It is also possible to use specific colours to customize your admonitions, using built-in Sphinx colour classes. To do so, it is necessary to follow the installation process outlined below: +13. It is also possible to use specific colours to customize your admonitions, using our extension ['Sphinx-Named-Colours'](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html#admonitions). This allow you to use default 'CSS' colours or your own custom colours. To do so, it is necessary to add the extension as shown below: -**Step A: Install the Package** - -Install the `sphinx-named-colors` package using `pip`: - -``` -pip install sphinx-named-colors -``` - -**Step B: Add to `requirements.txt`** +**Step A: Add to `requirements.txt`** Ensure that the package is included in your project's `requirements.txt` to track the dependency: @@ -161,11 +153,11 @@ Ensure that the package is included in your project's `requirements.txt` to trac sphinx-named-colors ``` -**Step C: Enable in `_config.yml`** +**Step B: Enable in `_config.yml`** In your `_config.yml` file, add the extension to the list of Sphinx extra extensions: -``` +```md sphinx: extra_extensions: . @@ -177,7 +169,7 @@ sphinx: . ``` -14. Once the installation is done, we can experiment with custom-coloured admonitions! Go ahead and look at the available [CSS Named Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and pick a desired colour. +14. Now we can experiment with custom-coloured admonitions! Go ahead and look at the available [CSS Named Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and pick a desired colour. 15. Once you have chosen a colour, coloured admonitions can be generated in two ways, depending on how you'd like to structure your content. The first method is by adding the name-colour via `:class:` to an existing `admonition` or `dropdown` type block, similar to what was done above. This can be done as follows: @@ -201,18 +193,15 @@ This is a green-styled custom admonition. ``` ```` -18. For the second method using named colour admonitions, a new class is also introduced for titleless admonitions: `show-bar`. This forces printing of the title bar. If a title is given, the title will be printed too and adding the class `show-bar` is redundant. Try this out using the code above with an omitted title, and this added class. +18. For more details, see the documentation of this extension in [our manual](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html). This also describes how to add your own custom colours! -19. For both methods, you can also combine classes here, for example, `:class: darkblue dropdown` to make it collapsible and coloured. Test this out, building on the above examples. +19. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. +20. Add a commit message. -20. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. +21. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). -21. Add a commit message. - -22. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). - -23. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. +22. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. ```{admonition} Check your understanding :class: note From 5dcd816588a6766885b1ee737eecbee5d64a6556 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Mon, 14 Apr 2025 09:23:04 +0200 Subject: [PATCH 6/7] Update 012.md --- book/syntax_exercises/012.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/book/syntax_exercises/012.md b/book/syntax_exercises/012.md index b9a7d45..bb0b7f3 100644 --- a/book/syntax_exercises/012.md +++ b/book/syntax_exercises/012.md @@ -7,7 +7,7 @@ Can you structure your content with different types of admonitions and understan :::::: ```{tip} -Admonitions help to guide readers' attention and make your book more accessible. Full documentation is available [here](https://myst-parser.readthedocs.io/en/latest/syntax/admonitions.html). +Admonitions help to guide readers' attention and make your book more accessible. Full documentation is available [here for the default MyST syntax in your book](https://myst-parser.readthedocs.io/en/latest/syntax/admonitions.html) and [here for the TeachBooks' extension which allows custom colours](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html#admonitions). ``` From df988b1a6d65672e4ed5f3a7ba9c31e8fc36af9f Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Mon, 14 Apr 2025 09:27:08 +0200 Subject: [PATCH 7/7] another small change --- book/syntax_exercises/012.md | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/book/syntax_exercises/012.md b/book/syntax_exercises/012.md index bb0b7f3..9e969c9 100644 --- a/book/syntax_exercises/012.md +++ b/book/syntax_exercises/012.md @@ -147,15 +147,21 @@ This content is both highlighted as important and collapsible. **Step A: Add to `requirements.txt`** -Ensure that the package is included in your project's `requirements.txt` to track the dependency: +Ensure that the package is included in your project's `requirements.txt` (in the root of your repository) to make it available: ``` +. +. +. sphinx-named-colors +. +. +. ``` **Step B: Enable in `_config.yml`** -In your `_config.yml` file, add the extension to the list of Sphinx extra extensions: +In your `_config.yml` file (in the `book/` subdirectory of your repository), add the extension to the list of Sphinx extra extensions so that it's included in the building of your book: ```md sphinx: @@ -174,34 +180,32 @@ sphinx: 15. Once you have chosen a colour, coloured admonitions can be generated in two ways, depending on how you'd like to structure your content. The first method is by adding the name-colour via `:class:` to an existing `admonition` or `dropdown` type block, similar to what was done above. This can be done as follows: ````md -```{admonition} Custom Colour Example +```{admonition} Custom Colour Example 1 :class: darkred This is a custom coloured admonition using `:class: darkred`. ``` ```` -16. When using the above method, a new class is introduced: `no-title`. This suppresses printing of the title bar, even if the title is given. Try this out by adding this class to the above code. - -17. The second method of adding coloured admonitions is by directly creating an admonition based on a colour. This method can be used if you'd rather not use the generic type and want a minimal syntax. In this case, the title is optional, and if omitted, the title bar will not appear. Try this out with the code below: +16. The second method of adding coloured admonitions is by directly creating an admonition based on a colour. This method can be used if you'd rather not use the generic type and want a minimal syntax. In this case, the title is optional, and if omitted, the title bar will not appear. Try this out with the code below: ````md -```{darkgreen} Optional Title +```{darkgreen} Optional Title with custom coluor example 2 This is a green-styled custom admonition. ``` ```` -18. For more details, see the documentation of this extension in [our manual](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html). This also describes how to add your own custom colours! +17. For more details, see the documentation of this extension in [our manual](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html). This also describes how to add your own custom colours! -19. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. +18. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button. -20. Add a commit message. +19. Add a commit message. -21. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). +20. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting). -22. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. +21. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page. ```{admonition} Check your understanding :class: note