อยากจะเป็น Web Developer ต้องรู้เรื่องนี้เป็นอย่างแรก!

Photo by Jess Bailey on Unsplash

อยากจะเป็น Web Developer ต้องรู้เรื่องนี้เป็นอย่างแรก!

อยากจะเป็น Web Developer พัฒนาเว็บไซต์เป็น แต่ยังไม่รู้ว่าต้อง เริ่มยังไง เรียนอะไรบ้าง บทความนี้มีคำตอบครับ

สิ่งแรกที่ควรรู้ในการเป็น Web Developer หรือนักพัฒนาเว็บไซต์ "ไม่ใช่" ว่า HTML เขียนยังไง, CSS ทำงานยังไง, หรือความรู้อัลกอริทึมที่ซับซ้อน

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

สิ่งแรกที่ผมคิดว่าทุกคนเรียนรู้คือ...

🌎 ภาพรวม

ใช่แล้วครับ สิ่งแรกที่ผมคิดว่าทุกคนควรเรียนรู้และเข้าใจคือ ภาพรวม ของอาชีพ Web Developer ครับ

เราจะมาดูกันว่า Web Developer สามารถทำงานประมาณไหนได้บ้าง ต้องใช้ความรู้อะไรบ้าง รวมถึงภาพรวมการทำงานของ Web ที่เป็นสิ่งแรกที่ Web Developer จะต้องเข้าใจ ก่อนที่จะเริ่มเรียนรู้สิ่งอื่นๆอีกด้วย

เรามาค่อยๆเรียนรู้ไปด้วยกันครับ

🖥 Web developer ทำงานประมาณไหน?

ก่อนอื่นเรามาปรับความเข้าใจของเราให้ตรงกันก่อน โดยผมจะเล่าให้ฟังว่าโลกของ Web developer นี้ประกอบด้วยอะไรบ้าง และเราทำงานส่วนไหนบ้าง

โดยทั่วไปแล้วเวลาเราพูดถึงอาชีพ Web developer (บางคนเรียก Developer เฉยๆ หรือคนไทยอาจจะเรียกแทนกันกับคำว่า Software engineer) นั้น เรามักจะพูดถึงคนที่ทำหน้าที่พัฒนาสิ่งเหล่านี้

  1. Website: เว็บไซต์ทั่วไปที่มีจุดประสงค์เพื่อแสดงเนื้อหาอะไรก็ได้ ตามใจเจ้าของเว็บไซต์ (ตัวอย่างง่ายๆคือ https://www.coding-beaver.tech ที่ทุกคนกำลังอ่านบทความนี้นั่นแหละครับ)

  2. Web Application: อธิบายง่ายๆคือเว็บไซต์ที่มีความซับซ้อนมากขึ้น โดยส่วนใหญ่แล้วจะมีระบบ login และ Feature หลายๆอย่างที่เว็บไซต์ธรรมดาทำไม่ได้ อย่างเช่น Facebook ที่สามารถ Add friend, Post ข้อความหรือรูปต่างๆ, Comment บน Post คนอื่น, หรือแม้กระทั่งสร้าง Page หรือ Live streaming ก็ได้เช่นกัน

  3. Mobile application: ตรงตามชื่อเลยครับก็คือ Application มือถือ ที่เราสามารถ Download มาใช้ได้ผ่าน App store (สำหรับระบบปฏิบัติการ ios), Google play (สำหรับระบบปฏิบัติการ Android), หรือ Huawei app gallery (สำหรับระบบปฏิบัติการ HarmonyOS) นั่นเองครับ

  4. อื่นๆ (ประยุกต์): ความจริงแล้วความรู้เรื่องการพัฒนาเว็บไซต์ (Web devlopment) เนี่ยสามารถนำมาประยุกต์ใช้ได้กับหลายอย่างครับ ดังนั้นยังมีอีกหลายสิ่งหลายอย่างที่ Web developer จะเลือกทำได้ ซึ่งถ้าจะให้ไล่ทั้งวันคงไล่กันไม่หมด แต่จะขอยกตัวอย่างไว้ประมาณนี้ครับ

Blockchain application development: พัฒนา Application บน Blockchain ซึ่งส่วนนี้หมายถึงเฉพาะส่วนที่เป็น Application เท่านั้นนะครับ ไม่ได้รวมงานส่วน Blockchain มาด้วย (งานส่วน Blockchain เป็นงานของ Blockchain Engineer ครับ) ดังนั้นสามารถใช้ความรู้ Web development มาใช้ได้

Game development: พัฒนาเกมส์ (อาจจะไม่ได้ใช้ตรงๆ แต่การเข้าใจเรื่อง Internet, network, server ต่างช่วยให้การเรียนรู้ Game development ง่ายขึ้นมากๆโดยเฉพาะยุคนี้ที่เกมส์เป็นแบบ Online ซะส่วนใหญ่)

และ อื่นๆอีกมากมาย

มีเยอะขนาดนี้อย่าเพิ่งตกใจกันไปครับ เพราะเราไม่จำเป็นที่จะต้องรู้หรือทำเป็นทุกอย่าง แต่เพียงเราต้องเข้าใจพื้นฐาน และเรียนรู้จากพื้นฐานแล้วค่อยๆต่อยอดไป พอพื้นฐานแน่นแล้ว เราก็จะสามารถที่จะเลือกสายทางเดินในอาชีพ Web developer ของเราเองได้ครับ

ซึ่งพื้นฐานที่ผมหมายถึงเนี่ยแบ่งเป็น 2 อย่างหลักๆด้วยกัน นั่นก็คือ

  1. พื้นฐานเชิง Concept: ภาพรวมการทำงานของ Web

  2. พื้นฐานเชิงปฏิบัติ: HTML, CSS, และ JavaScript

สำหรับบทความนี้จะอธิบาย พื้นฐานเชิง Concept: ภาพรวมการทำงานของ Web เป็นหลักครับ และจะมีการแตะๆพื้นฐานเชิงปฏิบัติ เล็กน้อย เพราะพื้นฐานเชิงปฏิบัตินี้มีรายละเอียดเยอะกว่ามาก ไม่สามารถเล่าให้จบได้ในบทความนี้ครับ

โอเคครับเพื่อไม่เป็นการเสียเวลาเราไปเริ่มกันเลย

📚 พื้นฐานเชิง Concept: ภาพรวมการทำงานของ Web

วิธีที่จะเข้าใจการทำงานของ Web ได้ง่ายที่สุดในความคิดของผมคือการยกตัวอย่างครับ ซึ่งผมขอยกตัวอย่าง Website ตัวนึงนั่นก็คือ coding-beaver.tech

coding-beaver-web-capture.png

ก่อนที่เราจะเห็นหน้าเว็บที่สวยงาม(มั้ง) ได้เนี่ย ความจริงแล้วมันมีงานเบื้องหลังมากมายที่เราไม่รู้ และแน่นอนครับว่าก็ต้องมีผู้ที่สร้างมันขึ้นมา นั่นก็คือ Web developer นั่นเอง

เรามาดูแต่ละขั้นตอนกันครับว่าเกิดอะไรขึ้นบ้าง และงานส่วนไหนที่ Developer ต้องทำบ้าง

เกิดอะไรขึ้นบ้างเวลาที่เราเข้า coding-beaver.tech ?

สิ่งที่เกิดขึ้นเป็นไปตามรูปภาพด้านล่างครับ

how-web-works-page-2.jpeg

โอเคเรามาไล่ดูไปทีละขั้นตอนกัน

**1.**เราเปิดสิ่งที่เรียกว่า Web browser ขึ้นมา และเราก็ทำการพิมพ์ชื่อ ของ Website ที่เราต้องการชมนั่นคือ coding-beaver.tech แล้วกด Enter

ตัวอย่างของ Web browser เราน่าจะคุ้นเคยกันอยู่แล้วเช่น Google Chrome, Safari, Firefox, Microsoft Edge, Opera, หรือแม้กระทั่งของเก่าแก่อย่าง Internet Explorer ก็ตาม

web-browsers.jpeg

ซึ่งถ้าจะให้อธิบาย Web browser ง่ายๆ มันก็คือ Software ตัวนึงที่คอยรับคำสั่งจากเราว่าเราอยากที่จะเข้าชม Website อะไร ซึ่งวิธีการสั่งมันก็ง่ายๆนั่นก็คือให้เราพิมพ์ ชื่อของเว็บไซต์ลงไปบนช่องด้านบนที่เราทำกันบ่อยจนชินมือกันแล้วนั่นเอง

entering-url.png

**2.**Web browser นำสิ่งที่เราพิมพ์ในช่องด้านบน ไปหาว่าเจ้าเว็บที่ชื่อ coding-beaver.tech (เรียกชื่อเว็บอีกอย่างว่า Domain name ครับ) เนี่ย มันมี Server อยู่ที่ไหนหรอ ถ้ารู้จะได้ไปหาได้ถูก

สำหรับคนที่ยังไม่รู้ว่า Server คืออะไร Server ก็คือ คอมพิวเตอร์ที่ทำงานตลอดเวลา ทำหน้าที่คอยรับ Request หรือคำขอ จากคอมพิวเตอร์ของพวกเรา เหมือนคนรับใช้ที่คอยหาสิ่งที่เจ้านายต้องการและส่งกลับไปให้

เช่น ในกรณีนี้ Web browser พยายามจะขอข้อมูลสำหรับแสดงหน้าเว็บ coding-beaver.tech ดังนั้น Server ก็มีหน้าที่คอยส่งข้อมูลสำหรับใช้แสดงหน้าเว็บให้นั่นเอง

ซึ่งการที่ Web browser พยายามหาที่อยู่ของ Server เนี่ยก็คล้ายกับเวลาที่เราจะไปเยี่ยมใครที่บ้านนั่นแหละครับ

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

เช่นเดียวกัน สิ่งที่ Web browser อยากรู้คือ coding-beaver.tech อยู่ที่ไหน

ดังนั้นสิ่งที่ Web browser จะต้องทำคือไปถามสิ่งที่เรียกว่า Domain name server (DNS) ที่เปรียบเสมือน คนที่รู้ที่อยู่ของเว็บต่างๆมากมาย ไม่ว่าจะเป็น google.com, youtube.com, หรือ www-coding-beaver.tech ก็ตาม

โดย Web browser สื่อสารกับ DNS ผ่านทาง Internet โดยใช้ Internet protocol (ยังไม่จำเป็นต้องรู้รายละเอียดครับ แค่เห็นผ่านๆตาไว้ก็พอ)

.

**3.**เมื่อ DNS ได้คำขอมาจากคอมพิวเตอร์ของเราก็จะทำการค้นข้อมูลและส่งที่อยู่ของ Domain ที่เราอยากรู้นั่นก็คือที่อยู่ของ coding-beaver.tech ตอบกลับมาให้กับ Browser ของเราครับ

dns-illustration.jpeg

จากในภาพจะเห็นว่า ที่อยู่ในแบบที่เราเข้าใจ จะหน้าตาแตกต่างจากที่อยู่ที่คอมพิวเตอร์เข้าใจซักหน่อยนะครับ นั่นคือบ้านนาย A มีรูปแบบที่อยู่ที่เราคุ้นเคย แต่ที่อยู่ของ coding-beaver.tech กลับหน้าตาแบบนี้ 167.99.78.230 ซึ่งผมขอเกริ่นไว้ก่อนว่าสิ่งๆนี้เรียกว่า IP address ครับ

สำหรับคนที่ยังไม่รู้ว่า IP address คืออะไร

IP address คือที่อยู่ของ Computer ไม่ว่าจะเป็น Computer ของ ผม ของคุณผู้อ่าน หรือเครื่อง Server เมื่อทำการต่อ Internet แล้วก็จะมี IP เป็นของตัวเอง

ทำหน้าที่คล้ายๆกับที่อยู่ของเรานั่นแหละครับ ถ้าเรารู้ที่อยู่ของใคร เราก็สามารถขับรถไปหาเขาได้

เช่นเดียวกันถ้าคอมพิวเตอร์รู้ IP address ของ คอมพิวเตอร์ ตัวไหน ก็จะสามารถสื่อสารกับคอมพิวเตอร์เครื่องนั้นได้

**4.**หลังจากที่ Web browser ได้รับที่อยู่ของ server ของ coding-beaver มาแล้ว (นั่นก็คือ IP: 167.99.78.230 ของ coding-beaver) ก็จะทำการส่ง HTTP request ไปหา Server ของ coding-beaver ได้ถูกที่นั่นเอง

สำหรับคนที่ยังไม่รู้ว่า HTTP คืออะไร

HTTP ย่อมาจาก Hypertext Transfer Protocol คือรูปแบบของการสื่อสารประเภทหนึ่ง ที่ Computer เข้าใจ

ให้ลองนึกถึงเวลาเราสั่งสินค้าออนไลน์ให้มาส่งที่บ้านก็ได้ครับ

บนกล่องต้องมีชื่อ และที่อยู่ของผู้ส่งและผู้รับเสมอถูกมั้ยครับ และโดยส่วนใหญ่แล้วที่อยู่ของผู้ส่งมักจะอยู่มุมซ้ายบนของกล่อง ส่วนที่อยู่ของผู้รับก็มักจะอยู่ตรงกลางของกล่องใช่มั้ยครับ

.

ทำไมต้องเป็นแบบนั้นหล่ะ?

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

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

เช่นเดียวกันกับ Computer ถ้าเรามีรูปแบบการสื่อสารที่เป็นรูปแบบเดียวกันก็จะทำให้สื่อสารกันเข้าใจง่าย เหมือนการจ่าหน้ากล่องพัสดุให้ถูกต้อง หรือการพูดภาษาเดียวกัน

.

ตัวอย่าง HTTP บางส่วนตอนส่งไปหา coding-beaver (ดูเล่นๆให้ผ่านตา ยังไม่จำเป็นจะต้องเข้าใจอะไรทั้งนั้นครับ)

Request URL: coding-beaver.tech Request Method: GET Status Code: 200 (from service worker) Referrer Policy: strict-origin-when-cross-origin

**5.**หลังจาก Server ของ coding-beaver ได้รับ Request แล้ว ก็จะทำการส่งไฟล์ HTML กลับไปให้ Browser

**ซึ่งไฟล์ HTML จะประกอบไปด้วย 3 ส่วนหลักๆนั่นคือ**
1. HTML
2. CSS
3. JavaScript

และ HTML, CSS, และ JavaScript นี่แหละคือพื้นฐานเชิงปฏิบัติที่ทุกคนควรจะค่อยๆศึกษากันต่อไป หลังจากเข้าใจภาพรวมการทำงานของเว็บแล้วนะครับ

ในบทความนี้จะยังไม่ลงรายละเอียดส่วนนี้มาก แต่จะเล่าให้ฟังคร่าวๆครับ

เอาหล่ะเรามาค่อยๆไล่ดูไปทีละตัวกัน

.

### HTML

ย่อมาจาก Hypertext Markup Language คือภาษาที่ Web browser เข้าใจ

ซึ่งหน้าตาของ HTML อาจจะหน้าตาแบบนี้

```html
<body>
  <div>
    <h1>Coding Beaver</h1>
    <p>ขอเป็นกำลังใจให้ทุกคนเรียนรู้ต่อไปครับ</p>
  </div>
</body>

ซึ่งถ้าให้เราเป็นคนอ่านก็อาจจะงงๆ แต่ว่าถ้า Browser ของเราได้อ่านแล้วหล่ะก็จะสามารถแปลออกมาเป็นแบบนี้ให้เราเห็นได้

unstyled-html.png

(สังเกตว่า Website ยังไม่สวยงามเท่าไหร่ใช่มั้ยครับ นั่นเป็นเพราะมันยังขาด CSS อยู่นั่นเอง ซึ่งเดี๋ยวผมจะอธิบายต่อไปครับ)

ถ้าเทียบการเขียน Website เหมือนกับการสร้างบ้านหล่ะก็ HTML จะเปรียบเสมือนโครงสร้างของบ้าน ตั้งแต่เสาเข็ม เสารับน้ำหนักต่างๆ กำแพงที่คอยแบ่งสัดส่วนว่าห้องไหนอยู่ตรงไหน

ดังนั้นเวลาเขียน Website เนี่ย อย่างแรกสุดที่ต้องเขียนก็หนีไม่พ้น HTML เนี่ยแหละครับ

.

CSS

ย่อมาจาก Cascading stylesheet เป็นอีกภาษาหนึ่งที่ Browser เข้าใจ ซึ่ง CSS มีหน้าที่ในการตกแต่ง HTML ให้สวยงาม

ถ้า HTML เป็นเหมือนโครงสร้างของบ้านหล่ะก็ CSS ก็เปรียบเสมือนอุปกรณ์ในการตกแต่งบ้านให้สวยงาม หรือจะเทียบเป็นเฟอร์นิเจอร์ต่างๆก็คงไม่ผิด

ซึ่งถ้าเราสามารถใช้งาน CSS เป็นก็จะเปลี่ยนจากหน้าเว็บขาวๆโล่งๆเมื่อกี้ให้กลายเป็นแบบนี้ได้โดยใช้เวลาไม่นาน

styled-html.png

เหมือนกับการตกแต่งบ้าน โดยการทาสี และวางเฟอร์นิเจอร์ต่างๆนั่นเอง

ตัวอย่างภาษา CSS ที่ใช้ตกแต่งตัวอย่างเมื่อกี้ (ยังไม่ต้องเข้าใจอะไรเลยครับ แค่เห็นผ่านตาไว้ก็พอครับ)

body {
  background-color: #f3fffd;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 6rem;
  background: rgb(210,255,247);
  background: linear-gradient(290deg,
    rgba(210,255,247,1) 0%,
    rgba(210,255,247,1) 50%,
    rgba(126,237,202,1) 50%,
    rgba(39,218,156,1) 100%);
  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  color: #172A3A;
}

h1 {
  font-size: 5rem;
  font-weight: 600;
  font-family: sans-serif;
  margin-top: 0;
}

p {
  font-size: 2rem;
  font-family: sans-serif;
  margin-bottom: 0;
}

ตัวอย่าง Code แบบที่มี และ ไม่มี CSS

JavaScript

เป็นภาษา Programming Language ภาษาเดียวที่ Web Browser เข้าใจ

Programming Language คือภาษาที่สามารถใช้สั่งการ Computer ได้โดยตรง ซึ่งถ้าเขียนเป็นจะสามารถสั่งให้ Computer ทำสิ่งที่ซับซ้อนขึ้นได้ เช่นการคำนวณ การใช้ if, else condition หรือการพูดคุยกับคอมพิวเตอร์ตัวอื่นผ่านการส่ง http request

พูดอีกอย่างคือ JavaScript เทียบเท่าได้กับภาษาเขียนโปรแกรมอย่าง C, Java, หรือ Python ครับ เพียงแต่ถ้าจะเขียน Web หล่ะก็ ต้องใช้ JavaScript เท่านั้น (เพราะ Browser มันเข้าใจแต่ JavaScript นั่นเอง)

ถ้า HTML เป็นโครงสร้าง ส่วน CSS เป็นอุปกรณ์ตกแต่งแล้วหล่ะก็ ผมขอเปรียบเทียบ JavaScript เป็นกลไกต่างๆที่ซับซ้อนภายในบ้านครับ

ระบบไฟฟ้า ระบบน้ำ ระบบประตูอัตโนมัติ หรือว่าระบบลิฟต์ภายในบ้าน เป็นต้น

สมมติว่าเราอยากได้ Feature เครื่องคิดเลขไปอยู่บน Website ของเรา ก็ต้องใช้ภาษา JavaScript เขียนขึ้นมา

หรือถ้าซับซ้อนขึ้นหน่อยให้นึกถึง Facebook ที่ User แต่ละคนเห็น Feed ไม่เหมือนกัน เพราะว่า Facebook มีการใช้ JavaScript ไปดึงข้อมูล Feed ที่แตกต่างกันของแต่ละคนมาจากระบบหลังบ้านของ Facebook นั่นเอง

facebook-feed.jpeg

โดยปกติแล้วการทำงานกับ HTML CSS และ JavaScript นั้นมักถูกเรียกว่างาน หน้าบ้าน หรือ Frontend ครับ เพราะเป็นงานส่วนที่เกี่ยวกับหน้าตาของ Web ที่ User จะได้เห็น เป็นงานที่รับหน้าของ User นั่นเอง

และเราก็จะสามารถเรียก Web developer ที่ทำงานกับ Frontend เป็นหลักว่า Frontend developer ก็ไม่ผิดครับ

เอ๊ะแล้วเมื่อมีงานหน้าบ้าน ต้องมีงานหลังบ้านด้วยมั้ย?

มีสิครับ!

แต่จะสังเกตได้ว่า coding-beaver.tech ในปัจจุบัน มีแต่ส่วน Frontend เท่านั้นเพราะยังไม่ส่วนที่ซับซ้อน (ในอนาคตสมมติว่ามีการทำระบบ Online course ก็จะต้องมีระบบหลังบ้านแน่นอน)

ถ้า Website เริ่มซับซ้อนมากขึ้นก็ควรจะมีระบบหลังบ้าน หรือ Backend เข้ามาด้วย เพราะอาจจะต้องมีการเก็บข้อมูลใน Data base เพิ่มขึ้นมา เหมือน Facebook ที่ผมยกตัวอย่างไปเมื่อครู่

และแน่นอนครับ Web developer ที่ทำงานส่วน Backend เป็นหลัก ก็มักจะถูกเรียกว่า Backend developer ครับ

.

**6.**เมื่อ Web browser ได้รับ HTML แล้วก็จะนำไป Render หรือแปลเจ้า HTML ที่ได้ให้ดูตัวอย่างไปด้านบนออกมาเป็นหน้าเว็บที่สวยงามให้ User หรือพวกเรา ได้เห็นนั่นเองครับ

.

สรุป

จากที่ผมอธิบายการทำงานของ Web แบบคร่าวๆไป จะเห็นว่ามีขั้นตอน 6 ขั้นตอนด้วยกัน แต่ไม่ต้องตกใจครับ เพราะงานหลักๆส่วนใหญ่ ที่จะต้องเรียนรู้ต่อไป เพื่อที่จะเป็น Developer เนี่ยอยู่ที่ขั้นตอนที่ 5 เป็นหลักนี่แหละครับ

หรือจะให้พูดอีกอย่างก็คือ Developer ควรเรียนรู้ที่จะเขียน HTML, CSS, JavaScript ให้เป็นก่อนเป็นอันดับแรก

สำหรับขั้นตอนอื่นๆ รู้ไว้เท่านี้ก่อนก็พอครับ เพราะเดี๋ยวพอเราเริ่มเรียนรู้จากการเขียน HTML, CSS, และ JavaScript ไปเรื่อยๆ เราจะค่อยๆเริ่มเห็นภาพมากขึ้นอย่างอัตโนมัติ

ถ้าคุณอ่านมาถึงตรงนี้ได้ ผมขอบอกเลยว่าคุณเริ่มต้นได้ดีมากแล้วครับ เก่งมากครับทุกคน เพราะคุณสามารถมองภาพรวมการทำงานของ Web ออกแล้ว (ผมเองใช้เวลาเรียนรู้เป็นปีกว่าจะเห็นภาพแบบที่เล่าให้ทุกคนฟังไปครับ) .

🤔 เริ่มต้นยังไงดี?

Next step ผมแนะนำว่าให้เรียนรู้การเขียน Frontend (HTML, CSS, JavaScript) ก่อนอย่างอื่นครับ

เพราะว่าส่วน Frontend เป็นส่วนที่เข้าใจง่ายที่สุด เห็นภาพง่ายที่สุด และเหมาะสมกับการเริ่มต้นเรียนรู้มากที่สุด

เราจะสามารถเขียนหน้าเว็บที่สวยงามได้ทันที และนอกจากนั้นจะค่อยๆเห็นภาพการทำงานร่วมกันของ Frontend กับ Backend ได้อีกด้วย

หลายๆคนเรียกว่าการเขียน HTML, CSS, และ JavaScript เนี่ยเป็นพื้นฐานที่ต้องสร้างให้มั่นคงของ Web development เลยครับ

หลังจากเรียน HTML, CSS, และ JavaScript เป็นพื้นฐานแล้วเนี่ย เราอยากจะเริ่มไปเรียน Backend หรืออยากลองเริ่มไปเรียน Mobile application developement ก็จะทำได้ง่ายขึ้นมากๆเลยครับ

เปรียบเทียบกับการหัดว่ายน้ำก็ได้ครับ อย่างแรกที่เราต้องทำเป็นเลยคือการลอยตัวให้ไม่จม ถูกมั้ยครับ

ก่อนที่จะว่ายน้ำท่าผีเสื้อได้ ก็ต้องผ่านท่าลูกหมาตกน้ำมาก่อนทั้งนั้น

ดังนั้นปูพื้นฐานให้แน่นก่อน แล้วหลังจากนี้จะเลือกสายไปทางไหน ก็ได้ทั้งนั้นครับ

Coding Beaver ขอเป็นกำลังใจให้ทุกคนเรียนรู้ต่อไปนะครับ

.

ขอพระเจ้าอวยพรทุกคนครับ

📖 เรียนรู้เพิ่มเติม