ปรับแต่งและเพิ่มลูกเล่นให้เว็บไซต์ด้วย CSS | Skooldio Online Course: Essential CSS for Web Developers
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
WORKSHOP.INSTRUCTOR.SEE_PROFILE

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

01

Introduction

Welcome to Course

ทดลองเรียน

1:12

Project Overview

ทดลองเรียน

5:19

Set up Project

Recap CSS - Setup base CSS

ทดลองเรียน

8:37

Project - Recap CSS - Setup base CSS

ทดลองเรียน

Pre-test

The Box Model

ทดลองเรียน

3:14

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

ทดลองเรียน

2:45

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

Q:
ขอใบเสนอราคา/ใบแจ้งหนี้/ใบกำกับภาษีในนามองค์กรได้หรือไม่
A:

สามารถขอได้ค่ะ

  1. การสมัครคอร์สเรียนออนไลน์ในนามบริษัทสามารถส่งรายละเอียดดังต่อไปนี้ ไปที่อีเมล hello@skooldio.com ได้เลยค่ะ
  • คอร์สที่สนใจ/จำนวนผู้เรียน
  • ชื่อ-นามสกุล เบอร์โทรผู้ติดต่อ -ชื่อ, ที่อยู่บริษัท/เลขประจำตัวผู้เสียภาษี
  • จำนวนภาษีหัก ณ ที่จ่าย (ถ้ามี)
  1. หากต้องการสมัครทันที (สมัครได้ทีละ 1 คน) สามารถกดซื้อได้จากหน้าเว็บ www.skooldio.com ได้เลยค่ะ

ท่านสามารถออกใบกำกับภาษีเต็มรูปแบบผ่านโดยการเลือกชำระเงินช่อง "นิติบุคคล" และคำสั่งซื้อจะมีการหักภาษี ณ ที่จ่าย 3% โดยอัตโนมัติ (หากไม่ใช่ 3% กรุณาทำตามข้อ 1 ได้เลยค่ะ)

  • โดยฝ่ายบัญชีของ Skooldio จะทำการติดต่อกลับไปหาท่านอีกครั้งเมื่อการสั่งซื้อสำเร็จและส่งให้องค์กรของท่านตามที่อยู่บริษัท
  • โดยองค์กรของท่านต้องส่งหนังสือรับรองการหักภาษี ณ ที่จ่าย กลับมาที่ฝ่ายบัญชีเราที่ accounting@skooldio.com
A:

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

A:

สามารถเรียนซ้ำได้ค่ะ

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

SECTION_TITLE.RELATED_ONLINE_COURSES