โครงการอบรมเชิงปฏิบัติการเครือข่ายผู้ดูแลเว็บไซต์ระดับส่วนงาน มหาวิทยาลัยมหิดล ครั้งที่ 1/2564 “หลักสูตร CSS Framework”


โครงการอบรมเชิงปฏิบัติการเครือข่ายผู้ดูแลเว็บไซต์มหาวิทยาลัยมหิดล หลักสูตร “CSS Framework” โดย คุณกฤษฎา เฉลิมสุข วันที่ 27 – 28 มกราคม พ.ศ. 2564 เวลา 09.00 – 16.00 น. การอบรมในครั้งนี้ เนื่องจากเกิดสถานการณ์การแพร่ระบาดโรคโควิด-19 จึงได้มีการปรับเปลี่ยนรูปแบบการอบรมเป็นรูปแบบ Virtual Conference ผ่านระบบ WebEx Meeting และติดต่อสื่อสารกันผ่าน ChatGroup LINE SQUARE โดยรูปแบบการอบรมเป็นการฟังบรรยาย และมีแบบฝึกหัดให้ฝึกฝนทักษะในการแก้ปัญหาและสร้างเสริมการลงมือทำจริง และเน้นสร้างความสามารถในการเรียนรู้ด้วยตนเอง โดยมีเนื้อหาเกี่ยวกับการพัฒนา Web Application การทำหน้าWebsiteด้วย HTML และ CSS

  • กิจกรรม Day1 มีการเรียนรู้เกี่ยวกับการ Set up the application สำหรับการทำงานกับ CSS ได้แก่ การใช้งาน IDE การใช้งาน Dev Tools ซึ่งในครั้งนี้ ใช้ Chrome Developer Tools เป็นเครื่องมือตัวหนึ่งที่อยู่ภายใน Chrome ซึ่งมันสามารถช่วยให้เราสามารถ Debug หรือดูองค์ประกอบต่าง ๆ เว็บที่เราเขียนขึ้นมาได้และ ใช้ Online Editor (Codepen.io) ในการฝึก coding  มีการหลักการทำงานของ CSS และ HTML CSS Basic เช่น การกำหนดสี พื้นหลัง ตัวอักษร และการใช้งาน ใช้งาน flexbox  การจัด Layout ของ Elements บนหน้าเว็บ สามารถทำได้หลายวิธีเช่น Flexbox, Float,และ Grid ซึ่งการเรียนรู้ในแต่ละ part จะมีการฝึกทำ Lab โดยใช้ Codepen editor ในการฝึกใช้คำสั่งต่างๆ และตอนท้ายมีการมอบหมาย Homework project โดยใช้ CSS ในการทำหน้า Chat และมีกิจกรรมให้ส่งผลงานเข้าร่วมประกวด โดยมีรางวัล 3 อันดับ รางวัลที่ 1 ได้รับบัตร Starbuck Card มูลค่า 500 บาท รางวัลที่ 2 และ3  ได้รับบัตร Starbuck Card มูลค่า 300 บาท ซึ่งผู้เขียนได้รับรางวัลบัตร Starbuck Card มูลค่า 300 บาท
  • กิจกรรม Day 2 มีการเรียนรู้เกี่ยวกับการใช้งาน CSS Animations เป็นการกำหนดลักษณะ ก่อน ระหว่าง และ หลัง การแสดง หรือ คุณสมบัติต่างๆทำให้เห็นการเปลี่ยนแปลงของคุณสมบัติและการเคลื่อนไหวซึ่งการใช้ animation css จะทำให้หน้าเว็บของเราน่าสนใจมากขึ้น รวมถึง CSS Architecture, Components และ BEM ย่อมาจาก Block Element Modifier ซึ่งเป็นการแบ่งส่วนต่าง ๆ บนหน้าเว็บไซต์ออกเป็น Block, Element, และ Modifier นั่นเอง การใช้งาน SASS เป็น CSS Preprocessor ที่เมื่อเมื่อเราเขียน CSS อีกรูปแบบนึง (คนละ syntax) พอเวลาทำการ compile แล้วก็จะทำการแปลง Code ที่พิมพ์ไปให้กลับมาเป็น Code ที่อยู่ในรูปแบบของ CSS เหมือนเดิมและ NPM หรือ Node Package Manager คือเครื่องมือในการจัดการกับ package ของ Node.js โปรเจค ซึ่งถูกเขียนด้วยภาษา JavaScript การแปลง CSS เป็น SASS โดยการใช้โปรมแกรม VS codeในการทำงานร่วมกัน และต่อมาป็นการเรียนรู้การใช้งาน Media Queries เพื่อทำ Responsive Website  คือ การสร้างหน้าเว็บให้สามารถแสดงผลได้กับหลายขนาดของหน้าจอ เนื่องจากให้ปัจจุบันมีการสร้างเทคโนโลยีอุปกรณ์ต่างๆมากมาย เช่น หน้าจอคอมพิวเตอร์ หน้าจอโทรศัพท์มือถือ หรือ แม้กระทั่งหน้าจอ แท็บเล็ต รวมถึง Tools อื่นๆ ในการทำให้ CSS ใช้งานได้ง่าย และ Best Practice ต่างๆ โดยในตอนท้ายของวัน มีการมอบหมายให้ทำ Project สร้างหน้า Web โดยใช้ Component Bootstrap ที่ได้เรียนมาออกแบบให้ใกล้เคียงกับต้นแบบเว็บ Shopee ให้มากที่สุดตามรายละเอียดพื้นฐานที่กำหนด

สำหรับการเรียนรู้ใน 2 วันที่ผ่านมานี้ ทำให้ผู้เขียนได้เรียนรู้การออกแบบและจัดทำเว็บมากขึ้น ทั้งยังเป็นการเพิ่มศักยภาพการเรียนรู้ของตนเอง เพื่อให้ปฏิบัติงานตามที่ได้รับมอบหมายมีประสิทธิภาพมากยิ่งขึ้น


Mahidol University Library and Knowledge Center @ 2019