lesson1Title

lesson2Title

webIntroOtChapter1Title

lesson3Title

lesson4Title

webIntroOtChapter2Title

<span>Paste your HTML, CSS, JS code here</span>

setInterval(() => {
    const span = document.querySelector('span');
    span.style.color = span.style.color === 'blue' ? 'green' : 'blue';
}, 1000);

# How to Use CodeFriends

The CodeFriends online coding classroom is designed to allow you to view `learning materials`, `write code`, and check `real-time coding results` all on one screen.

The classroom's layout may differ depending on the course type, but generally, in most courses on a desktop environment, you can view learning materials on the `left`, write code in the `center`, and see real-time coding results on the `right`.

> *Note*: Each section's height and width can be freely adjusted by dragging with your mouse.

<br />

## 1. Learning Materials

On the **left of the screen**, you can learn basic coding knowledge for each Lesson and access step-by-step learning materials to create your own website.

You are currently reading the learning materials for the `Orientation` class, `Chapter 1`, `How to Use CodeFriends - 1` lesson.

<br />

## 2. Code Writing

The `Code Writing` area located in the **center of the screen** is designed to let you write code for the web's three essential elements: `HTML`, `CSS`, and `JavaScript`, each separated by tabs.

For reference, HTML, CSS, and JavaScript function on the web as follows:

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

- `CSS`: Is responsible for styling the web page.

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

In the code editor, you can copy/paste code from the learning materials or type the code manually.

Try copying and pasting the HTML, CSS, and JS code below into their respective tabs and execute it. 🧑🏻‍💻

<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 JS 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 />

Pasting each code into the respective tab completes a simple website that accepts user input and displays results on the screen.

Clicking the `Enter Name` button on the coding results screen opens a popup prompting for name entry.

After inputting a name and clicking confirm, `Hello, {name}!` is displayed on the screen.

<br />

## 3. Real-time Result Checking

On the **right of the screen**, you can see the results of the combined HTML, CSS, and JS you’ve written, as a real-time website.

For instance, try changing `Name` in the HTML tab's `<h1>Name</h1>` to `Hello`. 👩🏻‍💻

<br />

By verifying your coding results in real time like this, you can learn the basics of web coding and create a practical website yourself.

Complete the `Mission` to review the learning material below and press the `Finish` button to proceed 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, making it convenient to view learning materials, write code, and check results.

### In the CodeFriends web practice environment, you can adjust the height and width of each section by dragging with the mouse.