Slides: https://nakorncode.com/slides/html-css

เว็บไซต์หลัก: https://nakorncode.com/

ไฟล์ Workshop บทสุดท้าย: https://github.com/nakorncode/worksho...

00:00:00 - บทนำคอร์สเรียน HTML & CSS

00:00:41 - รวมเว็บไซต์และแหล่งข้อมูลที่น่าสนใจ

00:06:16 - Visual Studio Code และ Extensions

00:10:50 - HTML: โครงสร้างภาพรวมของภาษา

00:17:55 - HTML: ทดลองใช้งานจริงบน VSCode 

00:20:39 - VSCode: คำแนะนำการใช้ Indent และ Format

00:23:56 - HTML: ส่วนของ Head และ Body

00:26:12 - HTML: ข้อแตกต่างการแสดงผลแบบ Inline และ Block

00:30:38 - HTML: การกำหนดไอคอนประจำเว็บ (Favicon)

00:32:36 - HTML: รูปแบบข้อความกับโครงสร้างบน HTML

00:43:54 - HTML: ลิงก์ของข้อความ (Anchor) และการทำหลายหน้าเพจ

00:55:06 - HTML: ลิงก์ภายในเอกสาร (Document Fragment)

00:57:45 - HTML: การแสดงสื่อ และ Embed จากภายนอก

01:03:42 - HTML: การกำหนดโครงสร้างของตาราง (Table)

01:09:35 - HTML: การกำหนดแบบฟอร์มพื้นฐาน

01:26:04 - CSS: โครงสร้างภาพรวมของภาษา

01:27:25 - CSS: การใช้งานบน HTML

01:30:24 - CSS: แนวทางการใช้ Selector 

01:47:03 - CSS: คะแนนของ Specificity

01:50:05 - CSS: แนวทางการใช้ Pseudo-classes และ Pseudo-elements

01:59:43 - CSS: ประโยชน์การใช้งาน Normalize

02:03:13 - CSS: กำหนดรูปแบบของข้อความ

02:10:00 - CSS: กำหนดรูปร่างเนื้อหาแบบ Box Model

02:39:09 - CSS: เทคนิคพิเศษเกี่ยวกับพื้นหลังและรูปภาพ

02:47:50 - CSS: Layout แบบ Flexbox

03:01:23 - CSS: Layout แบบ Grid

03:14:41 - CSS: Layout แบบ Column

03:17:07 - CSS: เทคนิคการใช้งาน Position

03:26:24 - CSS: ปรับเปลี่ยนเนื้อหาแบบ Transition และการเปลี่ยนรูปร่าง Transform

03:30:42 - CSS: การใช้งาน Animation

03:38:13 - CSS: วิธีการออกแบบเว็บ Responsive Design

03:47:00 - การใช้ Astro Framework พื้นฐาน

04:16:09 - Workshop: สร้างหน้าเว็บตามแบบ

05:50:38 - ขอบคุณสำหรับการเรียนด้วยกัน

เว็บไซต์นครโค้ดหลัก รวมคอร์สเรียนฟรีทั้งหมด: https://nakorncode.com/

ไฟล์ Workshop: https://github.com/nakorncode/workshop

ใช้งาน Astro ต้องติดตั้ง Node.js ก่อน: https://nodejs.org/en

การใช้งาน Astro: https://docs.astro.build/en/getting-s...

Tailwind VSCode Extensions: https://marketplace.visualstudio.com/...

Astro VSCode Extensions: https://marketplace.visualstudio.com/...

การใช้งาน Tailwind: https://tailwindcss.com/docs/installa...

สูตรโกงการใช้ Tailwind: https://nerdcave.com/tailwind-cheat-s...

daisyUI: https://daisyui.com/

Flowbite: https://flowbite.com/

0:00:00 - Why: ทำไมต้องใช้ Tailwind CSS?

0:05:48 - Install: ติดตั้งและใช้งาน Tailwind CSS

0:17:37 - Utility: การใช้งาน Class ต่างๆ

0:38:28 - Reusing Styles: การใช้รูปแบบเดิมที่ง่ายขึ้น

0:49:41 - Config: การใช้งาน tailwind.config

0:54:57 - Responsive Design: ออกแบบตามขนาดหน้าจอ

0:58:33 - States: ออกแบบตามสถานะของ HTML Elements

1:06:24 - Plugins: ส่วนเสริมการใช้ Tailwind CSS

1:11:37 - daisyUI: รูปแบบเว็บสำเร็จรูปบน Tailwind CSS

1:17:55 - Flowbite: ตัวอย่างรูปแบบเว็บที่ใช้ Tailwind CSS

1:20:44 - Workshop: สร้างหน้าเว็บตามแบบจากคอร์สเรียนก่อนหน้า 

Slides และตัวอย่างโค้ด: https://nakorncode.com/slides/javascript

Cheatsheet สรุปที่เรียนทั้งหมด: https://nakorncode.com/cheatsheets/

คอร์สเรียนอื่นๆ: https://nakorncode.com/courses/

00:00:00 - บทเริ่ม

00:00:59 - Resources: รวมแหล่งข้อมูลที่น่าสนใจ

00:03:31 - Introduction: บทนำเกี่ยวกับ JavaScript

00:17:19 - AI Assistant: ผู้ช่วยเขียนโค้ด AI

00:26:57 - Getting Started: เริ่มต้นการใช้งาน JavaScript

00:38:29 - Variables: ตัวแปรการเก็บข้อมูล

00:56:27 - Basic Interaction: การทำ Input/Output พื้นฐาน

00:58:30 - Data Types: ประเภทและการจัดการข้อมูล

01:04:31 - String: ข้อมูลประเภทข้อความ

01:15:07 - Number: ข้อมูลประเภทตัวเลข

01:33:28 - Boolean: ข้อมูลประเภทจริงและเท็จ

01:39:26 - Dynamic Types: ปัญหาของประเภทข้อมูลที่ปรับเปลี่ยนได้อิสระ

01:43:12 - Type Conversions: การแปลงประเภทของข้อมูล

02:01:58 - Arrays: การเก็บข้อมูลหลายมิติ

02:12:00 - Objects: การเก็บข้อมูลแบบ Key & Value

02:28:10 - Reference Type: ประเภทข้อมูลแบบ Reference

02:35:56 - Conditional: กำหนดเงื่อนไขการทำงาน

02:54:09 - Loops: การวนจำนวนรอบทำงานซ้ำ

03:11:46 - Functions: กำหนดชุดคำสั่ง

03:41:30 - Destructuring: การแยกประเภทข้อมูล

03:56:25 - Object Oriented Programming: พัฒนาโปรแกรมแบบ OOP

04:21:15 - Callback: การเรียกฟังก์ชั่นกลับ

04:35:06 - Error Handling: จัดการความผิดพลาดของโปรแกรม

04:54:22 - Prototype: ต่อยอดฟีเจอร์บน Object

04:59:15 - String Methods: การใช้งานข้อความ

05:18:08 - Number Methods: การใช้งานจำนวน

05:21:49 - Math Methods: การคำนวณคณิตศาสตร์

05:30:23 - Array Methods: การใช้งานอาเรย์

05:57:06 - Object Methods: การใช้งานอ็อบเจ็กต์

05:59:37 - JSON Methods: การใช้งานข้อมูล JSON

06:01:37 - Map: การใช้งานข้อมูล Map

06:04:23 - Set: การใช้งานข้อมูล Set

06:06:51 - Date & Time: การใช้งานวันที่และเวลา

06:13:29 - Promise & Async/Await: การทำงานแบบ Asynchronous

07:11:01 - DOM: จัดการข้อมูล Document Object Model

07:49:35 - Events: ตรวจจับเหตุการณ์บนหน้าเว็บ

08:41:30 - URL Object: รูปแบบข้อมูล URL

09:03:19 - Network Request: การส่งคําขอไปยังเซิร์ฟเวอร์

09:19:08 - Storing Data: การเก็บข้อมูลบน Web Browser

09:29:45 - Web API: การเรียกใช้งาน API เพิ่มเติม

10:01:40 - jQuery: JavaScript Framework อย่างง่าย

10:22:11 - บทส่งท้าย