Vue 3 + Nuxt 3 + Tailwind CSS สำหรับ Front-end Web Developer
ราคา
ซื้อคอร์สนี้ : 1,145.00 ฿
เรียนได้ทุกที่ทุกเวลา ตลอดชีพ
เนื้อหาทั้งหมด 32 วิดีโอ ความยาวรวมกัน 24 ชั่วโมง 47 นาที
เข้าใจวิธีการใช้งาน Vue 3 อย่างเต็มรูปแบบ สามารถเตรียมใช้งาน Composition API ที่จะทำให้เขียนโค้ดสั้นลงและง่ายกว่าเดิม
เรียนรู้การใช้ Tailwind CSS ร่วมกับ Nuxt 3 เตรียมพร้อมการใช้งาน Ecosystem ที่หลากหลาย
สอนเป็นขั้นตอน พร้อมตัวอย่างประกอบเพื่อความเข้าใจ
เรียนกับนคร สินผดุง ประสบการณ์มากกว่า 5 ปี ในการสอนและทำงานสายงาน Full-stack Web Developer
เกี่ยวกับคอร์สนี้
คำอธิบายคอร์สออนไลน์
สำหรับคอร์สเรียนนี้จะเป็นการสอนสำหรับพัฒนาเว็บไซต์ด้วยการใช้ Vue 3 + Nuxt 3 + Tailwind CSS เข้าด้วยกัน สำหรับสายงาน Front-end Web Developer โดยเฉพาะ มีการสอนสดโดยการเปิดโค้ดและเขียนให้ดูตั้งแต่ต้น พร้อมอธิบายอย่างละเอียดจัดเต็มมากกว่า 30 ชั่วโมง เพื่อทำความเข้าใจตั้งแต่พื้นฐานตลอดจนขั้นสูงในการใช้งาน และทำความรู้จักกับ Ecosystem ต่าง ๆ ที่มี เพื่อทำให้สร้างเว็บได้ง่ายมากกว่าเดิม
ประโยชน์ที่ผู้เรียนจะได้รับ
- มีความเข้าใจวิธีการใช้งาน Vue 3 อย่างเต็มรูปแบบ และเปรียบเทียบเห็นถึงข้อแตกต่างกับ Vue 2 สำหรับผู้พัฒนาที่เคยใช้งานมาก่อน เพื่อเตรียมใช้งาน Composition API ที่จะทำให้เขียนโค้ดสั้นลงและง่ายกว่าเดิม
- ทำความรู้จักกับหัวข้อที่สำคัญไม่ว่าจะเป็น Reactive, Binding, Methods, Event Listener, Compute, Watch, Directive, Lifecycle, UI Component, Props, Event Emitter, Composable
- เรียนรู้วิธีการใช้ร่วมกับ TypeScript พร้อมตัวอย่างมากมาย
- เนื้อหาสำหรับการใช้ Tailwind CSS ร่วมกับ Nuxt 3 และอธิบายเพื่อเตรียมพร้อมการใช้งาน Ecosystem ที่หลากหลาย
- มีตัวอย่างการ Deploy ใช้งานจริงโดยคร่าว ๆ สำหรับ Web Application ผ่าน DigitalOcean ด้วย PM2 + NGINX
ใครควรเรียนคอร์สออนไลน์นี้
- นักเรียน นักศึกษา และบุคคลทั่วไปที่สนใจการพัฒนาโปรแกรม โดยเฉพาะทาง Web Application หรือสายงาน Front-end Web Developer
- ผู้อยู่ในสายงาน Full-stack Web Developer เพื่อให้สามารถสร้างหน้าเว็บได้ง่ายกว่าเดิม อัปสกิลให้เพิ่มมากกว่าเดิม
- ผู้ที่ต้องการสร้าง Application แบบ Cross-platform ไม่ว่าจะเป็น Web Application, Desktop Application และ Mobile Application
ผู้เรียนต้องมีความรู้อะไรมาก่อน
- มีความเข้าใจวิธีการใช้งาน HTML, CSS และ JavaScript ในระดับที่ดี
- สามารถใช้งาน NPM Ecosystem เพื่อการติดตั้งและจัดการ Package ต่าง ๆ ของ JavaScript และ Node.js
ผู้สอน
นคร สินผดุง
ผู้ก่อตั้ง นครโค้ด สอนการพัฒนาโปรแกรม
นครโค้ด สอนเขียนโปรแกรม
ธุรกิจสอนการพัฒนาโปรแกรม สำหรับผู้เริ่มต้นและขั้นสูง
หลักสูตรของคอร์สนี้
| บทนำ | ||
|---|---|---|
แนะนำคอร์สออนไลน์ ดูตัวอย่างฟรี | 12:23 | |
Vue vs React vs Angular vs Svelte - ทำความเข้าใจข้อแตกต่างที่จะเลือกใช้แต่ละ Framework ดูตัวอย่างฟรี | 15:28 | |
Ways of Vue - เส้นทางวิธีการใช้งาน Vue เพื่อสร้าง Application ต่างๆ | 55:30 | |
Vue2 vs Vue3 - เรียนรู้ข้อแตกต่างของทั้งสองเวอร์ชั่น เพื่อป้องกันการใช้งานโค้ดที่เป็นคนละรุ่นกัน | 23:04 | |
| ดาวน์โหลดไฟล์ตัวอย่าง | ||
|---|---|---|
Cheatsheet - รวมสูตรโกงสำหรับการใช้งาน Vue 3 | 0:10 | |
Example - รวมตัวอย่างและเวิร์คช็อปที่มีทั้งหมดในการเรียนการสอน (ผู้เรียนจะต้องใช้คำสั่ง npm install ในการติดตั้งแต่ละโปรเจคด้วยตนเอง เหตุผลเพื่อลดพื้นที่ในการคลายไฟล์) | 0:10 | |
| เนื้อหาหลัก | ||
|---|---|---|
1. Getting Started - วิธีการเตรียมใช้งาน Vue | 22:58 | |
2. Reactives, Binding - การเปลี่ยนข้อมูลตามปฏิกิริยาที่เปลี่ยนไปของข้อมูล และผูกข้อมูลกับ HTML | 45:46 | |
3. Methods, Listening Events - การสร้างกระบวนการ เพื่อที่จะจัดการตามเหตุการณ์ที่เกิดขึ้น | 35:19 | |
4. Directives - การสร้าง v-* ด้วยตนเอง | 22:06 | |
5. Components - การสร้าง UI Components ขึ้นด้วยตนเอง | 1:20:33 | |
6. Lifecycle Hooks - ทำความเข้าใจกับวงจรชีวิตของ Vue 3 | 8:54 | |
7. Methods, Computed, Watch - ทำความเข้าใจข้อแตกต่างของทั้งสามรูปแบบ | 1:03:42 | |
8. Composition, TypeScript - เรียนรู้วิธีการใช้งาน Composition API ของ Vue 3 โดยเฉพาะ และการใช้ร่วมกับ TypeScript | 1:14:22 | |
9. Workshop Typing Test - เวิร์คช็อปสำหรับการทำ Web Application ตัวอย่างเพื่อทบทวนเนื้อหาข้างต้น | 59:41 | |
10. Composables - ระบบใหม่ของ Vue 3 เพื่อแทนที่การใช้ Mixin | 16:49 | |
11. vueuse - Package สำหรับรวบรวม Composable ที่น่าสนใจต่าง ๆ | 6:37 | |
12. Built-in Components - ทำความรู้จักกับ Components ที่ Vue 3 มีให้ใช้ | 18:25 | |
13. Vuetify - ทำความรู้จักกับ CSS Framework ชื่อดังของ Vue | 26:15 | |
14. Tailwind CSS - เรียนรู้วิธีการใช้ Tailwind CSS เพื่อการสร้าง Web Page ที่สวยงามง่าย ๆ ผ่าน Utility Classes ที่มี | 54:48 | |
15. unplugin - เรียนรู้วิธีการใช้งาน unplugin เพื่อทำระบบ Auto-import ของโค้ดเรา | 22:53 | |
16. vue-router - เรียนรู้วิธีการสร้าง Router สำหรับ Multi-page Web Application | 1:03:06 | |
17. vue-i18n - เรียนรู้วิธีการสร้างเว็บหลากหลายภาษาใน Vue 3 | 17:39 | |
18. pinia, vuelidate, vee-validate - กับการใช้วิธีอื่น ๆ เพื่อลด Learning Curve | 1:11:47 | |
19. Data Table - วิธีการสร้าง Data Table ด้วยตนเอง และการระมัดระวังการส่งข้อมูลโดยการแสดงให้น้อยลงผ่าน Pagination | 1:07:01 | |
20. vue-echarts - การแสดงผลข้อมูลแบบ Chart หรือ Visualization | 26:02 | |
21. Nuxt 3 - ทำความรู้จักวิธีการใช้งาน Nuxt 3 และการเตรียมความพร้อมก่อนวันเปิดตัวใช้งานจริง | 1:49:30 | |
22. Online Shopping (Part 1) - สร้างระบบ Shopping Online ตัวอย่าง เพื่อทดลองเชื่อมต่อ Nuxt 3 ร่วมกับ Express.js | 2:06:53 | |
23. Online Shopping (Part 2) - การสร้างหน้าแอดมิน และการเตรียม CRUD ให้กับ API ร่วมกับหน้าบ้าน | 2:18:07 | |
24. Online Shopping (Part 3) - การใช้ useAsyncData ร่วมกับ Axios และการทำระบบตะกร้าสินค้าด้วย State Management | 2:02:06 | |
25. Deploy (DigitalOcean) - วิธีการ Deploy เว็บใช้งานจริงแบบรวบรัด เพื่อการเชื่อมต่อระหว่าง Linux, NGINX และ PM2 | 1:02:58 | |
26. บทส่งท้ายของคอร์สเรียน | 16:25 | |
| Post-Test แบบทดสอบหลังเรียน |
|---|
| แบบทดสอบหลังเรียน |
|---|
