התחלתי את מסע הקידוד שלי באביב 2018, לפני קצת פחות משנה. הרווחתי כמה כישורי תכנות מאז אותה תקופה, אך עדיין אני מבין שיש עוד הרבה דברים ללמוד קדימה. בכל מקרה, החלטתי לאסוף את הטיפים האלה במקום אחד שיעזור למפתחים עתידיים בדרכם. מאמר זה הוא המדריך שהייתי רוצה למצוא כשהתחלתי את דרכי.
לפני שנתחיל
אם החלטתם ללמוד לבד, יש מידע רב באינטרנט וקשה לעטוף את הראש סביב הכל. חשוב שתהיה תוכנית מובנית ותמנע מבזבוז זמן על ידי קפיצה ממשאב אחד למשנהו.
שים לב שאלה רק הצעדים הראשונים אל היקום הקדמי. זה יעזור לך להתחיל אבל זה לא נועד להוות מדריך מלא.
ככתב ויתור, שים לב שהמשאבים הבאים אינם פרסומת. אני מזכיר אותם כי הם עזרו לי בשלב כלשהו ואני אישית ממליץ עליהם. רובם בחינם, אחרת זה יפורט.
כנקודת מוצא, אני ממליץ להירשם ל- freeCodeCamp.ואת השאר אבסס על תוכנית הלימודים שלהם. אני רואה בכך משאב מצוין מסיבות שונות:
- תכנית לימודים. זה יכול להיות הדרך העיקרית שלך. זוהי סקירה מובנית היטב של הדברים שכדאי לך ללמוד ומספקת עקומת למידה טובה.
- תרגילים. הם בגודל ביס כך שתוכלו לשמור על הקצב בקלות על ידי ביצוע כמה מהם מדי יום ולשמור על מפת החום שלכם ירוקה.
- פרויקטים. לאחר השלמת כל פרק, תבנה 5 פרויקטים לקבלת ההסמכה שלך. זה אידיאלי להתאמן ולגבש את הידע שלך.
- קהילה. זו לא רק פלטפורמת למידה. יש פורום, בלוג וערוץ יוטיוב שבו מפתחים ברמות שונות חולקים את הידע שלהם ושם תוכלו למצוא השראה.
- זה בחינם. כסף יכול להיות קריטי עבור אנשים רבים וכאן, בכל מקרה, לא תבזבז שום דבר פרט לזמן.
עכשיו כולנו אמורים להתחיל! ?
עיצוב אתרים רספונסיבי
החלק הראשון כולל את היסודות של אופן בניית אתרים סטטיים והחלת סגנונות עליהם.
הבסיס
HTML בסיסי ו- HTML5וחלקי CSS בסיסיים הם יסודות האינטרנט המודרני. עיצוב חזותי יישומי, נגישות יישומית ועקרונות עיצוב אתרים רספונסיבייםילמד אותך את היסודות של כתיבת אתרים טובים. אל תמהר וצעד בזהירות, אלה אבני הבניין העיקריות בידיעתך.
אתה יכול להשלים את הלימודים שלך עם מדריך מצוין בנושא אינטרנט קשה.
לאחר מכן, תלמד טכניקות פריסה עוצמתיות כמו CSS Flexbox ו- CSS Grid . לפני שתמשיך, השלם את המדריך הקצר הזה כדי לקבל סקירה של טכניקות פריסה שונות בהן השתמשו אנשים לפני עידן Flexbox-Grid. אין זה סביר שתצטרך להשתמש בהם אי פעם, אך תמיד טוב להיות מודע ולהעריך את הטכנולוגיות שיש לנו כיום.
פלקסבוקס של CSS
התאהבתי בפלקסבוקס בגלל הפשטות והעוצמה שלו. הרבה מאפיינים שונים עשויים לבלבל אותך בהתחלה, אז ההצעה שלי היא לשים גיליון רמאות ליד המחשב שלך, כך שתמיד תוכל לחפש אותם בקלות. בנוסף, הוסף סימניה גיליון רמאות אינטראקטיבי זה של Flexbox.
ולסיום, התאמן על ידי משחק פלקסבוקס פרוגי הממכרמִשְׂחָק. ?
רשת CSS
ה- Grid מתקדם וגמיש יותר אך ברוב המקרים Flexbox מספיק למדי. בכל מקרה, יהיה לך כלי חזק נוסף בארסנל שלך. במיוחד אם קל להבין את זה כשתגדל את הגידולים שלך בגריד גארדן.?
תרגול
לפני שתעבור לפרויקטים הסופיים, אני ממליץ לך לעשות זאת:
- צור חשבון ב- Codepen . זה מגרש משחקים מגניב לחזית, שם תוכלו לבנות את הפרויקטים שלכם, לבדוק את קטעי הטקסט שלכם ולתרגל.
- התקן אעורך קודבמכונה שלך ולמד כיצד לעבוד איתה.
- למד את היסודות של שורת הפקודה מסרטון זהמאת ווס בוס או סדנת המעטפת בנושא Udacity.
- למד כיצד להשתמש ב- Git בפלייליסט זה של NetNinja.
- קבל תרגול מודרך. בחר פרויקטים מפלייליסט זה על ידי Traversy Media וקוד יחד. בנה אותם עד שתרגיש ביטחון. זה יהיה נהדר אם כבר תשתמש בעורך קוד ובקרת גרסאות ותעלה את עבודתך לרישום מחקר מיוחד ב- Github.
עכשיו אתה מוכן לקבל את ההסמכה הראשונה שלך! ?
ללכת לבנות את פרויקטי הגמר שלך ולשתף אותם?
אלגוריתמים ומבני נתונים של Javascript
עכשיו אתה יודע לבנות אתרים סטטיים והגיע הזמן ללמוד JavaScript.
קטע ה- JavaScript של freeCodeCamp נהדר אבל אני ממליץ לך בחום להסתכל ב- javascript.infoכהתייחסות נוספת. זהו המשאב הטוב ביותר המספק מידע מקיף לכל הקשור ל- JavaScript.
המלצות נוספות
- קורס יסודות JavaScript מאת ביו קרנס, אם אתה מעדיף מדריכים חזותיים.
- לגבי הסטנדרט החדש של JavaScript, המועדפים עליי הם הקורסים הנהדרים ES6 לכולם! (בתשלום) מאת ווס בוס ו- JavaScript מודרני מאת ביו קרנס.
- קורס ביטויים רגילים בנושא Scrimba.
- קורס JavaScript מונחה עצמים מאת NetNinja עזר לי מאוד.
אלגוריתמים
זה החלק האהוב עלי ביותר בהסמכה. אני זוכר כמה הם היו מאתגרים כשרק התחלתי לפתור אותם. יכולתי לחשוב על פתרונות אפשריים כל היום. זו דרך נהדרת ללמוד JavaScript וכיצד לחשוב כמו מתכנת.
כעזרה קטנה, אני ממליץ לך לצפות ב- Cardio Sessions של JavaScript על ידי Traversy Media.
לתרגול נוסף, אני ממליץ לך בחום להירשם ל- CodeWars ולהגדיר מטרה ראשונית להשגת 6kyu . זה מאוד מועיל מכיוון שכאשר תסיים אתגר כלשהו תוכל לחפש פתרונות של אנשים אחרים ולגלות טריקים, גישות ורעיונות חדשים.
כדי למצוא אתגרי 100DaysOfCode אחרים כולל אותי, עבור אל הגדרות החשבון שלך והקלד # 100DaysOfCode בשדה Clan.
לפני שתמשיך לפרויקטים הסופיים, אתה צריך להיות מוכן לבוס הסופי, הקופה. ?
אחרי שאתה מכה את זה אני יכול לומר ש ...
... עכשיו אתה יודע לעבוד עם JavaScript! ?
מדביקים דברים יחד
עכשיו הגיע הזמן לקחת את אתגר Javascript30 מאת ווס בוס. זו הדרך הטובה ביותר ללמוד כיצד HTML, CSS ו- JavaScript עובדים יחד, ללטש את הידע שלך ביסודות ולהבין את ה- DOM. בניית הפרויקטים הקטנים האלה הייתה חוויה נהדרת וממש מהנה עבורי!
ספריות חזית
מנקודה זו אתה הופך למפתח ממשק קצה אמיתי?
Bootstrap
מסגרת ה- CSS הפופולרית ביותר. בנה כמה אתרים יחד עם מדריכים ב- YouTube. התרגלו לפריסת רשת העמודים המפורסמת של Bootstrap.
jQuery
למרות שיש אנשים שאומרים כי jQuery מת, זה תמיד יעזור כאשר הפיתרון ב- JavaScript טהור הוא מוזר ושימוש במסגרת JS הוא יותר מדי. זה יהיה עוד כלי נהדר בארסנל שלך. בנו איתו כמה אפליקציות קטנות לתרגול.
סאס
לא הערכתי את מסגרות ה- CSS לגמרי עד שראיתי את כוחן האמיתי. רציתי ללמוד טכניקות מתקדמות של CSS וקניתי CSS ו- Sass מתקדמים מדהימיםקורס (בתשלום) על ידי ג'ונאס שמדטמן. מומלץ מאוד אם אתה רוצה ללטש את כישורי CSS שלך ולהבין את זרימת העבודה. אני עדיין שמח שמצאתי את זה.
תגובה & Redux
זהו החלק העיקרי במדור ספריות חזית. תגובה היא בחירה מצוינת כספריית JavaScript הראשונה שלך ללמוד.
למען האמת, קשה להבין איך לעבוד עם זה בפורמט של freeCodeCamp מכיוון שאתה לא יכול לבנות שום דבר מאפס וכמה דברים עובדים מתחת למכסה המנוע. אז קחו קורס בנושא React ו- Redux, וקחו את הזמן להבין את הרעיונות והכלים שלהם.
המועדפים האישיים שלי:
- מדריך תגובה מלא (עם Redux)מאת NetNinja
- תגובה למתחילים (בתשלום) מאת ווס בוס
- תגובה - המדריך השלם (בתשלום) מאת אקדמינד
אני מקווה שאתה נרגש להשתמש בידע החדש שלך בפרויקטים הסופיים.
עכשיו אתה יכול לבנות כל מה שאתה רוצה ?
ממשיכים הלאה
אתה מפתח ממשית ממשית עכשיו ויש לך מספיק מיומנויות כדי לבנות יישומי אינטרנט נהדרים. אולי אתה סקרן מה לעשות הלאה והתשובה היא פשוטה כמו "בנה, בנה, בנה!" . המשימה הנוכחית שלך היא ליצור תיק עבודות ולקבל יותר תרגול.
להלן כמה טיפים עבורך מה הלאה:
- קבל רעיונות לפרויקט בקח פרוייקטים ביתייםסעיף על freeCodeCamp.
- בנה כל פרויקט יחד עם קורס, ואז שנה אותו ושיפר אותו על ידי הוספת תכונות חדשות.
- התמודד עם D3.js ו- Node.js כדי לקבל את אישורי ה- FreeCodeCamp הבאים!
- קרא JavaScript ואלוקנטיאתה לא מכיר את JSלהפוך לנינג'ה JavaScript.
- שפר את דירוגך ב- Codewars.
- קבלו טעימה מעיצוב אתרים מתקדם מעיצוב אתרים זה למפתחי אתריםקוּרס.
- שמור על חשבון GitHub שלך פעיל ונסה לתרום למקור פתוח.
אם אחד מהמשאבים האלה לא עובד בשבילך, זה בסדר. אל תתסכל, מה שמתאים למישהו לא בהכרח צריך לעבוד עבור כל אדם.
אני מקווה שמדריך זה יעזור לך בלימודך, ומקווה לחסוך לך זמן?