כיצד להפוך למפתח חזית טוב יותר על ידי בניית פרויקטים (כולל רעיונות)

אם אתה רוצה לעקוב אחר צמיחתך כמפתח חזית, שום דבר לא יעלה על ביצוע פרויקטים של פיתוח אמיתי.

האמת היא שתוכלו לצפות בכל ההדרכות והקורסים בעולם, אך ללא יישום ותרגול, לא ממש תלמדו מיומנויות שאתם צריכים בכדי לעבוד על פרויקטים אמיתיים.

פרויקטים של לקוחות אינם מגיעים עם הוראות שלב אחר שלב מכיוון שאחרת, הם כלל לא היו זקוקים לך. יהיה עליך לחשוב מחוץ לקופסה, למצוא פתרונות, להתפשר ולפרוץ את דרכך לקו הסיום.

הדרך הטובה ביותר ללמוד מיומנויות אלה היא לבצע כמה פרויקטים של מפתחי חזית וללמוד בדרך. והחלק הכי טוב? אתה אפילו לא צריך לקוח כדי להתחיל כי אתה יכול לעשות את הפרויקטים האלה בעצמך.

כיצד לבחור פרויקט פיתוח אישי חזיתי

זכור את רמת המיומנות שלך

אל תבחר בפרויקט מתקדם מדי לרמת המיומנות שלך, במיוחד אם אתה מהסוג לאבד מוטיבציה כאשר הדברים נעשים קשים מדי.

אך אל תשכח מכיוון שהמטרה כאן היא לעזור לך לשלוט בפיתוח חזיתי, בחר בפרויקט שיגיע מעבר לרמת המיומנות הנוכחית שלך, אך עדיין ניתן לביצוע.

לדוגמה, אם למדת לאחרונה HTML ו- CSS, הגיע הזמן לעלות ברמה על ידי לימוד JavaScript.

פתור בעיה אישית או בעיה שאכפת לך ממנה

יש לך יותר סיכוי ליהנות וליצור פרויקט אם זה פותר את הבעיות שלך או ממלא את הרצונות שלך.

אולי אתה תמיד מאבד את הזמן בזמן שאתה גולל בעדכון החדשות שלך בפייסבוק, או שאתה רוצה אתר שבו תוכל ליצור תמונות ממוזערות מרתקות של YouTube באופן אוטומטי.

חשבו על בעיה אישית שתוכלו לפתור באמצעות טכנולוגיה ולהתחיל משם. ההצעות במאמר זה נועדו רק להוות נקודת התחלה. זה יהיה הרבה יותר טוב אם תשנה אותו כדי להוסיף את הטוויסט הייחודי שלך.

4 פרויקטים מהנים של פיתוח חזיתי

בנה שיבוט של אתר.

מיומנויות ללמוד: HTML, CSS, JavaScript ו / או Bootstrap.

בניית שיבוט של אתר היא דרך נהדרת לחקור את אופן בנייתו וללמוד את יסודות מבנה העמוד, צבעים, גופנים, מדיה, טבלאות ועוד. להיכנס לפרטים רבים ככל האפשר כדי לשכפל את המקור.

בחר אתר שאתה אוהב ובנה משובט ממנו בעצמך. אל תסתכל על קוד המקור כמה שיותר כדי להפיק ממנו את המרב.

שיבוט בגוגל הוא למעשה אחד מהתרגילים של Thinkful לתלמידי סדנת הקידוד שלהם. Thinkful היא חברה חינוכית המציעה קורסים טכנולוגיים כולל Bootcamp לפיתוח אתרים.

אתה יכול גם לעקוב אחר התרגיל הזה כדי לעזור לך לשכפל את דף הנחיתה של אפליקציה בשם Karma WiFi. הוא נוצר על ידי קייל קוסקי, אחד המנטורים של Thinkful ומשתמש ב- HTML וב- CSS.

מה שטוב בשיבוט אתר זה שאתה יכול לבחור את רמת המורכבות של האתר. אם אתה רק מתחיל, אתר פשוט שזקוק רק ל- HTML ו- CSS הוא מקום טוב להתחיל בו. אם אתה מתקדם יותר, בחר אתר שדורש JavaScript או תגובה.

צור משחק חידון JavaScript.

מיומנות ללמוד: JavaScript

JavaScript היא שפת תכנות המאפשרת ליצור דפי אינטרנט אינטראקטיביים. זו השפה בה אתה משתמש בעת יצירת אלמנטים רספונסיביים כמו תפריטים, נגני וידאו, אנימציות, מפות אינטראקטיביות ואפילו משחקי דפדפן.

אך לפני שנמשיך, חשוב לדעת מדוע תרצה לבנות חידון.

זה יותר מאשר כיף ומשחקים. חידונים למעשה צוברים פופולריות ככלי שיווקי תוכן. ראית דברים כאלה?

חידונים הם כלי שיווקי נהדר מכיוון שהם אינטראקטיביים. על פי סקר של המכון לשיווק תוכן, 81% מהמשווקים מסכימים שתוכן אינטראקטיבי - שהוא כל סוג של תוכן שדורש מהמשתתף להשתתף - תופס תשומת לב בצורה יעילה יותר מתוכן סטטי.

מסיבה זו, חידונים משמשים למטרות שיווק שונות. חידונים טריוויאליים, כמו זה משמאל, משמשים להגברת התנועה לאתר. יש משווקים שמשתמשים גם בחידונים כדי להכשיר לידים, לפלח לידים ולהגדיל את המעורבות.

אני מסביר זאת מכיוון שכמפתח, התפקיד שלך הוא לא רק לוודא שהדברים נראים יפים, אלא גם ליצור תכונות ידידותיות למשתמש ויהפכו את אתר הלקוח שלך ליעיל יותר בהשגת יעדי המכירה והשיווק שלו.

כדי ליצור חידון, עיין במדריכים אלה בנושא ביצוע חידוני JavaScript מ- WebDevTrick ו- SitePoint. כך יכול להיראות חידון JS שלך:

צור קורא QR לנייד שלך.

מיומנות ללמוד: JavaScript

ברקודים וקודי QR שינו את הדרך בה אנו מבצעים קניות. לקוחות יכולים כעת לסרוק מוצר באמצעות הטלפונים החכמים שלהם ולגלות מידע אודותיו כגון המחיר או היכן הם יכולים לקנות אותו.

זה גם מבטל את הצורך להקליד קודים ארוכים באתר כמו קודי הפעלה או מספרי דגם, מה שהופך את חווית הקנייה שלהם לקלה וללא טרחה.

בניגוד למה שאחרים חושבים, אינך זקוק לאפליקציית טלפון מקומית כדי לסרוק קודי QR.

אתרים הפועלים במכשיר חכם עם מצלמה יכולים לעשות את העבודה.

מדריך זה מראה לכם את התהליך שלב אחר שלב ביצירת קורא קוד QR משלכם.

תוכלו להשתמש ב- HTML וב- JavaScript, אך החלק החשוב ביותר הוא שימוש בספריית JS שיכולה לפרש את קוד ה- QR. החדשות הטובות הן שלא תצטרכו ליצור את זה מאפס מכיוון שיש שם המון ספריות נהדרות לצורך זה בדיוק.

בנה אפליקציית מזג אוויר.

מיומנות ללמוד: זוויתית 8

Angular היא אחת משלוש מסגרות הפיתוח החזיתיות הפופולריות ביותר לצד React ו- Vue.js. זה משמש בדרך כלל לבניית אפליקציות מבוססות טופס (שם אתה צריך להירשם כדי ליצור חשבון), אך ניתן להשתמש בו גם לבניית משחקים ואפילו אפליקציות עם אלמנטים של מציאות מדומה.

יש הדרכה מפורטת מאוד, צעד אחר צעד במדיום, המלמדת למתחילים כיצד ליצור אפליקציית מזג אוויר יפה עם Angular 8 (הגרסה האחרונה של Angular). אפליקציית מזג האוויר נראית כך:

אפליקציה זו כוללת עיצוב נקי ומינימליסטי עם איורים מדהימים וממשק פשוט. יש לו גם תכונת מצב בהירה וחשוכה, שמוסיפה לו יותר כשרון.

מה שמצוין בפרויקט זה הוא שתקבל תחושה של איך זה לבנות אפליקציה רספונסיבית ושימושית מאפס. תלמד הכל החל מהתקנת Node.js ו- Angular CLI וכלה בבדיקת הקוד שלך ב- LightHouse.

ולמרות שיוצר ההדרכה הכניס ללא ספק העדפה עיצובית משלו, אתה יכול להוסיף סטיילינג משלך ולהיות יצירתי כמו שאתה רוצה. אתה יכול לשחק עם הסטיילינג והאנימציות של CSS ואפילו להשתמש בלוגו שלך, באייקונים ובחומרי עיצוב אחרים.

עשו זאת נכון ותהיה לכם אפליקציית מזג אוויר מרשימה בתיק העבודות שלכם.

תוכלו לגשת להדרכה כאן.

הדרכה זו אמנם ידידותית למתחילים, אך עדיין אתה זקוק להיכרות זוויתית קטנה. אם אתה רוצה ללמוד Angular, המקום הטוב ביותר להתחיל הוא ב- Angular.io.

עצב וקודד את אתר התיקים שלך

בפרויקט טיפוסי, סביר להניח שתעבוד לצד מעצב אתרים שקורא לצילומים על איך האתר ייראה.

למרות שניתן לטעון כי תכנון ופיתוח הם שני תחומים שונים, השגת תפיסת עיצוב אתרים לא רק תוסיף מיומנות נוספת לארסנל שלך, אלא גם תצייד אותך אם תחליט ללכת לבד כפרילנסר ולעבוד על פרויקטים מעיצוב לפריסה.

תכנון וקידוד אתר הפורטפוליו שלך ייתן לך את החופש להציג את הצד האמנותי והטכני שלך בו זמנית.

הצעד הראשון הוא לחשוב על המסר או המיתוג שלך . מהם שירותי הליבה שלך, את מי אתה רוצה לשרת ומדוע עליהם לבחור בך? (קרא עוד על מיתוג כאן.)

השנייה היא ליצור עיצוב מדומה שיפרט את הפריסה, הצבעים והטיפוגרפיה.

כמו כן, חשוב על נושא. האם זה מינימליסטי או רם ופאנקי? האם זה מונוכרום או שישתמש בצבעים עזים? לאחר מכן הכין רשימה של הדפים שתזדקק להם. לרוב זה כולל דף אנשי קשר, מספר פוסטים בבלוג, דף אודותיי ודף תנאים והגבלות.

שלישית, קוד את זה ! השתמש ב- CSS מודרני כדי לפרוס את האתר, הוסף כמה אנימציות, הוסף כמה תמונות באיכות גבוהה וכו '. השמיים הם הגבול כאן - אתה יכול לעשות מה שאתה רוצה עם אתר התיקים שלך כי זה שלך - לך על זה!

היכן אוכל לתרגל פיתוח חזיתי?

למרות שהדרך הטובה ביותר לתרגל פיתוח חזיתי היא לבנות בעצמך אתרי מודעות אמיתיים של מודעות, זה עדיין נהדר שיש מקום לקבל טיפים, לגשת להדרכות ולקבל תמיכה כשאתה נתקע או זקוק לחוות דעת על משהו.

אלה מקומות נהדרים להיעזר בזמן שאתה מתרגל פיתוח חזיתי:

1. freeCodeCamp.org - זהו אתר מלא בהדרכות חינם בנושא תיאוריית פיתוח אתרים, שפות ושיטות עבודה מומלצות. יש כאן גם קהילה נהדרת שיכולה לעזור בשאלותיך.
2. HTML ו- CSS מודרניים מההתחלה - זהו קורס Udemy של בראד טראוורסי. הוא מלא במידע שימושי ויכול ללמד אותך באמת את כל מה שאתה צריך בכדי להתחיל עם שפות אלה.
3. Front amendor.io - תוכלו למצוא כאן "אתגרים" חופשיים ופרמיום בגודל ביס שתוכלו לעשות בזמנכם הפנוי לפיתוח מערך המיומנויות שלכם. הקושי באתגרים נע בין "זוטר" ל"מתקדם ". להלן דוגמאות לאתגרים שתמצאו כאן:

יש עוד משאבים שאשמח לחלוק איתך, אך כדי למנוע מכך שארוך מדי, תוכל לעיין בקישור זה כדי לראות את רשימת הקורסים המומלצת שלי.

אלה 5 פרויקטים מהנים של פיתוח חזית שאתה יכול לנסות היום. שוב, אלה נועדו כנקודות התחלה. בסופו של דבר עליכם להתאים אישית את זה כדי להוסיף מעט מהנגיעה האישית שלכם :)

זכרו, הכל קשור לתרגול. אתה צריך לבנות דברים כדי לשפר את מערך המיומנויות שלך.

אל תלמד רק על ידי צפייה.

למד על ידי בנייה.

למידה על ידי עשייה.

- קייל פרינסלו (@study_web_dev) 24 ביוני 2020

קידוד שמח!

תודה על הקריאה ועידוד לעת עתה,

קייל

עקבו אחרי בטוויטר לעצות נוספות.