todo app frontend mentor

ผู้ให้คำปรึกษาด้านหน้า - แอป TODO

ยินดีต้อนรับ!

ขอบคุณสำหรับการตรวจสอบความท้าทายการเข้ารหัสส่วนหน้านี้

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

ในการทำสิ่งที่ท้าทายนี้คุณต้องมีความเข้าใจที่ดีเกี่ยวกับ HTML, CSS และ JavaScript

ความท้าทาย

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

คุณสามารถใช้เครื่องมือใด ๆ ที่คุณต้องการเพื่อช่วยให้คุณท้าทาย ดังนั้นหากคุณมีสิ่งที่คุณต้องการฝึกฝนอย่าลังเลที่จะให้มันไป

ผู้ใช้ของคุณควรจะสามารถ:

• ดูเค้าโครงที่ดีที่สุดสำหรับแอปขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์
• ดูสถานะโฮเวอร์สำหรับองค์ประกอบการโต้ตอบทั้งหมดในหน้า
• เพิ่ม todos ใหม่ในรายการ
• Mark Todos เสร็จสมบูรณ์
• ลบ TODOS จากรายการ
• กรองโดย All/active/active todos
• เคลียร์ Todos ที่เสร็จสมบูรณ์ทั้งหมด
• สลับแสงและโหมดมืด
• โบนัส : ลากและวางเพื่อสั่งซื้อรายการใหม่ในรายการ

ต้องการการสนับสนุนเกี่ยวกับความท้าทายหรือไม่? เข้าร่วมชุมชน Slack ของเราและถามคำถามใน #Help Channel

จะหาทุกสิ่งได้ที่ไหน

งานของคุณคือการสร้างโครงการให้กับการออกแบบภายในโฟลเดอร์ /design คุณจะพบทั้งมือถือและเวอร์ชันเดสก์ท็อปของการออกแบบเพื่อทำงาน

การออกแบบอยู่ในรูปแบบคงที่ JPG นี่จะหมายความว่าคุณจะต้องใช้การตัดสินที่ดีที่สุดสำหรับสไตล์เช่น font-size , padding และ margin สิ่งนี้จะช่วยฝึกฝนสายตาของคุณให้รับรู้ถึงความแตกต่างในระยะห่างและขนาด

หากคุณต้องการไฟล์การออกแบบ (เรามีเวอร์ชัน Sketch & Figma) เพื่อตรวจสอบการออกแบบในรายละเอียดเพิ่มเติมที่คุณสามารถสมัครเป็นสมาชิกมืออาชีพ

คุณจะพบสินทรัพย์ที่จำเป็นทั้งหมดในโฟลเดอร์ /images สินทรัพย์ได้รับการปรับให้เหมาะสมแล้ว

นอกจากนี้ยังมีไฟล์ style-guide.md ซึ่งมีข้อมูลที่คุณต้องการเช่นจานสีและฟอนต์

การสร้างโครงการของคุณ

อย่าลังเลที่จะใช้เวิร์กโฟลว์ใด ๆ ที่คุณรู้สึกสะดวกสบาย ด้านล่างเป็นกระบวนการที่แนะนำ แต่ไม่รู้สึกว่าคุณจำเป็นต้องทำตามขั้นตอนเหล่านี้:

1. เริ่มต้นโครงการของคุณเป็นที่เก็บสาธารณะใน GitHub สิ่งนี้จะทำให้การแบ่งปันรหัสของคุณกับชุมชนได้ง่ายขึ้นหากคุณต้องการความช่วยเหลือ หากคุณไม่แน่ใจว่าจะทำอย่างไรให้อ่านทรัพยากรลอง Git นี้
2. กำหนดค่าที่เก็บของคุณเพื่อเผยแพร่รหัสของคุณไปยัง URL สิ่งนี้จะมีประโยชน์หากคุณต้องการความช่วยเหลือในระหว่างการท้าทายเนื่องจากคุณสามารถแบ่งปัน URL สำหรับโครงการของคุณด้วย repo url ของคุณ มีหลายวิธีในการทำเช่นนี้ แต่เราขอแนะนำให้ใช้ Vercel เรามีข้อมูลเพิ่มเติมเกี่ยวกับการปรับใช้โครงการของคุณด้วย Vercel ด้านล่าง
3. ดูการออกแบบเพื่อเริ่มวางแผนว่าคุณจะจัดการกับโครงการอย่างไร ขั้นตอนนี้มีความสำคัญอย่างยิ่งที่จะช่วยให้คุณคิดล่วงหน้าสำหรับคลาส CSS ที่คุณสามารถสร้างขึ้นเพื่อสร้างสไตล์ที่นำกลับมาใช้ใหม่ได้
4. ก่อนที่จะเพิ่มสไตล์ใด ๆ ให้จัดโครงสร้างเนื้อหาของคุณด้วย HTML การเขียน HTML ของคุณก่อนสามารถช่วยมุ่งเน้นความสนใจในการสร้างเนื้อหาที่มีโครงสร้างที่ดี
5. เขียนสไตล์พื้นฐานสำหรับโครงการของคุณรวมถึงสไตล์เนื้อหาทั่วไปเช่น font-family และ font-size
6. เริ่มเพิ่มสไตล์ลงในด้านบนของหน้าและทำงานลง ย้ายไปยังส่วนถัดไปเมื่อคุณมีความสุขคุณเสร็จสิ้นพื้นที่ที่คุณกำลังทำอยู่

ปรับใช้โครงการของคุณ

ดังที่ได้กล่าวมาแล้วมีหลายวิธีในการโฮสต์โครงการของคุณฟรี เราขอแนะนำให้ใช้ Vercel เนื่องจากเป็นบริการที่น่าทึ่งและง่ายมากในการตั้งค่า หากคุณต้องการใช้ Vercel นี่คือขั้นตอนบางอย่างในการติดตามเพื่อเริ่มต้น:

1. ลงทะเบียนกับ Vercel และผ่านโฟลว์ออนบอร์ดเพื่อให้แน่ใจว่าบัญชี GitHub ของคุณเชื่อมต่อโดยใช้ Vercel สำหรับการรวม GitHub
2. เชื่อมต่อโครงการของคุณกับ Vercel จากหน้า "การนำเข้าโครงการ" โดยใช้ปุ่ม "จาก Git Repository" และเลือกโครงการที่คุณต้องการปรับใช้
3. เมื่อเชื่อมต่อทุกครั้งที่คุณ git push Vercel จะสร้างการปรับใช้ใหม่และ URL การปรับใช้จะปรากฏบนแผงควบคุมของคุณ คุณจะได้รับอีเมลสำหรับการปรับใช้แต่ละครั้งด้วย URL

แบ่งปันโซลูชันของคุณ

มีหลายสถานที่ที่คุณสามารถแบ่งปันวิธีแก้ปัญหาของคุณ:

1. ส่งบนแพลตฟอร์มเพื่อให้ผู้ใช้รายอื่นเห็นโซลูชันของคุณบนเว็บไซต์ นี่คือ "คำแนะนำที่สมบูรณ์ในการส่งโซลูชั่น" เพื่อช่วยให้คุณทำเช่นนั้น
2. แชร์หน้าโซลูชันของคุณในช่องทาง #โครงการสำเร็จรูป ของชุมชน Slack
3. ทวีต @Frontendmentor และพูดถึง @frontendmentor รวมถึง repo และ url สดในทวีต เราชอบที่จะดูสิ่งที่คุณสร้างและช่วยแบ่งปัน

ให้ข้อเสนอแนะ

คำติชมยินดีต้อนรับเสมอดังนั้นหากคุณมีความท้าทายนี้โปรดส่งอีเมลถึง HI [ที่] Frontendmentor [dot] IO

ความท้าทายนี้ฟรี โปรดแบ่งปันกับทุกคนที่จะพบว่ามีประโยชน์สำหรับการฝึกฝน

ขอให้สนุกกับการสร้าง!

ผู้สนับสนุนชุมชน

ขอบคุณมากสำหรับผู้สนับสนุนชุมชนของเรา!

• Zero to Mastery เป็นแหล่งเรียนรู้ที่เหลือเชื่อสำหรับการพัฒนาเว็บทุกสิ่ง นำโดย Andrei Neagoie หลักสูตรมีเนื้อหาที่มีคุณภาพสูงและครอบคลุมทักษะที่หลากหลายตามความต้องการ
• Diversify Tech เป็นทรัพยากรที่น่าทึ่งสำหรับคนที่มีบทบาทในเทคโนโลยี เว็บไซต์มีรายชื่องานสำหรับทุกคนที่กำลังมองหาโอกาสใหม่ ๆ ส่วนทรัพยากรยังเต็มไปด้วยลิงก์ที่มีประโยชน์ในการดำน้ำ!
• TripleByte เป็นข้อเสนอที่ดีมากหากคุณกำลังมองหาบทบาทใหม่ เป็นบริการฟรีที่ให้คุณทำแบบทดสอบที่เป็นความลับ จากผลลัพธ์ของ บริษัท ของคุณจะทำให้คุณมีบทบาทว่าง!