easybank landing page

ผู้ให้คำปรึกษาด้านหน้า - หน้า Landing Page EasyBank

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

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

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

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

ความท้าทาย

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

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

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

• ดูเค้าโครงที่ดีที่สุดสำหรับไซต์ขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์
• ดูสถานะโฮเวอร์สำหรับองค์ประกอบการโต้ตอบทั้งหมดในหน้า

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

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

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

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

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

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

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

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

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

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

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

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

• หน้า GitHub
• vercel
• ทำให้เป็นตะลึง

คุณสามารถโฮสต์เว็บไซต์ของคุณโดยใช้หนึ่งในโซลูชันเหล่านี้หรือผู้ให้บริการที่เชื่อถือได้อื่น ๆ ของเรา อ่านเพิ่มเติมเกี่ยวกับโฮสต์ที่เราแนะนำและเชื่อถือได้

สร้าง README.md ที่กำหนดเอง

เราขอแนะนำให้เขียนทับ README.md นี้ด้วยแบบกำหนดเอง เราได้จัดทำเทมเพลตภายในไฟล์ README-template.md ในรหัสเริ่มต้นนี้

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

เมื่อคุณเพิ่มข้อมูลของคุณลงในเทมเพลตให้ลบไฟล์นี้และเปลี่ยนชื่อไฟล์ README-template.md เป็น README.md นั่นจะทำให้มันปรากฏเป็นไฟล์ ReadMe ของที่เก็บของคุณ

ส่งโซลูชันของคุณ

ส่งโซลูชันของคุณบนแพลตฟอร์มสำหรับชุมชนที่เหลือเพื่อดู ทำตาม "คำแนะนำที่สมบูรณ์เพื่อส่งโซลูชัน" สำหรับเคล็ดลับเกี่ยวกับวิธีการทำเช่นนี้

โปรดจำไว้ว่าหากคุณกำลังมองหาข้อเสนอแนะเกี่ยวกับการแก้ปัญหาของคุณอย่าลืมถามคำถามเมื่อส่ง ยิ่งคุณมีคำถามที่เฉพาะเจาะจงและมีรายละเอียดมากเท่าไหร่โอกาสที่คุณจะได้รับข้อเสนอแนะที่มีค่าจากชุมชนก็ยิ่งสูงขึ้นเท่านั้น

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

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

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

เราให้บริการเทมเพลตเพื่อช่วยคุณแบ่งปันโซลูชันของคุณเมื่อคุณส่งมันบนแพลตฟอร์ม โปรดแก้ไขและรวมคำถามเฉพาะเมื่อคุณกำลังมองหาข้อเสนอแนะ

ยิ่งคุณมีคำถามที่เฉพาะเจาะจงมากเท่าไหร่ก็ยิ่งมีโอกาสมากขึ้นที่สมาชิกคนอื่นของชุมชนจะให้ข้อเสนอแนะ

มีข้อเสนอแนะสำหรับเราหรือไม่?

เราชอบรับคำติชม! เรามักจะมองหาการปรับปรุงความท้าทายและแพลตฟอร์มของเรา ดังนั้นหากคุณมีสิ่งใดที่คุณต้องการพูดถึงโปรดส่งอีเมลถึง HI [ที่] Frontendmentor [dot] io

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

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