# ไม่มีหัวศิลป์ ไม่เก่ง Design เขียน Web ได้ไหม?

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

## 🍰 ส่วนประกอบหลักของเว็บ

โดยปกติแล้วเวลาพูดถึงงานการพัฒนาเว็บไซต์ เรามักจะแบ่งมันออกมาได้เป็น 2 ส่วนครับ นั่นก็คือ

1. **Front-end หรือ งานหน้าบ้าน**
    
2. **Back-end หรือ งานหลังบ้าน**
    

โดยที่งาน Front-end และ Back-end จะเป็น 2 ส่วนที่ทำงานร่วมกันเสมอเวลาที่เราพัฒนา Web application และงานทั้ง 2 แบบนี้แตกต่างกันยังไง และต้องใช้ทักษะอะไรบ้าง เราไปดูไปทีละตัวกันครับ

### 😆 Front-end (หน้าบ้าน)

Front-end หรืองานหน้าบ้าน ก็ตรงตามชื่อครับ คืองานที่เกี่ยวกับส่วนเว็บที่ User หรือผู้ใช้งานจะได้เห็น และได้ใช้งานโดยตรงนั่นเอง ไม่ว่าจะเป็น การออกแบบหน้าเว็บไซต์ หรือการพัฒนาหน้าเว็บไซต์

![Screen Shot 2565-01-27 at 16.55.15.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643277339345/KyeNEeHRL.png align="left")

นักพัฒนา Front-end จะต้องคำนึงถึง UX (User's Experience) หรือประสบการณ์ในการใช้งานหน้าเว็บไซต์ของเราเป็นหลัก อันจะนำมาซึ่งเว็บไซต์ที่ใช้งานได้ตอบโจทย์ และนอกจากนั้น เราจะต้องคำนึงถึง ความสวยงาม ความน่าเชื่อถือ และความน่าดึงดูดใจ ของเว็บไซต์อีกด้วย

**งานส่วน Front-end ถ้าใครที่มีทักษะด้านจินตนาการหรือความคิดสร้างสรรค์ก็จะได้เปรียบหน่อยๆ**ครับ เพราะว่าเราจะต้องทำงานในส่วนที่ User เห็นและได้ใช้งาน ถ้ามีหัวด้านนี้ก็จะช่วยให้ออกแบบ และทำหน้าเว็บออกมาได้สวยงามและรวดเร็วมากขึ้น

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

### 🔙 Back-end (หลังบ้าน)

Back-end หรืองานหลังบ้าน เป็นส่วนที่ไม่ได้ถูกเห็นโดยผู้ใช้งานโดยตรง แต่ก็เป็นส่วนที่สำคัญไม่แพ้กับ Front-end ครับ โดยงานส่วน Back-end นี้จะพบได้กับเว็บไซต์ที่มีความซับซ้อนมากขึ้น อย่างพวก Web application เป็นหลักเช่น Youtube, Facebook, หรือ Instagram เป็นต้น

![chris-ried-ieic5Tq8YMk-unsplash.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1643277801786/b722WLF13.jpeg align="left")

Photo by [Chris Ried](https://unsplash.com/@cdr6934?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

ทักษะที่ต้องใช้เต็มๆสำหรับงานหลังบ้านหรือ Back-end ก็คือทักษะการเขียนโปรแกรมหรือ Programming ทักษะการใช้งานระบบฐานข้อมูลหรือ Database เป็นหลัก

ซึ่งงานส่วนนี้ให้พูดง่ายๆคือ **ไม่ต้องใช้หัวศิลป์ หรือทักษะด้านจินตนาการที่เกี่ยวกับความสวยงามเลย** แต่ทักษะที่เราต้องใช้เป็นหลักคือทักษะการเขียนโปรแกรมหรือ Programming และทักษะการใช้งานระบบฐานข้อมูลหรือ Database

โดยถ้าระบบใหญ่ขึ้น เราจะต้องใช้ทักษะอื่นๆมาช่วย เช่นทักษะการออกแบบโครงสร้างหรือ Infrastructure ทักษะการใช้งานบริการ Cloud service เป็นต้น เพื่อที่จะทำให้ระบบที่เราพัฒนาสามารถ Scale หรือขยายขนาด รองรับการใช้งานได้มากยิ่งๆขึ้นไปครับ

### Front-end 🆚 Back-end

Front-end หรือ Back-end ดีกว่ากัน? ผมขอบอกเลยว่า ทั้งสองส่วนมีข้อดีและข้อเสียของตัวเองครับ แต่จะขอพูดถึงประเด็นที่ผมคิดว่าสำคัญกับคุณผู้อ่านทุกคนครับ

* **Front-end ดีกว่า สำหรับการเริ่มต้นเรียนรู้**
    

เพราะว่า Front-end เป็นส่วนที่เราทุกคนได้พบได้เจอกันในทุกวันของชีวิตอยู่แล้ว เช่นเราตื่นมาไถ Facebook ทุกเช้า เราก็ได้ใช้งานส่วนที่เป็นหน้าบ้านของ Facebook นั่นเอง ซึ่งการที่มันเข้าใจง่ายเนี่ยแหละ จะทำให้เราเรียนรู้ได้เร็วกว่าส่วนที่เรามองไม่เห็นอย่าง Back-end

* **Back-end ดีกว่าสำหรับคนที่ไม่มีหัวศิลป์**
    

เพราะว่า Back-end ไม่ต้องใช้ทักษะเรื่องความสวยงาม แต่เหมาะกับคนที่ชอบเรื่องการเขียนโปรแกรม และ การออกแบบระบบ อย่างตัวผมเองเริ่มต้นเรียน Front-end ก่อน แล้วพอผมเริ่มเข้าใจแล้ว ค่อยขยับมาศึกษา Back-end และพบว่าตัวเองชอบงาน Back-end มากกว่าครับ

* **Front-end และ Back-end ทำงานร่วมกันเสมอ**
    

เจ้า 2 ส่วนนี้เป็นส่วนที่ทำงานร่วมกัน นั่นคือ Front-end ทำหน้าที่เหมือนพนักงานต้อนรับในร้านอาหาร คอยดูแลลูกค้า รับออร์เดอร์อาหาร หรือ User ที่เข้ามาใช้งานเว็บไซต์ของเรานนั่นเอง

ส่วนงานที่ต้องอาศัยการคำนวณ หรือการเขียน/อ่าน ฐานข้อมูล จะเป็นงานของ Back-end ที่เปรียบเสมือนเชฟที่ทำอาหารอยู่ในห้องครัว โดยจะต้องรับออร์เดอร์ที่มาจาก Front-end อีกทีนึง แล้วจึงทำอาหารตามที่ลูกค้าต้องการ ให้พนักงานต้อนรับ หรือ Front-end เอาไปเซิร์ฟให้กับลูกค้า

เช่นถ้าเราเข้า Facebook แล้วกดเข้าไปดู Profile ของเพื่อนเราคนนึง สิ่งที่เกิดขึ้นคือ Front-end ของ Facebook จะทำการส่ง HTTP request มาที่ Back-end ของ Facebook เพื่อขอข้อมูลของเพื่อนเรามาให้

จากนั้น Back-end ก็จะทำการค้นข้อมูลจากฐานข้อมูล และส่งกลับมาให้ Front-end เป็นคนแสดงผลให้ เราเห็นนั่นเอง

## 😵 ไม่มีหัวศิลป์ทำไง?

ผมเองไม่มีหัวศิลป์เลย แต่ก็ทำงาน Front-end มาเป็นปีๆ ผมมีเทคนิคอะไรมาแนะนำบ้าง?

**ผมมีเทคนิคมาแนะนำ 3 อย่างครับคือ**

1. ใช้ Template
    
2. ทำงานกับ Designer
    
3. ทำเฉพาะ Back-end
    

### 🖼 ใช้ Template

การใช้ Template เป็นการช่วยให้เราไม่ต้องออกแบบหน้าเว็บของเราเอง เพราะว่าเราใช้สิ่งที่คนที่มีหัวศิลป์หรือหัวคิดสร้างสรรค์มากกว่าเราทำเอาไว้มาต่อยอด และที่ๆมี template ฟรีๆมีเยอะแยะครับแค่ลอง Search บน Google ว่า `free web design html css templates` เราก็จะเจอกับเว็บไซต์ที่แจก Template ฟรี และขาย templates ดีๆมากมาย ยกตัวอย่างเช่น

* https://www.free-css.com/free-css-templates
    
* https://templatemo.com
    
* https://html.design/
    

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

### 🎨 ทำงานกับ Designer

วิธีนี้ผมใช้บ่อยที่สุดเลยครับ เนื่องจากผมทำงานอยู่ในบริษัท Tech startup อยู่แล้ว นั่นหมายความว่าผมได้ทำงานร่วมกับ Web designer มืออาชีพ ที่เค้าจะคอยทำหน้าที่ออกแบบทั้ง User experience (UX) และ User interface (UI) ให้ผมเรียบร้อย หน้าที่ของผมคือการนำ Design เหล่านั้นมาแปลงเป็น Website ที่ทำงานได้จริงครับ

### 🧑🏻‍💻 ทำเฉพาะ Back-end

วิธีนี้เป็นวิธีที่ตรงไปตรงมาที่สุดสำหรับคนไม่มีหัวศิลป์นั่นก็คือ ไม่ต้องไปทำงานที่ต้องใช้หิวศิลป์นั่นเอง หนีมาทำ Back-end อย่างเดียว ใช้ทักษะด้านตรรกะ และการเขียนโปรแกรมชั้นเลิศของคุณให้เต็มที่ วิธีนี้ก็เป็นอีกวิธีนึงที่จะตอบโจทย์ครับ

แต่นั่นหมายความว่าถ้ามีงานส่วน Front-end เนี่ยเราก็จะไม่ทำด้วยตัวเองแต่ต้องหาคนอื่นมาทำงานส่วนนี้ให้เราครับ ซึ่งถ้าอยู่ในบริษัทเนี่ย ก็จะมีคนที่ทำทั้ง Back-end และ Front-end อยู่แล้ว

## 📚 สรุป

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

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

และผม Coding Beaver ก็อยากจะเป็นคนนึงที่เตรียมคุณให้พร้อมสำหรับการเป็น Software developer ขอแค่คุณสนใจ

> ลองอ่าน [บทความอื่นๆ](https://blog.coding-beaver.com/) ของผม หรือ เริ่ม [เรียนผ่าน Youtube](https://www.youtube.com/channel/UCNPxaf4kKjkNkP9hgtwdb5w) ก็น่าจะเป็นการเริ่มต้นที่ดีครับ

Coding Beaver ขอเป็นกำลังใจให้ทุกคนนะครับ

ขอพระเจ้าอวยพรครับ

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

* 🧑🏻‍💻 [รู้จัก Coding Beaver](https://coding-beaver.tech/about)
    
* 1️⃣ [สิ่งแรกที่ควรรู้ถ้าอยากเป็น Developer](https://www.youtube.com/watch?v=x5OzfQ6SE9I)
    
* 📚 [ช่องทางการเรียนรู้](https://www.coding-beaver.tech/#learning-channels)