Skip to main content
Practice

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.


1. Learning Materials​

On the left side of the screen, you can study the basic coding knowledge for each lesson and follow the step-by-step learning materials to create your own website.

The content you are currently reading is the learning material for Chapter 1 of the Orientation class, How to Use CodeFriends - 1.


2. Writing Code​

The code writing area in the center of the screen is designed to allow you to write code for the three essential elements of the web: HTML, CSS, and JavaScript, each in its own tab.

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. 🧑🏻‍💻


Paste into HTML tab
<body>
  <h1>Name</h1>
  <button id="showButton">Enter Name</button>
  <p id="greeting"></p>
</body>
Paste into CSS tab
button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
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.';
  }
});

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}!.


3. Checking Real-Time Results​

On the right side of the screen, you can check 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. 👩🏻‍💻


By checking coding results in real-time like this, you can learn the basics of web coding and directly create a website that can be used in everyday life.

Complete the missions that review the learning materials below, and press the Complete button to move on to the next lesson! 🚀