หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ผู้ให้คำปรึกษาด้านหน้า - บัตรหีบเพลงคำถามที่พบบ่อย

การออกแบบตัวอย่างสำหรับความท้าทายการเข้ารหัสการ์ดหีบเพลงที่พบบ่อย

การสาธิตสด


คำอธิบาย

ความท้าทายในการออกแบบหน้าตอบสนอง: ส่วนประกอบอินเทอร์แอคทีฟหีบเพลงเดี่ยว ทางออกของฉันสำหรับหนึ่งในความท้าทายสำหรับ frontendmentor.io

คุณสมบัติหลัก:

  • การแก้ปัญหาแบบอินเทอร์แอคทีฟ (คงที่) โดยไม่ต้องใช้สคริปต์ใด ๆ เฉพาะองค์ประกอบ HTML ดั้งเดิม
  • ขึ้นอยู่กับ pugjs และ stylus
  • SVG ภาพเคลื่อนไหว: ภาพเคลื่อนไหวถูกสร้างขึ้นโดยใช้ svgator

การใช้งาน

การติดตั้ง

นอกเหนือจากแพ็คเกจใน package.json ต้องติดตั้ง Pug-cli เพื่อดูและรวบรวม PUG ไปที่ HTML

การพัฒนา

ดูและรวบรวมปั๊กที่ HTML: 

npm run develop

การดูและรวบรวมสไตลัสเป็น CSS (CSS จะถูกรวบรวมในโฟลเดอร์ Styles/CSS): 

npm run watch:css

การให้เครดิต

  • ออกแบบโดยทีมผู้ให้คำปรึกษาด้านหน้า
  • รหัสที่เขียนโดย Ann-Dev
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด