คอร์สเรียนเขียนโปรแกรม Web Front-end ฉบับฉับไว (W701)

ใน Course นี้จะเป็นการสอน Web โดยเน้นที่ Front-end เป็นหลักสำหรับนักเรียนที่ไม่มีพื้นฐานด้าน Web มาเลย ทำให้เข้าใจการทำงานของ Web Front-end โดยเน้นความรวดเร็วของ Course ซึ่งใน Course นี้จะเป็นสอนแบบง่าย ๆ แต่ใช้งานได้จริง สำหรับนักเรียนที่ต้องการเรียนแบบลงลึกขอแนะนำ course PHP101-J

Expert-Programming-Tutor ขอเสนอ Course เรียนเขียน web ฝั่งหน้าบ้าน ที่ทำให้ท่านเรียนการเขียนเว็บ ยุคใหม่แบบไม่ยากสามารถทำได้แม้ไม่มีความรู้การเขียนโปรแกรมมาก่อน เพราะเราสอนตั้งแต่เริ่มต้น (ยกเว้นเนื้อหาตั้งแต่ JavaScript เป็นต้นไป ที่ต้องมีความรู้ด้านการเขียนโปรแกรมมาก่อนแล้ว แต่ทั้งนี้ถึงแม้ไม่มีก็สามารถทำตามได้จนจบ (แต่อาจจะไม่เข้าใจและประยุกติ์ไม่ได้) )

Download รายละเอียด Course WEB Front-End

คำอธิบายรายวิชา

Course นี้เป็น Course ที่จะสอนท่านสร้าง web site ด้วยตัวของท่านเองตั้งแต่เริ่มต้น จนกระทั้งได้ web ที่สามารถใช้งานได้จริงและดูดี

Course นี้จะพาท่านเข้าสู่โลกของการทำ Web Front-End แบบง่ายๆ แต่ได้ผลลัพธ์ ที่สวยงาม โดยจะเป็นการเรียนโดยเริ่มต้นจากการอธิบายและทำให้ดู เนื้อหาจะครอบคลุม การทำเว็บด้วยเทคโนโลยีใหม่ล่าสุด พร้อมทั้งเมื่อเรียนจบและทำตมหมดท่านจะได้ เว็บไว้ทำ portfolio

วัตถุประสงค์

เพื่อให้ผู้เรียนเข้าใจการทำงานของ WEB Front-end เหมาะสำหรับผู้เรียนที่มีเวลาน้อย

วัตถุประสงค์หลัก (Primary objectives)

1. เพื่อให้นักเรียนสามารถสร้าง WEB SITE ฝั่ง Client ได้
2. เข้าใจการทำงานของ HTTP GET, POST, …
3. เข้าใจและสามารถใช้ HTML
4. เข้าใจและสามารถใช้ CSS และ บางส่วนของ CSS3
5. สามารถสร้าง EFFECT ต่าง ๆ ในหน้า WEB ได้
6. ทำ form สำหรับกรอกข้อมูลต่าง ๆ
7. สามารถสร้าง web site ตาม Design ที่มีได้
8. เข้าใจการประกอบกันของ HTML, CSS, JavaScript ในการสร้างหน้าเว็บให้สามารถใช้งานได้
9. จัด Layout ของ Web ด้วยเทคนิค

• a. Classical Technicc
• b. Modern Technicc

10. สามารถใช้ THEME ต่าง ๆ ที่มีอยู่แล้วมาประกอบกันเป็น web
11. เข้าใจการเรียกใช้ API เบื้องต้น (ถ้าไม่เคยเรียนเขียนโปรแกรมมาก่อนอาจจะงง)
12. เข้าใจ JSON (ถ้าไม่เคยเรียนเขียนโปรแกรมมาก่อนอาจจะงง)
13. เข้าใจ XML (ถ้าไม่เคยเรียนเขียนโปรแกรมมาก่อนอาจจะงง)

วัตถุประสงค์รอง (Secondary objectives)

1. เข้าใจ JavaScript
2. ทำหน้าเว็บสำหรับการ login
3. การดึงข้อมูลจาก server แบบ พิสดาร
4. การใช้ JavaScript Lib. ต่าง ๆ เนื้อหาแถมพิเศษ ไม่ใช่วัตถุประสงค์แต่มีสอนใน Course (OPTIONAL) ไม่ได้เป็นส่วนประกอบของ Course นี้
5. Using Differential Equation to Create Spring like Effect
6. Sorting Algorithm
7. Animation for Displaying Sorting Algorithm step by step

W701 เรียนอะไรบ้าง

• Intro to WEB: เรียนรู้พื้นฐานเกี่ยวกับเทคโนโลยีเว็บ เช่น อินเตอร์เน็ตทำงานอย่างไร เว็บไซต์ทำงานอย่างไร การติดตั้ง Software ต่าง ๆ
• HTTP: เรียนรู้เกี่ยวกับ HTTP ซึ่งเป็นมาตรฐานการสื่อสารที่ใช้สำหรับแลกเปลี่ยนข้อมูลระหว่าง client และ server ว่าต้องรับ/ส่งข้อมูลอย่างไร
• HTML: เรียนรู้การเขียน HTML ซึ่งเป็นภาษา Markup มาตรฐานที่ใช้ในการบอกโครงสร้างของหน้าเว็บ ซึ่งประกอบไปด้วย element มากมาย และ element เหล่านี้จะเป็นตัวบอก browser ว่าจะต้องแสดงผลหน้าเว็บทั้งในด้านข้อมูลและความสวยงามอย่างไร
• CSS: เรียนรู้การเขียน CSS และการใช้ร่วมกับ HTML โดยเน้นไปที่ความสวยงามของหน้าจอทำให้สามารถจัดการรูปแบบหน้าตาของเว็บได้เป็นระบบมากขึ้น
• CSS3: เรียนรู้การเขียน CSS3 ซึ่งเป็นเวอร์ชันที่แยกตัวออกมาจาก CSS ธรรมดาแล้วเพิ่มความสามารถและฟีเจอร์ต่าง ๆ สามารถจัดการหน้าเว็บได้ทั้งในเรื่อง structuring, styling และ formatting
• API: ทำความรู้จัก ทดลองสร้าง และใช้งาน API ซึ่งเป็นวิธีที่คอมพิวเตอร์ใช้คุยกัน อาจจะเป็นคุยกันระหว่างโปรแกรมภายในเครื่องเดียวกันเอง หรือคุยกับคอมพิวเตอร์เครื่องอื่นผ่าน Internet protocol เช่น HTTP ก็ได้ อ่านบทความเกี่ยวกับ API เพิ่มเติมได้ที่นี่
• JavaScript: เรียนรู้การเขียน JavaScript ซึ่งเป็นภาษาเขียนโปรแกรมสำหรับเว็บ สามารถใช้อัปเดตหรือเปลี่ยนแปลงการทำงานของเว็บไซต์ขณะทำงานได้ เช่น HTML Content หรือ CSS นอกจากนี้ยังใช้ในการคำนวณหรือเก็บข้อมูลได้อีกด้วย อ่านบทความเกี่ยวกับ JavaScript เพิ่มเติมได้ที่นี่
• JavaScript framework: เรียนรู้เกี่ยวกับ JavaScript framework ที่เป็นที่นิยมต่าง ๆ
• Progressive Web Apps: เรียนรู้และทดลองทำ PWA ซึ่งเป็นมาตรฐานการทำเว็บที่กำหนดโดย Google โดยเป็นการนำจุดเด่นของ Native Apps กับ Web Apps มารวมกัน ทำให้ผู้ใช้งานสามารถเข้าถึงเว็บไซต์ได้อย่างรวดเร็วโดยที่มีประสิทธิภาพการใช้งานแบบใกล้เคียงกับการติดตั้งแอปพลิเคชันบนเครื่อง
• Intro to react and vue.js: แนะนำการใช้งาน React ซึ่งเป็น User Interface Library ของ JavaScript ใช้เป็นเครื่องมือสำหรับสร้าง UI components ที่กำลังได้รับความนิยม และ Vue.js ซึ่งเป็น JavaScript Framework ตัวหนึ่งที่เราสามารถเพิ่มเข้าไปในหน้า HTML ได้เลยโดยใส่ไว้ใน tag script
• Workshop: ทดลองสร้างเว็บต่าง ๆ หลากหลายรูปแบบ

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

ความรู้พื้นฐานก่อนเริ่มเรียน

• การใช้ Computer เบื้องต้นเช่น แตก Zip File , แก้ virus , สร้าง File แก้นามสกุล File หา Path File ต่าง ๆ ในเครื่องตัวเอง
• คณิตศาสตร์ม.ต้น, ม.ปลายบางเรื่อง เช่น Set , Function , Logics , Matrix , Vector , Complex Number (จริง ๆ ไม่จำเป็นแต่ถ้ารู้เราสามารถ ยืนยันได้ 99% ว่าเรียนจบแล้วเข้าใจแน่นอน )
• ภาษาอังกฤษพื้นฐาน

สิ่งที่จะได้รับเมื่อสมัครเรียน

• วีดีโอเนื้อหารวมกว่า 47 ชั่วโมง
• สิทธิ์ในการใช้งานโปรแกรม EPT_Kids โปรแกรมเพื่อการเรียนรู้เกี่ยวกับการเขียนโปรแกรมที่พัฒนาโดย EPT
• สิทธิ์ในการถามคำถามเมื่อเรียนแล้วไม่เข้าใจ

สิ่งที่จะได้รับเมื่อเรียนจบและทำการบ้านครบ

• เข้าใจเทคโนโลยี WEB พื้นฐาน จนถึงระดับ ADVANCE
• สร้างเว็บง่าย ๆ ด้วยตนเองได้
• เขียนหน้าเว็บ (Front-end) ง่าย ๆ ได้
• สร้างเว็บ Front-End แบบโคตรเทพได้
• อ่านเว็บ JavaScript ได้
• ตกแต่ง เว็บด้วย Bootstrap ได้
• รับส่ง API ได้
• มีกระบวนการคิดอย่างเป็นระบบ
• สามารถนำไปประยุกต์ต่อยอดได้เองในอนาคต

เรียนแล้วจะทำอะไรเป็นบ้าง

1. สามารถสร้าง web front-end ได้ด้วยตัวเอง
2. ท่านสามารถเอาผลงานที่ทำในนี้ ทำเป็นportfolio ไว้นำเสนอผลงานไว้สมัครเข้ามหาวิทยาลัย หรือ ไว้สมัครเข้าทำงาน
3. สามารถทำหน้าตาของเว็บต่าง ๆ เช่น

• a. เว็บแสดงข้อมูลบริษัทท
• b. เว็บ catalog สินค้า ทั้งแบบ static และแบบ dynamic (มีระบบหลังบ้าน))
• c. เว็บ สำหรับ Presentation ความคิดด

4. สามารถสร้าง เว็บที่มีลูกเล่นสวยงามได้
5. เราสอนโดยละเอียดเพื่อให้ท่านไม่งงสามารถทำตามได้ สอนท่านแก้ปัญหาต่าง ๆ ที่ท่านอาจจะเจอ เราสอนท่านทำแบบเหมือนมีคนมานั่งสอนข้าง ๆ
6. สามารถเข้าใจและใช้ Google Firebase ในส่วนของ Realtime database, Firebase Function, และระบบ login ขออธิบายเพิ่มเติมว่า ในส่วนนี้เราเอามาสอนเพราะว่าให้นักเรียนเห็นภาพการทำงานของหน้าเว็บทั้งกระบวนการ ซึ่งในปัจจุบันเรานิยมใช้บริการของ Cloud ซึ่งมีหลายตัว Google Firebase เป็นหนึ่งในนั้น ซึ่งจริง ๆ ก็มีอีกหลายเจ้าที่ทำเช่น Heroku, Aws Amplify และ ของ Microsoft ซึ่งมีรายละเอียดที่แตกต่างกันแต่โดยหลักการพื้นฐานก็เหมือน ๆ กันบางส่วน ดังนั้นเราจะทำให้ท่านใช้บริการพวกนี้ได้ และเข้าใจการทำงานของ เว็บมากขึ้น
7. สามารถ upload เว็บขึ้น host เพื่อใช้งานจริงได้
8. สามารถใช้ JavaScript เพื่อดึงข้อมูลจาก Back-end มาแสดงได้อย่างถูกต้องสวยงาม
9. เข้าใจการทำงานของ HTTP (ในส่วนวิธีการใช้)
10. เป็นพื้นฐานไว้ต่อยอดเรื่องอื่น ๆ เช่น เขียนโปรแกรมบนมือถือ ซึ่งหลักการบางส่วนก็ใช้เนื้อหาจากในนี้เป็นประสบการณ์
11. พิเศษ เรียนจบแล้ว ท่านจะได้เว็บที่พร้อมใช้งานได้จริง ไปเลย เพราะเราจะพาท่านทำใน workshop

เหมาะกับใคร

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

ไม่เหมาะกับใคร

• เทพด้านการทำเว็บ WEB อยู่แล้ว

คำถามที่มักพบบ่อย

คำถาม เนื้อหาใน course นี้ต่างอย่างไรกับ Course WEB PROGRAMMING (PHP101-X (X= J , CS,C++ , PY ,VB, C ) ) คำตอบ ต่างกันดังนี้ หมายเหตุ：เนื้อหาที่ทับซ้อนกันเฉพาะทฤษฎีบางส่วนเท่านั้น ส่วนของ Project ไม่ทับกัน นักเรียนสามารถเรียนได้ทั้งสอง course โดยไม่มีอะไรทับกัน

• Basic Programming (Computer Theory, Variable, Math evaluation, Loop, Loop N-D, Array, Recursive, Function, … ) : PHP101-X มีสอน , W701 นี้ไม่ได้สอนสอน
• Programming Algorithm and Problem Solving
• : PHP101-X มีสอน , W701 นี้ไม่ได้สอนสอน
• OOP Programming (Class, OOP Subject, OOP Concept, Inheritance, Polymorphism, Accessibility, Interface, Basic Design Pattern, … ) : PHP101-X มีสอน , W701 นี้ไม่ได้สอนน
• 300 Programming Solving Problem
• : PHP101-X มีสอน , W701 นี้ไม่ได้สอนสอน
• Programming Project : PHP101-X มีสอน , W701 นี้ไม่ได้สอนสอน
• Database Concept (Design, Normalization , …)
• : PHP101-X มีสอน , W701 นี้ไม่ได้สอนสอน
• SQL Basic to advance : PHP101-X มีสอน , W701 นี้ไม่ได้สอนด้สอน
• **Web Front-End BASIC ** (HTML, CSS, JAVASCRIPT, AJAX, JQUERY, Html template , Google maps API, …) : PHP101-X มีสอน , W701 นี้ก็สอน ทั้งนี้ไม่ทับกับใน PHP101101
• Web Front-End Advance (jQuery, Ajax Advance, Bootstrap ,) : PHP101-X มีสอน , W701 นี้ก็สอนนี้ก็สอน ทั้งนี้ไม่ทับกับใน PHP101
• JavaScript เบื้องต้น : PHP101-X มีสอน , W701 นี้ก็สอนน ทั้งนี้ไม่ทับกับใน PHP101
• JavaScript เต็มๆ แต่มีเต็มกว่านี้อีกใน course JS : PHP101-X มีสอน , W701 นี้ก็สอนแต่ไม่มากเท่าากเท่า
• Building your own CMS : PHP101-X มีสอน , W701ไม่ได้สอน้สอน
• Building Web for ecommerce : PHP101-X มีสอน , W701 นี้ก็สอนแต่ไม่มี backend
• Regular Expression : PHP101-X มีสอน , W701ไม่ได้สอน
• XML : PHP101-X มีสอน , W701 ไม่ได้สอนสอน
• Secret Advance Topics (สุดยอดเทคนิคในการเขียนโปรแกรม) : PHP101-X มีสอน , W701 ไม่ได้สอนด้สอน
• Workshop Ajax Ecommerce : PHP101-X มีสอน , W701 นี้ก็สอน้ก็สอน
• สร้าง JavaScript Game : มีสอนทั้งคู่

สรุป

คอร์สเรียนเขียนโปรแกรม Web หลักสูตรเร่งรัด สอนตั้งแต่พื้นฐาน ไม่ว่าท่านจะเป็นนักเรียนนักศึกษา ไม่ว่าท่านจะเป็นผู้ที่ไม่มีประสบการณ์การเขียนโปรแกรมมาก่อน หรืออาจจะเคยเขียนโปรแกรมมาก่อนแต่ไม่สามารถประยุกต์เองได้ ก็สามารถเรียนกับทาง EPT ได้

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

สำหรับผู้ที่ต้องการเรียนแบบจัดเต็มคุ้มสุด ๆ ขอแนะนำ

• คอร์สเรียนเขียนโปรแกรมภาษา Java + Web Programming (PHP101-J)

ตัวอย่างโปรเจกต์ของนักเรียน EPT https://expert-programming-tutor.com/example_project.php

ตัวอย่างรูปภาพจากใน Course

เนื้อหาเรื่อง Layout และ Animation

เนื้อหาเรื่อง Dynamic Content With JavaScript และ DOM

เนื้อหาเรื่อง Data Visualization

เนื้อหาเรื่อง Animation ด้วย JavaScript และ CSS Animation

เนื้อหาเรื่อง Animation ด้วย JavaScript และ CSS Animation 2

เนื้อหาเรื่อง Layout และ Ready to use theme

workshop ระบบเช่ารถ (Layout and Animation )

workshop ระบบขายอสังหาริมทรัพย์ (Ajax, และอื่นๆ )

workshop ระบบจองตรวจ COVID-19 (JavaScript form validation)

workshop เกมฝึกความจำ (CSS Animation , สี เสียง media) และอื่นๆ