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

איך האינטרנט עובד

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

HTML

מבנה מסמך HTML

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

עבודה עם טקסט

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

קישורים ותמונות

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

פריסת שולחן

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

מבוא לטפסים

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

CSS

מבוא ל-CSS

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

בוררים

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

ירושה, מדורגת ועדיפות

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

עיטור טקסט

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

מודל מסמך חסום

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

JavaScript

היכרות עם JavaScript

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

תנאים

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

מחזורים

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

מערכים

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

פונקציות

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

חפצים

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

מבוא ל-DOM

JavaScript יהיה חסר תועלת אם הוא לא יכול לקיים אינטראקציה עם מסמך HTML. נלמד מהו ה-DOM (Document Object Model), אך חשוב מכך, נלמד כיצד לעבוד עם HTML ו-CSS דרך JavaScript.

טיפול באירועים

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

HTML5 ו-CSS3

HTML5: מה חדש ולמה?

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

מיקום אלמנטים ורשת

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

טפסי HTML5

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

אודיו ווידאו

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

עבודה עם טקסט ב-CSS3

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

אפקטי מעבר ושינוי ב-CSS3

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

פריסה אדפטיבית

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

Flexbox ורשת CSS

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

מעבדי קדם CSS: LESS ו-SASS

רוצה להשתמש במשתנים ב-CSS? בְּקַלוּת! גלה אילו דברים מעניינים אתה יכול לעשות באמצעות מעבדי קדם CSS.

JavaScript ברמה חדשה

ES-2015+

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

OOP ב-JavaScript

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

פונקציות בפירוט

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

AJAX ו-JSON

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

ביטויים רגולריים

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

בונים, רצי משימות וניהול תלות

באוור, npm, gulp, Grunt, webpack ושות'. אין בזה שום דבר מסובך, אבל תצטרך להבין את זה.

בדיקה ב-JavaScript

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

אלגוריתמים

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

ReactJS

מבוא ל-ReactJS

בואו להכיר את ReactJS, ללמוד איך לכתוב רכיבים פשוטים ולהשוות אותו עם מסגרות פופולריות אחרות. בואו להכיר את המושג Virtual DOM.

ארכיטקטורה ותצורה של אפליקציות React

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

יצירת האפליקציה הראשונה ב-ReactJS

בואו נסתכל מקרוב על JSX, ReactComponent, ReactDOM.render, פונקציית Render. אנו מגדירים ומשיקים את האפליקציה הראשונה, יוצרים קשרים בין רכיבים ואירועי תהליך.

ניתוב ו-ReactJS

מהו ניתוב; בואו להכיר את ReactRouter ואת הפונקציונליות שלו; אנו מארגנים ניתוב באפליקציה שלנו.