หน่วยที่ 1 ความเข้าใจพื้นฐานเกี่ยวกับ Front-End

เรียนรู้พื้นฐานการพัฒนาเว็บไซต์

1.1 Front-End คืออะไร

Front-End คือ ส่วนของเว็บไซต์ที่ผู้ใช้มองเห็นและโต้ตอบได้ เช่น ข้อความ ปุ่ม รูปภาพ และเมนู

Front-End เปรียบเสมือน "หน้าบ้าน" ของเว็บไซต์

1.2 ตัวอย่าง HTML

ตัวอย่างโค้ด HTML:

<h1>สวัสดี</h1>
<p>ยินดีต้อนรับ</p>

ผลลัพธ์:

สวัสดี

ยินดีต้อนรับ

1.3 ตัวอย่าง CSS

<h1 style="color:red;">Hello CSS</h1>

ผลลัพธ์:

Hello CSS

1.4 ตัวอย่าง JavaScript

<button onclick="alert('สวัสดี')">คลิก</button>

ผลลัพธ์:

1.5 โครงสร้างเว็บไซต์

<!DOCTYPE html>
<html>
<head>
<title>เว็บไซต์</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>

Workshop

สร้างเว็บไซต์แรก

ให้สร้างไฟล์ index.html และใส่โค้ดนี้:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>

<h1>เว็บไซต์ของฉัน</h1>
<p>ฉันกำลังเรียน Front-End</p>

<button>คลิกฉัน</button>

</body>
</html>

ผลลัพธ์:

เว็บไซต์ของฉัน

ฉันกำลังเรียน Front-End

สรุป

ก่อนหน้า Workshop ถัดไป