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

ผู้ให้คำปรึกษาด้านหน้า - โซลูชันสูตรอาหาร

นี่เป็นทางออกสำหรับการท้าทายหน้าสูตรอาหารในที่ปรึกษาด้านหน้า ความท้าทายที่ปรึกษาส่วนหน้าช่วยให้คุณพัฒนาทักษะการเข้ารหัสของคุณโดยการสร้างโครงการที่สมจริง

สารบัญ

  • ภาพรวม
    • ความท้าทาย
    • ภาพหน้าจอ
    • ลิงค์
  • กระบวนการของฉัน
    • สร้างขึ้นด้วย
    • สิ่งที่ฉันเรียนรู้
    • การพัฒนาอย่างต่อเนื่อง
    • ทรัพยากรที่มีประโยชน์
  • ผู้เขียน
  • กิตติกรรมประกาศ

ภาพรวม

ความท้าทาย

บทสรุปสำหรับโครงการนี้คือการสร้างหน้าสูตรและทำให้มันดูใกล้เคียงกับการออกแบบให้มากที่สุดโดยเริ่มจากสินทรัพย์ต่อไปนี้:

  • JPEG Design Files สำหรับเลย์เอาต์มือถือและเดสก์ท็อป
  • คู่มือสไตล์สำหรับแบบอักษรสี ฯลฯ
  • สินทรัพย์ภาพที่ดีที่สุด
  • ไฟล์ตัวแปรและแบบคงที่
  • ไฟล์ HTML ที่มีเนื้อหาที่เขียนไว้ล่วงหน้า

ภาพหน้าจอ

ลิงค์

  • โซลูชันที่ปรึกษาด้านหน้า
  • ที่เก็บ GitHub
  • ไซต์สด

กระบวนการของฉัน

สร้างขึ้นด้วย

  • มาร์กอัปความหมาย HTML5
  • คุณสมบัติที่กำหนดเอง CSS
  • เวิร์กโฟลว์มือถือเป็นครั้งแรก

สิ่งที่ฉันเรียนรู้

โซลูชันนี้รวมถึงสามสิ่งที่ใหม่สำหรับฉัน:

  • เครื่องหมายรายการสไตล์
  • จัดแต่งทรงผม html ตาราง
  • ใช้การสืบค้นสื่อ

หน้าสูตรมีสองรายการที่ไม่ได้เรียงลำดับพร้อมเวลาเตรียมการและส่วนผสมตามลำดับและรายการที่สั่งซื้อพร้อมคำแนะนำ

สำหรับรายการที่สั่งซื้อฉันจัดรูปแบบเคาน์เตอร์โดยใช้ ::marker pseudo-etement: 

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

จัดแต่งทรงผมรายการสำหรับรายการที่ไม่ได้เรียงลำดับนั้นค่อนข้างท้าทายมากขึ้น ในไฟล์การออกแบบ JPEG สำหรับเค้าโครงมือถือเครื่องหมายจะไม่นั่งถัดจากบรรทัดแรกของข้อความ แต่อยู่ตรงกลางในแนวตั้งหากเนื้อหาข้อความของรายการจะล้อมรอบสองบรรทัด ฉันใช้เครื่องหมายที่กำหนดเองกับ ::before องค์ประกอบหลอกเพื่อจัดตำแหน่งเครื่องหมายด้วย FlexBox: 

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

เพื่อการเข้าถึงที่ดีขึ้นฉันใช้ role="list" บนองค์ประกอบ <ul> ใน HTML หากไม่มีมัน list-style: none จะทำให้เบราว์เซอร์ Safari ไม่รู้จักรายการในแผนผังความสามารถในการเข้าถึงอีกต่อไปและตัวอ่านหน้าจอจะไม่ประกาศข้อมูลเช่นจำนวนรายการอีกต่อไป

การพัฒนาอย่างต่อเนื่อง

ฉันต้องเรียนรู้การเพิ่มประสิทธิภาพรูปภาพ! ปัจจุบันไฟล์ที่ใหญ่ที่สุดในโครงการนี้คือภาพหน้าจอที่ฉันใช้สำหรับ readme นี้ ฉันเรียนรู้วิธีเพิ่มประสิทธิภาพไฟล์แบบอักษร ตอนนี้ขนาดไฟล์ของภาพหน้าจอมีขนาดใหญ่กว่าขนาดของไฟล์ตัวอักษรทั้งหมดรวมกัน

ทรัพยากรที่มีประโยชน์

  • สไตล์รายการสร้างสรรค์โดย Michelle Barker สำหรับ Web.de - บทความนี้ช่วยให้ฉันหาวิธีกำหนดรูปแบบเครื่องหมายรายการสำหรับทั้งรายการที่สั่งซื้อและไม่ได้เรียงลำดับ
  • ตารางการจัดแต่งทรงผมบน MDN - บทความนี้เป็นทบทวนที่ดีสำหรับเทคนิคการจัดแต่งทรงผมขั้นพื้นฐาน

ผู้เขียน

  • ผู้ให้คำปรึกษาด้านหน้า - @SabineEmden
  • mastodon - @sabineemden

กิตติกรรมประกาศ

โครงการนี้ใช้การรีเซ็ต CSS ของ Josh Comeau

ตระกูลตัวอักษรที่ใช้ในโครงการนี้คือ Serif และชุดเล็ก ๆ ฟอนต์ได้รับใบอนุญาตภายใต้ใบอนุญาตแบบฟอนต์แบบเปิด

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด