docs: Update content and screenshots in development topics (#2411)

- Add new type of screenshots
- Delete unnecessary images
- Rewrite sections that accompany the updated screenshots

Author: szaganek

sources/platform/actors/development/quick-start/build_with_ai.md

@@ -133,9 +133,9 @@ claude mcp add apify "https://mcp.apify.com/?tools=docs" -t http
 
 ## Provide context to assistants
 
-Every page in the Apify documentation has a **Copy for LLM** button. You can use it to add additional context to your AI assistant, or even open the page in ChatGPT, Claude, or Perplexity and ask additional questions.
+Every page in the Apify documentation has a **Copy for LLM** button. Use it to add more context to your AI assistant, or even open the page in ChatGPT, Claude, or Perplexity and ask additional questions.
 
-<img src={copyForAI} alt="Copy for LLM" width="250" />
+![Page from the Apify documentation with the Copy for LLM button highlighted](./images/copy-for-llm-button.svg)
 
 ## Use `/llms.txt` files
 

sources/platform/actors/development/quick-start/images/actor-build.png

@@ -8,35 +8,31 @@ slug: /actors/development/quick-start/web-ide
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-## What you'll learn
 
-This guide walks you through the full lifecycle of an Actor using the web IDE in Apify Console. You'll create an Actor from a code template, build it, configure its input, and run it in the cloud.
+This guide walks you through the full lifecycle of an Actor using the web IDE in Apify Console: create an Actor from a code template, build it, configure its input, and run it in the cloud.
 
-### Prerequisites
+## Prerequisites
 
-- An Apify account. [Sign up for a free account](https://console.apify.com/sign-up) on the Apify website.
+To complete this tutorial, you need an Apify account. If you don't have it yet, [sign up for free](https://console.apify.com/sign-up).
 
-### Step 1: Create your Actor
+## Step 1: Create your Actor
 
-Log in to [Apify Console](https://console.apify.com), navigate to [**My Actors**](https://console.apify.com/actors/development/my-actors), then click the **Develop new** button. You can also click the **Create** button on the Dashboard and select **Create Actor**.
+To create an Actor from a code template:
 
-![Create Actor](./images/create-actor.png)
+1. Log in to [Apify Console](https://console.apify.com).
+1. In the left-side panel, go to **Development** > **My Actors**.
+1. Click **Develop new**.
+1. Under **Select a code template**, choose one of the available options. For this tutorial, let's use **Quick start: Crawlee + Cheerio**.
 
-You'll see options to link a Git repository, select a code template, or push code with the Apify CLI.
+:::tip Explore Actor templates
 
-Under **Select a code template**, you'll find quick-start templates for TypeScript, Python, and JavaScript. Click **Browse all templates** to see the full list. Choose the template that best suits your needs. For the following demo, we'll proceed with a **Crawlee + Cheerio** template.
-
-:::info Explore Actor templates
-
-Browse the [full list of templates](https://apify.com/templates) to find the best fit for your Actor.
+To find a template that best suits your needs, browse the [full list of templates](https://apify.com/templates).
 
 :::
 
-![Templates](./images/actor-templates.png)
-
-After choosing the template, your Actor will be automatically named and you'll be redirected to its page.
+Once you choose the template, your Actor is automatically named and you're redirected to its page.
 
-### Step 2: Explore the Actor
+## Step 2: Explore the Actor
 
 The provided boilerplate code utilizes the [Apify SDK](https://docs.apify.com/sdk/js/) combined with [Crawlee](https://crawlee.dev/), Apify's popular open-source Node.js web scraping library.
 
@@ -48,44 +44,35 @@ By default, the code crawls the [apify.com](https://apify.com) website, but you
 
 :::
 
-### Step 3: Build the Actor
-
-To run your Actor, build it first. Click the **Build** button below the source code.
-
-![Actor source code](./images/actor-source-code.png)
-
-Once the build starts, the UI transitions to the **Last build** tab, showing build progress and Docker build logs.
+## Step 3: Build the Actor
 
-![Actor build](./images/actor-build.png)
-
-:::note Actor creation flow
-
-The UI includes four tabs:
-
-- **Code**
-- **Last build**
-- **Input**
-- **Last run**
-
-This represents the Actor creation flow, where you first build the Actor from the source code. Once the build is successful, you can provide input parameters and initiate an Actor run.
-
-:::
+The next step it to build the Actor:
 
-### Step 4: Run the Actor
+1. Go to **Source** tab > **Code**.
+1. Click **Build**.
 
-Once the Actor is built, you can look at its input, which consists of one field - **Start URL**, the URL where the crawling starts. Below the input, you can adjust the **Run options**:
+Once the build starts, you're redirected to the **Last build** tab. Here you can check the build progress and view Docker build logs.
 
-- **Build**
-- **Timeout**
-- **Memory limit**
+![Source code of an Actor in the web IDE](./images/build-actor-in-web-ide.svg)
 
-![Actor input](./images/actor-input.png)
+## Step 4: Run the Actor
 
-To initiate an Actor run, click the **Start** button at the bottom of the page. Once the run is created, you can monitor its progress and view the log in real-time. The **Output** tab will display the results of the Actor's execution, which will be populated as the run progresses. You can abort the run at any time using the **Abort** button.
+Finally, it's time to run the Actor:
+<!-- vale off -->
+1. Go to **Source** tab > **Input**.
+1. Set the **Start URL** to the URL you want to crawl or use the default value.
+1. _(Optional)_ To customize the run, expand the **Run options** section. You can adjust the following options:
+   - **Build** – select the build version to run.
+   - **Timeout** – set the timeout for the run in seconds.
+   - **Memory limit** – allocate the memory for the run. For details, see [Usage and resources](/platform/actors/running/usage-and-resources).
+   - **Maximum cost per run**.
+1. Click **Start**.
+<!-- vale on -->
+Once the run starts, you can monitor its progress and view the logs in real-time. To view the results of the Actor's execution, go to the **Output** tab.
 
-![Actor run](./images/actor-run.png)
+To stop the run, click **Abort**.
 
-### Step 5: Pull the Actor
+## Step 5: Pull the Actor
 
 To continue development locally, pull the Actor's source code to your machine.
 
@@ -139,7 +126,7 @@ To pull your Actor:
 
 You can find both by clicking on the Actor title at the top of the page, which will open a new window containing the Actor's unique name and ID.
 
-### Step 6: It's time to iterate!
+## Step 6: It's time to iterate!
 
 After pulling the Actor's source code to your local machine, you can modify and customize it to match your specific requirements. Leverage your preferred code editor or development environment to make the necessary changes and enhancements.