บทความ IT เจ๋งๆ

6 Front-End Coding Ideas ที่จะช่วยทำให้คุณอยาก Coding มากขึ้น

19-ก.พ.-21

คัมภีร์เทพ IT

ก่อนที่จะเชี่ยวชาญในการเขียน Program นั้น คุณต้องใช้เวลาในการฝึกฝนและทุ่มเทในการ Coding ให้มากที่สุดเท่าที่จะทำได้ การมี Ideas ต่าง ๆ เพื่อเป็นแรงบันดาลใจในการฝึกฝนฝีมือก็มีส่วนสำคัญ และในบทความนี้จะมาแนะนำ 6 Front-End Coding Ideas ที่จะช่วยทำให้คุณอยาก Coding มากขึ้น ไม่ว่าคุณจะใช้ Tools หรือภาษา Programming ใดก็ตาม

1. Animated Race Track With Moving Cars

นี่คือสนามแข่งรถที่มีรถ 2 คันขับอยู่รอบ ๆ สนาม มันถูกสร้างขึ้นด้วย HTML, CSS และ SVG

“(CS)Scalextric” — By Jhey.

สิ่งที่คุณจะได้เรียนรู้จาก การสร้างสนามแข่งรถในรูปแบบ Animation:

  • Loop, Loop และ Loop! คุณจะต้องคำนวณ Graphic ใหม่ซ้ำ ๆ เป็นจำนวนมาก
  • HTML, CSS และ JavaScript
  • วิธีทำงานกับ SVG, CSS Animations และทำงานโดยใช้ทั้ง 2 อย่างร่วมกัน

2. Clickable French Cards

French Cards แบบที่สามารถ Click ได้เหล่านี้ มี 2 สถานะคือ สถานะซ่อน และ สถานะที่สามารถมองเห็นได้ ทุกครั้งที่คุณซ่อน Cards มันก็จะสร้างค่าแบบสุ่มขึ้นมาใหม่ทุกครั้ง

“CSS Random Cards” — By Adir

สิ่งที่คุณจะได้เรียนรู้จาก การสร้าง French Cards แบบคลิกได้:

  • Event Listeners – ทุกครั้งที่คุณคลิกบน Card จะมีบางอย่างเกิดขึ้น คุณจะต้องเชื่อม Card กับ JavaScript หรือ CSS
  • HTML, CSS และ JavaScript
  • วิธีติดตามสถานะของ Card และสร้างค่าใหม่ของ Card

3. Scrolling Letters

ในขณะที่คุณทำการเลื่อนลง ตัวอักษรก็จะม้วนพับปิดลง เมื่อคุณเลื่อนขึ้น ตัวอักษรก็จะคลี่เปิดขึ้นอีกครั้ง

“Scrolling letters” — By Aaron Iker

สิ่งที่คุณจะได้เรียนรู้จาก การสร้าง Scrolling Letters:

  • การทำงานกับ Mouse Scroll Event Listeners เมื่อใดก็ตามที่ User เลื่อนลง ก็ให้พับตัวอักษรและในทางกลับกัน
  • วิธีการ Iterate Loops และคำนวณ Graphic ใหม่เมื่อ User ทำการเลื่อน Page ไม่ว่าจะขึ้นหรือลง
  • การทำให้ App ทำงานบน Screen ที่มีขนาดเล็ก (เช่น Mobile Phones หรือ Tablets)

4. Custom Radio Buttons

ด้านล่างนี้คือ ตัวอย่างหน้าตาของ Radio Buttons ที่สามารถ Custom ได้

“Custom Radio Buttons” — By Metty

สิ่งที่คุณจะได้เรียนรู้จาก การสร้าง Radio Buttons ที่สามารถ Custom ได้:

  • การทำงานกับ HTML และ CSS
  • การ Coding ที่เกี่ยวกับ HTML Forms
  • การทำงานกับ Form และการสร้าง Inputs และ Radio Buttons ที่สามารถ Custom ได้

5. Quickchat Clone

Quickchat เป็น Chatroom ที่มี Theme ในโทน Dark แต่ก็ดู Clean คุณคงเคยสงสัยว่า จะสร้าง Chatroom ได้อย่างไร ใช่ไหม? นี่คือโอกาสของคุณแล้ว

Quickchat UI Themes” — By Aybüke Ceylan

สิ่งที่คุณจะได้เรียนรู้จากการสร้าง Quickchat Clone:

  • หลักการออกแบบ UI ที่ Clean และทันสมัย
  • วิธีเขียน HTML และ CSS ที่มีคุณภาพสูง

6. HSL Slider

HSL Slider เป็นแถบเลื่อนที่คุณสามารถลากไปทางซ้ายหรือขวา ขณะเดียวกันมันก็จะเปลี่ยนสีตามตำแหน่งของการเลื่อนของคุณ โดยจะสังเกตได้ว่า ลองสังเกตวิธีการใช้งาน Gradients และปรับระดับความเข้ม-อ่อนของสี

“React HSL Slider” — By Jhey

สิ่งที่คุณจะได้เรียนรู้จาก การสร้าง HSL Slider:

  • คำนวณ Graphic และสี ใหม่ซ้ำ ๆ เมื่อ User ลากแถบเลื่อน และอย่าลืมตัว Control สำหรับการไล่ระดับสีและความเข้ม-อ่อนของสี
  • วิธีทำงานกับ HSL, RGB และ Hex Code

ที่มา:  https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ