Online Course

Essential CSS for Web Developers

ปรับแต่งและเพิ่มลูกเล่นให้เว็บไซต์ด้วย CSS
2,990.00
บาท
8 - 10 ชั่วโมง
มีพื้นฐาน HTML/ CSS มาบ้าง
เรียนจบรับประกาศนียบัตร
ลงมือทำจริงผ่านโปรเจค/แบบฝึกหัดตลอดบทเรียน

รายละเอียด

พิเศษช่วงเปิดตัว! ตั้งแต่วันนี้ - 10 ธันวาคม

  • ลดทันที 1,000 บาท เพียงกรอกโค้ด CSSWEB1990 พร้อมรับ Cheatsheet สรุป CSS สุดพิเศษ สำหรับ 100 ท่านแรก (เมื่อสมัครในนามบุคคลเท่านั้น)

โปรโมชั่นประจำเดือน พฤศจิกายน - ธันวาคม จำนวน 75 สิทธิ์ต่อเดือน

  • รับ Mcdonald's E-Voucher มูลค่า 350 บาท เมื่อสมัครคอร์สออนไลน์รวม 2,500 บาทขึ้นไป (ทีมงานจะส่ง E-Voucher ให้ทางอีเมลภายใน 24 ชม.)

ทำไมต้องเรียน HTML / CSS

HTML (HyperText Markup Language) เป็นภาษาพื้นฐานที่ใช้เขียนโค้ดเพื่อสร้างโครงเนื้อหาต่างๆ ของเว็บไซต์ ส่วน CSS (Cascading Style Sheets) เป็นภาษาที่ช่วยจัดรูปแบบหน้าตา HTML เหล่านั้นให้สวยงาม มีสีสันและลูกเล่นต่างๆ ซึ่งสามารถจัดรูปแบบและปรับเปลี่ยนโครงเว็บไซต์ให้เหมาะสมในแพลตฟอร์มที่แตกต่างกันได้ เช่น Mobile, iPad, Notebook เป็นต้น


ทั้ง HTML และ CSS ต่างเป็นภาษามาตรฐานที่ใช้งานในทุก Website และเป็นภาษาที่เรียนรู้ได้ไม่ยาก โดยถูกพัฒนามาเรื่อยๆ เพื่ออำนวยความสะดวกด้านต่างๆ ให้กับผู้ใช้งาน


สิ่งที่จะได้รับจากคอร์สนี้

คุณจะได้ Static webpage ของตัวเอง พร้อมเพิ่มลูกเล่นต่างๆ ให้เว็บไซต์ของคุณน่าใช้งานมากยิ่งขึ้น ตลอดจนช่วยให้คุณเข้าใจพื้นฐานและหลักการสร้างเว็บไซต์เบื้องต้นด้วย HTML/ CSS ไปจนถึงการทำเว็บให้มีความ Responsive เพื่อรองรับการใช้งานผ่าน Devices ต่างๆ ผ่านคอร์สออนไลน์ที่ออกแบบการสอน HTML/CSS ในระดับพื้นฐานทั้งหมด เพื่อให้คุณเริ่มต้นได้อย่างถูกวิธี ดังนั้นเนื้อหาจึงเข้าใจง่าย สามารถทำตามได้ทีละสเต็ปพร้อมกับผู้สอน เมื่อเรียนจบแล้วก็ยังกลับไปต่อยอดการทำงานจริงได้อีกด้วย


โดยจะได้เรียนครบทุกเรื่องที่จำเป็นเกี่ยวกับการใช้ภาษา CSS ตั้งแต่

  • พื้นฐาน HTML และ CSS
  • เข้าใจ Box Model และ Box Properties รูปแบบต่างๆ
  • จัดการ Element ต่างๆ บนเว็บไซต์ด้วย Flexbox, Grid Layout, Position, Sticky เป็นต้น
  • เรียนรู้และใช้งานเครื่องมือในการพัฒนาเว็บต่างๆ เช่น Chrome DevTools
  • เพิ่มลูกเล่นให้เว็บไซต์น่าใช้งานด้วยการใช้ Pseudo Classes, Pseudo Element, Combinator และการทำ Animation พื้นฐานในรูปแบบต่างๆ
  • เข้าใจหลักการพร้อมทำ Responsive Web ให้ตอบสนองกับ Device ขนาดต่างๆ

ผ่านคอร์สออนไลน์เนื้อหาอัดแน่น ความยาววิดีโอกว่า 7 ชั่วโมงครึ่ง รวมเนื้อหากว่า 90 วิดีโอ ได้ลงมือทำแบบฝึกหัดตลอดบทเรียน พร้อมทำโปรเจกต์จริง ที่ทุกคนจะได้เว็บไซต์ของตัวเองติดไม้ติดมือไปอวดเพื่อนๆ


คอร์สออนไลน์นี้เหมาะสำหรับ

  • Entry Level คอร์สนี้จะทำให้ผู้ที่สนใจเริ่มต้นพัฒนาเว็บไซต์ หรือสนใจเริ่มต้นในด้าน Front-end Developers พอมีพื้นฐาน HTML/ CSS มาบ้างที่ต้องการเรียนรู้การใช้งาน CSS ในการเพิ่มลูกเล่นให้กับเว็บไซต์มากยิ่งขึ้น
  • Web Developer หรือผู้ที่สนใจย้ายสายงานมาเป็น Web Developer ที่พอมีพื้นฐาน HTML/ CSS มาบ้างที่ต้องการเรียนรู้การใช้งาน CSS และคำสั่งต่างๆ เพื่อตกแต่งหน้าเว็บ ทำให้น่าใช้งานมากยิ่งขึ้น
  • นักเรียน/ นักศึกษา คอร์สนี้จะทำให้นักศึกษาที่สนใจหรือกำลังพัฒนาเว็บไซต์ หรือทำ Portfolio และต้องการเข้าใจการใช้งาน CSS เพื่อเพิ่มลูกเล่นให้เว็บไซต์ของตนน่าสนใจมากยิ่งขึ้น สามารถนำไปศึกษาต่อยอดได้รวดเร็วมากยิ่งขึ้น

หากยังไม่แน่ใจว่าตอนนี้มีพื้นฐานมากน้อยขนาดไหน ลองทำแบบทดสอบได้ที่นี่


รายละเอียดเพิ่มเติม

ระหว่างเรียนคอร์สนี้ ผู้เรียนจะได้เรียนรู้ผ่านวิดีโอกว่า 90 บทเรียน และได้ลงมือทำแบบฝึกหัดและโปรเจกต์จริงตลอดทุกบทเรียน

  • ผู้เรียนจะได้รับประกาศนียบัตร (Certificate of Completion) เมื่อเรียนจบคอร์ส
  • ได้ Static Website ที่นำไปใช้งานได้จริง
  • สอบถามทีมงานผู้เชี่ยวชาญได้ตลอดการเรียน
  • แนะนำให้มีพื้นฐานการเขียนเว็บไซต์หรือมีการใช้ภาษา HTML และะ CSS มาบ้าง เช่น สามารถปรับ size เปลี่ยน background ด้วย HTML / CSS ได้ (สามารถเรียนพื้นฐาน HTML/CSS ได้ที่นี่)

สอบถามข้อมูลเพิ่มเติม

  • Facebook ของ Skooldio
  • สำหรับท่านที่ต้องการสมัครในนามบริษัท 5 ท่านขึ้นไป ติดต่อรับส่วนลด bulk discount ได้ที่ hello@skooldio.com

ตัวอย่างโปรเจค

ในคอร์สนี้คุณจะได้ลงมือทำเว็บไซต์ขึ้นมาด้วยตัวเองทั้งหมด โดยจะเป็นเว็บไซต์ E-Commerce ขายรองเท้า ดังตัวอย่างด้านล่าง

wireframe

รีวิวจากผู้เรียน

wireframe
wireframe

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

01
Introduction
Welcome to Course
1:11
Project Overview
5:23
Set up Project
Recap CSS - Setup base CSS
8:36
Project - Recap CSS - Setup base CSS
The Box Model
3:13
Box Properties
5:26
Project - Box's Properties
Solution - Box's Properties
9:22
Project - Box's Properties - Collection & Product Card
Solution - Box's Properties - style elements
9:32
Box-Sizing
2:04
Types of Box
2:21
Introducing Flexbox
2:45
justify-content & align-items
8:23
Quiz:
Quiz - justify-content & align-items (I)
Quiz:
Quiz - justify-content & align-items (II)
Quiz:
Quiz - justify-content & align-items (III)
Project - Styling Menu bar
Solution - Styling Menu bar
5:46
flex-direction
1:46
Exercise - Getting Dicey with Flexbox
Solution - Getting Dicey with Flexbox
20:13
Project - Styling About Section
Solution - Styling About Section
5:44
flex-wrap
1:40
Project - Product List
Solution - Product List
5:49
Flex item's properties : Flex Basis
3:33
Flex item's properties : Flex Grow
3:33
Flex item's properties : Flex Shrink
6:12
Let's do the math - How flex-grow and flex-shrink works?
9:18
More Flexbox’s Properties
Project - Collection List
7:32
Recap
2:00
Introducing Grid layout
3:04
Using Grid
10:57
Exercise - Modrian Grid
Solution - Modrian Grid
10:04
Project - Collection (I)
Solution - Collection (I)
9:49
Project - Product List
Solution - Product List
5:28
Grid Area
3:42
Project - Collection (II)
Solution - Collection (II)
5:01
Grid Shorthands
Grid vs Flexbox
4:09
Advanced Positioning
6:52
Exercise - Advanced Positioning
Solution - Advanced Positioning
7:54
Project - Card Label
Solution - Card Label
8:41
Project - Social section
Solution - Social section
7:06
Sticky
3:47
Project - Sticky Navigation Bar
Solution - Sticky Navigation Bar
8:20
Intro to CSS Selectors
1:25
Pseudo Classes
3:22
Project - Navigation Bar Item
Solution - Navigation Bar Item
4:29
Project - hover & active state (I)
Solution - hover & active state (I)
6:17
Project - hover & active state (II)
Solution - hover & active state (II)
8:03
Showcase - nth-child
12:15
More Pseudo Classes
Pseudo Elements
4:22
Project - pseudo elements
Solution - pseudo elements
3:40
Multiple Selector & Selector List
3:32
Combinators/Multiple Selectors
1:33
Document Object Model (DOM)
3:33
Descendant & Child Combinator
2:43
Quiz:
Quiz: Descendant & Child Combinator (I)
Quiz:
Quiz: Descendant & Child Combinator (II)
Sibling Combinator
3:36
Exercise - Style existing code without modifying HTML
Solution - Style existing code without modifying HTML
11:33
Specificity
6:55
Quiz:
Quiz: Specificity (I)
Quiz:
Quiz: Specificity (II)
Quiz:
Quiz: Specificity (III)
Recap
2:14
Intro to Responsive Web
2:20
Using Media Queries
8:08
Project - Responsive Navigation Bar
6:04
Project - Responsive Flex Layout
Solution - Responsive Flex Layout
5:25
Project - Responsive List
Solution - Responsive List (I)
6:28
Solution - Responsive List (II)
4:25
Choosing the Right Breakpoints
Mobile First CSS
5:28
Responsive Images
6:21
Source Set
7:08
Sizes
6:43
Project - Responsive Product Images
Solution - Responsive Product Images
5:44
Solution - Responsive Background Images
2:51
Recap
2:32
Let's Style all elements
0:23
Style Text
2:58
linear-gradient
4:40
Style Button
5:59
Add Footer
4:18
Congratulation & What's Next
1:01
Introducing Transition & Animation
0:53
CSS Transition
11:03
CSS Transform
8:08
Exercise - CSS Transform & Transition
Solution - CSS Transform & Transition
12:44
CSS Animation
9:50
Exercise - CSS Animation
Solution - CSS Animation
6:49
Introducing CSS Animation Library
5:31

ผู้สอน

ทัศน์พล รัชตะสัมฤทธิ์ (Software Engineer, Skooldio) | Skooldio Instructor
ทัศน์พล รัชตะสัมฤทธิ์
Software Engineer, Skooldio