본문으로 건너뛰기

How to Use CodeFriends - 1

How to Use CodeFriends

The CodeFriends web coding learning tool is designed to check step-by-step guidelines, write code, and see coding results in real time on one screen.

screen.jpg

You can adjust the height and width of each section with your mouse 🖱



1. Step-by-Step Guidelines

On the left side of the screen, you can learn basic coding knowledge for each lesson (Lesson) and check the step-by-step guidelines to create your own website.

The content you are reading now is the guideline for the Orientation lecture's Chapter 1, How to Use CodeFriends - 1.


2. Write Code

The code writing area in the middle of the screen is organized to separate the three essential elements of the web - HTML, CSS, JavaScript - into tabs (Tab), allowing you to write each separately.

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

  • HTML: The skeleton of a web page, responsible for the web's structure

  • CSS: The clothing of a web page, responsible for the web's design

  • JavaScript (JS): The brain of a web page, responsible for the web's operation

You can copy/paste the code from the guideline into the code writing area or type it yourself.

Copy/paste the following HTML, CSS, JS code into their respective tabs 🧑🏻‍💻


Paste into HTML tab
<body>
<h1>My 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('Enter your name.');
if (name && name.trim() !== '') {
greeting.textContent = 'Hello, ' + name.trim() + '!';
} else {
greeting.textContent = 'Please enter your name.';
}
});

When you paste the HTML, CSS, and JS code into their respective tabs, a simple website that takes user input and displays it on the webpage is completed.


3. Real-Time Result Checking

On the right side of the screen, you can check the results of the website that combines HTML, CSS, and JS code in real time.

Try changing First Example in the <h1>First Example</h1> you just pasted into the HTML tab to CodeFriends 👩🏻‍💻


This way, you can learn web basics and create actual websites while checking the coding results in real time.

Press the Complete button below and move to the next lesson 🚀