QR code component by OffyOk

ฮายยย! ยินดีต้อนรับทุกคน"ที่หลงกันเข้ามานะครับ" 👋

สำหรับใครที่หลงเข้ามา ผมขอแนะนำตัวก่อนเลยนะครับ ผมชื่อ Off หรือจะเรียกว่า "Offy" ก็ได้นะครับ ส่วน repo นี้คืออะไรล่ะ? repo นี้เป็นหนึ่งใน challenge จากเว็บไซต์ Frontend Mentor ซึ่งเป็นแหล่งรวมชาเลนจ์สำหรับฝึกทักษะด้านการพัฒนา frontend ที่มีชาเลนจ์ที่น่าสนใจมากมายรอให้เราเลือกกันไปทำเต็มไปหมด โดยในการทำ challenge นั้นก็ง่ายมากกกกก(หรือป่าว?) ก็คือให้เราเนี่ยเขียนให้ตัวหน้าเว็บของเราเนี่ยขึ้นมาให้ใกล้เคียงหรือเหมือนกับตัวแบบให้มากที่สุด และสำหรับโปรเจ็กต์นี้ก์คือ QR Code Component หน้าตาก็ตามรูปข้างล่างนี้เลยครับ

ส่วน Link นี้เป็นหน้า web ที่ผมเขียนออกมาได้นะครับ และ สำหรับคนที่สนใจอยากไปทำบ้างก็สามารถตามลิงค์นี้ไปตำกันได้เลยครับ QR code component

ไกด์ในการทำเพิ่มเติมนะครับ

1. ให้ไปเริ่มทำ create new repo แบบ public ที่ github นี้ก่อนได้เลยครับ. ที่เปิด public ไว้จะได้ทำเป็น page แล้วเอา submit ขึ้นไปบนเว็บของ Frontend Mentor ได้ตอนที่เราทำเสร็จแล้วได้นะครับ
2. เข้าหน้าเว็บ Frontend Mentor แล้วไป download ไฟล์เริ่มต้นของ project มาซึ่งในนั้นจะมีพวก asset ต่างๆที่ต้องใช้สำหรับ project นี้อยู่นะครับ อย่างเช่นพวกไฟล์รูปภาพ, ข้อมูล font size, font family
3. ตรงส่วนนี้ก็พอได้ไฟล์จาก Frontend Mentor มาแล้วก็แตกไฟล์แล้วก็เชื่อมกับ repo บน git hub มาไว้ก่อนเลยก็ได้ครับ (สำหรับข้อนี้แล้วแต่ความชอบของแต่ละคนเลยครับ อยากจะเขียนเสร็จก่อนแล้วค่อย push ขึ้นมาก็ไว้ทีหลังก็ได้ครับ)
4. ก่อนจะเริ่มทำการเขียนอยากให้ลองอ่านไฟล์ style-guide และก็ไฟล์ใน design กันสักหน่อยนะครับ ในตัวไฟล์ตัวนี้เขาจะเขียนข้อมูลเบื้องต้นเกี่ยวกับ style ของ project นี้มาให้
5. อ่านไฟล์ style เสร็จ ดูแบบเสร็จแล้วก็ลงมือทำกันได้เลยครับ แต่แนะนำอีกนิดนะครับ ว่าควรจะไปจัดตัว html ให้เสร็จก่อนนะครับเพราะตัว html ที่เขาให้มานี้จะยังไม่ได้มีการจัดโครงอะไรมาเลย เราก็ไปจัดอะไรกันให้เรียบร้อยก่อนครับ
6. หลังจากผ่านเวลาอันเนิ่นนาน เราก็มาถึงช่วงเวลาในการ push code กันมันขึ้นมาแล้วววนะครับ
7. พอ push code ขึ้นมาอยู่ที่ Github แล้วก็ไป setting page ขึ้นมา
8. ถึงเวลาส่งไปที่ Frontend Mentor แล้วดูผลลัพธ์กันได้เลยครับ 🚀🚀🚀

Setting Github page

1. เข้าไปที่หน้า Repo ของ code ชุดที่เราจะทำเป็น page นะครับ
2. ข้างบนจะมีเมนูที่ชื่อว่า Settings อยู่กดเข้าไปได้เลยครับ
3. ตรง tab ด้านซ้ายเลือก Pages
4. ตอนนี้เราจะอยู่ที่หน้าที่มีหัวข้อชื่อว่า GitHub Pages ให้ดูที่หัวข้อ branch แล้วเลือก branch เป็น main ครับ (กรณีใช้ push code ขึ้นมาที่ branch อื่นๆ ก็เลือก branch ที่ push ขึ้นมานะครับ)