เรียน Frontend Development
เรียน Frontend Development — การพัฒนา frontend ตั้งแต่ HTML ถึง React พร้อมดูตัวอย่างแบบสด
เรียน Frontend Development คือแอปฟรีบน iOS และ Android สำหรับผู้เริ่มต้น นักออกแบบ และผู้ที่กำลังเปลี่ยนสายอาชีพและอยากเป็นนักพัฒนาเว็บ HTML, CSS และ JavaScript แสดงอยู่เคียงข้างกันใน เครื่องมือแก้ไขแบบสด และหน้าที่อยู่ด้านล่างจะอัปเดตไปพร้อมกับทุกครั้งที่คุณพิมพ์ 41 คอร์สและ 163 บทเรียนสั้น ๆ จะพาคุณตั้งแต่แท็กแรก ผ่านการจัดวางแบบ Responsive และ TypeScript ไปจนถึง React และ Vue พร้อมโปรเจกต์แบบมีคำแนะนำ 20 โปรเจกต์ ภารกิจแก้บั๊ก และ พี่เลี้ยง AI สำหรับบั๊กที่คุณหาไม่เจอ
- ราคา
- ฟรี อัปเกรดเป็น Pro ได้
- แพลตฟอร์ม
- iOS และ Android
- ภาษา
- 22
- การจัดระดับอายุ
- 4+
- ต้องใช้
- iOS 15.1 ขึ้นไป
เปลี่ยนเพียงบรรทัดเดียว แล้วดูหน้าที่เปลี่ยนไป
เครื่องมือแก้ไขจะแสดงแผง HTML, CSS และ JavaScript ไว้ข้างกัน พร้อมตัวอย่างแบบสดด้านล่าง คุณจึงเรียนรู้มาร์กอัป การตกแต่ง และพฤติกรรมไปพร้อมกันในหน้าเดียว แทนที่จะแยกเรียนเป็นสามหัวข้อ
คืออะไร
เรียน Frontend Development คือแอปฟรีบน iOS และ Android ที่สอนการพัฒนา frontend ซึ่งเป็นส่วนของเว็บไซต์ที่ผู้คนมองเห็นและโต้ตอบได้ โดยใช้เครื่องมือแก้ไข HTML, CSS และ JavaScript แบบสดบนโทรศัพท์ แอปมี 41 คอร์สและ 163 บทเรียน ไล่ระดับตั้งแต่ผู้เริ่มต้นไปจนถึงระดับ senior ครอบคลุมพื้นฐานเว็บ การจัดวางแบบ Responsive, JavaScript และ DOM, TypeScript, React, Vue, การทดสอบ การเข้าถึง และประสิทธิภาพ พร้อมเพิ่มโปรเจกต์แบบมีคำแนะนำ ภารกิจแก้บั๊ก คำถามสัมภาษณ์ และพี่เลี้ยง AI
ภายในแอป
หน้าตาเป็นอย่างไร
คอร์ส
หลักสูตร frontend ครอบคลุมอะไรบ้าง
มี 41 หลักสูตรและ 163 บทเรียน นำมาจากรายการหลักสูตรของแอปเอง ตั้งแต่แท็ก HTML แรก ไปจนถึงสถาปัตยกรรม frontend และงานวิศวกรรมระดับ senior
เว็บและพื้นฐานสามประการ
ยินดีต้อนรับสู่ Frontend Development, How the Web Works, HTML Fundamentals, CSS Fundamentals และ JavaScript Essentials
เลย์เอาต์และ Responsive Design
Responsive Design Foundations, HTML Forms and Semantic Markup, CSS Layout Mastery และ CSS Variables, Transitions and Animations
JavaScript ในเบราว์เซอร์
The DOM and Browser APIs, Arrays, Objects and ES6+, Async Programming และ JavaScript Modules and Build Tools
เวิร์กโฟลว์และเครื่องมือ
Developer Tools and Workflow, Git and Collaboration Workflow และ Modern Frontend Tooling
TypeScript
TypeScript Introduction, Types and Interfaces Deep Dive และ Advanced TypeScript for Frontend
React และ Vue
React Fundamentals, useEffect and Data Fetching, Advanced Hooks and Patterns จากนั้นต่อด้วย Vue 3 Fundamentals, the Composition API และ Vue Advanced Patterns
ข้อมูล การเรนเดอร์ และการทำงานแบบเรียลไทม์
State Management, API Integration and REST, Server-Side Rendering with Next.js and Nuxt 3, Progressive Web Apps และ WebSockets and Real-time Frontend
คุณภาพและสถาปัตยกรรม
Accessibility, Frontend Testing, Web Performance Optimization, Frontend Security, CSS Architecture, Design Systems, Frontend CI/CD และ Senior Frontend Engineering
ทำงานอย่างไร
เรียนรู้ไปกับแอปอย่างไร
ลำดับของแอปสอดคล้องกับลำดับของการฝึกฝน: สร้างหน้าขึ้นมาก่อน จากนั้นทำให้หน้านั้นโต้ตอบได้ แล้วจึงเรียนรู้เครื่องมือที่ช่วยขยายโปรเจกต์
เริ่มด้วยคอร์สแรกที่ให้เรียนฟรี
Welcome to Frontend Development คือจุดเริ่มต้นของเส้นทางนี้ และเครื่องมือแก้ไขแบบสดก็ใช้งานได้ฟรีตั้งแต่เริ่มต้น แต่ละบทใช้เวลาอธิบายเพียงไม่กี่นาที ตามด้วยสิ่งให้คุณแก้ไขและรัน
แก้ไขแผงแล้วอ่านตัวอย่าง
เปลี่ยน HTML, CSS หรือ JavaScript แล้วตัวอย่างด้านล่างจะเปลี่ยนตามทันที โปรเจกต์ใหม่เริ่มต้นได้จากเทมเพลต HTML, React, Vue, Angular, Node หรือ TypeScript
สร้างโปรเจกต์และแก้บั๊กจริง
โปรเจกต์แบบมีคำแนะนำ 20 โปรเจกต์จะพาคุณสร้างหน้าเว็บสูตรอาหาร ฟอร์มติดต่อ กริดการ์ด แถบนำทาง และตารางข้อมูลทีละขั้น ขณะที่ภารกิจแก้บั๊ก 15 ภารกิจจะมอบหน้าที่มีปัญหาให้คุณซ่อมแซม
มีอะไรอยู่ข้างใน
สิ่งที่มาพร้อมแอป
41
คอร์ส ตั้งแต่ระดับผู้เริ่มต้นถึง senior
163 บทเรียน ไล่ระดับจาก A1 ถึง C2 ตั้งแต่วิธีการทำงานของเว็บและพื้นฐาน HTML ไปจนถึง TypeScript, React, Vue 3, การจัดการ state, การเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย Next.js และ Nuxt 3 และ progressive web apps
แบบสด
เครื่องมือแก้ไขพร้อมตัวอย่างทันที
แผง HTML, CSS และ JavaScript พร้อมตัวอย่างด้านล่าง การเปลี่ยนแปลงจึงแสดงผลทันที เริ่มโปรเจกต์ใหม่จากเทมเพลต framework ได้หลายแบบ
15
ภารกิจแก้บั๊ก
ภารกิจที่สร้างจากปัญหา frontend จริง: เลย์เอาต์ที่พังเมื่อความกว้าง 375 pixels รูปภาพที่ทำให้หน้าเว็บช้าลง ฟอร์มที่ไม่มีใครเข้าถึงได้ด้วยแป้นพิมพ์ memory leak ในคอมโพเนนต์ และการทดสอบที่ผ่านในเครื่องแต่ไม่ผ่านใน CI
20
โปรเจกต์แบบมีคำแนะนำ
โปรเจกต์ขนาดเล็กที่อธิบายทีละขั้น เช่น หน้าเว็บสูตรอาหาร ฟอร์มติดต่อ กริดการ์ด แถบนำทาง และตารางข้อมูล
AI
พี่เลี้ยง AI และสนามทดลอง
ถามเกี่ยวกับข้อผิดพลาด บทเรียน หรือโค้ดของคุณเอง หรืออธิบายหน้าเว็บในสนามทดลอง AI แล้วดูโค้ดถูกเขียนขึ้น ผู้ใช้ฟรีจะได้รับคำถาม AI สามคำถามต่อวัน
50
คำถามสัมภาษณ์พร้อมคำตอบ
คำถามสัมภาษณ์สำหรับนักพัฒนา frontend และเว็บจำนวน 50 ข้อพร้อมคำตอบ รวมทั้งชีตสรุปไวยากรณ์และแพตเทิร์น 83 รายการ และคลังตัวอย่างสั้น ๆ ที่คุณเปิดและแก้ไขได้
ที่มา
นักพัฒนา frontend เรียนรู้อะไรจริง ๆ และควรเรียนตามลำดับอย่างไร
นักพัฒนา frontend สร้างสิ่งที่ทำงานอยู่ในเบราว์เซอร์ ได้แก่ โครงสร้างของหน้าเว็บ รูปลักษณ์บนหน้าจอทุกขนาด และการตอบสนองเมื่อมีคนคลิก พิมพ์ หรือเลื่อน ลำดับที่เหมาะสมคือเริ่มจากโครงสร้าง (HTML) จากนั้นจึงเป็นการนำเสนอ (CSS) แล้วจึงเป็นพฤติกรรม (JavaScript) และหลังจากนั้นค่อยเรียนรู้เครื่องมือสำหรับจัดการโปรเจกต์ขนาดใหญ่ขึ้น ได้แก่ TypeScript, framework อย่าง React หรือ Vue, การทดสอบ และขั้นตอน build การข้ามไปเรียน framework ก่อนพื้นฐานทั้งสามอย่างเป็นเหตุผลที่พบบ่อยที่สุดที่ทำให้ผู้เริ่มต้นติดขัด เพราะ framework ส่วนใหญ่เพียงซ่อน JavaScript และ DOM แบบพื้นฐานไว้เบื้องหลังไวยากรณ์ของตัวเอง
HTML เชิงความหมายความหมายต้องมาก่อนรูปลักษณ์
การเลือกใช้หัวข้อ รายการ ป้ายกำกับฟอร์ม หรือปุ่มตามความหมายของเนื้อหา แทนที่จะเลือกตามรูปลักษณ์ที่ต้องการ ช่วยให้โปรแกรมอ่านหน้าจอ เสิร์ชเอนจิน และแป้นพิมพ์มีสิ่งที่นำไปใช้งานได้ นี่ยังเป็นวิธีเพิ่มการเข้าถึงที่คุ้มค่าและง่ายที่สุดสำหรับทุกหน้า
การจัดวางแบบ Responsiveหน้าเดียว รองรับทุกหน้าจอ
Flexbox, grid และ media queries ช่วยให้เลย์เอาต์เดียวปรับเปลี่ยนตัวเองได้ตั้งแต่โทรศัพท์หน้าจอแคบไปจนถึงจอมอนิเตอร์ขนาดใหญ่ การทดสอบด้วยความกว้างเล็ก ๆ เช่น 375 pixels ตั้งแต่เนิ่น ๆ ช่วยจับบั๊กของเลย์เอาต์ที่แก้ทีหลังได้ยาก
DOMหน้าเว็บในฐานะอ็อบเจ็กต์แบบสด
เบราว์เซอร์จะแปลง HTML ให้เป็นต้นไม้ของอ็อบเจ็กต์ที่ JavaScript อ่านและเปลี่ยนแปลงได้ ท้ายที่สุดแล้วทุก framework ก็คือวิธีอำนวยความสะดวกในการอัปเดตต้นไม้นี้ ดังนั้นการเข้าใจเรื่องนี้จึงช่วยให้ทำความเข้าใจ React และ Vue ได้ง่ายขึ้นมาก
Core Web Vitals และประสิทธิภาพความเร็วที่ผู้ใช้สัมผัสได้
หน้าที่โหลดรูปภาพขนาดใหญ่ซึ่งไม่ได้ปรับให้เหมาะสมช้า หรือมีการขยับระหว่างโหลด จะให้ความรู้สึกช้าแม้โค้ดจะถูกต้องก็ตาม ประสิทธิภาพเป็นทักษะที่จะเห็นความสำคัญได้ก็ต่อเมื่อได้ทำงานกับหน้าจริงและรูปภาพจริง
เหมาะกับคุณไหม
เหมาะกับใคร — และไม่เหมาะกับใคร
เหมาะกับคุณหากคุณ
- ต้องการเป็นนักพัฒนาเว็บและกำลังเริ่มต้นจากศูนย์
- เป็นนักออกแบบที่ต้องการสร้างหน้าเว็บตามที่คุณออกแบบ
- พอรู้ HTML และ CSS อยู่บ้าง และต้องการต่อยอดด้วย JavaScript, TypeScript, React หรือ Vue
- กำลังเตรียมตัวสำหรับการสัมภาษณ์งาน frontend ครั้งแรก และต้องการคำถามพร้อมคำตอบ
- ชอบดูหน้าเว็บเปลี่ยนแปลงขณะพิมพ์ มากกว่าการอ่านคำอธิบายยาว ๆ
ไม่ใช่เครื่องมือที่เหมาะ หากคุณ
- ต้องการสร้างและ deploy เว็บไซต์ขนาดใหญ่ที่มีหลายไฟล์ ซึ่งยังจำเป็นต้องใช้แล็ปท็อปและเอดิเตอร์แบบเต็มรูปแบบ
- คาดหวังให้ทุกอย่างฟรี: หลักสูตรแรก โปรเจกต์แรก ภารกิจ debugging สองภารกิจ และเอดิเตอร์ฟรี ส่วน Pro จะปลดล็อกเนื้อหาที่เหลือ
- ต้องการหลักสูตร backend หรือฐานข้อมูล เพราะเส้นทางนี้เน้นสิ่งที่ทำงานอยู่ในเบราว์เซอร์
- ทำงานเป็น senior frontend engineer อยู่แล้ว และต้องการแหล่งอ้างอิงมากกว่าบทเรียน
คำถาม
คำถามที่พบบ่อย
frontend development คืออะไร
frontend development คือการสร้างส่วนของเว็บไซต์หรือเว็บแอปที่ทำงานอยู่ในเบราว์เซอร์ ได้แก่ โครงสร้างด้วย HTML รูปลักษณ์ด้วย CSS และพฤติกรรมการทำงานด้วย JavaScript รวมถึงเฟรมเวิร์กและเครื่องมือที่สร้างต่อยอดจากสิ่งเหล่านี้ เรียน Frontend Development สอนสแต็กดังกล่าวตามลำดับ พร้อมพรีวิวแบบเรียลไทม์เพื่อให้เห็นผลลัพธ์ของทุกการเปลี่ยนแปลงได้ทันที
ฉันเรียน frontend development บนโทรศัพท์ได้ไหม
คุณสามารถเรียนรู้แนวคิดและสร้างหน้าเว็บแรก ๆ บนโทรศัพท์ได้เป็นอย่างดี เพราะ HTML, CSS และ JavaScript มีขนาดเล็กพอให้แก้ไขได้ในช่วงเวลาสั้น ๆ และพรีวิวจะแสดงผลลัพธ์ทันที แอปจะแสดงแผงทั้งสามพร้อมพรีวิวแบบเรียลไทม์บนหน้าจอ แล็ปท็อปจะใช้งานสะดวกกว่าเมื่อคุณดูแลโปรเจกต์ขนาดใหญ่ที่มีหลายไฟล์ แต่ไม่จำเป็นสำหรับการเริ่มต้น
เหมาะกับใคร และมือใหม่ที่เริ่มจากศูนย์ควรเริ่มตรงไหน
เหมาะสำหรับมือใหม่ที่เริ่มจากศูนย์ นักออกแบบที่ต้องการสร้างสิ่งที่ตนเองออกแบบ นักพัฒนาที่พอรู้ HTML และ CSS อยู่บ้าง และผู้ที่กำลังเปลี่ยนสายงานเพื่อเตรียมตัวสำหรับงาน frontend แรก เริ่มจากการทำความเข้าใจว่าเว็บทำงานอย่างไรและเรียน HTML พื้นฐาน จากนั้นเรียน CSS แล้วจึงต่อด้วย JavaScript เรียน Frontend Development เรียงลำดับตามนี้ โดยเริ่มจากหลักสูตรฟรี Welcome to Frontend Development
แอปนี้สอน React และ Vue ไหม
สอน หลังจาก HTML, CSS, JavaScript และ TypeScript แล้ว แอปมีหลักสูตร React เกี่ยวกับพื้นฐาน useEffect และการดึงข้อมูล รวมถึง hooks และ patterns ขั้นสูง และมีหลักสูตร Vue 3 เกี่ยวกับพื้นฐาน Composition API และ patterns ขั้นสูง นอกจากนี้ยังครอบคลุม state management และ server-side rendering ด้วย Next.js และ Nuxt 3
ฉันจำเป็นต้องเรียน TypeScript ไหม
ไม่จำเป็นสำหรับการสร้างหน้าเว็บแรก แต่ codebase ของ React และ Vue ระดับมืออาชีพส่วนใหญ่ใช้ TypeScript ดังนั้นจึงควรเรียนหลังจากเข้าใจพื้นฐาน JavaScript แล้ว แอปจะแนะนำ TypeScript ผ่านหลักสูตร first-types หลักสูตรเชิงลึกเกี่ยวกับ types และ interfaces และหลักสูตรขั้นสูงสำหรับ frontend patterns
ภารกิจ debugging ทำงานอย่างไร
ภารกิจ debugging ทั้ง 15 ภารกิจจะให้คุณแก้หน้าเว็บหรือ component ที่เสีย ซึ่งจำลองปัญหา frontend ที่เกิดขึ้นจริง เช่น เลย์เอาต์พังที่ 375 pixels ฟอร์มที่ใช้งานด้วยคีย์บอร์ดไม่ได้ memory leak ใน component หรือ test ที่ล้มเหลวเฉพาะใน CI จากนั้นคุณต้องแก้ไขให้สำเร็จ โดยมีสองภารกิจที่ใช้ฟรี
แอปช่วยเตรียมตัวสำหรับการสัมภาษณ์งาน frontend developer ได้ไหม
ช่วยได้ในด้านความรู้ เรียน Frontend Development มีคำถามสัมภาษณ์ 50 ข้อพร้อมคำตอบ cheat sheet 83 รายการเกี่ยวกับ syntax และ patterns รวมถึงหลักสูตรด้าน testing, performance, accessibility และ architecture ซึ่งเป็นหัวข้อที่การสัมภาษณ์มักถามต่อจากพื้นฐาน แอปนี้ไม่สามารถทดแทนการสร้าง portfolio จากโปรเจกต์ของคุณเองได้
ต้องใช้เวลานานแค่ไหนจึงจะเรียน frontend development ได้
ผู้เริ่มต้นที่ฝึกฝนเล็กน้อยทุกวันมักสร้างหน้าเว็บ responsive แบบง่าย ๆ ได้ภายในไม่กี่สัปดาห์ ส่วนการใช้ JavaScript ได้อย่างมั่นใจและการเรียนรู้เฟรมเวิร์กจะใช้เวลาหลายเดือน แอปแบ่งเส้นทางการเรียนรู้ออกเป็นบทเรียนสั้น ๆ บทละไม่กี่นาที พร้อม streaks และการแจ้งเตือน เพื่อให้ความก้าวหน้าเกิดจากการเรียนสั้น ๆ อย่างสม่ำเสมอ แทนที่จะเรียนรวดยาวในครั้งเดียว
เรียน Frontend Development ฟรีไหม
ดาวน์โหลดได้ฟรีบน App Store และ Google Play หลักสูตรแรก โปรเจกต์แบบมีคำแนะนำแรก ภารกิจ debugging สองภารกิจ และ code editor ใช้งานได้ฟรี พร้อมคำถาม AI mentor สามคำถามต่อวัน ส่วนเวอร์ชันฟรีจะแสดงโฆษณา Pro จะปลดล็อกทุกหลักสูตร โปรเจกต์และภารกิจทั้งหมด การสอบใบประกาศนียบัตร และ AI แบบไม่จำกัด พร้อมนำโฆษณาออก
รองรับแพลตฟอร์มและภาษาใดบ้าง และแอปบน App Store เป็นแอปเดียวกันไหม
เรียน Frontend Development ใช้งานบน iOS ผ่าน App Store และบน Android ผ่าน Google Play รองรับ 22 ภาษา และมีการจัดระดับอายุ 4+ รายการบน App Store ใช้ชื่อว่า Learn Frontend Development ส่วนรายการบน Google Play ใช้ชื่อว่า เรียน Frontend Development แต่เป็นแอปเดียวกัน เมื่อสอบปลายหลักสูตรผ่าน จะได้รับใบประกาศนียบัตรการเรียนจบ
เริ่มต้นใช้งาน
สร้างหน้าเว็บแรกของคุณวันนี้
เริ่มต้นใช้งานได้ฟรีบน iOS และ Android ใน 22 ภาษา
เพิ่มเติมจาก CoddyKit
ใช้งานได้บน iOS