lesson1Title

lesson2Title

webIntroOtChapter1Title

lesson3Title

lesson4Title

webIntroOtChapter2Title

# Guide to Using the CodeFriends Web Coding Practice Environment

The web coding class is designed so that you can check *step-by-step learning materials*, *write code*, and *instantly verify the code execution results* on a single screen.

You can write Python code and verify execution results in `real-time` with just a web browser, without the need for complex program installations.

<img
  src="https://assets.codefriends.net/docs/web/code-editor-en.png"
  alt="code-editor-en.png"
/>

<br />

> Each section of the three-split screen can have its width adjusted using a mouse or smartphone touch.

<br />

## Screen Layout

Each section of the screen is organized as follows.

<br />

### Left: Learning Materials

On the **left side of the screen**, you will find step-by-step learning materials that introduce key coding concepts and guide you in creating your own website.

The `Mission` at the end of the learning materials is a simple quiz to review what you've learned.

You need to complete the Mission to proceed to the next lesson.

<br />

### Center: Code Writing

The **center of the screen** features the `code editor`, where you can write code using the three essential web technologies: **HTML**, **CSS**, and **JavaScript**.

As a reference, HTML, CSS, and JavaScript play the following roles on the web:

- `HTML`: Defines the structure and content of a web page.

- `CSS`: Is responsible for decorating the web page to make it look good.

- `JavaScript (JS)`: Acts like the brain, controlling the behavior of the web page.

In the code writing area, you can either copy/paste the code from the learning materials or type it directly.

Copy and paste the HTML, CSS, and JS codes below into their respective tabs and execute them. 🧑🏻‍💻

<br />

```html title="Paste into the HTML tab"
<body>
  <h1>Name</h1>
  <button id="showButton">Enter Name</button>
  <p id="greeting"></p>
</body>
```

```css title="Paste into the CSS tab"
button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
```

```javascript title="Paste into the JavaScript tab"
const showButton = document.getElementById('showButton');
const greeting = document.getElementById('greeting');

showButton.addEventListener('click', function () {
  const name = prompt('Please enter your name.');
  if (name && name.trim() !== '') {
    greeting.textContent = 'Hello, ' + name.trim() + '!';
  } else {
    greeting.textContent = 'Please enter your name.';
  }
});
```

<br />

Once you paste the code into each tab, a simple website that accepts user input and displays the result on the screen is complete.

<br />

## Right: Real-time Result Verification

On the **right side of the screen**, you can instantly see the results of the combined HTML, CSS, and JS codes in real-time.

For example, change `Name` to `Hello` in the HTML tab where `<h1>Name</h1>` is written. 👩🏻‍💻

<br />

CodeFriends is structured to help you easily learn the basics of web development by providing real-time feedback on your coding results.

After completing the `Mission` to review the learning materials below, click the `Complete` button to move on to the next lesson! 🚀

In the CodeFriends web practice environment, you can adjust the height and width of each section by dragging with the mouse, which makes it convenient to view learning materials, write code, and check results.

### In the CodeFriends web practice environment, the height and width of each section can be adjusted by mouse dragging.