מדריך Web Development

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

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

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

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

היכן להתחיל?

אנחנו רוצים לפגוש אותך היכן שאתה נמצא. מה מהתיאורים הבאים מתאים לך יותר?

  • מתחילים - הכרות ראשונית עם סביבת האינטרנט

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

  • מתקדמים - הכרות עם HTML ו-CSS

    אם כבר יש לכם את ידע הבסיס, ואתם רוצים להתקדם ללמוד HTML ו - CSS יותר לעומק, אנו ממליצים לכם על סדרת המודולים בנושא HTML - וסדרת המודולים בנושא CSS שלנו. 

  • מתקדמים - הכרות עם JavaScript

    אם אתם מרגישים כבר בנוח עם HTML ועם CSS, או אם אתם מעוניינים בעיקר ללמוד את שפת התכנות JavaScript, אנו ממליצים ללכת להתקדם לסדרת המודולים בנושא JavaScript — Dynamic client-side scripting או ל-Server-side website programming. אנחנו נשמח גם אם תסייעו להרחיב את איזור הלמידה

  • Frameworks and tooling:

    לאחר שליטה בסיסית ב  HTML, CSS, ו JavaScript כדאי ללמוד על client-side web development tools, and then consider digging into client-side JavaScript frameworks, and server-side website programming

הערה: המילון שלנו מכיל הסבר לכל מונח וביטוי. נסו להפיק ממנו את המירב.

Random glossary entry

מערך

נושאי הלימוד

אלו הנושאים שנגע בהם באיזור הלימוד של MDN:

תחילת הדרך עם ה-Web
מספק הכרות בסיסית ומעשית לפיתוח אינטרנט עבור מתחילים וחסרי רקע.
HTML - בונים את האינטרנט 
HTML זו השפה שבה אנחנו משתמשים על מנת לתת מבנה לתוכן שלנו ולהגדיר מה המשמעות שלהם או מטרתם. נושא זה מלמד את שפת HTML לעומק.  
CSS - מעצבים את האינטרנט
CSS היא השפה שאנחנו משתמשים בה על מנת לעצב את התוכן שלנו ועל מנת לפרוס את התוכן שלנו באתר, כמו גם להוסיף הנפשות ואנימציות שונות. נושא זה מלמד היבטים רבים של שפת CSS והכלים העומדים לרשותנו. 
JavaScript - תכנות צד לקוח 
JavaScript היא שפת תכנות דינאמית אשר משמשת על מנת להוסיף פונקציונליות דינאמית לאתרי אינטרנט. נושא זה מלמד את כל הכלים והנושאים הנדרשים על מנת להבין ולכתוב בשפת  JavaScript.
Web forms — Working with user data
Web forms are a potent tool for interacting with users — most commonly, they are used for collecting data from users, or allowing them to control a user interface. In the articles listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web forms.
נגישות אתרים
נגישות אתרים זה מושג המאגד בתוכו מספר פרקטיקות מקובלות אשר מטרתן היא להפוך את התוכן ברשת לנגיש עבור כמה שיותר אנשים, ללא השפעה של מוגבלות פיזית, סוג המכשיר, מיקום וגורמים נוספים. נושא זה נוגע בכל מה שאתם צריכים לדעת בנושא.
Web Performance - הפיכת האתר למהיר ורספונסיבי
ביצועים זו האמנות של הפיכת אתרי אינטרנט ויישומים מבוססי web למהירים ורספונסיביים לאינטראקציות של המשתמש, ללא השפעה של מהירות הגלישה של המשתמש, גודל המסך, הגבלות מכשיר וכד׳. 
כלים ובדיקות
נושא זה מכסה את כל הכלים שמפתחים צריכים על מנת לבחון ולבדוק את הפיתוח שלהם. 
תכנות צד-שרת
גם אם אתם מתרכזים בפיתוח צד-לקוח, יהיה זה שימושי והכרחי מאוד עבורכם להבין מהם שרתים ומהו קוד של צד השרת וכיצד הם עובדים יחד. נושא זה מעניק הכרות כללית כיצד צד השרת עובד, ומדריכים מפורטים המראים כיצד לבנות יישום צד שרת באמצעות שתי פריימוורקים פופולרים - Django (Python) and Express (node.js). 

דוגמאות הקוד שלנו

כל דוגמאות הקוד שלנו זמינים כמובן גם ב-GitHub. אם תרצו להוריד עותק מרוכז שלהם למחשב, תוכלו להוריד קובץ ZIP מרוכז.

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

צרו עמנו קשר

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

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

ראו גם

Mozilla developer newsletter
הניוזלטר שלנו למפתחי Web - מקור מידע מעולה לכל רמות הניסיון. 
Web demystified
סדרה מצויינת של סרטוני וידאו המסבירה את הבסיס של פיתוח Web, נועדה בעיקר לחסרי רקע. נוצרה על ידי  Jérémie Patonnier.
Codecademy
אתר אינטראקטיבי מעולה ללימוד שפות תכנות מהבסיס.
Code.org
אתר בסיסי לתכנות אשר נועד בעיקר לחסרי רקע/ילדים.
freeCodeCamp.org
אתר אינטראקטיבי מעולה ללימוד פיתוח Web.
Teaching activities
A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.
Edabit
Hundreds of free interactive coding challenges in various languages.