Challenge Day 1: แก้เว็บบนเครื่องของคุณ

At a glance

Getting started

1. ดาวน์โหลด starter project

   Download my-first-portfolio.zipindex.html · style.css · script.js · 2 KB

2. แตกไฟล์และเปิดใน IDE

   แตก zip แล้วเปิดโฟลเดอร์ my-first-portfolio ด้วย File → Open Folder หรือ code .

3. เปิดด้วย Live Server

   คลิกขวาที่ index.html → Open with Live Server จัดหน้าจอให้เห็น IDE กับเบราว์เซอร์คู่กัน

4. ทำ TODO 1–3

   เปิด index.html ค้นหาคำว่า TODO (Ctrl+F) แล้วใส่รูป ชื่อ และ bio ของคุณ

5. แต่งต่อ

   เปลี่ยนสีใน style.css และลองปุ่ม Follow ใน script.js

Specification

หน้าเว็บของคุณต้องมี

• รูปและชื่อของคุณ แทนของตัวอย่าง
• bio อย่างน้อย 2 ประโยค
• section โปรเจกต์หรือกิจกรรม อย่างน้อย 1 รายการ
• สีหลักใหม่ใน style.css
• ปุ่ม Follow ใน script.js ทำงานได้
• เปิดบนจอมือถือแล้วไม่ล้น (ลองใน DevTools กด Ctrl+Shift+M)

ตัวอย่างที่ทำเสร็จแล้ว

portfolio ของผู้สอนที่ทำจาก starter เดียวกัน ใช้แค่ HTML, CSS และ JavaScript ดูเป็นไอเดียได้ แต่ทำของคุณให้เป็นแบบของคุณเอง

สิ่งที่ควรสังเกต

• layout 2 คอลัมน์ด้วย Flexbox (.container) แล้วเรียงเป็นแนวตั้งบนมือถือด้วย @media
• ประสบการณ์แยกเป็นกลุ่ม (Tech, Ventures, Education) และเรียงจากใหม่ไปเก่า คนอ่านเห็นงานล่าสุดก่อน
• การ์ดโปรเจกต์ใช้ CSS Grid 2 คอลัมน์ มีรูป คำอธิบาย และปุ่มลิงก์
• มี comment ภาษาไทยในโค้ดอธิบายว่าทำไมจัดแบบนี้ เปิดดูใน IDE ได้

Hints

• รูปให้วางไว้ในโฟลเดอร์เดียวกับ index.html แล้วเขียน <img src="me.jpg"> ชื่อไฟล์ต้องตรงทุกตัวอักษร
• แก้แล้วไม่เปลี่ยน? เช็กว่ากดเซฟแล้ว (Ctrl+S) และเปิดผ่าน Live Server ไม่ใช่ดับเบิลคลิกไฟล์
• อยากรู้ว่า element ไหนใช้ CSS อะไร: คลิกขวาที่หน้าเว็บ → Inspect
• JavaScript ไม่ทำงาน: เปิด DevTools → Console ดู error สีแดง

Going further

• เพิ่ม section ใหม่ เช่น Skills หรือ Contact
• ใช้ Flexbox จัดการ์ดโปรเจกต์ให้เรียงกันเป็นแถว
• ทำปุ่มสลับ Dark mode ด้วย JavaScript

Next steps

• Git และ Node.js: เตรียมพร้อม Day 2
• Challenge Day 2: ขึ้น GitHub และ deploy