Essential CSS for Web Developers
ปรับแต่งและเพิ่มลูกเล่นให้เว็บไซต์ด้วย CSS
Essential CSS for Web Developers
ปรับแต่งและเพิ่มลูกเล่นให้เว็บไซต์ด้วย CSS
SECTION_TITLE.INSTRUCTOR
SECTION_TITLE.OVERVIEW
โปรโมชันพิเศษ
- ลดพิเศษเมื่อสมัครคู่กับหลักสูตร Web Basics with HTML & CSS ดูรายละเอียดเพิ่มเติมที่นี่
ทำไมต้องเรียน 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 ขายรองเท้า ดังตัวอย่างด้านล่าง
รีวิวจากผู้เรียน
SECTION_TITLE.COURSE_OUTLINE
[CSS Layout] The Basics
Pre-test
The Box Model
Box Properties
5:27
[Project] Box's Properties
[Solution] Box's Properties
9:22
[Project] Box's Properties - Collection & Product Card
[Solution] Box's Properties - Style Elements
9:33
Box-Sizing
2:05
Types of Box
2:22
[CSS Layout] Flexbox
Introducing Flexbox
justify-content & align-items
6:54
[Quiz] justify-content & align-items
[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:14
[Project] Styling About Section
[Solution] Styling About Section
5:42
flex-wrap
1:41
[Project] Product List
[Solution] Product List
5:50
Flex item's properties : Flex Basis
3:34
Flex item's properties : Flex Grow
3:34
Flex item's properties : Flex Shrink
6:13
Let's Do the Math - How flex-grow and flex-shrink Works?
9:15
More Flexbox’s Properties
[Project] Collection List
7:33
Recap
2:00
[CSS Layout] Grid Layout
Introducing Grid layout
2:59
Using Grid
10:55
[Exercise] Modrian Grid
[Solution] Modrian Grid
10:05
[Project] Collection (I)
[Solution] Collection (I)
9:50
[Project] Product List
[Solution] Product List
5:29
Grid Area
3:41
[Project] Collection (II)
[Solution] Collection (II)
5:01
Grid Shorthands
Grid vs. Flexbox
4:10
[CSS Layout] Positioning
Advanced Positioning
6:45
[Exercise] Advanced Positioning
[Solution] Advanced Positioning
7:55
[Project] Card Label
[Solution] Card Label
7:38
[Project] Social Section
[Solution] Social Section
7:01
Sticky
3:43
[Project] Sticky Navigation Bar
[Solution] Sticky Navigation Bar
8:18
Post-test
Advanced Selectors
Intro to CSS Selectors
1:26
Pseudo Classes
3:22
[Project] Navigation Bar Item
[Solution] Navigation Bar Item
4:30
[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
1:33
Document Object Model (DOM)
3:33
Descendant & Child Combinator
2:43
[Quiz] Descendant & Child Combinator
Sibling Combinator
3:37
[Exercise] Style Existing Code without Modifying HTML
[Solution] Style Existing Code without Modifying HTML
11:24
Specificity
6:54
[Quiz] Specificity
Recap
2:15
Responsive
Intro to Responsive Web
2:20
Using Media Queries
8:08
[Project] Responsive Navigation Bar
6:03
[Project] Responsive Flex Layout
[Solution] Responsive Flex Layout
5:25
[Project] Responsive List
[Solution] Responsive List (I)
6:25
[Solution] Responsive List (II)
4:26
Choosing the Right Breakpoints
Mobile First CSS
5:29
Responsive Images
6:22
Source Set
7:09
Sizes
6:44
[Project] Responsive Product Images
[Solution] Responsive Product Images
5:44
[Solution] Responsive Background Images
2:49
Recap
2:33
Styling Other Elements with More CSS Properties
Let's Style All Elements
0:24
Style Text
2:59
linear-gradient
4:41
Style Button
5:59
Add Footer
4:18
Intro to CSS Animation Transition and Transform
Introducing Transition & Animation
0:53
CSS Transition
11:04
CSS Transform
8:06
[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
Congratulation & What's Next
1:02
SECTION_TITLE.FAQS
Q:
ซื้อคอร์สออนไลน์ในนามนิติบุคคลผ่านหน้าเว็บไซต์ได้หรือไม่
A:
สามารถทำได้ โดยในหน้าคำสั่งซื้อ กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" จากนั้นเลือก "นิติบุคคล/บริษัท" และคำสั่งซื้อจะมีการหักภาษี ณ ที่จ่าย 3% โดยอัตโนมัติ ในกรณีบริษัทของท่านไม่ใช่ 3% กรุณาส่งรายละเอียดที่ต้องการสั่งซื้อมาที่ hello@skooldio.com
Q:
วิธีขอใบกำกับภาษีในนามนิติบุคคลและใบกำกับภาษีสำหรับบุคคลทั่วไป
A:
กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" ในหน้าชำระเงินและเลือกประเภทบุคคลทั่วไปหรือนิติบุคคล และกรอกรายละเอียด
Q:
คอร์สออนไลน์สามารถกลับมาเรียนซ้ำได้หรือไม่
A:
สำหรับคอร์สที่ซื้อในนามบุคคลทั่วไป คอร์สมีอายุตลอดชีพ สำหรับคอร์สที่ซื้อในนามนิติบุคคล สามารถกลับมาเรียนซ้ำได้ภายใน 1 ปี
Q:
สามารถแก้ไขใบกำกับภาษีจากในนามนิติบุคคลเป็นใบกำกับภาษีบุคคลทั่วไป และ ใบกำกับภาษีบุคคลทั่วไปเป็นใบกำกับภาษีในนามนิติบุคคลได้หรือไม่
A:
หลังจากได้รับใบกำกับภาษีแล้ว หากต้องการแก้ไขข้อมูล สามารถทำได้ภายใน 7 วัน นับจากวันที่ได้รับใบกำกับภาษีแบบเต็มรูปทางอีเมล โดยสามารถแก้ไขข้อมูลได้เฉพาะ ชื่อ-นามสกุล เลขประจำตัวผู้เสียภาษีและที่อยู่เท่านั้น จะไม่สามารถแก้ไขข้อมูลคำสั่งซื้อได้
SECTION_TITLE.RELATED_ONLINE_COURSES
Essential CSS for Web Developers
ปรับแต่งและเพิ่มลูกเล่นให้เว็บไซต์ด้วย CSS