happycode.guru

เรียนทำเว็บจาก happycode.guru

เกี่ยวกับเนื้อหาส่วนของ front-end

ในการทำเว็บนั้นส่วนของ front-end มีความสำคัญมากที่สุด เป็นความรู้ภาคบังคับในการทำเว็บไซต์ที่นับเป็นสื่อที่สำคัญแห่งยุคสมัย

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

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

HappyCode

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

เนื้อหาที่รวบรวมเบื้องต้นที่กำลังจัดทำสำหรับ front-end พื้นฐานนี้ก็ได้แก่ความรู้ html css และ javascript ในส่วนของ dom และ api สมัยใหม่ ผู้เรียนสามารถเข้ามาเรียนรู้และติดตามการอัพเดทได้เป็นระยะๆ โดยเว็บไซต์ happycode.guru นี้ได้จัดทำขึ้นควบคู่ไปกับช่อง youtube happycode และ facebook page happycode
โดยอาจารย์เอ๋ (ขวัญชัย พรหมณะ)

เกี่ยวกับเนื้อหา back-end และ CMS

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

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

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

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

เนื้อหาในส่วนของ wordpress นอกจากจะหนักไปทางการเขียนโค้ดทำ theme และ plugin แล้วอาจเพิ่มในส่วนของการทำ SEO และเทคโนโลยีแฝงอื่นๆ ตามความเหมาะสมด้วย ซึ่งไม่ใช่จะเป็นประโยชน์สำหรับผู้เรียน CMS และผู้สนใจทำ e-commerce เท่านั้น แต่ยังมีผลกับผู้ที่ชอบเรียนเขียนโค้ดเพียวๆจะเปิดโลกกว้างให้เกิดความหลากหลายในความรู้ได้อีกด้วย

สอน เรียน เขียน รู้ html

ทำไมต้องเรียน html ?

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

เรามีทางเลือกต่างๆมากมายในการสร้างเอกสาร html แต่วิธีที่ยืดหยุ่นและได้ผลดีที่สุดและทำให้เราสามารถเข้าถึงขีดสุดของความสามารถในการนำเสนอข้อมูลผ่านโลกอินเตอร์เน็ตได้ ก็คือการเรียนรู้และทำความเข้าใจ html นั่นเอง

เมื่อเรามีความสนใจเรียน html ไม่ว่าจะเป็นเพราะการบอกเล่า หรือจากความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ตและคอมพิวเตอร์ที่เรามี สิ่งหนึ่งที่เราต้องตรวจสอบความพร้อมของเราก่อนคือ เราต้องเข้าใจหรือทำการบ้านมาคร่าวๆ และไม่งงนักเมื่อกล่าวคำว่า Text File หรือ Ascii File หรือเมื่อพูดถึง UTF-8 และเมื่อรู้มาบ้างแล้ว ก็ไปลุยกันได้เลย...

ไปเรียนรู้กันสิครับ รออะไร

ตัวอย่างโค้ด html

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สวัสดีชาวโลก</title>
</head>
<body>
   <h1>นี่เป็นผลลัพธ์จาก html</h1>
   <h2>มีขนาด header ลดหลั่นกัน</h2>
   <h3>มีตั้งแต่ h1-h6</h3>
   <p>เป็นข้อความธรรมดาที่มีเบื้องหลังควบคุมโดย tag html</p> 
</body>
</html>        

ผลลัพธ์

นี่เป็นผลลัพธ์จาก html

มีขนาด header ลดหลั่นกัน

มีตั้งแต่ h1-h6

เป็นข้อความธรรมดาที่มีเบื้องหลังควบคุมโดย tag html



CSS คืออะไร ?

ทำไมต้องเรียน CSS ไปพร้อมกับ html ?

เอกสาร html มาตรฐานจะถูกแปลงให้คนอ่านง่ายๆบน web browser โดยมีรหัส html ช่วยจัดโครงสร้างข้อมูลในเอกสาร และเพื่อให้งานมีความสวยงาม จึงมีการใช้ CSS ช่วยกำหนดรูปแบบลักษณะการแสดงผล

ตัวอย่างโค้ด css

div {
    background-color: pink;
    width: 300px;
    border: 15px solid maroon;
    padding: 50px;
    margin: 20px;
}

ผลลัพธ์

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

ไปหน้าเรียน css

เหตุผลที่ต้องทำความเข้าใจ css

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

แต่ลำพังการจัดวาง tag ของ html ด้วยค่าเริ่มต้นก็มีขีดจำกัดมากมาย หากเรามีความรู้ด้านการออกแบบสื่อสิ่งพิมพ์ หรือพอมีประสบการณ์จากการสังเกตสื่อสร้างสรรค์ บนโลกอินเตอร์เน็ตด้วยตนเอง เราจะสร้างแบบนั้นบนหน้าจอเว็บบราวเซอร์ของเราได้ก็ต่อเมื่อเราเข้าใจกฎเกณฑ์การทำงานของ css คู่กันไปกับการจัดวางโครงสร้างของ html

การเรียนรู้ html จึงต้องทำไปพร้อมๆ กันกับการเรียนรู้ css โดยปริยาย

ตัวอย่างโค้ด html/css

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สวัสดีชาวโลก</title>
    <style> 
      /* ตรงนี้คือการกำหนดรูปแบบ css */
       p {color: red;}
    </style>
</head>
<body>
   <h3>การกำหนด css ด้วยตนเองทำให้เราสามารถควบคุมการแสดงผลบนหน้าเว็บได้</h3>
   <p class="red">เป็นข้อความธรรมดาที่กลายเป็นสีแดงเพราะมีการกำหนด css ให้ tag p</p> 
</body>
</html>        

ผลลัพธ์

การกำหนด css ด้วยตนเองทำให้เราสามารถควบคุมการแสดงผลบนหน้าเว็บได้

เป็นข้อความธรรมดาที่กลายเป็นสีแดงเพราะมีการกำหนด css ให้ tag p