Mentor Frontend - Dashboard โซเชียลมีเดียพร้อมตัวสลับธีม

ยินดีต้อนรับ!
ขอบคุณสำหรับการตรวจสอบความท้าทายการเข้ารหัสส่วนหน้านี้
ความท้าทายของผู้ให้คำปรึกษาด้านหน้าช่วยให้คุณพัฒนาทักษะของคุณในเวิร์กโฟลว์ในชีวิตจริง
ในการทำสิ่งที่ท้าทายนี้คุณต้องมีความเข้าใจพื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript เล็กน้อย
ความท้าทาย
ความท้าทายของคุณคือการสร้างแดชบอร์ดโซเชียลมีเดียนี้และทำให้มันดูใกล้เคียงกับการออกแบบให้มากที่สุด
คุณสามารถใช้เครื่องมือใด ๆ ที่คุณต้องการเพื่อช่วยให้คุณท้าทาย ดังนั้นหากคุณมีสิ่งที่คุณต้องการฝึกฝนอย่าลังเลที่จะให้มันไป
ผู้ใช้ของคุณควรจะสามารถ:
- ดูเค้าโครงที่ดีที่สุดสำหรับไซต์ขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์
- ดูสถานะโฮเวอร์สำหรับองค์ประกอบการโต้ตอบทั้งหมดในหน้า
- สลับธีมสีตามความชอบของพวกเขา
ต้องการการสนับสนุนเกี่ยวกับความท้าทายหรือไม่? เข้าร่วมชุมชน Slack ของเราและถามคำถามใน #Help Channel
จะหาทุกสิ่งได้ที่ไหน
งานของคุณคือการสร้างโครงการให้กับการออกแบบภายในโฟลเดอร์ /design คุณจะพบทั้งมือถือและเวอร์ชันเดสก์ท็อปของการออกแบบเพื่อทำงาน
การออกแบบอยู่ในรูปแบบคงที่ JPG นี่จะหมายความว่าคุณจะต้องใช้การตัดสินที่ดีที่สุดสำหรับสไตล์เช่น font-size , padding และ margin สิ่งนี้จะช่วยฝึกฝนสายตาของคุณให้รับรู้ถึงความแตกต่างในระยะห่างและขนาด
หากคุณต้องการไฟล์ Sketch เพื่อตรวจสอบการออกแบบในรายละเอียดเพิ่มเติมจะมีให้ซื้อจากหน้าความท้าทายบนแพลตฟอร์ม
คุณจะพบสินทรัพย์ที่จำเป็นทั้งหมดในโฟลเดอร์ /images สินทรัพย์ได้รับการปรับให้เหมาะสมแล้ว
นอกจากนี้ยังมีไฟล์ style-guide.md ซึ่งมีข้อมูลที่คุณต้องการเช่นจานสีและฟอนต์
การสร้างโครงการของคุณ
อย่าลังเลที่จะใช้เวิร์กโฟลว์ใด ๆ ที่คุณรู้สึกสะดวกสบาย ด้านล่างเป็นกระบวนการที่แนะนำ แต่ไม่รู้สึกว่าคุณจำเป็นต้องทำตามขั้นตอนเหล่านี้:
- เริ่มต้นโครงการของคุณเป็นที่เก็บสาธารณะใน GitHub สิ่งนี้จะทำให้การแบ่งปันรหัสของคุณกับชุมชนได้ง่ายขึ้นหากคุณต้องการความช่วยเหลือ หากคุณไม่แน่ใจว่าจะทำอย่างไรให้อ่านทรัพยากรลอง Git นี้
- กำหนดค่าที่เก็บของคุณเพื่อเผยแพร่รหัสของคุณไปยัง URL สิ่งนี้จะมีประโยชน์หากคุณต้องการความช่วยเหลือในระหว่างการท้าทายเนื่องจากคุณสามารถแบ่งปัน URL สำหรับโครงการของคุณด้วย repo url ของคุณ มีหลายวิธีในการทำเช่นนี้ แต่เราขอแนะนำให้ใช้ Zeit ตอนนี้ เรามีข้อมูลเพิ่มเติมเกี่ยวกับการปรับใช้โครงการของคุณด้วย Zeit ด้านล่าง
- ดูการออกแบบเพื่อเริ่มวางแผนว่าคุณจะจัดการกับโครงการอย่างไร ขั้นตอนนี้มีความสำคัญอย่างยิ่งที่จะช่วยให้คุณคิดล่วงหน้าสำหรับคลาส CSS ที่คุณสามารถสร้างขึ้นเพื่อสร้างสไตล์ที่นำกลับมาใช้ใหม่ได้
- ก่อนที่จะเพิ่มสไตล์ใด ๆ ให้จัดโครงสร้างเนื้อหาของคุณด้วย HTML การเขียน HTML ของคุณก่อนสามารถช่วยมุ่งเน้นความสนใจในการสร้างเนื้อหาที่มีโครงสร้างที่ดี
- เขียนสไตล์พื้นฐานสำหรับโครงการของคุณรวมถึงสไตล์เนื้อหาทั่วไปเช่น
font-family และ font-size - เริ่มเพิ่มสไตล์ลงในด้านบนของหน้าและทำงานลง ย้ายไปยังส่วนถัดไปเมื่อคุณมีความสุขคุณเสร็จสิ้นพื้นที่ที่คุณกำลังทำอยู่
ปรับใช้โครงการของคุณ
ดังที่ได้กล่าวมาแล้วมีหลายวิธีในการโฮสต์โครงการของคุณฟรี เราขอแนะนำให้ใช้ Zeit ตอนนี้เป็นบริการที่น่าทึ่งและง่ายมากในการตั้งค่า หากคุณต้องการใช้ Zeit นี่คือขั้นตอนบางอย่างในการติดตามเพื่อเริ่มต้น:
- ลงทะเบียนกับ Zeit ตอนนี้และผ่านการไหลเวียนเพื่อให้มั่นใจว่าบัญชี GitHub ของคุณเชื่อมต่อโดยใช้ Zeit ของพวกเขาตอนนี้สำหรับการรวม GitHub
- เชื่อมต่อโครงการของคุณกับ Zeit ตอนนี้จากหน้า "สร้างโครงการใหม่" โดยใช้ปุ่ม "โครงการใหม่จาก GitHub" และเลือกโครงการที่คุณต้องการปรับใช้
- เมื่อเชื่อมต่อทุกครั้งที่คุณ
git push ตอนนี้ Zeit จะสร้างการปรับใช้ใหม่และ URL การปรับใช้จะแสดงบนแดชบอร์ด Zeit ของคุณ คุณจะได้รับอีเมลสำหรับการปรับใช้แต่ละครั้งด้วย URL
แบ่งปันโซลูชันของคุณ
มีหลายสถานที่ที่คุณสามารถแบ่งปันวิธีแก้ปัญหาของคุณ:
- ส่งบนแพลตฟอร์มเพื่อให้ผู้ใช้รายอื่นเห็นโซลูชันของคุณบนเว็บไซต์ ผู้ใช้รายอื่นจะสามารถให้ข้อเสนอแนะแก่คุณซึ่งสามารถช่วยปรับปรุงรหัสของคุณสำหรับโครงการถัดไป
- แบ่งปันที่เก็บข้อมูลของคุณและ URL สดในช่องทาง #โครงการสำเร็จรูป ของชุมชน Slack
- ทวีต @Frontendmentor และพูดถึง @frontendmentor รวมถึง repo และ url สดในทวีต เราชอบที่จะดูสิ่งที่คุณสร้างและช่วยแบ่งปัน
ให้ข้อเสนอแนะ
คำติชมยินดีต้อนรับเสมอดังนั้นหากคุณมีความท้าทายนี้โปรดส่งอีเมลถึง HI [ที่] Frontendmentor [dot] IO
ความท้าทายนี้ฟรี โปรดแบ่งปันกับทุกคนที่จะพบว่ามีประโยชน์สำหรับการฝึกฝน
ขอให้สนุกกับการสร้าง!