מפת הדרכים למתחילים לפיתוח אתרים

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

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

בסוף המדריך הזה תהיה לך הבנה של יסודות פיתוח אתרים, אילו כישורים אתה צריך לדעת ואיפה למצוא אותם!

1: מהי פיתוח אתרים : כיצד פועלים אתרים, חזית מול גב, עורך קוד‌‌

2: חזית בסיסית: HTML, CSS ו- JavaScript‌‌

3: כלים : מנהלי חבילות, כלי בנייה, בקרת גרסאות‌‌

4 א: חזית נוספת: סאס, עיצוב רספונסיבי, מסגרות JavaScript‌‌

4b: אחורי בסיסי: ניהול שרתים ומסדי נתונים, שפת תכנות

במפת הדרכים הזו אני ממליץ לעשות את הצעדים 1, 2 ו- 3 לפי הסדר. לאחר מכן, תלוי אם ברצונך להתמקד בחזית חזית יותר או בקצה אחורי, תוכל לבצע את שלבי 4 א או 4 ב בכל סדר.

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

אתה יכול גם לבדוק את הגרסה המעודכנת של מאמר זה בבלוג שלי!

1: מהי פיתוח אתרים?

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

כיצד פועלים אתרים?

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

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

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

מה ההבדל בין חזית לקצה אחורי?

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

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

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

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

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

באמצעות עורך קוד

כשאתה בונה אתר, הכלי החיוני ביותר שתשתמש בו הוא עורך הקוד שלך או IDE (סביבת פיתוח משולבת). כלי זה מאפשר לך לכתוב את הסימון והקוד שירכיבו את האתר.

יש לא מעט אפשרויות טובות שם, אך נכון לעכשיו עורך הקוד הפופולרי ביותר הוא VS Code. קוד VS הוא גרסה קלה יותר של Visual Studio, ה- IDE הראשי של מיקרוסופט. זה מהיר, בחינם, קל לשימוש, ואתה יכול להתאים אותו אישית עם ערכות נושא ותוספים.

עורכי קוד אחרים הם Sublime Text, Atom ו- Vim.

אם רק התחלת להתחיל, אני ממליץ לבדוק את קוד ה- VS, אותו תוכל להוריד מהאתר שלהם.

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

2: חזית בסיסית

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

בואו נסתכל מקרוב על כל אחד מהם.

HTML

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

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

CSS

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

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

JavaScript

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

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

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

היכן ניתן ללמוד HTML, CSS ו- JavaScript

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

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

freeCodeCamp

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

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

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

צוות עץ הבית

Team Treehouse היא פלטפורמת למידה מקוונת פרימיום שמבוססת על וידאו ויש לה מספר מסלולים שתוכלו לעקוב אחריהם. יש להם אפילו תוכנית מקוונת לתואר טכני שהיא כמו מחנה אתחול מקוון שתוכלו להשלים תוך 4-5 חודשים.

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

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

ווס בוס

ל- Wes Bos יש קורסים בחינם ללימוד Flexbox, CSS Grid ו- JavaScript שהם מעולים. פשוט עברתי את קורס ה- CSS Grid שלו, וזה היה ממש יסודי וגם מהנה. ווס הוא מורה נהדר!

אודמי

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

יוטיוב

יש גם המון משאבי וידאו בחינם ב- YouTube:

ל- Traversy Media, ככל הנראה הערוץ הגדול ביותר לפיתוח אתרים שם, יש קורס קורס HTML וקורס קריסה של CSS.

ל- DesignCourse, ערוץ המתמקד בעיצוב אתרים ובחזית ממשית, יש גם מדריך HTML ו- CSS.

ול- freeCodeCamp יש ערוץ YouTube משלהם, עם סרטונים כמו קורס למד JavaScript וקורסים מעמיקים אחרים.

ספרים ומאמרים בנושא פיתוח אתרים

אם אתה יותר אדם קורא, אני ממליץ בחום על הדברים הבאים:

ספרי ג'ון דאקט הפופולריים להפליא ב- HTML & CSS ו- JavaScript & jQuery. ספרים אלה הם בכלל לא ספרי הלימוד הצפופים והפופולריים שלך. הם מעוצבים להפליא, כתובים היטב, ויש להם הרבה תמונות ותמונות שיעזרו בלימוד החומר.

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

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

ואחרון חביב, כמה אתרים שיש בהם מאמרים נהדרים ומשאבים אחרים הם:

• רשת המפתחים של מוזילה
• טריקים של CSS
• מגזין מתנפץ

3: כלים

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

מנהלי חבילות

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

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

מנהל החבילות הפופולרי ביותר נקרא npm, או Node Package Manager, אך ניתן גם להשתמש במנהל אחר בשם Yarn. שתיהן אפשרויות טובות להכיר ולהשתמש, אם כי זה כנראה הכי טוב להתחיל עם npm.

אם אתה סקרן ללמוד עוד, תוכל לקרוא מאמר זה על יסודות השימוש ב- npm.

בנה כלים

מקבצי מודולים וכלי בנייה כמו Webpack, Gulp או Parcel, הם חלק חיוני נוסף בתהליך העבודה הקדמי.

ברמה בסיסית, כלים אלה מריצים משימות ועובדים קבצים. אתה יכול להשתמש בהם כדי לאסוף את קבצי ה- Sass שלך ל- CSS, להעביר את קבצי ה- JavaScript שלך ל- ES6 אל ES5 לקבלת תמיכה טובה יותר בדפדפן, להפעיל שרת אינטרנט מקומי ולמשימות מועילות רבות אחרות.

ל- Gulp , טכנית רץ משימות, יש חבילה של חבילות npm בהן תוכלו להשתמש כדי לאסוף ולעבד את הקבצים שלכם.

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

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

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

קישורים שימושיים

אם אתה מעוניין ב- Gulp או Parcel, יש לי הדרכות לשני אלה:

• שימוש ב- Gulp 4 בתהליך העבודה שלך
• מדריך התחלה מהיר לחבילה

אם אתה רוצה ללמוד עוד על Webpack, עיין בסרטוני YouTube הבאים:

• קורס התרסקות ב- Webpack על ידי DesignCourse
• סדרה בת 10 חלקים ב- Webpack מאת קולט סטיל

בקרת גרסאות

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

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

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

כדי ללמוד על Git ו- GitHub, ל- GitHub.com יש כמה מדריכים מקוונים המסבירים כיצד להתחיל ולהפעיל. ל- Traversy Media יש גם סרטון YouTube שמסביר כיצד Git עובד.

4 א: חזית נוספת

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

סאס

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

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

תוכל ללמוד עוד על סאס במדריך זה של Scotch.io, כמו גם על סרטון YouTube מאת Dev Ed.

עיצוב רספונסיבי

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

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

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

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

מסגרות JavaScript

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

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

נכון לעכשיו, יש לך שלוש אפשרויות עיקריות: React, Angular ו- Vue.

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

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

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

איזו מסגרת כדאי ללמוד?

אולי אתה תוהה עכשיו, "בסדר, ובכן איזו מסגרת היא הטובה ביותר?"

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

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

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

בואו נעבור עכשיו לסעיף האחרון שלנו: פיתוח אתרים אחוריים!

4b: אחורי בסיסי

ה- back-end, או צד השרת של פיתוח אתרים, מורכב משלושה מרכיבים עיקריים: השרת, שפת תכנות בצד השרת ומסד הנתונים.

שרת

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

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

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

למרות השם, אתה עדיין זקוק לשרת כלשהו, ​​לפחות לאחסן את קבצי האתר שלך. כמה דוגמאות לספקיות ללא שרת הן AWS (Amazon Web Services) או Netlify.

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

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

שפת תכנות

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

שפות התכנות הפופולריות באינטרנט כוללות PHP, Python, Ruby, C # ו- Java. יש גם סוג של JavaScript בצד השרת– Node.js, שהיא סביבת זמן ריצה שיכולה להריץ קוד JavaScript בשרת.

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

בואו לבדוק רשימה של שפות התכנות הנפוצות ביותר לפיתוח אתרים:

C #

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

מקומות ללמוד C #: ‌‌C # תכנות ספר צהוב מאת רוב מייל‌‌C # יסודות על Udemy

ג'אווה

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

מקומות ללמוד בהם Java: ‌‌ MOOC של אוניברסיטת הלסינקי‌‌קורס מפתחי Java השלם באודמי

Node.js

Node.js היא טכנולוגיה מאוד פופולרית (על פי סקר המפתחים של Stack Overflow 2019). דבר אחד שיש לשים לב אליו: זו לא טכנית שפה בצד השרת - זו סוג של JavaScript שפועל בשרת באמצעות מסגרת Express.js.

מקומות ללמוד את Node.js: הדרכה של ‌‌Node.js על ידי תכנות באמצעות Mosh‌‌Learn Node של Wes Bos

PHP

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

מקומות ללמוד בהם PHP: ‌‌הקדמה ל- PHP מאת mmtuts‌‌PHP מאת אדווין דיאז באודמי

פִּיתוֹן

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

מקומות ללמוד פיתון: Modern The Modern Python 3 Bootcamp מאת קולט סטיל באתר Udemy‌‌LearnPython.org

אוֹדֶם

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

מקומות ללמוד רובי: ‌‌פרויקט אודיןin הדרכת רובי על מסילות מאת מייקל הרטל

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

מאגרי מידע

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

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

מסד הנתונים מופעל על השרת, באמצעות שרתים כמו Microsoft SQL Server בשרתי Windows ו- MySQL עבור Linux.

ישנם גם מאגרי מידע NoSQL, המאחסנים את הנתונים בקבצי JSON בניגוד לטבלאות המסורתיות. סוג אחד של מסד נתונים NoSQL הוא MongoDB, המשמש לעיתים קרובות עם יישומי React, Angular ו- Vue.

כמה דוגמאות לאופן השימוש בנתונים באתרים הן:

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

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

כמה משאבים ללמוד את היסודות של SQL הם:

• ה- Bootcamp השלם של SQL מאת חוזה פורטילה באודמי
• SQLBolt

כמה טיפים להשאיר אותך עם ...

תודה שקראת! אני מאוד מקווה שמדריך זה יסייע לך להתחיל ללמוד פיתוח אתרים.

כמה טיפים שיש לי אם אתה הולך במסלול אוטודידקט:

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

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

רוצה לעקוב אחרי?

אני מפרסם מיני טיפים בפיתוח אתרים באינסטגרם ובטוויטר, ויוצר סרטוני הדרכה בקידוד ב- YouTube!