After Songkran Sale ลดราคา 17-19 เม.ย. เท่านั้น

CSS 2: Box Model และ Properties อื่นๆ

Intermediate

Beginner

Expert

เรียนรู้และทำความเข้าใจเกี่ยวกับ CSS Box Model และคุณสมบัติต่างๆ ที่สำคัญ

ทดลองเรียนฟรี
3
 ชั่วโมง
102
 นาที
2
 การบ้าน
1
 ข้อสอบ
แพ็คเกจสมาชิกการเรียนที่คุ้มค่าที่สุด
ชั่วโมงปรึกษา 6-8 ชม/วัน
ตรวจทุกการบ้านและโปรเจ็กต์
เข้าร่วมอีเวนท์ 2-3/สัปดาห์
รับบริการสนับสนุนอาชีพ
เรียนพร้อมกับ Job Guarantee
เริ่มเรียนแบบไม่จำกัดกว่า 100 คอร์สและอื่นๆ เรียนแล้วไม่ได้งานคืนเงิน 100%

หลักสูตร

นำความรู้และทักษะที่ได้เรียนรู้มาใช้ในการสร้างแถบความคืบหน้า (progress bar) แบบวงกลมด้วย HTML CSS และ JavaScript บทเรียนจะเริ่มต้นด้วยการอธิบายโครงสร้างพื้นฐานของ HTML ที่ใชในการสร้างโครงสร้าง ต่อจากนั้นจะแนะนำวิธีการใช้ CSS เพื่อกำหนดรูปแบบและการออกแบบภาพลักษณ์ของแถบความคืบหน้าให้มีลักษณะเป็นวงกลม รวมถึงการเพิ่มสีและเอฟเฟกต์เพื่อให้ดูมีชีวิตชีวา ส่วนสุดท้ายของบทเรียนจะเน้นไปที่การใช้ JavaScript เพื่อเพิ่มการทำงานแบบไดนามิก

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

Introduction

Learning Goals

CSS Box Model คืออะไร

การตั้งค่าและคำนวณ Box Model

Box Model

Display

Minimum and Maximum Height and Width

Quiz: Box Model

Challenge: เปลี่ยนเว็บไซต์รับเลี้ยงสุนัข

Overflow

ทบทวน: Overflow

Units ใน CSS

เช็กความเข้าใจ

Feedback

00:29

00:12

00:10

04:13

01:18

10:07

00:12

5 questions

1 questions

02:11

00:10

07:06

1 questions

3 questions

1

CSS Box Model

ในโมดูลนี้คุณจะได้เรียนรู้เกี่ยวกับ CSS Box Model ซึ่งเป็นหลักการพื้นฐานในการจัดการรูปแบบและขนาดขององค์ประกอบในหน้าเว็บ คุณจะเรียนรู้เกี่ยวกับการทำงานของ padding margins height width และ borders ในการกำหนดรูปแบบและขนาดของกล่องในเว็บไซต์ นอกจากนี้คุณจะเรียนรู้เกี่ยวกับการใช้ display property เพื่อกำหนดวิธีการแสดงผลขององค์ประกอบ และการใช้ overflow property เพื่อจัดการกับเนื้อหาที่เกินขอบเขตของกล่อง นอกจากนี้คุณยังจะได้เรียนรู้เกี่ยวกับหน่วยวัดขนาด เช่น px rem และ em ซึ่งเป็นสิ่งสำคัญในการกำหนดขนาดขององค์ประกอบใน CSS ทั้งหมดนี้จะช่วยให้คุณมีความเข้าใจลึกซึ้งเกี่ยวกับ CSS Box Model และสามารถใช้งานได้อย่างมีประสิทธิภาพในการพัฒนาเว็บไซต์ของคุณได้อย่างมั่นใจ

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

เริ่มเรียนบทนี้

Introduction

Learning Goals

CSS Box Model คืออะไร

การตั้งค่าและคำนวณ Box Model

Box Model

Display

Minimum and Maximum Height and Width

Quiz: Box Model

Challenge: เปลี่ยนเว็บไซต์รับเลี้ยงสุนัข

Overflow

ทบทวน: Overflow

Units ใน CSS

เช็กความเข้าใจ

Feedback

00:29

00:12

00:10

04:13

01:18

10:07

00:12

5 questions

1 questions

02:11

00:10

07:06

1 questions

3 questions

2

CSS Properties ตัวอื่นๆที่สำคัญ

ในโมดูลนี้คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติที่สำคัญของ CSS ที่มีบทบาทสำคัญในการจัดรูปแบบและสไตล์ของเว็บไซต์ คุณจะเรียนรู้เกี่ยวกับคุณสมบัติที่ใช้ในการกำหนดสี (color) การจัดหน้าตาของตัวอักษร (font) การจัดรูปแบบของข้อความ (text) การจัดการพื้นหลัง (background) การจัดรูปแบบของการแสดงผล (display) และอื่นๆ ที่มีผลต่อการสร้างสไตล์ที่น่าสนใจและมีประสิทธิภาพสำหรับเว็บไซต์ของคุณ นอกจากนี้คุณยังจะได้รับความเข้าใจในหลักการของการทำงานของ CSS ซึ่งจะช่วยให้คุณสามารถปรับแต่งสไตล์ได้อย่างมีประสิทธิภาพ ในบท Challenge คุณจะได้รับการท้าทายในการสร้างวงกลมที่สามารถหมุนได้ ซึ่งจะช่วยให้คุณฝึกฝนทักษะในการใช้คุณสมบัติและการปรับแต่ง CSS ให้กับองค์ประกอบของเว็บไซต์อย่างคล่องตัวและมีความสวยงาม

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

เริ่มเรียนบทนี้

Learning Goals

Position Property

z-index

ทบทวน: z-index

!important

Google Fonts

Opacity and Alpha

Transform

Transition

สร้าง Toggle Switch

Animation (Part 1)

Animation (Part 2)

Challenge: สร้างวงกลมหมุน

เช็กความเข้าใจ

Feedback

Certificate

00:06

10:15

02:58

00:09

02:32

02:32

06:23

08:39

10:47

24:11

06:55

02:45

1 questions

1 questions

3 questions

3

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

เริ่มเรียนบทนี้
4

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

เริ่มเรียนบทนี้
5

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

เริ่มเรียนบทนี้
6

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

เริ่มเรียนบทนี้
7

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

เริ่มเรียนบทนี้

เป็นส่วนหนึ่งของ Career Track:

เป็นส่วนหนึ่งของ Skill Track:

ฟังเสียงจริงจากนักเรียนของเรา

นักเรียนที่เคยเผชิญความท้าทายในการเปลี่ยนสายงาน แต่สามารถบรรลุเป้าหมายและประสบความสำเร็จได้ด้วยการเรียนกับเรา

มากกว่าคอร์สออนไลน์ธรรมดา

เรียนรู้สกิลไอทีหลากหลาย ทั้งคอร์สเรียน IT เส้นทางทักษะ อีเวนท์สด และการทำโปรเจ็คจริง มีการันตีงาน 100%

พูดคุยกับเมนเทอร์ในชั่วโมงปรึกษา

เมนเทอร์ของเราพร้อมประจำการเพื่อช่วยเหลือคุณระหว่าง 6-10 ชั่วโมง/วัน ผ่านวีดิโอคอนเฟอเรนซ์

สอบถามและคุยกับเพื่อนๆบน ออนไลน์ Community

มีคำถามหรือต้องการแบ่งปันอะไรบ้างไหม ส่งข้อความถึงเพื่อนๆ และผู้ช่วยสอนในชุมชนของเรา

เราจะตรวจการบ้านและโปรเจกต์ของคุณทั้งหมด

ส่งงานของคุณมาและรอรับฟีดแบ็ก ซึ่งเราจะพยายามตอบกลับภายในเวลาไม่เกิน 7 วัน

การเรียนแบบสดผ่าน Bootcamp

รูปแบบการเรียนแบบ Flipped Learning ผ่านวิดีโอบทเรียนสำหรับการเรียนเองในวันธรรมดาและมีการเรียนสดในวันสุดสัปดาห์

LinkedIn, Resume และ พอร์ตโฟลิโอรีวิว

สร้างความประทับใจให้กับ HR และบริษัทด้วยโปรไฟล์ที่โดดเด่น

เข้าร่วมอีเวนท์ออนไลน์และออนไซต์

ไม่ว่าจะเป็นเวิร์คช็อป ผู้บรรยายพิเศษ หรือกิจกรรมอื่นๆ คุณสามารถเข้าร่วมกิจกรรมมากมาย

พบกับผู้สอนและเมนเทอร์ของคุณ

ครูผู้สอนที่มีความเชี่ยวชาญในสาขานั้นๆ หลักสูตรสอนโดยผู้เชี่ยวชาญในสายงาน IT ที่มีความรู้และประสบการณ์มากมาย

Pakkaphong Akbhut

Application Engineer at Hitachi eBworx

Phanuwit Kittirong

Senior Software Engineer @ BigC

Job Guarantee ของเราคืออะไร?

เรารับประกันคืนเงิน 100% หากคุณไม่ได้งานด้านเทคโนโลยีภายใน 6 เดือนหลังจากสำเร็จการศึกษา

เรียนรู้เพิ่มเติม
แพ็คเกจสมาชิกการเรียนที่คุ้มค่าที่สุด
ชั่วโมงปรึกษา 6-8 ชม/วัน
ตรวจทุกการบ้านและโปรเจ็กต์
เข้าร่วมอีเวนท์ทุกสัปดาห์
รับบริการสนับสนุนอาชีพ
เรียนพร้อมกับ Job Guarantee
เริ่มเรียนแบบไม่จำกัดกว่า 100 คอร์สและอื่นๆ เรียนแล้วไม่ได้งานคืนเงิน 100%

คำถามที่พบบ่อย

WeStride Plus แตกต่างจาก WeStride ธรรมดาอย่างไร? 
BootcampPlus ของเราจะให้บริการแบบ unlimited โดยจะไม่จำกัดบริการไม่ว่าจะเป็น การให้คำปรึกษาจาก Mentor และ Career coachแบบตัวต่อตัว ซึ่งในขณะที่ Bootcamp ในรูปแบบใหม่จะมีการเรียนรู้ผ่านวิดีโอตลอด วันจันทร์ถึงศุกร์และมีคลาสสดในวันเสาร์อาทิตย์ ทำให้คุณได้เรียนรู้ทั้งแบบเดี่ยวและเป็นกลุ่ม
Bootcamp แตกต่างจาก Career Track อย่างไร? 
A: Bootcamp จะให้ประสบการณ์การเรียนรู้ในรูปแบบการสอนสดในช่วงวันเสาร์และอาทิตย์ โดยจะมีการบ้านเสริมและโปรเจกต์ให้ทำเพื่อเสริมทักษะในการทำงานให้กับนักเรียน แต่ในทางกลับกันในส่วนของ Career Track จะเป็นการจัดการสอนออนไลน์แบบไม่ประสานเวลา (Asynchronous learning) โดยผู้เรียนสามารถเรียนรู้ได้ด้วยตนเอง
ฉันต้องจ่ายเพิ่มสำหรับ ชั่วโมงปรึกษา, Events, Bootcamp หรือสิ่งอื่นๆ ไหม? 
ไม่เลย! ทุกสิ่งที่เรานำเสนอชั่วโมงปรึกษา , Events และ Bootcamp ไม่มีค่าใช้จ่ายเพิ่มเติม ซึ่งในส่วนนี้เป็นบริการที่เรามีกับให้นักเรียนทุกคน
ถ้าฉันมีคำถาม ฉันควรถามใคร?
คุณสามารถสอบถามทาง Mentor ได้ที่ ชั่วโมง Office Hours Communityออนไลน์ของเรา Events และคลาสสด
ฉันสามารถขอคืนเงินได้ไหม? 
ขออภัย เราไม่สามารถให้บริการคืนเงินได้
การรับประกันงานของเราคืออะไร? 
WeStride เรามีความมั่นใจในคุณภาพการฝึกอบรมจนกล้ารับประกันคืนเงิน 100% หากคุณไม่ได้งานในด้านเทคโนโลยีภายใน 6 เดือนหลังจากจบการศึกษาทางสถาบันยินดีคืนเงินเต็มจำนวน โดยการรับประกันกันงานจะมีข้อกำหนดและเงื่อนไขโดยสามารถอ่านรายละเอียดได้ที่นี่
Skill Track แตกต่างจาก Career Track อย่างไร? 
Career Track จะมุ่งเน้นไปในส่วนของอาชีพโดยตรง แต่ในขณะที่ Skill Track เน้นทักษะเฉพาะทางที่ใช้ในการทำงานได้จริง แต่ถึงแม้ว่าหลายหลักสูตรใน Career Track จะครอบคลุมทักษะที่มีใน Skill Track แต่ Skill Track จะให้ความยืดหยุ่นให้กับนักเรียนที่ต้องการเพิ่มทักษะเฉพาะเช่นการใช้ Microsoft Excel ก็สามารถเข้าไปเรียนรู้เพิ่มเติมได้อีกด้วย
เมื่อฉันทำการบ้านเสร็จ ใครจะตรวจ? 
หากนักเรียนได้ทำการส่งแบบฝึกหัด จะมีทีมงาน Mentor ของเราจะตรวจการบ้านและให้คำแนะนำกับคุณภายใน 5-7 วัน
LinkedIn, Portfolio และ Resume Review คืออะไร? 
คุณจะได้รับการทบทวน LinkedIn, Portfolio และ Resume ของคุณให้มีความน่าเชื่อถือและน่าสนใจมากที่สุด โดยการตรวจเช็คจะตรวจโดยผู้เชี่ยวชาญ 1 ครั้งต่อ 1 คน
ฉันสามารถเรียนคอร์สหรือ Skill Track ใดก็ได้หรือไม่? มีข้อจำกัดหรือไม่?
คุณมีอิสระที่จะเรียนรู้ทุกคอร์สและทุก Skill Track ที่เราเสนอโดยไม่มีข้อจำกัด เราอยากให้คุณสามารถสำรวจและเพิ่มทักษะได้อย่างไม่มีขอบเขต