สอนใช้ Bootstrap 3 ร่วมกับ Sass

คอร์สเรียนการเขียน CSS ด้วย Sass ร่วมกับ Bootstrap 3

โดย ทัพพ์วริศ ชิณศิริรัตน์กุล
แชร์คอร์สนี้บน Social:

ฟรี!



เข้าเรียนฟรี

สวัสดีครับยินดีต้อนรับเข้าสู่ cloud-tutorial.com นะครับทั้งหน้าเก่าหน้าใหม่ ในคอร์สนี้เป็นคอร์ส สอนใช้ Bootstrap 3 ร่วมกับ Sass ถ้าใครยังไม่รู้จักทั้ง 2 ตัวนี้แนะนำให้กลับไปเรียนปูพื้นฐานจากคอร์สที่ผมได้ทำไว้ก่อนนะครับ เพื่อความเข้าใจในการเรียน

1. Bootstrap Basic สอนใช้ Bootstrap 3 ฉบับเริ่มต้น

2. สอนใช้ Bootstrap 3 Workshop

3. สอนเขียน CSS ด้วย Sass

4. สอนเขียน CSS ด้วย Sass และ Compass

สามารถเข้าไปเรียนคอร์สก่อนหน้าได้จากลิ้งด้านบนเลยนะครับ แล้วในคอร์สนี้เราจะได้เรียนอะไรกันบ้าง ภายในคอร์ส สอนใช้ Bootstrap 3 ร่วมกับ Sass นี้ผู้เรียนจะได้เรียนถึงการสร้างโปรเจ็ค Sass สำหรับใช้งานร่วมกับ Bootstrap 3 การคอมไพล์ การ Import เข้ามาใช้งาน ในส่วนสุดท้ายจะเป็นเรื่องของการประยุกต์ใช้งานจริงๆโดยใช้ Bootstrap 3 ร่วมกับ Sass และ Compass เพื่อนำมาสร้างเว็บไซต์นะครับ

ทำไมต้องใช้ Bootstrap 3 และ Sass ?

ก่อนที่จะเรียนเราก็มาทำความรู้จักกันก่อนนะครับว่าทำไมเราต้องใช้ Sass และ Bootstrap 3 ในการสร้างเว็บไซต์ อันดับแรกเลยถ้าผู้เรียนเข้ามาอ่านถึงบทความตรงนี้แล้วผมคิดว่าผู้เรียนต้องรู้จักเจ้าตัว Bootstrap 3 นี้ และ Sass มาบ้างแล้วถ้ามือใหม่ แนะนำให้กลับไปเรียนอีกรอบนะครับเพื่อทำความรู้จักมันมากขึ้น จากนั้นเราจะใช้มันร่วมกันได้อย่างไร ? ถ้าเข้าไปที่เว็บไซต์getbootstrap.com ในส่วนของ Download จะเห็นว่ามีส่วนของ Sass ซึ่งถ้าคนใช้มานานแล้วก็น่าจะเห็นว่า แต่ก่อนมีแค่ส่วนของ Less CSS แต่ปัจจุบันทาง Bootstrap เองก็ได้เห็นถึงความนิยมในการเขียน CSS ด้วย Sass จึงได้เพิ่มในส่วนของ Source Files ตรงนี้มาให้ด้วย เห็นแล้วใช่มั้ยครับว่า Sass นั้น เป็นที่นิยมขนาดไหน และด้วยเหตุผลที่ยกมาทั้งหมด ทั้งความสามารถของ Bootstrap เอย ของ Sass เอย ทำให้เราสามารถปรับแต่งเว็บไซต์ของเราได้แบบง่ายๆเลยทีเดียว

จุดเด่นของการใช้ Bootstrap 3 ร่วมกับ Sass

เราได้เห็นถึงเหตุผลต่างๆนาๆไปแล้ว ในส่วนนี้ผมจะยกตัวอย่างจุดเด่นของ คอร์สสอนใช้ Bootstrap 3 ร่วมกับ Sass นี้นะครับว่าเรียนไปแล้วจะได้อะไร

  1. สามารถปรับแต่งไฟล์ของ Bootstrap 3 ได้
  2. เห็นถึงความสามารถของ Sass มากขึ้น
  3. เห็นถึงการประยุกต์ใช้งานมากขึ้นจากตัวอย่างในเรื่องของ Workshop
  4. รู้จักวิธีการสร้างโปรเจ็ค Sass และ Bootstrap
  5. รู้จักวิธีการแก้ไขและปรับแต่งไฟล์ของ Bootstrap 3 Sass ไม่ว่าจะเป็นส่วนของ Variables และ Mixins
  6. สามารถประยุกต์ใช้งานร่วมกับ Compass ได้

นี่เป็นตัวอย่างคร่าวๆที่ผมยกมาให้ได้ดูกันส่วนที่เหลือ ผู้เรียนต้องไปลองสัมผัสด้วยตัวเองแล้วครับ ขอให้สนุกกับการเรียนคอร์สนี้นะครับ

ตอนที่ 1 - แนะนำ Sass และ Bootstrap 2.50 นาที  
ตอนที่ 2 - ดาวน์โหลด และ ติดตั้ง Sass and Bootstrap 3.29 นาที  
ตอนที่ 3 - การสร้างโปรเจ็คใหม่ 10.29 นาที  
ตอนที่ 4 - Bootstrap 3 Variables 4.27 นาที  
ตอนที่ 5 - Bootstrap 3 Mixins 4.51 นาที  
ตอนที่ 6 - Getting Start Bootstrap and Compass 9.21 นาที  
ตอนที่ 7 - Navbar and Background Images 20.56 นาที  
ตอนที่ 8 - Button Link and Popover 6.21 นาที  
ตอนที่ 9 - Ghost Button and Header 22.18 นาที  
ตอนที่ 10 - Footer and Conclusion 20.25 นาที  
ไม่มีเอกสารประกอบการเรียน
คลิกที่ปุ่ม "สมัครเรียน" เพื่อลงทะเบียนเรียนและเข้าสู่ขั้นตอนการชำระเงิน

ขั้นตอน 1

กรุณาเข้าสู่ระบบ เพื่อความสะดวกแนะนำให้ Login ด้วย Facebook หรือหากยังไม่เป็นสมาชิกกรุณาสมัครสมาชิกก่อนสั่งซื้อคอร์สเรียน

ขั้นตอน 2

เลือกช่องทางในการชำระเงิน โดยคุณสามารถชำระค่าคอร์สออนไลน์ผ่านบัตรเครดิต/เดบิต, Internet Banking, หรือโอนเงินเข้าบัญชีธนาคาร
(กรุณาอ่านรายละเอียดก่อนเลือกช่องทางการชำระเงิน)

ขั้นตอน 3


3.1 ชำระผ่านบัตรเครดิต/เดบิต
กรอกเลขบัตรเครดิต/เดบิต และข้อมูลต่างๆ แล้วคลิกปุ่ม "ชำระเงิน" เมื่อชำระเสร็จเรียบร้อยจะสามารถเข้าเรียนได้ทันที
(กรุณาตรวจสอบยอดก่อนดำเนินการชำระเงิน)

3.2 ชำระผ่าน Internet Banking
เลือกธนาคารที่คุณเป็นสมาชิก Internet Banking แล้วคลิกปุ่ม "ชำระเงินผ่าน Internet Banking"
ระบบจะนำคุณไปยังเว็บ Internet Banking ของธนาคาร เมื่อชำระเสร็จเรียบร้อยจะสามารถเข้าเรียนได้ทันที

3.3 ชำระผ่านการโอนเงินเข้าบัญชีธนาคาร
คุณสามารถโอนเงินเข้าบัญชีธนาคารบริษัทคอร์สสแควร์จำกัดด้วยเลขที่บัญชีที่ปรากฏบนหน้าจอ หรือโอนเงินผ่านระบบพร้อมเพย์ (PromptPay)
เมื่อโอนเงินแล้ว คุณสามารถแจ้งการโอนเงินที่หน้า แจ้งโอนเงิน หรือแจ้งผ่าน Line: @coursesquare

รีวิวคอร์สจากผู้เรียน


    เจ๋งมากครับ
    ทัศ****************ุดม

    สุดยอดคอร์สแห่งปี เรียนรู้สึกดี อยากจะเรียนอีกหลายๆรอบเลยฮะะ
    Adi***************wat
    เจ๋งมากครับ
    ทัศ****************ุดม

    สุดยอดคอร์สแห่งปี เรียนรู้สึกดี อยากจะเรียนอีกหลายๆรอบเลยฮะะ
    Adi***************wat

ยังไม่มีรีวิวค่ะ

ยังไม่มีรีวิวค่ะ

ยังไม่มีรีวิวค่ะ

ยังไม่มีรีวิวค่ะ

เกี่ยวกับคอร์สนี้
เนื้อหาคอร์สทั้งหมด 1 ชั่วโมง 45 นาที
10 วิดีโอ
เรียนคอร์สนี้ได้ 365 วัน
เกี่ยวกับผู้สอน
ทัพพ์วริศ ชิณศิริรัตน์กุล
Cloud Tutorial

ผู้ก่อตั้ง เว็บไซต์ cloud-tutorial.com เพื่อเป็นแหล่งสอนน้องๆนักเรียน นักศึกษา หรือผู้ที่สนใจในการออกแบบพัฒนาเว็บไซต์ โดยการสอนผ่านรูปแบบ วิดีโอ ฟรี โดยเนื้อหาส่วนมากจะเป็นการสอนด้วยเครื่องมือใหม่ๆ ซึ่งนิยมในต่างประเทศแต่ในไทยยังไม่แพร่หลาย เพื่อให้คนไทยได้รู้จักคุ้นเคยและใช้ในการทำงานจริง