lesson1Title

lesson2Title

webIntroOtChapter1Title

lesson3Title

lesson4Title

webIntroOtChapter2Title

# How to Use CodeFriends

The CodeFriends web coding classroom is designed so that you can view `learning materials`, `write code`, and check the `coding results in real-time` all on one screen.

The layout of the classroom screen may vary depending on the type of lesson, but in most cases, based on a PC environment, you will view the learning materials on the `left side` of the screen, write your code in the `center`, and check real-time coding results on the `right side`.

> *Note*: Each section of the screen can be freely adjusted in height and width by dragging with the mouse.

<br />

## 1. 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 content you are currently reading is the learning material for `Chapter 1` of the `Introduction` class, `How to Use CodeFriends - 1`.

<br />

## 2. Writing Code

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 HTML tab"
<body>
  <h1>Name</h1>
  <button id="showButton">Enter Name</button>
  <p id="greeting"></p>
</body>
```

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

```javascript title="Paste into 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 a name.';
  }
});
```

<br />

When you paste the code into each tab, you will have created a simple website that takes user input and displays the result on the screen.

Clicking the `Enter Name` button in the coding results screen will prompt a popup window to appear, asking for your name.

Enter your name and press OK, and the screen will display `Hello, {name}!`.

<br />

## 3. Checking Real-Time Results

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

By experimenting like this, you’ll quickly grasp web coding fundamentals and create functional webpages that can be used in real life.

Complete the `missions` that review the learning materials below, and press 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 mouse dragging. This allows you to conveniently view learning materials, write code, and check the results.

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