מדריך 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. אנחנו נשמח גם אם תסייעו להרחיב את איזור הלמידה

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

Random glossary entry

תגית
In HTML a tag is used for creating an element.  The name of an HTML element is the name used in angle brackets such as <p> for paragraph.  Note that the end tag's name is preceded by a slash character, "</p>", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.

נושאי הלימוד

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

תחילת הדרך עם ה-Web
מספק הכרות בסיסית ומעשית לפיתוח אינטרנט עבור מתחילים וחסרי רקע.
HTML - בונים את האינטרנט 
HTML זו השפה שבה אנחנו משתמשים על מנת לתת מבנה לתוכן שלנו ולהגדיר מה המשמעות שלהם או מטרתם. נושא זה מלמד את שפת HTML לעומק.  
CSS - מעצבים את האינטרנט
CSS היא השפה שאנחנו משתמשים בה על מנת לעצב את התוכן שלנו ועל מנת לפרוס את התוכן שלנו באתר, כמו גם להוסיף הנפשות ואנימציות שונות. נושא זה מלמד היבטים רבים של שפת CSS והכלים העומדים לרשותנו. 
JavaScript - תכנות צד לקוח 
JavaScript היא שפת תכנות דינאמית אשר משמשת על מנת להוסיף פונקציונליות דינאמית לאתרי אינטרנט. נושא זה מלמד את כל הכלים והנושאים הנדרשים על מנת להבין ולכתוב בשפת  JavaScript.
נגישות אתרים
נגישות אתרים זה מושג המאגד בתוכו מספר פרקטיקות מקובלות אשר מטרתן היא להפוך את התוכן ברשת לנגיש עבור כמה שיותר אנשים, ללא השפעה של מוגבלות פיזית, סוג המכשיר, מיקום וגורמים נוספים. נושא זה נוגע בכל מה שאתם צריכים לדעת בנושא.
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.