ข้อ 3 ใช้ Bulma ช่วยในการจัดการ Style

ข้อ 3.1 สร้างปุ่มและใส่สีให้ปุ่มตามนี้เลยยยย การตั้งค่าต่าง ๆ ของ button ที่นี่

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode จากนั้นเขียน code ใน <div id="ex3_1">

ข้อ 3.2 มีข้อความให้มา นักศึกษาจะต้องใช้ Bulma ในการจัดรูปแบบข้อความตามนี้

ตัวอักษรอยู่ตรงกึ่งกลาง
ตัวอักษรขนาด 1.5 rem (ใช้ class ของ Bulma)
สีพื้นหลังเป็นสี info-light ดูสีต่าง ๆ ที่นี่
สีตัวอักษรเป็นสี info

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode จากนั้นแก้ไข attribute class ของ tag <p id="ex3_2">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ข้อ 3.3 มีปุ่มมาให้อีกละ ทำปุ่มและจัดตำแหน่งของปุ่มตามนี้

padding ของปุ่มแนวนอน 3rem แนวตั้ง 1rem ดู space ที่นี่
margin ของปุ่ม ด้านบน 3rem ด้านซ้าย 0.5rem ด้านล่าง 1.5rem
ปุ่มขนาด Meduim
ตัวอักษรของปุ่มเป็นตัวหนา ดู text weight ที่นี่
ปุ่มเป็นสี info

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode จากนั้นแก้ไข attribute class ของ tag <a id="ex3_3">

ปุ่มนี้กดได้แต่ไม่มีไรขึ้นหรอก

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

วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode จากนั้นแก้ไข code ใน <form id="form">

ชื่อจริง: นามสกุล:
วันเกิด: อายุ:

ชั้นปี
ปี 1 ปี 2 ปี 3 ปี 4

Subscribe News
Accept the agreement

ข้อ 3.5 หลังจากนักศึกษาได้เรียนวิชา Web Programing มาได้ 2 week แล้ว นักศึกษารู้สึกชอบวิชานี้เป็นอย่างมาก เลยอยากจะเขียนรีวิววิชานี้ให้คนอื่นได้รับรู้ถึงความน่าเรียน นักศึกษาจึงได้สร้าง Card ขึ้นมาก่อน เพื่อใช้ในการลิ้งค์ไปยังรีวิวของนักศึกษา โดยหน้าตาของ Card ที่นักศึกษาจินตนาการไว้จะมีลักษณะดังนี้ ดูวิธีสร้าง Card ที่นี่