ONLINECOURSE.HEADER

Essential CSS for Web Developers

ปรับแต่งและเพิ่มลูกเล่นให้เว็บไซต์ด้วย CSS

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

SECTION_TITLE.INSTRUCTOR

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

SECTION_TITLE.COURSE_OUTLINE

01

Introduction

Welcome to Course

Material

Project Overview

Set Up Project

[Recap CSS] Setup Base CSS

[Project] Recap CSS - Setup Base CSS

Pre-test

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

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

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

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

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

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

Let's Style All Elements

0:24

Style Text

2:59

linear-gradient

4:41

Style Button

5:59

Add Footer

4:18

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.OVERVIEW

โปรโมชันพิเศษ

ทำไมต้องเรียน 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

SECTION_TITLE.FAQS

Q:

วิธีขอใบเสนอราคาและใบแจ้งหนี้ในนามนิติบุคคล

A:

หากต้องการใบเสนอราคาและใบแจ้งหนี้ในนามนิติบุคคลสามารถส่งรายละเอียดดังนี้

  • คอร์สที่สนใจและจำนวนผู้เรียน
  • ชื่อ-นามสกุล, เบอร์โทรผู้ติดต่อ
  • ชื่อ-ที่อยู่บริษัท, เลขประจำตัวผู้เสียภาษี
  • จำนวนภาษีหัก ณ ที่จ่าย (ถ้ามี)

มาที่ hello@skooldio.com โดยใช้ระยะเวลาดำเนินการไม่เกิน 1 วันทำการ (จันทร์-ศุกร์)

A:

สามารถทำได้ โดยในหน้าคำสั่งซื้อ กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" จากนั้นเลือก "นิติบุคคล/บริษัท" และคำสั่งซื้อจะมีการหักภาษี ณ ที่จ่าย 3% โดยอัตโนมัติ ในกรณีบริษัทของท่านไม่ใช่ 3% กรุณาส่งรายละเอียดที่ต้องการสั่งซื้อมาที่ hello@skooldio.com

A:

กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" ในหน้าชำระเงินและเลือกประเภทบุคคลทั่วไปหรือนิติบุคคล และกรอกรายละเอียด

A:

สำหรับคอร์สที่ซื้อในนามบุคคลทั่วไป คอร์สมีอายุตลอดชีพ สำหรับคอร์สที่ซื้อในนามนิติบุคคล สามารถกลับมาเรียนซ้ำได้ภายใน 1 ปี

A:

หลังจากได้รับใบกำกับภาษีแล้ว หากต้องการแก้ไขข้อมูล สามารถทำได้ภายใน 7 วัน นับจากวันที่ได้รับใบกำกับภาษีแบบเต็มรูปทางอีเมล โดยสามารถแก้ไขข้อมูลได้เฉพาะ ชื่อ-นามสกุล เลขประจำตัวผู้เสียภาษีและที่อยู่เท่านั้น จะไม่สามารถแก้ไขข้อมูลคำสั่งซื้อได้

SECTION_TITLE.RELATED_ONLINE_COURSES