ข้อมูลบทเรียน

เนื้อหา : 8 บท

เรียนรู้ & Workshop : 6 ชั่วโมง

Assignment :

3 ชั่วโมง (1 แบบฝึก)

ระดับ : พื้นฐาน

ดูทบทวนย้อนหลัง : 2 ปี

ปรึกษาการเรียน : ชุมชน The Ladder (Discord)

รายละเอียดบทเรียน

พื้นฐานสำคัญของการตกแต่งเว็บไซต์ให้น่าดึงดูด ด้วย CSS

ทำไมถึงควรเรียน Web Foundation : CSS กับเรา

การสร้างเว็บไชต์ให้น่าดึงดูด ประกอบด้วยเรื่อง สี ขนาด รูปร่าง และตำแหน่งขององค์ประกอบต่างๆ บนหน้าเว็บ คุณสามารถเรียนรู้การตกแต่งเว็บไซต์ด้วย CSS ได้ในบทเรียนนี้ ใช้งาน นอกจากนี้ยังเป็นพื้นฐานสำคัญของการพัฒนาเว็บไซต์อีกด้วย โดยเราจะให้คุณเรียนรู้ทำความเข้าใจควบคู่ไปกับการฝึกผ่าน Workshop

Web Foundation : CSS เหมาะกับใคร

ผู้ที่ต้องการปูพื้นฐานการเป็น Front-End Developer
ผู้ที่ต้องการเริ่มต้นเรียนรู้พื้นฐานการสร้างเว็บด้วย CSS
นักศึกษา ครู อาจารย์ ที่ต้องการความรู้พื้นฐาน CSS
คนทั่วไปที่ต้องการเพิ่มความรู้เรื่อง CSS

สิ่งที่คุณจะได้จาก Unit นี้

สามารถสร้างและตกแต่งหน้าเว็บจาก CSS ได้ด้วยตนเอง
เข้าใจพิ้นฐานการสร้างและตกแต่งเว็บด้วย CSS
ฝึกฝนการการประเมิน วางแผน และได้ลงมือทำไปพร้อมกับบทเรียน
Workshop งานจริงจากบริษัทระดับ Enterprise

ที่ปรึกษาการเรียน

สามารถเข้า Discord เพื่อสอบถามแลกเปลี่ยนความรู้ ให้คุณได้เรียนรู้และสอบถามข้อสงสัยเพิ่มเติม
กับ Developer ตัวจริง พร้อมคำปรึกษาด้านการเรียน และการทำงาน

ผู้สอน

ประวัติและผลงาน
- - Instructor บริษัท Code-D 789 มากกว่า 5 ปี
    ออกแบบพัฒนา Software Architecture ธุรกิจการเงิน ธนาคาร โทรคมนาคม มากกว่า 20 ปี
    – Mobile banking app, ธ.กรุงศรี
    – ระบบตู้บริการอัตโนมัติ, AIS
    – Real Time Trading App, SET
    – ระบบรายงานผลเลือกตั้ง, Nation
    – ออกแบบพัฒนาเว็บไซต์, Amway
  - จบวิศวกรรมคอมพิวเตอร์ จุฬาลงกรณ์ มหาวิทยาลัย เกียรตินิยมอันดับ 1

เนื้อหาคอร์ส

U2.1 ทำความเข้าใจ CSS

11 PART

28:28 นาที
- CSS และ CSS3 คืออะไร
  
  1:52 นาที
- การใช้ CSS ร่วมกับ HTML
  
  5:42 นาที
- ส่วนประกอบของ CSS
  
  0:27 นาที
- CSS Selector
  
  0:07 นาที
- Selector เบื้องต้น
  
  1:52 นาที
- Class
  
  1:07 นาที
- Grouping
  
  0:49 นาที
- กรณีหลายเงื่อนไข
  
  2:28 นาที
- Combinators - ระบุความสัมพันธ์
  
  7:55 นาที
- Pseudo-Class
  
  3:39 นาที
- Pseudo-Element
  
  2:30 นาที
U2.2 CSS Properties

7 PART

22:48 นาที
- Introduction
  
  1:42 นาที
- Text Properties
  
  1:21 นาที
- Color
  
  6:27 นาที
- Font
  
  5:02 นาที
- Decoration / Transformation
  
  2:18 นาที
- Alignment / Wrap / Overflow
  
  4:15 นาที
- Spacing
  
  1:43 นาที
U2.3 CSS Layout

10 PART

28:58 นาที
- Box Properties
  
  1:52 นาที
- Background
  
  07:02 นาที
- Border
  
  4:48 นาที
- Shadow
  
  0:27 นาที
- Size
  
  2:43 นาที
- Margin / Padding
  
  4:27 นาที
- Positioning
  
  1:34 นาที
- Float
  
  3:03 นาที
- Overflow
  
  1:16 นาที
- Table Properties
  
  1:46 นาที
U2.4 Workshop ปรับหน้าเว็บโดยใช้ CSS

1 PART

26:14 นาที
- Workshop : ปรับ HTML+CSS สำหรับหน้าเว็บแสดงข้อมูลลูกค้า
  
  26:14 นาที
U2.5 การใช้ Bootstrap

7 PART

23:21 นาที
- ทำไมถึงใช้ Bootstrap
  
  2:00 นาที
- Bootstrap Container
  
  1:29 นาที
- Bootstrap Breakpoints
  
  2:36 นาที
- Bootstrap Grid System
  
  6:28 นาที
- Bootstrap Theme Color
  
  3:57 นาที
- Bootstrap Form & Button
  
  2:20 นาที
- Bootstrap Spacing
  
  4:31 นาที
U2.6 Workshop ปรับหน้าเว็บโดยใช้ Bootstrap Part 1

3 PART

19:31 นาที
- อธิบาย Workshop : ปรับหน้าเว็บข้อมูลลูกค้าโดยใช้ Bootstrap
  
  2:43 นาที
- ส่วนวิเคราะห์งาน
  
  3:08 นาที
- ปรับส่วนสร้างหน้าเข้าสู่ระบบ
  
  13:40 นาที
U2.7 Workshop ปรับหน้าเว็บโดยใช้ Bootstrap Part 2

1 PART

24:24 นาที
- ปรับส่วนหน้ารายชื่อลูกค้า
  
  24:24 นาที
U2.8 Workshop ปรับหน้าเว็บโดยใช้ Bootstrap Part 3

2 PART

21:04 นาที
- ปรับสร้างหน้าเพิ่มลูกค้าใหม่
  
  12:20 นาที
- ปรับสร้างหน้าแก้ไขข้อมูลลูกค้า
  
  12:20 นาที
Assignment

ใช้เวลาประมาณ 3 ชั่วโมง
- Assignment: ทำ HTML+CSS สำหรับแก้ไขข้อมูลพนักงาน ให้มี Design ตามที่กำหนด
  
  Assignment นี้คุณจะได้ใช้ CSS และ Bootstap เพื่อปรับหน้าเว็บให้ดูเป็นระเบียบสวยงาม โดยจะเป็นการปรับหน้าเว็บ 4 หน้า คือ หน้า login หน้าแสดงข้อมูลพนักงาน หน้าเพิ่มข้อมูลพนักงาน และหน้าแก้ไขข้อมูลพนักงาน เพื่อให้หน้าเว็บดูสวยงามและอ่านได้อย่างสบายตา นำไปใช้งานได้จริงด้วยตนเอง และสุดท้ายคุณจะได้วิธีการคิดวิเคราะห์งานเพื่อให้คุณสามารถตรวจสอบงานเองได้ หลังคุณได้ฝึกฝนและส่งงานแล้ว
  
  3 ชั่วโมง