สวัสดีครับทุกคนกันอีกครั้งนะครับ ใน blog นี้ผมจะมาเขียนเกี่ยวกับ แนวทางสำหรับการเริ่มต้น Frontend ระดับมือใหม่หรือที่เรียกระดับกันว่า Junior กันครับ ซึ่งในส่วนของ blog นี้สำหรับผม จะเป็นการแชร์วิธีการศึกษาและเริ่มต้นเกี่ยวกับ Frontend จากการเรียนรู้ของผมเองครับ เผื่อเป็นประโยชน์สำหรับคนที่ต้องการศึกษาทางด้าน Frontend จะได้ไปเรียนรู้ได้นะครับ ถ้าพร้อมแล้วไปดูกันเลยครับ
ก่อนที่จะเริ่มผมจะแบ่งในส่วนของหัวข้อ Part ใหญ่ที่ผมจะพูดก่อนครับ โดยเนื้อหาหลักของผมจะมีดังนี้ครับ
- จุดเริ่มต้นของการศึกษา Frontend
- เนื้อหาที่ต้องเรียนรู้สำหรับคนจะเริ่ม Frontend
จุดเริ่มต้นของการศึกษา Frontend ของผม
สำหรับตัวผมได้เริ่มต้นและสนใจศึกษาเกี่ยวกับ Frontend ผมเริ่มต้นจากตอนช่วงปี 3 เทอม 2 ที่ผมต้องฝึกงานและผมสมัครฝึกงานในตำแหน่งของ Frontend Developer และรวมถึงในช่วงที่ผมจะจบผมก็ทำโปรเจ็คจบในด้านที่ต้งใช้ความรู้ด้าน Frontend ด้วยครับ โดยตัวผมตอนนั้นผมยอมรับว่าพื้นฐานหลักของผมยังไม่แน่นและตัวผมเองก็ทำงานไม่ตรงสายด้วยโดยสายที่ผมเรียนเป็นด้านวิศวกรรมอิเล็กทรอนิกส์และโทรคมนาคมครับ ซึ่งการทำโปรเจ็คให้กับบริษัทในช่วงฝึกงานและโปรเจ็คจบผมยอมรับตัวผมเลยว่าติดขัดมากครับ โดยหลังจบฝึกงานทำให้ผมต้องศึกษาความรู้เกี่ยวกับ basic พื้นฐานเพิ่มครับ ซึ่งทำให้ผมรู้เลยว่ามีความรู้อีกหลายอย่างที่ผมต้องเข้าใจเพื่อให้การทำงานโปรแกรมออกมาได้ดีได้ครับ โดยผมเริ่มต้นศึกษาพื้นฐานหลักเกี่ยวกับ HTML, CSS, Javascript ด้วยตัวเองจากยูทูป, เพจ BorntoDev และเว็บอย่างพวก FreeCodeCamp ครับ ซึ่งผมเองก็มีการ Take Course ที่อื่นเพิ่มด้วยครับ เพื่อที่จะได้มีโปรเจ็คเพิ่มและมีเนื้อหาบางส่วนทางด้าน Frontend Framework หรือความรู้อื่นที่เราไม่รู้ด้วยครับ ทำให้ได้ความรู้เสริมติดตัวไว้ด้วยครับ รวมถึงครั้งนี้ผมก็ได้ทำการเข้าร่วมโครงการ Dev Init #2 ซึงมีโปรเจ็คให้ทำและ blog ให้เขียนเพื่อกรองความรู้ด้วยครับ ซึ่งในหัวข้อต่อไปจะพูดคุยเกี่ยวกับส่วนที่ต้องรู้กันครับ
พูดคุยก่อนเริ่ม
ในส่วนของบทความที่ผมจะเขียนต่อจากนี้ก่อนอื่นผมก็ต้องขอบคุณ BorntoDev สำหรับกิจกรรม DevInit ในครั้งนี้ที่มีในส่วนของงาน Blog นี้ครับ ซึ่งในส่วนของการเขียน Blog นี้ผมคิดว่าน่าจะเป็นแนวทางที่ดีสำหรับคนที่ต้องการเริ่มศึกษาและเรียนรู้เกี่ยวกับด้าน Forntend ด้วยตัวเองครับ ซึ่งจริงๆวิธีการสำหรับการเริ่มต้นศึกษาด้าน Frontend เบื้องต้นมีเยอะครับ แต่ผมจะยกมาเฉพาะข้อมูลที่จำเป็นครับ
ต้องบอกก่อนครับว่าบทความนี้สำหรับแนวทางการศึกษาเบื้องต้นก่อนการเข้าสู่โลกของ Frontend เป็นแค่แนวทางของผมเองนะครับ ซึ่งหลายคนอาจไม่ต้องทำตามก็ได้นะครับ และในส่วนของ resource ที่ผมเอามาลงในโฆษณาผมไม่ได้ลงเพื่อใช้ในการโฆษณานะครับ แต่เป็นส่วนช่วยให้ผมเข้าใจและเรียนรู้มาจนถึงตอนนี้ครับ
![](https://b2dmain-ruk.cdn.jelastic.net/wp-content/uploads/2024/06/jukan-tateisi-bJhT_8nbUA0-unsplash-1024x576.jpg)
โดยในส่วนเนื้อหาส่วนนี้ผมแนะนำให้ลองดูในส่วนของ Roadmap เบื้องต้นของ BornToDev ก่อนประกอบกับข้อมูลที่ผมจะอธิบายต่อในลิ้งค์นี้ ครับ ถ้าพร้อมแล้วไปดูกันได้เลยนะครับ
Responsive Web Design
![](https://b2dmain-ruk.cdn.jelastic.net/wp-content/uploads/2024/06/7494988-1024x683.jpg)
เนื้อหาส่วนนี้ถือเป็นจุดเริ่มต้นหลักเลยก็พูดได้ครับเพราะในส่วนนี้จะเน้นหลักไปที่เรื่องของการ Design ในส่วนของหน้าเว็บว่าหน้าเว็บควรออกมาลักษณะใด
โดยพื้นฐานในส่วนนี้จะเน้นหลักคือเรื่องของการวางโครงสร้างของ HTML และการทำการ Design ในส่วนของ CSS ในแบบเบื้องต้นได้ว่าการเขียนโครงสร้างหน้าเว็บจะเป็นอย่างไรและการ Design ควรจะเป็นประมาณไหน โดยเนื้อหาส่วนนี้สำหรับผมไม่อยากให้รีบในการศึกษาให้ครบอยากให้ลองทำความเข้าใจเบื้องต้นแล้วนำไปต่อยอดดูครับ รวมถึงสามารถนำไปใช้เขียนเว็บอย่างง่ายได้ด้วยครับ
โดยส่วนของความรู้ทางด้าน HTML และ CSS ผมก็ได้ดูในเว็บนี้ซึ่งสามารถไปลองดูกันได้นะครับ : Interneting Is Hard
ซึ่งเนื้อหาหลักที่ผมยกในเว็บนี้ถือว่าเป็นเว็บที่มีข้อมูลครบในเรื่องของการทำ HTML สำหรับแสดงข้อมูลในเว็บและส่วนของ CSS layout ว่าการ Design มีอะไรบ้าง อย่างเช่นส่วนของการทำ CSS Flexbox และตัวของ CSS Grid ว่ามีการ design อย่างไรและในส่วนของการทำ Grid เป็นอย่างไรโดยเว็บไซต์ที่ใช้ประกอบจะเป็นเว็บ Learn CSS Layout โดยผมจะแบ่งส่วน Layout ที่ใช้หลักดังนี้
CSS Flexbox
ในส่วนนี้ถือว่าเป็นส่วนสำคัญในการเรียนรู้การออกแบบโครงสร้างในหน้าเพจหรือเว็บไซต์ของผู้ใช้ว่าต้องมีอะไรบ้างและจัดการกับ Component ให้อยู่ในกล่องได้อย่างไรซึ่ง Flex ถ้าในความหมายทั่วๆไปคือความยืดหยุ่นทำให้ได้เรียนรู้เรื่องที่ว่าการจัดการ component ในหน้าเว็บจะมีความยืดหยุ่นได้อย่างไร
โดยเนื้อหาในเว็บไซต์ที่ผมใช้และเป็นเว็บที่เหมือนเกมส์ในตัวจะเป็นเว็บ: FLEXBOX FROGGY ซึ่งสามารถไปลองเล่นกันได้นะครับ
CSS Grid
สำหรับส่วนนี้จะเน้นไปในเรื่องของการออกแบบในส่วนของหน้าเว็บไซต์ออกเป็นส่วนๆซึ่งเว็บไซต์ที่เราจะเห็นกันได้โดยทั่วไปจะเป็นเว็บในเรื่องของ Blog ซึ่งต้องมีการใช้ Grid มาช่วยซึ่งความรู้นี้ถือว่าจำเป็นในการทำส่วนของ card และใช้กับ การทำให้ตัว Card อยูในทิศทางเดียวกันได้ในพื้นที่จำกัดและ card จำนวนมากครับ โดยฝึกได้จากการปลูกพืชจากเว็บ GRID GARDEN ครับ
ในส่วนของโปรแกรมที่แนะนำหรือเว็บที่ใช้ในการฝึกฝนการเขียนโปรแกรมมีดังนี้ครับ สามารถเลือกใช้ตามความถนัดได้เลยครับ
- VS Code
- Code Sand Box
- Code Pen
สำหรับความรู้ในส่วนนี้ถือว่าเป็นความรู้เบื้องต้นที่จำเป็นสำหรับการทำ Responsive Web Design เบื้องต้นได้ครับและสิ่งที่อยากให้ฝึกก่อนจะไป part ต่อไปมีอะไรบ้างไปดูเลยครับ
- เรียนรู้และฝึกใช้ Git ให้คล่องครับเพราะเป็นส่วนที่ทำให้เราเรียนรู้เรื่องของ Git Version Control ซึ่งถ้าผมแนะนำ resource และเป็นตัวที่ผมเรียนรู้เป็นของ BornToDev จะเป็น ตัวนี้ครับ : GitHub for Developer
- เรียนรู้การเขียน command line ไว้นะครับ เพราะมีส่วนจำเป็นสำหรับการเรียก library มาใช้ครับ โดยเฉพาะตัว Framework React เพราะจะมีส่วนช่วยในการเรียก library ที่สำคัญมาใช้ได้นะครับ
- ลองหาโปรเจ็คที่น่าสนใจมาลองทำหรือไม่เขียนโค้ดตามเพื่อจะได้ฝึกสกิลไปในตัวด้วยครับ โดยเว็บไซต์ที่ผมอยากให้ทำกันคือเว็บ Portfolio ครับเพราะเป็นเว็บที่ไว้แสดงความสามารถเบื้องต้นเกี่ยวกับการเขียน HTML และ CSS นั้นได้เองครับ โดยถ้าเป็นตัวอย่างอื่นๆ ผมแนะนำลิ้งค์นี้ครับ Complete Responsive Website Designs ซึ่งรวมโปรเจ็คไว้มากมายเลยครับและเสร็จแล้วอัพลง Github Repo ไว้เป็นผลงานเราได้ครับ และบางบริษัทที่ขอ Portfolio สามารถใช้เว็บไซต์ที่เราสร้างขึ้นแสดงแทนได้นะครับ
สำหรับส่วนของ Responsive Web Design ผมก็คงไว้ตรงนี้ก่อนนะครับถ้าพร้อมแล้วเข้าส่วนต่อไปกันเลยครับ
Javascript Algorithm and Data Structure
หลังจากที่ได้ทำการเรียนรู้และฝึกฝนในส่วนของการทำ Responsive แล้วส่วนนี้จะเน้นการเรียนรู้ในเรื่องของ Javascript กัน โดยการศึกษาส่วนนี้ จากที่ผมได้ทำการศึกษาเพิ่มด้วยตัวเอง ผมมองว่าเป็นส่วนที่สำคัญต่อมาถ้าจากที่หลายคนเรียกกันคือ HTML, CSS, Javascript จะสังเกตุว่าทำไม Javascript ถึงไว้ท้ายสุดเพราะส่วนนี้เป็นส่วนที่เนื้อหาค่อนข้างเยอะและเป็นส่วนสำคัญในการเขียนการทำงานในส่วนของ Function ของเว็บไซต์ครับ และต้องเข้าใจมันจริงๆเพราะต้องใช้ในการประกอบการเขียน Framework อย่างเช่น React, Vue, Angular ต่อไปครับ ถ้าพร้อมแล้วไปดูเรื่องที่ต้องรู้กันเลยครับ
สำหรับสิ่งที่ต้องเรียนรู้เกี่ยวกับ Javascript อันนี้ผมเรียงตาม Curriculum ของ FreeCodeCamp นะครับ รวมถึงผมจะมีแหล่งเนื้อหาแต่ละส่วนมาแนะนำด้วยนะครับ
Basic Javascript: สำหรับเนื้อหาของ Basic Javascript ถือว่าเป็นส่วนที่สำคัญที่สุดเลยก็ว่าได้เหมือนกับหลายๆภาษาอย่าง Python, Go เป็นต้นครับ ที่จะต้องรู้พื้นฐานของแต่ละภาษาครับ ซึ่งหลายคนน่าจะสงสัยว่าถ้าผมศึกษาภาษาอื่นมาก่อนอย่าง Python หรอ Go แล้วถ้าจะมาเรียนรู้ Javascript เลยจะเข้าใจไหม คำตอบผมคือเข้าใจได้ครับเ เพราะ pattern การเขียนคล้ายๆกันครับแต่จะต่างกันแค่ตัว syntax ครับ และส่วนนี้ต้องเข้าใจจริงๆนะครับไม่งั้นต่อส่วนต่อไปยากครับ
ถ้าใครอยากศึกษา Basic ของ Javascript ผมขอแนะนำเว็บนี้นะครับเป็นเว็บที่ให้ข้อมูล : Learn Javascript
พื้นฐาน ES6: เนื้อหาส่วนนี้เป็นส่วนที่อาจรู้ไว้เพื่อความเข้าใจได้ครับในส่วนนี้จะเน้นไปในเรื่องของสิ่งที่เปลี่ยนไปจาก ES5 ว่ามีความเปลี่ยนแปลงอะไรบ้างและพอเปลี่ยนเป็น ES6 มีความแตกต่างอะไรบ้าง
Regex Expression: เนื้อหาส่วนนี้ถ้าพูดถึงสิ่งที่เห็นภาพในชีวิตประจำวันก็คงเป็นเว็บอย่าง Google ครับ ที่เป็นเว็บ Search Engine ที่ใช้กันอยู่ในทุกวันนี้หรือพวก filter ที่อยู่ในเว็บไซต์ที่เราใช้ต่างๆผมก็มองว่าเป็นส่วนที่สำคัญไม่แพ้กันครับ เพราะถ้าเรียนรู้ไปถึง Frontend มีความจำเป็นในการทำ Filter หรือส่วนที่ใช้หาข้อมูลต่างๆครับ
สำหรับผมถ้าแนะนำเว็บศึกษาเรื่องนี้จะเป็นเว็บ RegexOne ที่มีแบบฝึกหัดให้ลองเรียนรู้ได้นะครับ
Debugging: เนื้อหาส่วนนี้จะเน้นไปที่เรื่องของการทำ Debug และการแก้ปัญหาจากการเขียนโปรแกรมครับซึ่งเป็นส่วนที่ไม่ว่าคุณจะเรียนภาษาใดก็ตามต้องเข้าใจในส่วนนี้ครับ เพื่อเป็นส่วนสำคัญในการเรียนรู้และแก้ Error ได้ด้วยตัวเองครับ
Basic Data Structures: ส่วนนี้เป็นอีกส่วนนึงที่ต้องเรียนรู่ไม่ว่าภาษาใด้ก็ตามก็ต้องเข้าใจเรื่องของ Data Structure ครับ เพราะมีส่วนสำคัญในการเข้าใจเรื่องของข้อมูลครับ จะมีทั้งตัวของ Array และ Object ครับ อยากให้เข้าใจในส่วนนี้ เพราะถ้าไปถึงส่วนของการทำ Frontend จำเป็นสำหรับการดึงข้อมูลครับ
Object Oriented Programming: เนื่องจากตัวของ Javascript เป็นภาษาที่รองรับการทำ Object Oriented ฉะนั้นส่วนนี้จะต้องเข้าใจเกี่ยวกับเรื่องของการทำ Object Oriented Programming ของ Javascript ด้วย โดยเนื้อหาส่วนนี้จะมองโครงสร้างเป็น Class ซึงเนื้อหานี้จะเน้นเรื่องของการเขียนโปรแกรมเชิงวัตถุซึ่งจำเป็นสำหรับการจัดการโครงสร้างของโปรแกรมอย่างมากครับ
Functional Programming: เนื้อหาส่วนสุดท้ายนี้จะเน้นในเรื่องของการจัดการ code ให้เป็นระเบียบซึ่งเรื่องนี้ถือเป็นเรื่องสำคัญอีกเรื่องนึงที่การเขียนในหลายภาษาต้องเข้าใจในส่วนนี้ ซึ่งส่วนนี้มีส่วนช่วยในการจัดการ code ที่มีความซับซ้อนในจำนวนเยอะให้มีความเจาะจงมากยิ่งขึ้น และการเขียน code ดูมีความเป็นระเบียบมากยิ่งขึ้นครับ
ทั้งหมดนี้จะเป็นเนื้อหาทั้งหมดที่ผมคิดว่าควรจะศึกษาและทำความเข้าใจให้มากที่สุดเพราะเป็นส่วนที่จำเป็นสำหรับการนำไปเขียนประกอบกับการเขียนในส่วนของ HTML, CSS, Javascript หรือที่เรียกว่า Vanilla Javascript ต่อไปได้ครับส่วนต่อมาผมจะเขียนในเรื่องสิ่งที่ต้องฝึกหลังจากนี้ครับถ้าพร้อมแล้วไปดูกันได้เลยครับ
สิ่งที่ควรฝึกเพิ่มหลังจากศึกษาเรื่องนี้
- อยากให้ลองหาโจทย์เกี่ยวกับ Javascript มาทำในเว็บไซต์อย่างเช่นเว็บไซต์ leetCode หรือ Codewars รวมถึง DevLab ของ BorntoDev ด้วยครับ แต่สำหรับ BorntoDev ถ้าทำถึง 20 ข้อ จะได้ Certificate ด้วยนะครับ เป็นการฝึกฝนที่ดีและทำให้เราชำนาญมากยิ่งขึ้นครับ เพราะถ้าอยากประสบความสำเร็จต้องมาจากการฝึกฝนครับ ความสำเร็จไม่มีทางลัดครับ
- ถ้าเกิดเข้าใจในเรื่องของ Javascript แล้วสำหรับผมแนะนำอยากให้ลองศึกษาและฝึกเกี่ยวกับเรื่องของ Typescript ด้วยครับ เพราะบางบริษัทเริ่มมาใช้ Typescript มากขึ้นแล้วอยากให้เห็นถึงความแตกต่างและการเขียน code ที่เป็นระเบียบขึ้นครับ
- ศึกษาเรื่องของ Dom Element เพิ่มและลองทำโปรเจ็คในด้านของ Vanilla Javascript เพื่อที่จะไม่ให้ลืมความรู้เรื่อง Responsive Web Design แล้วทำให้รวมความรู้ทั้งหมดที่เรียนร่วมกับ Javascript ได้ครับ
ทั้งหมดนี้ก็จะเป็นแนวทางการศึกษาในเรื่องของ Javascript Algorithm and Data Structure ครับ สำหรับส่วนต่อมาก็จะเป็นส่วนสุดท้ายของบทความนี้แล้วครับถ้าพร้อมไปดูกันได้เลยครับ
![](https://b2dmain-ruk.cdn.jelastic.net/wp-content/uploads/2024/06/frontend_4-1024x836.jpg)
Frontend Development Library
ในส่วนนี้ก็จะเป็นส่วนสุดท้างหลังจากที่ได้ศึกษาในเรื่องของ Responsive Web Design กับ Javascript มาแล้วนะครับใน part นี้จะเข้าสู่สาย Frontend อย่างเต็มตัวแล้วนะครับซึ่งในปัจจุบัน framework สำหรับสาย Frontend มีอยู่เยอะมากนะครับทั้งตัวของ Angular, Svelts, Vue และตัวของ React ซึ่งในบทความนี่ผมจะโฟกัสไปที่ path ของ React เป็นหลักนะครับ แต่มีสิ่งที่ต้องรู้เหมือนกันถ้าพร้อมแล้วไปดูกันเลยครับ
ในส่วนของเรื่องที่จะต้องรู้ส่วนนี้จะเป็นแค่แนวทางและเรื่องที่ต้องรู้ของผมเท่านั้นนะครับ ทุกคนอาจไม่จำเป็นต้องศึกษาตามผมก็ได้ครับอยากให้ส่วนนี้เป็นส่วนที่แลกเปลี่ยนกันครับ
พื้นฐานของ React: ส่วนนี้เป็นส่วนที่ค่อนข้างสำคัญที่สุดไม่ใช้แค่เฉพาตัว Framework React เท่านั้น แต่ Framework อื่นอยากให้ลองศึกษาพื้นฐานการทำงานของโปรแกรมผ่าน Document ของเว็บไซต์ให้เข้าใจก่อนครับซึ่งเนื้อหาส่วนนี้สำหรับผมอาจแนะนำให้ลองอ่น document ของ website ดูก่อนครับถ้าใครจะลงทุนหน่อยสำหรับผมอาจให้ลอง take course ของ BorntoDev ดูได้นะครับ
สำหรับผมตัว Course ของผมที่ทำการ take course: The Ultimate React Course 2024: React, Next.js, Redux & More ของ (Jonas Schmedtmann) เพราะเป็นเนื้อหาของคนต่างชาติที่ค่อนข้างครบที่สุดแล้วครับ ทางด้านของ React ครับ
Redux: ส่วนนี้จะเน้นเรื่องของการทำเพิ่มลดค่าครับโดยส่วนนี้ผมอาจไม่ได้พูดเยอะนะครับเพราะส่วนนี้เป็นส่วนตัวช่วยของ React ครับจะเน้นไปว่า จะทำฟังก์ชันเพิ่ม/ลด ค่าต่างๆยังไง
การเขียน Command Line: เรื่อง command line ผมอยากจะเน้นให้ลองฝึกใช้ให้คล่องขึ้นเพราะส่วนนี้เป็นส่วนสำคัญในการที่เราจะต้องรัน ตัวของ Client และการโหลดตัวของ Library อื่นๆมาใช้เรื่องของการเล่น command line จะต้องคล่องด้วยครับ
การเลือกใช้ library: เรื่องของการใช้ library ถ้าทำงานคนเดียวอาจลองเลือก tool ดูก็ได้ว่าเราจะใช้ library หรือ tool ไหนในการทำเว็บส่วนไหนอย่างถ้าอย่างเรื่องของการทำ UI ถ้าอยากใช้ TailwindCSS, Styled-Component, Elastic UI อาจลองศึกษา tool โดยดู document ตาม library ที่จะใช้ว่ามีวิธีเขียนยังไง หรือการดึง api อาจมีการใช้ library axios มาประกอบการทำงานด้วยก็ได้ ถ้าเกิดทำเป็นโปรเจ็คของตนเองอาจลองกำหนดเลยเหมือนเป็น planning ว่าจะใช้ tool ไรบ้างเพื่อให้เรา scope ตัวของ tool ที่จะใช้และการทำงานได้เหมาะสมครับ
การทำ Planning: การทำ planning ถือเป็นส่วนที่จำเป็นอย่างมากในการทำ software หรือโปรแกรมนึงเพื่อที่จะทำให้เรารู้ scope และทำงานได้อย่างมีประสิทธิภาพครับ
การอ่าน Documentation: เรื่องการอ่าน documentation ผมยกให้เป็นเรื่องนึงที่อาจไม่ใช่เรื่องที่ต้องศึกษาแต่ผมให้ความสำคัญเพราะจะต้องเข้าใจว่าข้อมูลหรือตัวอย่างของตัว library ที่ใช้มีวิธีเขียนอย่างไรและจะมีวิธีการประยุกต์ใช้อย่างไรบ้าง
การทำ Git Version Control: เรื่องนี้ถือเป็นเรื่องนึงที่ต้องรู้เลยครับ เป็นเรื่องของการจัดการการเปลี่ยนแปลงของ version ของโปรแกรมครับ ว่าเราได้มีการทำหรือแก้ไขอะไรไปบ้างเพื่อทำให้การพัฒนา software หรอ Web Application ของเรามีประสิทธิภาพมากที่สุดครับ
การเขียน Readme.md: การเขียน Readme.md เป็นส่วนสำคัญอีกส่วนนึงที่ต้องรู้ครับเพราะการเขียน Readme.md ทำให้คนที่สนใจในส่วนของโปรเจ็คของเรานั้นเข้าใจว่ามีอะไรบ้างมีการใช้ tool ไหนบ้างและจะมีการต่อยอดในอนาคตว่ามีอะไรบ้าง เพราะเผื่ออนาคตตัวเราทำหรือมีคนมาต่อยอดต่อยอดได้อย่างมีประสิทธีภาพแน่นอนครับ
ก็สำหรับส่วนนี้จะเป็นเรื่องทั้งหมดที่ต้องรู้หรือศึกษาเกี่ยวกับด้าน Frontend ครับ เดี๋ยวส่วนต่อมาผมจะมีส่วนที่ต้องเรียนรู้หลังจากนั้ครับ
![](https://b2dmain-ruk.cdn.jelastic.net/wp-content/uploads/2024/06/ssp113-1-1024x683.jpg)
สิ่งที่ควรเรียนรู้เพิ่มหรือทำหลังจากนี้
- สิ่งที่ผมจะเน้นเลยทุก part ตั้งแต่ Responsive Web Design, Javascript และ Frontend คือเรื่องของการฝึกฝนเพิ่มครับ เพราะการฝึกฝนหรือทำบ่อย ๆจ ะเป็นหนทางสู่ความสำเร็จครับ
- ลองหาโปรเจ็คที่น่าสนใจมาลองทำหรือโปรเจ็คจากคอร์สเรียนมาต่อยอดครับ เพราะ การทำอย่างนี้จะทำให้เราได้ใช้ความสามารถทั้งหมดมาพัฒนางานและทำให้สกิลทางด้าน Frontend ของเรานั้นแข็งขึ้นด้วยครับ
- หลังจากที่ได้ศึกษาและเข้าใจ Frontend แล้วผมอยากให้ลองฝึกเขียน Backend ด้วยครับทดแทนการใช้ Firebase เพราะมันเป็นส่วนช่วยเพิ่มมูลค่าการทำงานให้เราได้ครับเพราะการสมัครงานได้ใช้แน่ ๆ ครับในเรื่องของการที่เราเข้าใจการทำงานของระบบและการเชื่อมต่อเว็บครับ และหลายบริษัทจะไม่ได้ใช้ Firebase เท่าไหรเพราะจะผ่าน web Api ซะมากกว่าครับ เพราะสิ่งที่เจอคือค่าใช้จ่ายของ Firebase ที่ค่อนข้างสูงครับสำหรับข้อมูลส่วนนี้ผมต้องขอบคุณและขออนุญาตนำมาเผยแพร่ในหัวข้อ เตือนคนใช้ Firebase Database
- หลังจากฝึก Backend แล้วผมอยากให้ฝึกเขียน Test อย่างพวก Cypress ด้วยครับเพราะอย่างน้อยเพื่อเป็นการเพิ่มประสิทธิภาพการทำงานโปรแกรมเราด้วยครับ
- สิ่งนี้เป็นสิ่งที่ผมก็ต้องทำเหมือนกันคือการฝึก basic ตลอดของ LeetCode หรือ CodeWar ครับเพราะพื้นฐานเป็นสิ่งที่ทิ้งไม่ได้อยู่แล้วครับและเป็นความรู้ที่สำคัญในการทำเว็บและพัฒนาสกิลตลอดเวลาครับ
สำหรับข้อมูลนี้ก็จะเป็นทั้งหมดของบทความนี้นะครับหลังจากนี้จะเป็นบทส่งท้ายครับถ้าพร้อมแล้วไปดูได้เลยนะครับ
บทส่งท้ายจากผู้เขียน
เนื้อหาบทความนี้ก็ถือว่าเป็นเนื้อหาที่ค่อนข้างยาวที่สุดอีกบทความนึงที่ผมเขียนมาเลยครับ ผมก็ไม่รู้ว่าบทความนี้จะมีประโยชน์หรือเป็นแนวทางให้กับคนที่เพิ่งเริ่มต้น หรือสนใจทางด้าน Frontend ได้มากน้อยแค่ไหนครับ ซึ่งถ้าใครมีวิธีการหรืออยากอยากเสริมมาแชร์กันได้นะครับ เพราะสำหรับบทความนี้ของผมหลัก ๆ อยากให้เป็นเหมือน บทความที่เรามาแชร์กันมากกว่าครับ และสิ่งสำคัญที่สุดของการทำ web application อยากให้ฝึกฝนและพัฒนาความคิดความสามารถกันตลอดนะครับ ถ้าใครตามมาจนถึงตอนนี้ผมจะบอกตลอดเลยว่าความสำเร็จไม่มีทางลัดนะครับ ต้องมาจากตัวเราเท่านั้นนะครับ ไว้มีโอกาสเจอกันใหม่นะครับ
แหล่งข้อมูลเพิ่มเติม
A practical guide to learning front end development for beginners by Nikita Rudenko
Front-End Development: The Complete Guide by Cloudinary