[เล่าประสบการณ์] เรียน Front-end Web Developer กับโค้ชต่างประเทศ หลักสูตร Udacity Nanodegree !!

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

สวัสดีครับ พอดีผมเพิ่งเรียนจบคอร์ส Front-end Web Developer Nanodegree ของทาง Udacity มา เลยนำประสบการณ์การเรียนมาแชร์ไว้นะครับ พร้อมตอบคำถามที่หลายๆ ท่านถามมา

สรุปสั้น ๆ สำหรับมนุษย์ “ยาวไปไม่อ่าน”

• คอร์สเหมาะกับคน 2 ประเภท 1. คนที่ทำทุกอย่างเป็นอยู่แล้ว แต่อยากได้ certificate บางอย่าง 2. คนที่พอทำเป็นอยู่ระดับนึงแต่มีเวลาว่างๆ ทั้งเดือนมาเก็บ
• material หลายๆ อย่างสามารถเข้าถึงได้ตั้งแต่ยังไม่สมัครเรียน ควรดูให้หมดก่อนค่อยไปสมัคร จะประหยัดเงินไปได้เยอะ สามารถจบคอร์สด้วยเงิน 3,500 บาทได้

มาดูรายละเอียดกันครับ

Nanodegree คืออะไร

Udacity เป็นเว็บ online IT short-course เว็บนึงครับ เว็บค่อนข้างดัง และเหมือน Google จะหนุน ๆ อยู่เพราะชอบมาเปิดคอร์สสอนในนี้ Nanodegree เป็นวิธีเรียก certificate ของทาง Udacity ครับ โดย ณ ปัจจุบัน Udacity มี Nanodegree ทั้งหมด 8 track คือ

• Intro to Programming
• Front-end Web Developer
• Fullstack Developer
• Android Developer
• intro to iOS Development
• iOS Developer
• Data Analyst
• Tech Entrepreneur

โดยแต่ละคอร์สจะมีค่าเรียนเดือนละ $200 (แอบแพง) เราสามารถเรียนไปได้เรื่อยๆ ไม่ต้องรีบจบ โดยปกติใช้เวลา 6-12 เดือน (แต่เอาจริงๆผมว่าเดือนเดียวก็จบได้นะ) แต่ถ้าไม่จบเราก็ต้องเสียเงินเดือนละ $200 ไปเรื่อยๆ ในขณะที่ถ้าเราสามารถเรียนจบได้ภายใน 12 เดือน เราจะได้ส่วนลด 50% ของค่าเรียนที่เราจ่ายไป เช่น จ่ายไป $400 ก็ได้คืน $200 ลอง ดูรายละเอียดได้ที่นี่ครับ

สมัครไปแล้วจะได้อะไรบ้าง

โครงสร้างหลักๆ ของหลักสูตรมี 3 อย่างครับ

1. Project – อันนี้เราต้องทำ project ตามที่เขาให้ requirement มาแล้วส่งให้เขาตรวจ คอร์สของผมมี 6 project และ 1 optional project (เดาว่าในอนาคตนี่น่าจะเป็น project บังคับ)
2. Career tasks – งานที่เกี่ยวข้องกับ career development อันนี้เป็น optional ทั้งหมด
3. Teacher & Community – ส่วนนี้คือส่วนที่คอยช่วยเราในการเรียนทั้งหมด

อันนี้เป็นหน้า dashboard ตอนที่เข้าไป

มาดู 2 ส่วนหลังก่อน เพราะส่วนของ project จะยาวนะครับ ขอแยกเป็นหัวข้อของตนเองเลย

Career tasks

คือเขาจะมีทีมให้คำแนะนำเราเรื่องการสร้าง resume การทำ github, linkedin profile อะไรพวกนี้ครับ พร้อมให้คำแนะนำเรื่องการสมัครงาน เนื่องจากผมไม่ได้กะไปสมัครงานที่ไหน ส่วนนี้ผมเลยไม่ได้ทำอะไรเลยครับ เลยบอกไม่ได้ว่าดีหรือไม่ดี แต่จะพาดูนะครับว่าเขาให้ทำอะไรบ้าง ยกตัวอย่าง เรื่องการทำ resume นะครับ เขาก็จะให้ checklist มาว่า resume เราควรมีอะไรบ้าง เราก็ไปทำมาตามนั้น แล้วก็ส่งให้ทีมเขาคอมเมนท์ว่าเราเขียนมาโอหรือเปล่า

โดยสิ่งที่เป็น Career tasks ทั้งหมด มีดังต่อไปนี้

• ให้คำแนะนำเรื่องการสร้าง Resume
• ให้คำแนะนำเรื่องการสร้าง Linkedin Profile
• ให้คำแนะนำเรื่องการสร้าง Github Profile
• ให้คำแนะนำเรื่องการสัมภาษณ์งาน

ส่วนที่ไม่เกี่ยวกับ task ก็คือ ในบางเมือง Udacity จะมี connection บางอย่างกับบริษัท IT ถ้าเรา join program นี้ของเขา เขาก็จะช่วยเราหางาน

Teacher & Community

ส่วนนี้ประกอบด้วย 3 ส่วนหลักๆ ครับ

1. Discussion Forum

• เป็น forum กลางให้ทุกคนเข้ามาสอบถามปัญหาในการทำโปรเจคท์ โดยจะแบ่งห้องย่อยๆ ตามคอร์สนั้นๆ หรือใครอยากเอา project ที่ตัวเองทำมาโชว์ก็ได้ จะมีพวกบ้าพลังแบบนี้เสมอ แบบทำมาเกิน requirement ไปไกลมาก (ซึ่งจริงๆ เป็นการเรียนที่ดีนะครับ)
• ส่วนใหญ่ในแต่ละ project ถ้าเราติดปัญหาอะไรมันมักจะมีคนติดมาก่อนเราอยู่แล้ว ดังนั้นผมจึงไม่เคยถามอะไรเลย เข้าไปอ่านๆ ก็ได้คำตอบแล้ว

2. Google+ Webcast

• อันนี้คือ coach จะจัดรายการสดทุกสัปดาห์ผ่านทาง Google Hangout ซึ่งมันมักจะไปโผล่เวลาไทยแถวๆ ตีสี่ จึงไม่เคยดูเช่นกัน แต่เราสามารถดูย้อนหลังได้ (ก็ไม่ดูอยู่ดี)
• เนื้อหาก็คือ coach ก็จะมาเล่าเรื่อง project นั้นๆ ที่เราทำอยู่ให้ฟัง ใครติดตรงไหนก็ถามไป รวมถึงพาทำอะไรที่มันลึกไปกว่า requirement ซึ่งถ้าใครมานั่งดูก็คงได้ประโยชน์ครับ

3. Office Hour และ Coach Appointment

• อันนี้ก็คือถ้าเราอยากนัด coach ปรึกษาแบบตัวต่อตัวก็สามารถมานัดได้ ก็จะนัดเวลา Google Hangout กัน ซึ่งผมก็ไม่เคยทำอีกนั่นแหละ

จะเรียนจบต้องรู้อะไรบ้าง

ก่อนจะพูดเรื่อง Project แต่ละตัว ผมอยากสรุปเล็กน้อยนะครับว่าต้องรู้อะไรบ้างถึงจะเรียนจบได้

• ถ้ารู้เรื่องเหล่านี้อยู่แล้ว จะเรียนจบได้อย่างง่ายมากๆ
• ถ้ายังไม่รู้เรื่องเหล่านี้ ต้องเตรียมใจไว้ว่าต้องใช้เวลากับมันพอสมควร เพราะสไตล์การสอนของที่นี่ไม่ใช่พาทำทีละขั้นๆ จะ เป็นแนวอธิบายคอนเซปท์ให้ฟัง หลังจากนั้นก็โยน project ให้เลย ที่เหลือไปค้นเอาใน Docs ของเรื่องนั้นๆ สงสัยไรก็ไปถาม ซึ่งผมว่าดีนะ ไม่ใช่ป้อน แต่ฝึกให้แก้ปัญหาได้

สรุปต้องรู้อะไรบ้าง ?

1. All project: Git and github
2. Project 1: basic HTML, CSS, responsive web design concept (Mobile first, css-flexbox, responsive typo, responsive image – พวก svg, <picture>, srcset)
3. Project 2: jQuery DOM manipulation
4. Project 3: HTML5 canvas, Object-oriented JS
5. Project 4: Website Optimization ตามแนวทางของ Google, Build tools (Gulp, grunt)
6. Project 5.1: jQuery AJAX, MVC concept, Knockout.js
7. Project 5.2: Backbone.js, HTML5 local storage
8. Project 6: Testing with Jasmine

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

Project 1: Portfolio site

• โจทย์ให้ไฟล์ PDF ที่เป็น design มาให้ งานของเราคือทำให้มันเป็น responsive website
• ถ้าอยากผ่านเฉยๆ ทำง่ายๆ ก็ได้ครับ แต่ถ้าอยากผ่านดีๆ ต้องใช้หลายๆ อย่างที่เขาพูดถึงในคอร์ส เช่น ทำ grid ด้วย flexbox, ทำ responsive image ด้วย svg, <picture> element ซึ่งเป็นเรื่องที่ใหม่สำหรับผมอยู่เหมือนกันครับ
• โปรเจคท์ค่อนข้างง่าย ไม่กี่ชั่วโมงก็เสร็จ

Project 2: Online Resume

• โจทย์ให้โครง HTML มาให้ พร้อม helper function นิดหน่อย หน้าที่ของเราคือเขียน JavaScript โดยมีกติกาคือ ให้เอาข้อมูลทั้งหมดที่จะลงเว็บไปใส่ใน Object นึงไว้ แล้วใช้ Jquery เรียกข้อมูลนั้นมาใส่ในเว็บ จริงๆ มันก็คือการแยก model กับ view ออกจากกัน
• ใช้ความรู้เรื่อง jQuery DOM manipulation นิดหน่อย โปรเจคท์ค่อนข้างง่าย ไม่กี่ชั่วโมงก็เสร็จ

Project 3: เกมหลบแมลง

• สองโปรเจคท์ก่อนหน้านี่มันซ้อมๆ โปรเจคท์นี้เป็นโปรเจคท์แรกที่ผมรู้สึกว่าทำไมมันยากจังวะ – -“
• เราจะได้ element ต่างๆ ของเกมมา พวก ตัวละคร ฉาก แมลง เขาจะมีวิดีโอ youtube ให้ดูว่าเขาอยากได้เกมแบบไหน เราก็ไปเขียน code มาให้เกมมันรันได้ โดยเขามี helper function มาให้เรานิดหน่อย
• ความรู้ที่ต้องมีคือ HTML5 canvas เพราะเกมมันวาดบน canvas, การทำ animation แบบ .requestAnimationFrame() ที่สำคัญสุดคือการเขียนโปรแกรมแบบ Object-oriented เล่นเอาผมต้องไปนั่งอ่านเรื่องนี้เป็นอาทิตย์เหมือนกันครับกว่าจะผ่านได้

Project 4: Website Optimization

• โปรเจคท์นี้จะให้เว็บเรามาสองเว็บ เป็นเว็บที่ช้าและ lag มาก หน้าที่ของเราคือไป Optimize เว็บให้ได้ Pagespeed score มากกว่า 90 และรันด้วย framerate มากกว่า 60fps
• การ optimize ทั้งหลายทำตามแนวของ Google ซึ่งเอาจริงๆ นะครับ จนเรียนจบแล้ว ผ่านมาหมดแล้ว ก็ยังมีหลายๆ เรื่องที่ยังไม่ค่อยเข้าใจ พวก force synchronous layout ไรงี้

Project 5.1: Neighborhood Map

• โปรเจคท์นี้จะไม่ให้อะไรเรามาเลยนอกจาก requirement คือ ให้เราสร้าง app ข้อมูลสถานที่ที่เราสนใจ แล้ว pin มันลงบน google map โดย user ต้องสามารถ filter location ได้จาก searchbar และสามารถคลิกที่ marker เพื่อแสดงข้อมูลได้ และเราต้องเรียก 3rd party API อะไรก็ได้อีกอันนึงนอกจาก Google Maps ผมเลยเลือก instagram API จุดประสงค์ของ project นี้เพื่อฝึกเรื่อง AJAX call และ error handling
• บังคับใช้ knockout.js เพื่อ structure code ให้อยู่ในรูป MVVM (จริงๆ เป้าหมายของ project นี้คือสอนเรื่อง MVC แหละครับ)
• ส่วนตัวผมว่าโปรเจคท์นี้ยากที่สุดของคอร์ส

Project 5.2: Health Tracker

• Project นี้จริงๆ เหมือน 5.1 เลยครับ จุดประสงค์หลักคือฝึกเรื่อง AJAX call และ MVC concept เช่นเดียวกับ project 5.1 ไม่มีอะไรมาให้ มีให้แค่ requirement
• เป็น app ให้เราเสิร์ชชื่ออาหาร จากนั้นจะ call ไปยัง NutritionIX API เพื่อดึงข้อมูลอาหารที่เกี่ยวกับ keyword นั้นๆมา (เมืองไทยควรมีอะไรแบบนี้นะ) จากนั้นก็ summary ว่าวันนี้กินไปกี่ Calorie
• บังคับใช้ Backbone.js ทำ single-page app (ไม่มี refresh หน้า) และให้เก็บข้อมูลทั้งหมดไว้ใน localstorage (คือปิดแอพแล้วเปิดใหม่ข้อมูลไม่หาย)

Project 6: Feed Reader Testing

• Project นี้หลักๆ คือการฝึกคอนเซปท์เรื่อง TDD ครับ โดย tool ที่บังคับใช้คือ Jasmine
• เขาจะให้เว็บมาแล้ว function ได้ทุกอย่าง ให้เราเขียน test case มาให้ผ่าน เป็นอีก project นึงที่จนผ่านมาแล้วก็ยังงงๆ อยู่

ทั้งหมดนี้ใช้เวลาเท่าไหร่

ส่วนตัวผมเองใช้เวลา 3 เดือนครับ แต่นับเวลาจริงๆ เดือนเดียว คือ 2 โปรเจคท์แรกมันสองวันก็เสร็จแล้ว แล้วผมก็ยุ่งมากไปเดือนนึง อีกเดือนกลับมาเก็บ 5 โปรเจคท์ที่เหลือเป็นงานหลัก เห็นบิลเดือนละ 7,000 กว่าบาทแล้วเครียด เลยรู้สึกว่าต้องจบแล้ว

ถ้าคุณดูโปรเจคท์ข้างบนแล้วทำได้ทุกโปรเจคท์อยู่แล้ว เดือนเดียวจบได้ชัวร์ๆ ครับ แต่ถ้าคุณไม่ได้ทำได้อยู่แล้ว ต้องศึกษาเพิ่ม ผมมีคำแนะนำก่อนเริ่มเรียนดังนี้ครับ

คำแนะนำหากอยากจบเร็ว

material ทั้งหมดในคอร์ส มีรายนามดังนี้ เรียงตามลำดับการสอนเลย

• Intro to HTML and CSS
• Responsive Web Design Fundamentals
• Responsive Images
• JavaScript Basics
• Intro to jQuery
• Object-Oriented JavaScript
• HTML5 Canvas
• Website Performance Optimization
• Browser Rendering Optimization
• Intro to AJAX
• JavaScript Design Patterns
• JavaScript Testing

หรือพูดง่ายๆก็คือ material ในการสอนทุกอย่าง มันฟรีตั้งแต่แรกอยู่แล้ว เหมือน ที่เราจ่าย $200 ต่อเดือนนั้นเราซื้อ 1. การตรวจ project จาก coach 2. สิทธิ์การปรึกษา coach 3. คำแนะนำเรื่อง career development รวมถึง connection ของ udacity ซึ่งเอาจริงๆ ข้อ 2 และ 3 ผมไม่ได้ใช้เลย

เพราะงั้นถ้าให้ผมแนะนำคนที่จะมาเรียน ก็คือ เรียน material ทั้งบนนั้นให้หมดก่อนเลยครับ หลังจากนั้นก็เทียบดูกับ project ข้างบนของผมว่าดูแล้วน่าจะไหวหรือเปล่า ถ้ามั่นใจว่าเก็บทุก project ได้ชัวร์ ก็สมัครเรียนเลย เข้าไปดู requirement ของแต่ละ project ทำๆๆ แล้ว submit ไปเลย น่าจะเก็บได้ใน 1 เดือน (เทพจริงๆ อาทิตย์เดียวก็จบ)

นั่นหมายความว่า ค่าใช้จ่ายจะแค่ $200 /2 = $100 เวลาที่เรียน 1 เดือน + ใช้สิทธิ์จบเร็วได้เงินคืน นั่นคือราวๆ 3,500 บาทเท่านั้นครับ เทียบกับที่ผมเสียไป 21,000 /2 เหลือ 10,500 บาท (เห็นเพื่อนบอกว่าจะขอคืน 50% ต้องเรียนอย่างน้อย 2 เดือนด้วย ก็ไม่เป็นไร ก็เป็น 7,000 บาท แต่ผมหาเงื่อนไขนี้ไม่เจอนะ)

ย้ำอีกครั้งครับ คุณสามารถจบคอร์สนี้ด้วยเงินไม่เกิน 3,500 บาทครับ

ผมไม่รู้ว่าคอร์ส nanodegree อื่นๆ เป็นไง แต่ผมเชื่อว่าน่าจะระบบเดียวกัน

สรุปการเรียน Front-end กับ Udacity Nanodegree

• โดยแนวทางการสอนแล้วผมค่อนข้างชอบนะ การให้ความสำคัญกับการอธิบายคอนเซปท์ มากกว่าการมาพาทำเป็นขั้นๆ
• มีประโยคนึงที่อาจารย์พูดแล้วผมชอบมาก เขาพูดขึ้นมาก่อนจะ brief โปรเจคท์นึง “ในชีวิตการเป็น developer คุณจะเจอสถานการณ์ที่คุณ no idea โดยสิ้นเชิงว่าคุณจะสร้างมันได้อย่างไร เราอยากให้คุณรู้ว่าไม่มีอะไรที่คุณทำไม่ได้ คุณแค่ต้องใช้เวลากับมัน” สุดท้ายก็ได้หมดจริงๆ (ถึงจะ no idea why my code work ในหลายๆ โปรเจคท์ 55)
• ก็ท่านใดมีข้อสงสัยประการใดเกี่ยวกับคอร์สนี้ก็สอบถามได้นะครับ ยินดีตอบฮะ ?

ความรู้สึกในโปรเจคท์หลังๆ อธิบายด้วยภาพนี้

บทความนี้เผยแพร่ครั้งแรกที่เว็บไซต์ Rath.asia โดยผู้เขียนเป็นคุณหมอที่หันมาสนใจด้านการเขียนโค้ดครับ ไปติดตามบลอคอื่น ๆ ที่น่าสนใจของเค้ากันได้คร้าบ :)