Installation and Use of Web Development Tools

12002

1. Introduction to This Lesson

In the introductory course on application development, you will use the following tools:

Google Chrome: As a mainstream browser, Google Chrome offers powerful developer tools that help you debug web pages, view page structure and styles, and support the latest web standards.
Visual Studio Code (VS Code): VS Code is a powerful code editor that supports multiple languages such as HTML, CSS, and JavaScript, which you can use to create web files.

These tools can be installed on Windows or Mac computers. In the following sections, we will use Windows as an example to teach you how to install these tools. If you already know how to install or use these tools, you can skip the installation part.

Additionally, in this lesson, you will also learn how to read tutorial documents to quickly grasp the basic framework of programming knowledge.

2. Installing Google Chrome

Method 1: Download and Install from the Google Official Website

Click on the Google official download link
In the section "Download and Install Google Chrome," find the "Computer" tab under "How to Install Chrome," click on "Windows," and expand the operation instructions.
Follow the operation instructions to install.

Method 2: Download and Install via Tencent Computer Manager
You need to first download and install Tencent Computer Manager:

Click on the Tencent Computer Manager download link to open the official website. This page will automatically detect whether your computer is a Windows system, and you can directly click "Download Now" to download the installation package.
After the download is complete, find the installation package in the "Downloads" folder on your computer, double-click the package to start the installation.
Follow the prompts and select the default options to complete the installation.
After installation, you will see the "Tencent Computer Manager" icon on your desktop; double-click it to open Tencent Computer Manager.

Next, you need to use the "Software Management" feature of Tencent Computer Manager to search for and install Google Chrome:

In the left sidebar of the opened Tencent Computer Manager, select "Software Management"
Choose "Treasure House," and in the search box, search for "Google Chrome." You will see the result "Google Chrome Stable," click the "Install" button on the right side of this result to start the installation.
Follow the prompts and select the default options to complete the installation.
After installation, you will see the "Google Chrome" icon on your desktop; double-click it to open Google Chrome.

In the upcoming lessons, we will use Google Chrome to view the web pages we create and learn how to use the built-in developer tools of the browser to inspect the content of web pages and view the output results of programs.

3. Installing VS Code

Method 1: Download and Install from the VS Code Official Website

Click this link to open the download page of the VS Code official website
Click the download button for the Windows system to start downloading the installation package.
After the download is complete, find the installation package in the "Downloads" folder on your computer, double-click the package to start the installation.
Follow the prompts and select the default options to complete the installation.

Method 2: Download and Install via Tencent Computer Manager
You can use the "Software Management" feature of Tencent Computer Manager to search for and install VS Code:

In the left sidebar of the opened Tencent Computer Manager, select "Software Management"
Choose "Treasure House," and in the search box, search for "VS Code." You will see the result "Visual Studio Code," click the "Install" button on the right side of this result to start the installation.
Follow the prompts and select the default options to complete the installation.

After installation, you will see the "Visual Studio Code" icon on your desktop; double-click it to open VS Code.

4. Configuring VS Code and Creating Text Files

Configuring Chinese Display
Open VS Code, and you will see that the current page is in English. If you are not familiar with English, you can set the language display of VS Code.

For specific methods, you can refer to this article

Creating a Text File
A text file is the simplest format for storing text information, and its file name ends with .txt. You can use VS Code to create a text file:

In the menu bar at the top of the VS Code window, select "File" and then "New Text File" to open the editing window.
In the editing window, type "Hello World." Then save the file. Enter the file name as: "First Text File.txt." The first text file is now created.

Methods for Saving Files

Method 1: In the menu bar, select "File" and then "Save," then choose a folder in the pop-up window and enter the file name to save.
Method 2: Directly press the shortcut key Ctrl+S to save.

Methods for Managing Files

Manage course files according to their categories.
Method: Create a large folder specifically for storing course files, for example, create a folder named "Application Development Course 002," and then create subfolders within it, such as "002-01 Lesson," to store the files used in each lesson, making it easier to find the corresponding files for the course.

5. Browsing the Runoob Tutorial Website

Runoob is a website that provides basic technical tutorials for programming, with very comprehensive content. To learn programming, you must learn to read documentation. In this course, you will learn how to read tutorials and documents on websites like Runoob to help you quickly establish a framework of programming knowledge and expand your understanding of programming concepts, enriching your programming skills.

Runoob website

When browsing Runoob, pay attention to the following content:

What programming technologies does Runoob provide tutorials for?
On the homepage of Runoob, select "[Learn HTML]," enter the HTML tutorial, and see what main content is available?
What is the definition of HTML? What are its main functions?
What content is available in the left sidebar of the page?

When reading documentation, the most important thing is to establish a framework first. The above prompts are to help you understand the main framework of a website's documentation. This method applies not only to learning HTML but also to learning any other programming technology; you need to understand the main knowledge framework in this way. Once you establish this knowledge framework, learning the details will become much clearer.

## 1. Introduction to This Lesson

In the introductory course on application development, you will use the following tools:

- Google Chrome: As a mainstream browser, Google Chrome offers powerful developer tools that help you debug web pages, view page structure and styles, and support the latest web standards.  
- Visual Studio Code (VS Code): VS Code is a powerful code editor that supports multiple languages such as HTML, CSS, and JavaScript, which you can use to create web files.

These tools can be installed on Windows or Mac computers. In the following sections, we will use Windows as an example to teach you how to install these tools. If you already know how to install or use these tools, you can skip the installation part.

Additionally, in this lesson, you will also learn how to read tutorial documents to quickly grasp the basic framework of programming knowledge.

## 2. Installing Google Chrome

**Method 1: Download and Install from the Google Official Website**  
- Click on the [Google official download link](https://support.google.com/chrome/answer/95346)  
- In the section "Download and Install Google Chrome," find the "Computer" tab under "How to Install Chrome," click on "Windows," and expand the operation instructions.  
- Follow the operation instructions to install.

**Method 2: Download and Install via Tencent Computer Manager**  
You need to first download and install Tencent Computer Manager:  
- Click on the [Tencent Computer Manager download link](https://guanjia.qq.com/) to open the official website. This page will automatically detect whether your computer is a Windows system, and you can directly click "Download Now" to download the installation package.  
- After the download is complete, find the installation package in the "Downloads" folder on your computer, double-click the package to start the installation.  
- Follow the prompts and select the default options to complete the installation.  
- After installation, you will see the "Tencent Computer Manager" icon on your desktop; double-click it to open Tencent Computer Manager.

Next, you need to use the "Software Management" feature of Tencent Computer Manager to search for and install Google Chrome:  
- In the left sidebar of the opened Tencent Computer Manager, select "Software Management"  
- Choose "Treasure House," and in the search box, search for "Google Chrome." You will see the result "Google Chrome Stable," click the "Install" button on the right side of this result to start the installation.  
- Follow the prompts and select the default options to complete the installation.  
- After installation, you will see the "Google Chrome" icon on your desktop; double-click it to open Google Chrome.

In the upcoming lessons, we will use Google Chrome to view the web pages we create and learn how to use the built-in developer tools of the browser to inspect the content of web pages and view the output results of programs.

## 3. Installing VS Code

**Method 1: Download and Install from the VS Code Official Website**  
- Click this link to open the [download page of the VS Code official website](https://code.visualstudio.com/Download)  
- Click the download button for the Windows system to start downloading the installation package.  
- After the download is complete, find the installation package in the "Downloads" folder on your computer, double-click the package to start the installation.  
- Follow the prompts and select the default options to complete the installation.

**Method 2: Download and Install via Tencent Computer Manager**  
You can use the "Software Management" feature of Tencent Computer Manager to search for and install VS Code:  
- In the left sidebar of the opened Tencent Computer Manager, select "Software Management"  
- Choose "Treasure House," and in the search box, search for "VS Code." You will see the result "Visual Studio Code," click the "Install" button on the right side of this result to start the installation.  
- Follow the prompts and select the default options to complete the installation.

After installation, you will see the "Visual Studio Code" icon on your desktop; double-click it to open VS Code.

## 4. Configuring VS Code and Creating Text Files

**Configuring Chinese Display**  
Open VS Code, and you will see that the current page is in English. If you are not familiar with English, you can set the language display of VS Code.

For specific methods, you can refer to this [article](https://blog.csdn.net/danshiming/article/details/132110419#comments_31186672)

**Creating a Text File**  
A text file is the simplest format for storing text information, and its file name ends with `.txt`. You can use VS Code to create a text file:  
- In the menu bar at the top of the VS Code window, select "File" and then "New Text File" to open the editing window.  
- In the editing window, type "Hello World." Then save the file. Enter the file name as: "First Text File.txt." The first text file is now created.

**Methods for Saving Files**  
- Method 1: In the menu bar, select "File" and then "Save," then choose a folder in the pop-up window and enter the file name to save.  
- Method 2: Directly press the shortcut key `Ctrl+S` to save.

**Methods for Managing Files**  
- Manage course files according to their categories.  
- Method: Create a large folder specifically for storing course files, for example, create a folder named "Application Development Course 002," and then create subfolders within it, such as "002-01 Lesson," to store the files used in each lesson, making it easier to find the corresponding files for the course.

## 5. Browsing the Runoob Tutorial Website  
Runoob is a website that provides basic technical tutorials for programming, with very comprehensive content. To learn programming, you must learn to read documentation. In this course, you will learn how to read tutorials and documents on websites like Runoob to help you quickly establish a framework of programming knowledge and expand your understanding of programming concepts, enriching your programming skills.

[Runoob website](https://www.runoob.com/)

When browsing Runoob, pay attention to the following content:  
- What programming technologies does Runoob provide tutorials for?  
- On the homepage of Runoob, select "[Learn HTML]," enter the HTML tutorial, and see what main content is available?  
- What is the definition of HTML? What are its main functions?  
- What content is available in the left sidebar of the page?

When reading documentation, the most important thing is to establish a framework first. The above prompts are to help you understand the main framework of a website's documentation. This method applies not only to learning HTML but also to learning any other programming technology; you need to understand the main knowledge framework in this way. Once you establish this knowledge framework, learning the details will become much clearer.