โครงการฝึกปฏิบัติสำหรับนักพัฒนาส่วนหน้า

การพัฒนาส่วนหน้าเป็นทักษะอื่น ๆ ต้องใช้งานมากมาย มีหลายวิธีที่คุณสามารถจัดการกับงานใหญ่นี้ได้ซึ่งบางวิธี ได้แก่ :

1. ทำงานในหน่วยงานในฐานะนักพัฒนาส่วนหน้า
2. เรียนที่บ้านของคุณและสร้างโครงการด้านข้าง
3. ทำงานเป็นฟรีแลนซ์ให้กับลูกค้า

แต่ละคนมีข้อดีและข้อเสียของตัวเอง แต่สิ่งหนึ่งที่คงที่นั่นคือยิ่งคุณได้รับงานที่หลากหลายมากเท่าไหร่คุณก็จะก้าวหน้าได้เร็วขึ้นเท่านั้น

ในบทความนี้เราจะดูโครงการที่เป็นไปได้สองสามโครงการที่คุณสามารถทำงานร่วมกับตัวเองได้ซึ่งคุณสามารถเรียนรู้เทคโนโลยีแนวทางใหม่ ๆ และอาจเป็น "Aha!" ช่วงเวลาในอาชีพการงานระดับแนวหน้าของคุณ

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

หมายเหตุ! ตัวอย่างทั้งหมดด้านล่างจัดทำโดยนักออกแบบสำหรับผลิตภัณฑ์จริง เราไม่ได้เสนอให้คุณคว้ามันโค้ดและทำอะไรก็ได้ที่คุณต้องการ ทั้งหมดนี้เป็นตัวอย่างขององค์ประกอบ UI ที่คุณสามารถใช้งานได้โดยไม่ต้องแจกจ่ายหรือขายในภายหลัง

1 - ไลบรารีส่วนประกอบ UI

ความยาก: ง่าย - ปานกลาง

อย่าเข้าใจผิดด้วยคำว่า“ ง่าย” เพราะเช่นเดียวกับโครงการใด ๆ ที่นี่ทั้งนักพัฒนารุ่นน้องและรุ่นพี่สามารถต่อสู้ได้โดยขึ้นอยู่กับปัญหาที่แก้ได้ เราวางสิ่งนี้ไว้ในระดับที่ง่ายเพราะมันจะไม่ประกอบด้วยองค์ประกอบ UI ที่ซับซ้อนและทุกอย่างสามารถห่อหุ้มได้

คุณสามารถเลือกการออกแบบที่มีอยู่เช่นนี้ซึ่งเน้นที่เมนูแบบเลื่อนลง / ปุ่ม:

ที่มา

หรือจะใช้แบบทั่วไปเช่น Bootstrap และ Foundation ก็ได้ สิ่งที่ต้องพิจารณา:

• หลักการตั้งชื่อที่กำหนดไว้อย่างดี
• การนำเสนอส่วนประกอบ
• ตัวปรับแต่ง - คนส่วนใหญ่ชอบที่จะเปลี่ยนองค์ประกอบเล็ก ๆ น้อย ๆ ดังนั้นควรพิจารณาวิธีใช้สิ่งนั้น ตัวอย่าง - คุณต้องการสีหลักรอง ความสำเร็จสถานะข้อผิดพลาด ฯลฯ
• ให้มัน“ เสียบแล้วเล่น” เป้าหมายของคุณคืออนุญาตให้นักพัฒนารายอื่นใช้โค้ดของคุณโดยไม่ต้องเขียน CSS ใด ๆ คุณสามารถรวมเข้ากับระบบกริดพื้นฐานได้เช่นกัน

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

2 - ใช้ UI ภาพเคลื่อนไหวที่ซับซ้อน

ความยาก: ยาก

งานนี้เกี่ยวกับภาพเคลื่อนไหวและประสิทธิภาพที่ทันสมัย แต่ถัดจากนั้นคุณจะต้องเขียนภาพที่ไม่ธรรมดาลงไปด้วย ดูตัวอย่างด้านล่าง:

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

งานนี้อาจใช้เวลาสลับหน้าจอเพียง 2 ครั้งเพื่อให้สั้นลงเล็กน้อย ไม่จำเป็นต้องทำงานกับมุมมองบนอุปกรณ์เคลื่อนที่ที่นี่เว้นแต่คุณจะมีพลังงาน

3 - UI ของเกม

ความยาก: ยาก

อีกหนึ่งงานที่ยุ่งยาก! เกมส่วนใหญ่มีรูปแบบศิลปะที่ไม่เหมือนใครซึ่งไม่สามารถแปลได้อย่างง่ายดายบนเว็บ เพื่อให้สิ่งต่างๆยากขึ้นมีกฎอีกข้อหนึ่งคืออย่าใช้รูปภาพ / svgs ใด ๆ เพื่อให้ได้รูปทรงบน UI

ที่มา: StarCraft II

เราได้เลือก StarCraft 2 เพื่อจุดประสงค์นี้ อย่างที่คุณเห็นมีรายละเอียดเล็ก ๆ มากมายที่นี่และคุณต้องพิจารณาในการนำไปใช้งาน อันที่จริงกฎ "ไม่มีสินทรัพย์" คือสิ่งที่ทำให้ยาก คุณจะต้องทำงานกับรูปทรงการตัดแต่งเงาเวทมนตร์การไล่ระดับสีเส้นขอบและอื่น ๆ แน่นอนว่าต้องใช้ภาพสำหรับการถ่ายภาพบุคคลและภาพทะเลทางด้านขวา

เพื่อให้สิ่งต่างๆสมจริงยิ่งขึ้นคุณสามารถเปลี่ยนเส้นขอบแนวตั้งด้านขวาบนด้วยแถวบนสุดจากรูปภาพถัดไป:

ที่มา: StarCraft II

หากคุณสามารถทำให้มันดูดีบนหน้าจอขนาดเล็กและมือถือคุณจะได้รับคะแนนพิเศษ! นี่จะเป็นการ“ ว้าว!” มาก โครงการผลกระทบต่อ CV ของคุณ

4 - เกมตอบคำถาม

ความยาก: ปานกลาง

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

หากคุณค้นหา“ แบบทดสอบ” ใน Dribbble คุณจะพบตัวอย่างมากมาย แต่ถ้าคุณพบว่ามันยากที่จะเลือกอย่างใดอย่างหนึ่งคุณสามารถทำสิ่งนี้:

ที่มา

อย่างที่คุณเห็นมีเพียงสองหน้าจอซึ่งหมายความว่าคุณจะต้องสร้างหน้าจอที่เหลือตามการออกแบบด้านบน

คุณสมบัติสำหรับแบบทดสอบ:

• นับคำตอบที่ถูกต้อง
• คำตอบจาก N ตัวเลือก
• แสดงคำตอบที่ถูก / ผิดหลังจากคลิก
• รายงานป๊อปอัพคำถาม
• กลับไปที่แบบทดสอบทั้งหมดเลือกแบบทดสอบ
• แสดงคะแนนสุดท้ายหลังจบแบบทดสอบ

คุณสามารถทำอะไรได้มากกว่าที่กล่าวไว้ข้างต้นหากคุณต้องการ โดยทั่วไปเป็นโครงการประเภท "บ่ายวันหนึ่ง"

5 - เลือกไซต์สุ่มและทำให้เหมาะกับเครื่องพิมพ์

ความยาก: ง่าย

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

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

ตัวอย่างเว็บไซต์ที่คุณสามารถใช้ได้:

• หน้าการขายของ Amazon - เน้นเฉพาะข้อมูลสำคัญ
• หน้าการขายหลักสูตร - จาก SitePoint
• หน้าหลักสูตรอื่น

อย่าลังเลที่จะเลือกไซต์อื่น ๆ ที่คุณต้องการคุณสามารถทำให้ง่ายหรือยากสำหรับตัวคุณเอง หากคุณต้องการดูตัวอย่างรูปแบบการพิมพ์ที่ดีลองดูที่ https://www.smashingmagazine.com/ พวกเขาตอกมันจริงๆ

6 - รูปแบบนิตยสารที่ซับซ้อน

ความยาก: บ้า

อันนี้นอกจากจะยากแล้วยังซับซ้อนอีกด้วย และต้องใช้เวลามากกว่าเมื่อเทียบกับงานอื่น ๆ ที่กล่าวมาข้างต้นดังนั้นคุณอาจต้องเพิ่มเวลาว่างมากกว่า 20-30 ชั่วโมง

ที่มา

การออกแบบด้านบนเป็นการออกแบบใหม่ของ The New York Times โดย Slava Kornilov ในลิงค์คุณจะเห็นการออกแบบทั้งหมดที่เขาทำรวมถึงหน้าจอขนาดใหญ่ที่แสดงหน้าแรกทั้งหมด

ในโครงการนี้คุณจะต้องคิดในแง่ขององค์ประกอบจัดรูปแบบองค์ประกอบ UI ที่ซับซ้อนบางอย่างเช่นวิดีโอที่ออกนอกวิวพอร์ต (ซึ่งต้องตอบสนองต่อไป) การตั้งค่าตัวพิมพ์องค์ประกอบที่ทับซ้อนกันและอื่น ๆ

แม้เพียงแค่มองไปที่พื้นหลังที่อยู่เบื้องหลังชื่อเรื่องขนาดใหญ่ที่ด้านบนก็ยังซ่อนส่วนที่ยุ่งยากบางส่วนในการนำไปใช้งาน

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

ที่มา

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

7 - แดชบอร์ดและแผนภูมิ

ความยาก: ปานกลาง - ยาก

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

เพื่อเตรียมพร้อมสำหรับวันดังกล่าวนี่คือความท้าทายสำหรับคุณ:

ใช้การออกแบบต่อไปนี้:

ที่มา

สิ่งที่คุณต้องพิจารณาที่นี่ - แผนภูมิต้องเป็นของจริง พวกเขาต้องใช้ ข้อมูลจริง และคุณควรพยายามทำให้เหมือนข้อมูลที่คุณเห็นด้านบน มีไลบรารีมากมายที่คุณสามารถใช้ได้และส่วนใหญ่คุณจะต้องขยาย / แก้ไขจำนวนมาก

หากคุณตัดสินใจที่จะรวมแอนิเมชั่นเข้าด้วยกันอาจจะดีกว่านี้ นี่จะดูดีมากสำหรับ CV ใช่ไหม?

ในตอนท้าย:

วิธีที่ดีที่สุดวิธีหนึ่งในการเรียนรู้และเป็นนักพัฒนาที่ดีขึ้นคือเพียงแค่เริ่มเขียนโค้ดและสร้างไซต์ ทำเป็นประจำทุกวันแค่โค้ดตัน! สิ่งนี้มีประโยชน์โดยเฉพาะในช่วง 3-4 ปีแรกของอาชีพการงานของคุณ

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