เริ่มต้น HTML/CSS สำหรับเว็บ responsive
เว็บพื้นฐาน
24 พ.ย. 2567
เรียนรู้โครงสร้างหน้าเว็บ เซเลกเตอร์ ความเฉพาะเจาะจง และการจัดวางด้วย Flexbox รวมถึง Grid เบื้องต้น ทดลองทำเมนูมือถือและการจัดวางการ์ดให้ปรับตามขนาดหน้าจอ
รายละเอียด: เริ่มจากโครงสร้าง HTML แยกส่วนหัว เนื้อหา และส่วนท้าย จากนั้นใช้ CSS custom properties เก็บโทนสี ใช้ media query ปรับคอลัมน์จากหลายคอลัมน์บนเดสก์ท็อปให้เรียงเดี่ยวบนมือถือ ฝึกใช้ Flexbox สำหรับแถบนำทางและ Grid สำหรับตารางผลงาน
Cloudflare Pages กับฟังก์ชันเซิร์ฟเวอร์
คลาวด์
25 พ.ย. 2567
ทดสอบการ deploy เว็บสแตติกและเรียกใช้ Pages Functions ร่วมกับ Cloudflare KV สำหรับข้อมูลส่วนตัว เรียนรู้การตั้งค่า wrangler.toml และการจัดการรหัสผ่านด้วย Pages Secrets
รายละเอียด: ใช้ wrangler pages deploy สำหรับเผยแพร่เว็บ สร้างฟังก์ชันภายในโฟลเดอร์ functions/api เพื่อให้เรียกใช้ผ่าน /api/ personnelle ตั้งค่า KV Namespace ใน wrangler.toml และเก็บรหัสผ่านไว้ใน Pages Secrets เพื่อไม่ให้เผยแพร่ลงในโค้ดฝั่งเบราว์เซอร์
ออกแบบโทนสีและเงาให้ดูเป็นมืออาชีพ
ออกแบบระบบ
26 พ.ย. 2567
ศึกษาการใช้ custom properties ความคมชัดของสี และการวางเงาแบบละมุนบนอินเทอร์เฟซมือถือ รวมถึงการเลือกฟอนต์ภาษาไทยให้อ่านง่ายบนหน้าจอทุกขนาด
รายละเอียด: กำหนดสีหลัก สีรอง สีพื้นผิว และสีขอบเป็นตัวแปร CSS เพื่อเปลี่ยนธีมได้ครั้งเดียว ใช้ box-shadow หลายชั้นเพื่อสร้างความลึกโดยไม่ทำให้หน้าเว็บดูรก ทดสอบอัตราความคมชัดกับพื้นหลังสีครีมและสีขาว
จัดการฟอร์มและข้อมูลฝั่ง client
เครื่องมือ
27 พ.ย. 2567
ฝึกใช้ required, pattern, การตรวจสอบก่อนส่งฟอร์ม และการแสดงข้อความข้อผิดพลาดอย่างเป็นมิตร รวมถึงการเก็บสถานะชั่วคราวใน sessionStorage
รายละเอียด: ใช้ HTML validation ร่วมกับ JavaScript เพื่ออธิบายข้อผิดพลาดเป็นภาษาไทย เก็บสถานะการล็อกหน้าจอใน sessionStorage เพื่อไม่ให้ผู้ใช้ต้องกรอกรหัสซ้ำเมื่อรีเฟรชหน้า แต่ข้อมูลสำคัญยังคงต้องตรวจสอบฝั่งเซิร์ฟเวอร์อีกครั้ง