שלב 1
מסלול למידה
מפת דרכים למפתחי Frontend
קורסים חינמיים בסדר שבו מפתחי Frontend באמת צריכים אותם: HTML למבנה, CSS לפריסה, JavaScript להתנהגות, TypeScript לבטיחות, React ו־Next.js לאפליקציות אמיתיות, Git כדי להעלות לאוויר, ושמונה פרויקטים כדי להוכיח את זה. כל שיעור רץ בדפדפן, וכל קורס לפני שלב הפרויקטים מסתיים בתעודה חינמית.
663,032+ לומדים רשומים בקורסים האלה
804 שיעורים681 אתגרים3,184 שאלות חידון
- ידידותי למתחילים
עזרה בתכנות בליווי AI
שיעורים אינטראקטיביים ומעשיים
הקראה קולית בכל שיעור
חידונים לבדיקת הידע
13 תעודות חינמיות לאורך המסלול
מסלול מפתחי Frontend, שלב אחר שלב
כל שלב הוא קורס קיים ב־Coddy. עברו עליהם לפי הסדר, או קפצו לזה שחסר לכם: ההתקדמות נשמרת לכל קורס בנפרד בכל מקרה.
- 1
- 2שלב 2
CSS: פריסה ועיצובדף ייעודי
להתחיל את השלב הזהלהתחילסלקטורים, מודל הקופסה, צבעים וטיפוגרפיה, ואחר כך flexbox, grid, פריסות רספונסיביות, מעברים ואנימציה לאורך שתי יחידות. זה השלב שבו דף מתחיל להיראות כמו אלה שאתם משתמשים בהם.להתחילדף ייעודי2 יחידות, לפי הסדר - 3שלב 3
JavaScript, השפה כולהדף ייעודי
להתחיל את השלב הזהלהתחיליסודות, לוגיקה וזרימת בקרה, ואחר כך אובייקטים ומחלקות, בשלוש יחידות. עבודת Frontend היא עבודת JavaScript; כל framework אחרי השלב הזה הוא רק דרך לארגן אותה, והוא קריא רק כשהשפה קריאה.להתחילדף ייעודי3 יחידות, לפי הסדר - 4שלב 4
JavaScript בדפדפןדף ייעודי
להתחיל את השלב הזהלהתחילה־DOM, אירועים, שליפת נתונים ובניית דפים אינטראקטיביים בלי framework, ואחר כך דפוסי Frontend מעשיים. כאן HTML, CSS ו־JavaScript הופכים לדבר אחד: דף שמגיב לאדם שמשתמש בו.להתחילדף ייעודי2 יחידות, לפי הסדר - 5שלב 5
TypeScriptדף ייעודי
להתחיל את השלב הזהלהתחילטיפוסים, interfaces, גנריות, ושגיאות הקומפיילר ככלי. כמעט כל בסיס קוד מקצועי ב־React כתוב ב־TypeScript, ולכן היא באה ממש לפני ה־framework ולא כתוספת בסוף.להתחילדף ייעודי - 6שלב 6
React ו־Next.jsדף ייעודי
להתחיל את השלב הזהלהתחילקומפוננטות, props, state, hooks ורינדור, ואחר כך Next.js לניתוב, טעינת נתונים ואפליקציות אמיתיות. ה־framework שרוב משרות ה־Frontend מציינות, נלמד אחרי השפה שבה הוא כתוב.להתחילדף ייעודי - 7שלב 7
Git וניהול גרסאותדף ייעודי
להתחיל את השלב הזהלהתחילcommits, branches, מיזוג, פתרון קונפליקטים ו־remotes. כל משרת Frontend וכל פרויקט בתיק העבודות חיים במאגר Git; ללמוד אותו כאן אומר שהפרויקטים בשלב הבא עולים לאוויר כמו שעבודה אמיתית עולה.להתחילדף ייעודי - 8שלב 8
פרויקטים: בנו את מה שראיתם
להתחיל את השלב הזהלהתחילתרגולי flexbox וסלקטורים, תרגול DOM ומתודות של מערכים, ואחר כך פרויקטים אמיתיים: כרטיס פרופיל של Coddy, דף Instagram, דף התחברות של Netflix וסליידר תמונות. כל אחד מהם הוא פריט לתיק העבודות שמגייס יכול לפתוח.להתחיל8 קורסים, לפי הסדר- CSS Flexbox - הקורס המלארק html15 שיעורים
- בוררי CSSרק html15 שיעורים
- שיטות DOM ב-JavaScriptרק html13 שיעורים
- מתודות למערכים ב-JavaScriptרק javascript18 שיעורים
- שחזור כרטיס הפרופיל של Coddy | פרויקט צד-לקוחרק html26 שיעורים
- שכפול עמוד אינסטגרם | פרויקט פרונט-אנדרק html16 שיעורים
- שכפול דף הכניסה של Netflix | פרויקט Front-endרק html19 שיעורים1 אתגרים
- סליידר | פרויקט Front-endרק html23 שיעורים1 אתגרים
מה מקבלים
כל מה שתשתמשו בו כדי ללמוד לתכנת
ללמוד תוך כדי עשייה
כתבו קוד אמיתי, שלפו נתונים ממסדי נתונים, בנו אתרים ושלטו בפרומפטים ל-AI. השיעורים האינטראקטיביים שלנו מכסים כל מיומנות שמפתחים מודרניים צריכים.
playground.js
עורך קוד
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
בדיקה #1
בדיקה #2
בדיקה #3
קלט
"Alex"
פלט
"Hello, Coddy! Alex"
לבנות רצף
שמרו על עקביות וראו איך ההתקדמות שלכם גדלה! עקבו אחרי הרגל התכנות היומי, הגנו על הרצף עם ימי הקפאה וקבלו פרסים על כל יום שאתם מגיעים.
12 ימי רצף
חזרו מחר כדי לשמור על הרצף!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
הכל או כלום
יום 5 מתוך 7
הקפאת רצף
2 left
לתכנת מכל מקום
קחו את מסע התכנות שלכם לכל מקום! בלי התקנות, בלי הורדות - פשוט פותחים ומתחילים לתכנת. זמין ב-iOS, ב-Android ובאתר עם דירוג של 4.9 כוכבים.
7
250
5
משתנים
להמשיך
4.9
דירוג
אתם לא לבד
התחרו בטבלאות דירוג עולמיות, הזמינו חברים כדי לקבל פרסים וחגגו את ההצלחות אחד של השני. תכנות עם חברים זה יותר כיף!
ליגת המתמודדים7 המובילים עולים
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
אזור העלייהכל הדרכים ללמוד
לקרוא, להאזין, לבחון את עצמכם, לשאול את ה-AI או לחפש כל דבר שכבר למדתם. כל שיעור פוגש אתכם בדיוק איפה שאתם.
מבוא למשתנים
אודיו
משתנה הוא מיכל עם שם ששומר ערך שאפשר להתייחס אליו בהמשך התוכנית.
ב-Python יוצרים משתנה על ידי כתיבת השם, סימן שווה, ואז הערך שרוצים לשמור.
הערך יכול להשתנות עם הזמן - השמה מחדש לאותו שם פשוט מפנה אותו לערך חדש.
1xשרה
לקבל תעודה
קבלו תעודה על כל קורס שתסיימו. הוסיפו אותן לפרופיל ה-LinkedIn ולקורות החיים כדי להציג למעסיקים את כישורי התכנות שלכם.
תעודת סיוםתעודה זו מאשרת כיישראל ישראליהשלים/ה בהצלחה אתיסודות Python
יסודות Python
תאריךינו׳ 2026
להוסיף ל-LinkedInלמה ללמוד פיתוח פרונט אנד ב־Coddy
- אתם רואים את הדף שאתם בונים. כל שיעור HTML, CSS ו־JavaScript מוצג בזמן אמת בדפדפן לצד הקוד שלכם, כך שסלקטור שגוי או flexbox שבור נראים בשנייה שבה אתם כותבים אותם, ולא בצילום מסך בסוף.
- הסדר הנכון, בלי לדלג על JavaScript. רוב קורסי ה־Frontend ממהרים מ־HTML ל־framework; המסלול הזה נותן ל־JavaScript שלוש יחידות מלאות לפני React, כי framework קריא רק כשהשפה שמתחתיו קריאה.
- רמזי AI שקוראים את ה־markup ואת הקוד שלכם. כשפריסה נשברת או קומפוננטה לא מוצגת, Bugsy מסתכל על מה שכתבתם ומכוון אתכם לתיקון בלי לתת את התשובה.
- פרויקטים שמגייס יכול לפתוח. השלב האחרון הוא שמונה פרויקטים אמיתיים, שכפולים של דפים שאתם כבר מכירים, וכל אחד מהם הוא חלק בתיק עבודות שאפשר לשתף, ובנוסף תעודה חינמית לכל קורס בשבעת השלבים הראשונים.
שאלות נפוצות על הדרך להפוך למפתחי Frontend
איך הופכים למפתח Frontend?
למדו HTML, CSS ו־JavaScript מספיק טוב כדי לבנות דף מקובץ ריק, הוסיפו TypeScript ו־framework אחד (React היא הבחירה הבטוחה), למדו Git, ואז בנו שלושה או ארבעה פרויקטים אמיתיים בלי מדריך והעלו אותם לרשת. זה המסלול הזה, בסדר הזה. הפרויקטים חשובים יותר מהתעודות: תיק עבודות של Frontend הוא הדבר היחיד שמנהל גיוס יכול לשפוט בשלושים שניות.
מה ללמוד קודם, HTML, CSS או JavaScript?
קודם HTML, אחר כך CSS, ואחר כך JavaScript, ותנו ל־JavaScript את רוב הזמן. HTML לוקחת שבועיים בערך ו־CSS חודש עד שמרגישים בנוח; JavaScript היא שפת תכנות מלאה, וכאן רוב מפתחי ה־Frontend האוטודידקטים מקצרים דרך. המסלול הזה נותן לה שלוש יחידות ועוד יחידה על ה־DOM לפני שמופיע framework כלשהו.
האם צריך TypeScript כדי להיות מפתח Frontend?
לעבודה, כמעט תמיד: הרוב המכריע של בסיסי הקוד המקצועיים ב־React וב־Next.js כתובים ב־TypeScript, ומודעת דרושים שכתוב בה 'JavaScript' מתכוונת בדרך כלל בפועל ל־TypeScript. זה צעד קצר ברגע ש־JavaScript יציבה, ולכן היא נמצאת במסלול הזה ממש לפני React ולא בסוף.
React, Vue או Angular: איזה framework כדאי ללמוד?
React, אלא אם משרה מסוימת שאתם רוצים אומרת אחרת. יש לה הכי הרבה מודעות דרושים בפער גדול, האקוסיסטם הגדול ביותר, ו־Next.js שמעליה היא מה שרוב אתרי הפרודקשן החדשים נבנים איתו. הרעיונות, קומפוננטות, state, props ורינדור, עוברים ל־Vue ול־Angular בהמשך תוך שבוע או שבועיים. המסלול הזה מלמד React ו־Next.js.
כמה זמן לוקח ללמוד פיתוח פרונט אנד?
בערך שישה עד תשעה חודשים של שעה ביום כדי להגיע לרמת ג'וניור עם תיק עבודות. במסלול הזה HTML ו־CSS לוקחות יחד שישה עד שמונה שבועות, JavaScript חודשיים עד שלושה, TypeScript שבועיים, React ו־Next.js שישה שבועות, ושלב הפרויקטים כמה שתמשיכו לבנות. המספר שחשוב הוא פרויקטים שסיימתם, לא שיעורים שסיימתם.
האם המסלול מכסה בדיקות, נגישות או ניהול state?
לא כקורסים נפרדים, ואנחנו מעדיפים לומר זאת מאשר לנפח את הדף. markup סמנטי, הבסיס לדפים נגישים, הוא חלק משלב ה־HTML, וגם ניהול ה־state המובנה של React מכוסה; קורס בדיקות, עבודת נגישות מעמיקה יותר וספריית state מתוכננים בתוכנית הלימודים ומצטרפים למסלול כשלבים חדשים כשהם יוצאים.
האם אפשר למצוא עבודה ב־Frontend רק עם קורסים חינמיים?
כן, אם הקורסים מייצרים תיק עבודות, ובגלל זה המסלול הזה מסתיים בשמונה פרויקטים. מה שמעסיקים מסננים לפיו הוא דף שבניתם ושהם יכולים לפתוח, היסטוריית Git שמראה שבניתם אותו, וראיון שבו אתם יודעים להסביר פריסה וקומפוננטה. שלושתם מגיעים מהמסלול הזה; אף אחד מהם לא דורש בוטקמפ בתשלום.
