NakornCode นครโค้ด
🏠 หน้าแรก 📰 บทความ 👨‍💻 เกี่ยวกับนครโค้ด
รายละเอียดคอร์สเรียนทั้งหมด
  • คอร์สเรียนทั้งหมด
  • Bootstrap 5 เพื่อการสร้างเว็บที่ง่ายกว่าเดิม

คอร์สเรียน Bootstrap 5 เพื่อการสร้างเว็บที่ง่ายกว่าเดิม

คำอธิบายคอร์สเรียน

คอร์สเรียนนี้จะเป็นส่วนเสริม สำหรับการใช้ CSS Framework ชื่อดังอย่าง Bootstrap สำหรับการสร้างหน้าเว็บที่สวยงามอย่างง่าย และทำความเข้าใจกับระบบต่างๆ ที่ทำให้เราจะสามารถใช้งาน CSS Framework อื่นๆได้อีกด้วย

สิ่งที่คุณจะได้เรียนรู้

  • มีชีทเป็นกระดาษสูตรโกง ช่วยสรุปหลังผู้เรียน เรียนจบไปแล้วแต่อาจจะลืมรูปแบบคำสั่งต่างๆได้
  • มีแบบทดสอบ สำหรับการรับใบประกาศนียบัตรที่ออกให้โดยทาง SkillLane
  • ได้เห็นวิธีการปฎิบัติจริง ที่ทำให้รู้จักคีย์ลัดต่างๆ และเทคนิคเสริมมากมายที่จะทำให้เราทำงานได้เร็วและง่ายขึ้น
  • สอนโดยไม่เน้นสไลด์ สอนโดยเขียนให้ดูจริง และเห็นผลลัพธ์จริง พร้อมเล่าเรื่องเสริมตลอดเวลาการเรียนการสอน
  • ได้ความรู้วิธีการใช้ CSS เพิ่มเติม ร่วมกับ Bootstrap 5 และสามารถนำความรู้ไปต่อยอดกับการเรียนรู้ CSS Framework อื่นๆได้ดีกว่าเดิม
  • ดูตัวอย่างที่จะใช้กับโปรเจคจริง โดยการเชื่อมต่อระบบผ่าน RESTful API ที่มีอยู่
  • ได้ดูแนวทางปฏิบัติและวิธีการใช้งานของ Sass ที่จะทำให้การเขียน CSS มีคุณสมบัติเพิ่มเติมมากมาย

ประโยชน์ที่คุณจะได้รับ

  • Bootstrap เป็น CSS Framework ที่ยอดนิยมที่สุดสำหรับผู้เริ่มต้น ทำให้เรียนรู้ก่อนที่จะเริ่มใช้ตัวอื่นๆได้ดีกว่า และสามารถนำไปใช้งานจริงได้ดีมาก
  • ช่วยลดเวลาการสร้างเว็บไซต์ที่สวยงาม โดยการใช้เครื่องมือที่ Bootstrap มีให้เรา หรือเลือกดูตาม Template อื่นๆเพิ่มเติมได้
  • ทำให้เราสามารถเลือก CSS Framework อื่นๆได้ดีกว่าเดิม ในกรณีที่เราไม่ชื่นชอบสไตล์ของ Bootstrap ที่มีอยู่ และใช้พื้นฐานเดียวกันในการใช้งานและเรียนรู้ตัวอื่นๆ
  • เป็นจุดเริ่มต้นเสริมความรู้ที่จะทำให้เรา Custom CSS เป็นของเราเองได้ดี

ทักษะที่ผู้เรียนจะต้องมีก่อนเรียนคอร์สเรียนนี้

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

เหมาะสำหรับ

  • นักเรียนระดับประถมปลาย
  • นักเรียนระดับมัธยม
  • นักศึกษาที่กำลังศึกษาในสายงานที่เกี่ยวข้องกับการพัฒนาเว็บ
  • ผู้ที่สนใจในสายงาน Web Development
  • ผู้ที่สนใจในสายงาน Front-end Web Development
  • ผู้ที่สนใจในสายงาน Full-stack Web Development
  • ผู้ที่สนใจในสายงาน UX/UI Design สำหรับพื้นฐานการออกแบบหน้าเว็บ

เนื้อหาที่มีทั้งหมด

บทนำ

  • แนะนำคอร์สเรียน Bootstrap 5

    09:45 นาที
  • ดาวน์โหลดสูตรโกง (Cheatsheet)

    02:23 นาที

บทที่ 1 เตรียมใช้งาน Bootstrap 5

  • 1.1 Emmet - การใช้เครื่องมือสร้างโค้ด HTML อย่างรวดเร็ว

    09:57 นาที
  • 1.2 Installation - ติดตั้ง Bootstrap 5

    15:10 นาที
  • 1.3 VSCode: HTML CSS Support - ติดตั้งส่วนเสริมสำหรับช่วยเหลือการใช้ CSS Framework

    02:20 นาที

บทที่ 2 การจัดวางตำแหน่ง (Layouts) และ Utility Class ต่าง ๆ

  • 2.1 Color - ระบบสี

    07:24 นาที
  • 2.2 Sizing - การกำหนดขนาด

    10:18 นาที
  • 2.3 Container & Breakpoint - การจัดตำแหน่งเนื้อหาร่วมกับขนาดหน้าจอบนอุปกรณ์ต่าง ๆ

    08:52 นาที
  • 2.4 Grid - การจัดตำแหน่งเนื้อหาแบบตาราง

    24:36 นาที
  • 2.5 Flex - การจัดตำแหน่งด้วย Flexbox

    10:30 นาที
  • 2.6 Stack - การจัดตำแหน่งแบบเรียงต่อกัน

    02:24 นาที
  • 2.7 Spacing - การกำหนดระยะห่างหรือขยายขนาด

    06:39 นาที
  • 2.8 Border - การทำขอบ

    04:58 นาที
  • 2.9 Typography - ข้อความทั่วไป

    15:13 นาที
  • 2.10 Image - รูปภาพ

    05:45 นาที
  • 2.11 Figure - การจัดวางคำอธิบาย

    04:08 นาที
  • 2.12 Table - ตาราง

    09:22 นาที
  • 2.13 Pagination - รายการหน้าต่าง ๆ

    04:58 นาที
  • 2.14 Display - การแสดงผล

    07:45 นาที
  • 2.15 Float - เนื้อหาลอยตัว

    05:12 นาที
  • 2.16 Position - กำหนดตำแหน่ง

    16:15 นาที
  • 2.17 Shadow - การสร้างเงา

    01:55 นาที
  • 2.18 Interaction - การปฏิสัมพันธ์กับอุปกรณ์ Input

    04:13 นาที
  • 2.19 Stretched Link - การสร้างลิงก์แบบครอบคลุม

    07:16 นาที

บทที่ 3 ส่วนประกอบเพิ่มเติม (Components)

  • 3.1 Button - ปุ่ม

    15:58 นาที
  • 3.2 Badge - แท็ก

    05:17 นาที
  • 3.3 Breadcrumb - แถบนำทางย่อย

    08:44 นาที
  • 3.4 Alert - การแจ้งเตือน

    24:31 นาที
  • 3.5 Toast - การแจ้งเตือนแบบลอย

    19:24 นาที
  • 3.6 Card - การ์ด

    11:43 นาที
  • 3.7 Collapse - ซ่อน/ขยาย

    22:08 นาที
  • 3.8 Accordion - รายการซ่อน/ขยาย

    06:10 นาที
  • 3.9 Dropdown - กล่องเครื่้องมือเพิ่มเติม

    08:20 นาที
  • 3.10 Tooltip & Popover - ข้อความช่วยเหลือพิเศษ

    14:18 นาที
  • 3.11 Carousel - ภาพสไลด์

    06:52 นาที
  • 3.12 Modal - กล่องข้อความ

    25:38 นาที
  • 3.13 List Group - รายการแบบกลุ่ม

    20:15 นาที
  • 3.14 Nav & Tab - แถบนำทางและแท็บ

    06:34 นาที
  • 3.15 Navbar - แถบนำทางหลัก

    15:26 นาที
  • 3.16 Offcanvas - กล่องข้างจอ

    06:43 นาที
  • 3.17 Scrollspy - การติดตาม Scroll

    14:19 นาที
  • 3.18 Placeholder - จำลองข้อมูลชั่วคราว

    24:59 นาที
  • 3.19 Progress & Spinner - สถานะการโหลด

    09:33 นาที

บทที่ 4 แบบฟอร์ม

  • 4.1 Form Control - Input หลัก

    08:22 นาที
  • 4.2 Input Group - กลุ่มของ Input

    02:31 นาที
  • 4.3 Check & Radio - การทำเครื่องหมาย

    06:22 นาที
  • 4.4 Select - การเลือกตัวเลือก

    01:48 นาที
  • 4.5 Range - การกำหนดขนาด

    06:45 นาที
  • 4.6 Validation - การตรวจสอบความถูกต้องข้อมูล

    46:59 นาที

บทที่ 5 เนื้อหาเพิ่มเติม

  • 5.1 Sass - การปรับแต่ง Bootstrap ให้เป็นของเราเอง

    39:59 นาที
  • 5.2 Bootstrap Icons - ไอคอนเสริม

    08:14 นาที
  • 5.3 Workshop Copycat - คัดลอกโครงสร้างหน้าเว็บ

    53:16 นาที
  • 5.4 Workshop Check Email - ระบบตรวจสอบการใช้งานได้ของอีเมล

    16:36 นาที
  • 5.5 Workshop COVID19 - หน้าเว็บตรวจจำนวนผู้ติดเชื้อโควิด-19

    18:32 นาที
  • 5.6 บทส่งท้าย

    10:34 นาที

รีวิวจากผู้เรียน (ทั้งหมด 7 รีวิว คะแนนเฉลี่ย 5.0)

Panya P.

เหนื่อยแน่

⭐⭐⭐⭐⭐

Suthee S.

⭐⭐⭐⭐⭐

วัชรพล เ.

⭐⭐⭐⭐⭐

พรพิทักษ์ ศ.

⭐⭐⭐⭐⭐

out s.

⭐⭐⭐⭐⭐

นุชิต ห.

⭐⭐⭐⭐⭐

Theeraphat C.

⭐⭐⭐⭐⭐
คลิกเพื่อดูคอร์สเรียนอื่นๆทั้งหมด
คอร์สเรียน Bootstrap 5 เพื่อการสร้างเว็บที่ง่ายกว่าเดิม
จากราคาปกติ 1,290 บาท
ช่วงโปรโมชั่นทุกเดือนคู่ราคา 790 บาท
🛒 คลิกเพื่อสั่งซื้อผ่าน SkillLane
  • จำนวน: 55 วิดีโอ
  • ความยาว: 11 ชั่วโมง 24 นาที
  • ความรู้ที่จะได้: Bootstrap, CSS, JavaScript, Web Form, Sass
ระดับเริ่มต้น เหมาะสำหรับ Front-end Web Developer
รีวิวจากผู้เรียนทั้งหมด 7 คน
คะแนนที่เต็ม 5.0 ได้ 5.0 คะแนน
คะแนนอัปเดตเมื่อวันที่ 13/12/2022

ผู้สอนคอร์สเรียน

นคร สินผดุง Nakorn Sinpadung

นคร สินผดุง
(Nakorn Sinpadung)

โปรแกรมเมอร์มืออาชีพ

  • ปัจจุบันเป็นติวเตอร์ออนไลน์ สอนพัฒนาโปรแกรม
  • ปัจจุบันเป็นพนักงานประจำระดับ Senior Programmer ที่ CareerVisa Digital
  • มีประสบการณ์ทำงานจริงในบริษัทต่างๆมากกว่า 4 ปี
  • มีประสบการณ์สอนผ่านออนไลน์นานกว่า 6 ปี
ดูคอร์สเรียนอื่นๆที่นครโค้ดสอนทั้งหมด
นครโค้ด NakornCode

นครโค้ด สอนเขียนโปรแกรม

สำหรับสายงาน Full-stack Web Developer ใช้ MEVN Stack

  • หน้าหลัก
  • คอร์สเรียนทั้งหมด
  • บทความทั้งหมด
  • เกี่ยวกับนครโค้ด

Copyright © 2023 NakornCode.com All rights reserved.

Online illustrations by Storyset. ติดต่อผ่าน Facebook

คอร์สเรียนสำหรับนักพัฒนาโปรแกรมสายงาน Full-stack Web Developer โดยการใช้ MEVN Stack ทั้งระบบ สอนตั้งแต่ระดับเริ่มต้น ระดับพื้นฐาน จนถึงระดับเชี่ยวชาญ จัดการเรียนการสอนโดย นครโค้ด | คอร์สเรียน คอร์สเรียนออนไลน์ คอร์สเรียนฟรี ขายคอร์สเรียนออนไลน์ เขียนโปรแกรม สร้างโปรแกรม พัฒนาโปรแกรม Certificate มีใบเซอร์ มีใบประกาศ SkillLane ระดับประถม ระดับมัธยม ระดับมหาวิทยาลัย ระดับปริญญาตรี ระดับเริ่มต้น ระดับเชี่ยวชาญ ระดับทำงาน คอร์สเรียนขั้นสูง สอนละเอียด ภาษาไทย ราคาถูก โปรโมชั่น 2023 2566 ภาษา HTML HTML5 CSS CSS3 Python JavaScript JS ES5 ES6 TypeScript TS Node.js Nodejs Express.js Expressjs MongoDB Vue.js Vuejs Vue Vue3 Nuxt.js Nuxtjs Nuxt Nuxt3 Bootstrap Vuetify Tailwind Tailwindcss Git GitHub DevOps CI/CD Docker สายงาน Full-stack Fullstack Front-end Frontend Back-end Backend Web Development Web Developer