כמעט כל מי שמתחיל ללמוד פיתוח פרונטאנד נתקל בחומה הזו במוקדם או במאוחר.
מדריכי הווידאו מתחילים לטשטש את הראייה. אתם כבר יודעים מה זה div. אתם יכולים להציץ בגיליון עיצוב של מישהו אחר ולהבין פחות או יותר מה קורה שם. שלושה סרטונים על Flexbox? ראיתם. אבל ברגע שאתם פותחים קובץ index.html ריק והסמן מהבהב מולכם, המוח פשוט נמחק.
עוד מדריך הוא לא הפתרון. פרויקט הוא הפתרון.
משהו קטן מספיק כדי לסיים בסוף השבוע, עם תוצאה ויזואלית שאפשר להראות לחברים. HTML ו-CSS נקלטים בראש רק כשאתם מקלידים אותם בעצמכם, הורסים אותם, ואז חוזרים ומתקנים את מה שהרסתם.
מסלולי ה-HTML וה-CSS הם מהפעילים ביותר בפלטפורמת Coddy. ואלו שממשיכים מספיק זמן כדי להרגיש ביטחון בקוד פרונטאנד עושים דבר אחד פשוט: מסיימים פרויקטים קטנים באופן קבוע. הם לא מחכים עד שהם "ידעו מספיק". הם בונים, נתקעים בקירות, מחפשים פתרונות וממשיכים הלאה.
המדריך הזה מציע לכם 18 פרויקטים ב-HTML ו-CSS ממוינים לפי רמת קושי, מאתר של עמוד אחד ועד לקרוסלת תמונות מבוססת CSS בלבד. אתם לא אמורים לבנות את כולם. פשוט בחרו אחד לסוף השבוע הקרוב וסיימו אותו.
למה פרויקטים עדיפים על עוד מדריכים
לקרוא קוד מרגיש פרודוקטיבי. הבעיה היא שזה פשוט לא.
חודש של צפייה בסרטוני יוטיוב עדיין יכול להשאיר אתכם בלי יכולת להרים דף נחיתה בסיסי, כי צפייה וכתיבה מפעילות שרירים שונים לגמרי במוח. CSS, במיוחד, חייבים להקליד כדי להבין, מכיוון שחלק גדול ממנו מורכב מכוונונים קטנים ומציקים שלומדים באמת רק דרך ניסוי וטעייה.
פרויקטים גם מכריחים אתכם לחפש מידע! עבודת פרונטאנד מורכבת מכ-30% כתיבת קוד ו-70% חיפוש ב-MDN, קריאת דוקומנטציה, והבנה למה אלמנט מסוים זז שני פיקסלים הצידה. מדריכים פשוט מסתירים את כל זה מכם.
הדבר השני שפרויקטים נותנים לכם הוא משהו להצביע עליו. קשה להרגיש סיפוק מלהגיד "אני לומד HTML ו-CSS". אבל להגיד "בניתי את עמוד התפריט הזה למסעדה, הנה הקישור" זה משהו שאתם יכולים לשלוח לחברים בגאווה. תחושת ה-"אני יצרתי את זה" היא מה שמחזיק אנשים ומניע אותם להמשיך גם בשבועות הקשים יותר.
שיעורי ה-HTML וה-CSS הקצרים של Coddy רצים ישירות בדפדפן שלכם ללא צורך בהתקנות, כך שתוכלו לתרגל את הבסיס במפגשים של חמש דקות עד שתזכרו את הסינטקס בעל פה.
איך להתחיל לעבוד (דלגו אם כבר הגדרתם הכל)
לא צריך סביבת עבודה מתוחכמת בשביל HTML ו-CSS. רק שלושת הדברים הבאים:
- עורך קוד (Text Editor). VS Code הוא ברירת המחדל עבור רוב האנשים. הוא חינמי, ואחרי שתסיימו כמה פרויקטים, יש תוספי CSS מעולים שכדאי להתקין.
- דפדפן. כל דפדפן שאתם כבר משתמשים בו. כלי המפתחים (קליק ימני,
Inspectאו "בדיקה") הם הדרך שלכם לפתור בעיות עיצוב ומיקום (Layout). אמצו את ההרגל הזה כמה שיותר מוקדם. - תיקייה לכל פרויקט. רק
index.htmlו-style.cssכדי להתחיל! אל תדאגו לגבי כלי בנייה (build tools), פריימוורקים או "שיטות עבודה מומלצות" (best practices) בפרויקט הראשון שלכם.
אם אתם מעדיפים לדלג על שלב ההגדרות, שיעור ה-HTML ו-שיעור ה-CSS של Coddy רצים ישירות בדפדפן ללא צורך בהתקנות. זה שימושי מאוד כשרוצים לתרגל קונספט ספציפי בלי לפתוח פרויקט חדש. אחרת, תיקייה ועורך קוד זה מעל ומעבר.
פרויקטים ב-HTML ו-CSS למתחילים
חמשת הפרויקטים האלה משתמשים בבסיס: כותרות, פסקאות, תמונות, רשימות, קישורים, וקצת צבע ומרווחים. אחרי כמה שיעורי HTML ו-CSS בסיסיים, כל אחד מהם הוא בר ביצוע תוך שעות ספורות.
1. עמוד מחווה (Tribute Page)
בחרו דמות שאתם מעריצים (מוזיקאי/ת, סופר/ת, ספורטאי/ת, מדען/נית) ובנו עמוד מחווה חד-עמודי. כותרת אחת גדולה, תמונת נושא (hero image), ביוגרפיה קצרה, ציר זמן של חייהם ורשימת קישורים לקריאה נוספת. הפרויקט כולו משתמש בכותרות, פסקאות, תמונות, רשימות ו-CSS בסיסי לעיצוב טקסט (טיפוגרפיה) ומרווחים. זהו פרויקט ה-HTML הראשון הקלאסי ולא לחינם – שום דבר כאן לא מסובך מדי.
2. עמוד אישי "קצת עליי"
אתר אישי בעל עמוד אחד שמציג אתכם לעולם. תמונה, ביוגרפיה קצרה, רשימה של תחומי העניין שלכם וחלק ליצירת קשר. נקודות בונוס אם תעלו אותו לרשת (Deploy). השירות של GitHub Pages הוא חינמי ולוקח בדיוק כמה דקות להגדיר אותו. עכשיו יש לכם קישור אמיתי לשתף עם אחרים.
3. כרטיס מתכון
מתכון הכולל תמונת נושא של המנה, רשימת מצרכים, שלבי הכנה ממוספרים וזמן הכנה המוצג בתיבת פרטים קטנה. הפרויקט ילמד אתכם על רשימות ממוספרות לעומת רשימות תבליטים (ordered vs unordered lists), שינוי גודל תמונות ואיך לגרום לעמוד עמוס בתוכן להיראות מאורגן ומזמין במקום מבולגן.
4. עמוד טופס יצירת קשר
עמוד עם טופס: שם, אימייל, הודעה וכפתור שליחה. הטופס לא חייב לשלוח את המידע לשום מקום עדיין (זה כבר החלק של JavaScript). המטרה היא להכיר את אלמנטי הטפסים של HTML (input, textarea, label, button) ולעצב אותם כך שלא ייראו כמו ברירת המחדל המיושנת של הדפדפן. טפסים מופיעים כמעט בכל פרויקט פרונטאנד, כך שלהרגיש איתם בנוח כבר עכשיו ישתלם לכם מאוד בהמשך.
5. תפריט מסעדה פשוט
תפריט בעל עמוד אחד למסעדה פיקטיבית. קטגוריות (מנות ראשונות, עיקריות, קינוחים), כאשר לכל מנה יש שם ותיאור קצר. הוסיפו באנר מרשים בחלק העליון ופוטר (footer) קטן עם שעות הפעילות. הפרויקט מתרגל חלוקת תוכן לאזורים (sections), שכפול של מבני עיצוב (layouts) ובחירת פלטת צבעים שנראית הרמונית ומקצועית.
פרויקטים ברמת ביניים (Flexbox, Grid, Layouts)
כאן כבר תתחילו לעצב את מבנה העמוד כמו שצריך, לג'נגל בין מספר אזורים וליצור משהו שנראה כמו אתר אמיתי שרואים באינטרנט. רוב הפרויקטים האלה נשענים על Flexbox או CSS Grid, שזה בדיוק השריר שאתם רוצים לפתח כרגע.
6. דף נחיתה למוצר פיקטיבי
בחרו מוצר כלשהו (אפליקציה, כלי SaaS, חברה לייצור נרות, מה שתרצו) ובנו דף נחיתה מהסוג שהייתם מצפים לראות באתר הבית שלו. אזור ראשי (Hero) עם כותרת מושכת וכפתור הנעה לפעולה (CTA). מתחתיו אזור המציג שלושה יתרונות או תכונות מרכזיות. המלצות מלקוחות (Testimonials). ופוטר עם קישורים. הפרויקט כולו הוא אימון מצוין ל-Flexbox ו-Grid, לצד שיעור חשוב במרווחים והיררכיה ויזואלית.
7. אתר פורטפוליו (תיק עבודות)
עמוד מרובה אזורים שמציג לראווה את העבודות שלכם, גם אם כרגע ה"עבודות" שלכם הן רק שני עמודי מחווה וכרטיס מתכון אחד. חלק עליון (Header) עם תפריט ניווט, אזור ראשי, גריד של פרויקטים, אזור "עליי" ואזור ליצירת קשר. השתמשו ב-Grid עבור תצוגת הפרויקטים, וב-Flexbox עבור תפריט הניווט והאזור הראשי.
זהו פרויקט שימושי מאוד גם אם אתם חושבים שאתם עדיין לא צריכים תיק עבודות. ברגע שתתחילו להגיש מועמדות למשרות או לעבוד כפרילנסרים, כבר יהיה לכם בסיס מוכן להצגה.
8. טבלת מחירון
שלוש חבילות תמחור המוצגות זו לצד זו, כל אחת בכרטיס משלה עם שם החבילה, רשימת תכונות וכפתור הנעה לפעולה. הוסיפו הדגשה של "הפופולרי ביותר" על הכרטיס האמצעי. טבלאות מחירון נראות פשוטות אבל הן דורשות דיוק רב: כרטיסים בגובה זהה, רשימות תבליטים מיושרות ומצבי מעבר עכבר (hover) על הכפתורים. תרגול מעולה ל-Flexbox.
9. דף הבית של בלוג
אינדקס של בלוג: חלק עליון עם תפריט ניווט וחיפוש, מאמר מומלץ בולט למעלה, גריד של פוסטים אחרונים מתחתיו, סרגל צד (sidebar) עם קטגוריות ותגובות אחרונות, ופוטר בתחתית. הפרויקט הזה ילמד אתכם איך להתמודד עם פריסת תוכן מורכבת המורכבת ממספר אזורים שונים, מה שקרוב מאוד לאופן שבו נראים אתרים אמיתיים בתעשייה.
שיעורי ה-CSS המעשיים של Coddy מאפשרים לכם לכתוב קוד פריסה אמיתי יחד עם באגסי (Bugsy), עוזר ה-AI האישי שלכם, שיסביר לכם בדיוק למה האלמנט שלכם מסרב להתמרכז, במקום להשאיר אתכם לבד עם עוד לשונית פתוחה של Stack Overflow.
10. עמודי התחברות והרשמה
שני עמודים קשורים – התחברות באחד והרשמה בשני – עם טופס ממורכז, לוגו/כותרת מותג וקישורים למעבר מהיר ביניהם. האתגר כאן הוא ליצור משהו שנראה נקי ומקצועי בלי להעמיס יותר מדי. עמודי ההתחברות הטובים ביותר הם אלו שמיושרים בצורה מושלמת ונראים קצת יותר טוב ממה שהמשתמש מצפה לו. תרגיל מצוין (ולא מוערך מספיק) בפיתוח חוש עיצובי.
11. מוקאפ של לוח בקרה (Dashboard Mockup)
פריסה סטטית של לוח בקרה (דאשבורד): תפריט ניווט צידי משמאל, סרגל עליון עם פרטי המשתמש, ואזור תוכן מרכזי המכיל כמה כרטיסי נתונים (סטטיסטיקות), מיקום ייעודי לגרף ורשימת פעילויות אחרונות. אין צורך באינטראקטיביות עדיין – זהו פרויקט פריסה (Layout) טהור. Grid יעשה כאן את רוב העבודה הקשה. בסוף הפרויקט תבינו בדיוק למה CSS Grid קיים, ולמה אנשים שעדיין לא ניסו אותו ממשיכים להתלונן על קשיי עיצוב אתרים.
פרויקטים של אנימציות ואפקטים ב-CSS
עכשיו הגענו לחלק הכיפי. פרויקטים קטנים יותר בהיקפם, אך עשירים יותר ב-CSS. מעולים לתרגול מעברים (transitions), קיפריימס (keyframes), טרנספורמציות (transforms) ופסאודו-קלאסים (pseudo-classes) כמו :hover ו-:focus.
12. אנימציית טעינה (Loading Spinner)
אנימציית טעינה המבוססת על CSS טהור בלבד. נסו ליצור כמה וריאציות: טבעת מסתובבת, שלוש נקודות מקפצות, עיגול פועם או מד התקדמות שמתמלא שוב ושוב. כל אחת מהאפשרויות האלה דורשת כ-15 שורות CSS בלבד ותלמד אתכם על @keyframes, animation ו-transform.
13. גלריית תמונות עם אפקטים במעבר עכבר (Hover)
גריד של תמונות שבו מעבר עכבר על כל תמונה חושף כיתוב במעבר חלק (transition). נסו אפקטים שונים: שכבת כיסוי שמחליקה פנימה, זום עדין על התמונה, או פילטר צבע שנעלם בהדרגה. זהו הפרויקט שבו השימוש ב-transition בדרך כלל "מתחבר" ומובן סוף סוף לרוב האנשים. בנוסף, תלמדו כאן איך לערום אלמנטים בשכבות באמצעות position: absolute.
14. תפריט ניווט עם אנימציה
תפריט ניווט עם לוגו בצד אחד ופריטי תפריט בצד השני, שבו פריטי התפריט מציגים קו תחתון שנמתח באנימציית החלקה בעת מעבר עכבר, והעמוד הפעיל נשאר עם קו תחתון קבוע. במסכים ניידים, התפריט מתכווץ לאייקון המבורגר שפותח תפריט נפתח (dropdown). זהו דפוס עיצובי שתשתמשו בו לנצח: מצבים מונפשים באלמנטים אינטראקטיביים, לצד התאמה רספונסיבית לגדלי מסך שונים.
15. כרטיס מתהפך ב-CSS (Card Flip)
כרטיס שמתהפך בעת מעבר עכבר כדי לחשוף מידע נוסף בצדו האחורי (ציטוט, הגדרה או פרט מעניין). הפרויקט משתמש ב-transform: rotateY וב-backface-visibility – שתיים מתכונות ה-CSS שלא משתמשים בהן כל יום, אבל מרגישות כמו קסם אמיתי בפעם הראשונה שהן עובדות. פרויקט מהיר עם תמורה ענקית לביטחון העצמי שלכם.
16. סליידר תמונות מבוסס CSS בלבד
קרוסלת תמונות הנגללת אופקית עם כפתורי "הקודם/הבא", הבנויה כולה ב-CSS ללא טיפת JavaScript. הטריק כאן הוא שימוש בכפתורי בחירה (radio buttons) המוסתרים מחוץ למסך ובסלקטור :checked כדי להחליף את התמונה המוצגת. זהו טריק חכם שמראה לכם כמה כוח יש ל-CSS לבדו לפני שרצים להשתמש ב-JS. שווה לעשות את זה לפחות פעם אחת, גם אם בדרך כלל הייתם בונים את זה עם JavaScript.
פרויקטים מתקדמים ב-HTML ו-CSS
הפרויקטים האחרונים מיועדים לשלב שבו הבסיס כבר מרגיש לכם טבעי ואתם מחפשים אתגר אמיתי. הם עדיין מבוססים על HTML ו-CSS טהורים (ללא צורך ב-JavaScript), אך הם ימתחו את הגבולות שלכם בכל הנוגע לפריסה, דיוק וסבלנות.
17. שכפול (Clone) של דף בית מפורסם
בחרו אתר אמיתי (דף הבית של נטפליקס, דף הנחיתה של ספוטיפיי, או עמוד מוצר של אפל) ושחזרו את החלק הויזואלי שלו ב-HTML ו-CSS בצורה המדויקת ביותר שאתם יכולים. אין צורך להפוך אותו לפונקציונלי, פשוט התאימו את הפריסה, הטיפוגרפיה, המרווחים והצבעים.
אתם תבלו שעות בתהייה איך הם הגיעו למרווח הפנימי (padding) המדויק הזה, תלמדו למה גרידים נמדדים בצורה שבה הם נמדדים, ותתחילו לשים לב להחלטות עיצוביות בכל אתר שבו תבקרו. מפתחי פרונטאנד מדברים על התרגיל הזה כעל אחד המשפיעים ביותר במשך שנים.
18. אמנות ב-CSS (CSS Art)
ציירו משהו באמצעות אלמנטי div ו-CSS בלבד. אנשים יצרו איורים מפורטים להפליא בדרך זו: דמויות מצוירות, נופים, חיות ואפילו פורטרטים שלמים. התחילו עם משהו פשוט – כוס קפה, סמיילי או רובוט בסיסי.
זה נשמע אולי קצת טיפשי עד שמנסים את זה. אז זה הופך לשיעור מעמיק ב-position, border-radius, box-shadow, מעברי צבע (gradients) ו-transform. בסופו של דבר, תבינו CSS ברמה שרוב המתחילים לא מגיעים אליה לעולם, וכל זה רק מתוך הניסיון לצייר עיגול בתוך מלבן.
איפה Coddy נכנסת לתמונה?
שיעור ה-HTML ו-שיעור ה-CSS של Coddy נועדו בדיוק כדי לגשר על הפער שבין "אני רוצה ללמוד את זה" לבין "אני מסוגל לבנות פרויקט". כל שיעור אורך כחמש דקות, אתם כותבים קוד אמיתי בדפדפן, ובאגסי (עוזר ה-AI המובנה בשיעור) נמצא שם בשבילכם כשאתם נתקעים בשאלות כמו למה margin: auto לא ממרכז את האלמנט שלכם אנכית.
כל המבנה מבוסס על תרגול יומי קבוע. חמש דקות פה, חמש דקות שם – אותו דפוס שגורם לאנשים לפתוח אפליקציות ללימוד שפות מדי בוקר, מיושם כאן על כתיבת קוד. אם אי פעם פרשתם מקורס עצמאי באזור ה-30%, הפורמט הקצר והממוקד הזה הוא כנראה מה שהיה חסר לכם.
HTML ו-CSS זמינים לחלוטין במסלול החינמי – כל שיעור, ללא צורך בהגדרות מוקדמות. זה מפתיע אנשים לטובה. אתם לא הולכים להיתקל בחומת תשלום (paywall) באמצע הלימוד של Flexbox!
כמה הרגלים שיעזרו לכם בדרך
לפני שאתם בוחרים פרויקט, הנה שלושה דברים קטנים שעושים הבדל עצום:
השתמשו בכלי המפתחים של הדפדפן. קליק ימני על כל אלמנט, בחירה ב-Inspect (בדיקה), והסתכלות על פאנל העיצובים (styles). אתם יכולים לערוך את ה-CSS בזמן אמת בדפדפן כדי לראות מיד מה קורה. זהו כלי הדיבאגינג (ניפוי שגיאות) הטוב ביותר שתשתמשו בו אי פעם, והוא כבר מובנה בחינם בכל דפדפן.
בנו בגישת Mobile-First. התחילו לעצב את ה-CSS עבור מסכים קטנים, ואז הוסיפו שאילתות מדיה (media queries) כדי להתאים את העיצוב למסכים גדולים יותר. לעשות את זה הפוך זה הרבה יותר קשה. זהו הדפוס שבו משתמשים ברוב קוד הפרונטאנד המודרני, כך שאימוץ ההרגל הזה עכשיו יחסוך לכם המון עבודה כפולה בהמשך.
שחררו קודם כל גרסה "מכוערת". גרמו לעמוד לעבוד קודם כל עם תוכן זמני (placeholder) ועיצוב בסיסי וגס. את הליטושים תעשו אחר כך. טעות נפוצה של מתחילים היא לבזבז שלוש שעות על עיצוב הכפתור המושלם, רק כדי לגלות אחר כך שפריסת העמוד כולה לא עובדת, ועכשיו צריך להתחיל הכל מהתחלה.
מה לבנות הלאה?
אם סיימתם פרויקט והפרויקט הבא כבר נראה לכם מובן מאליו, זה סימן מצוין. אתם מוכנים!
בחרו את הפרויקט הבא מהרשימה והתחילו לעבוד. אל תחכו עד שתרגישו "מספיק מוכנים", כי התחושה הזו אף פעם לא באמת מגיעה. יום אחד פשוט תשימו לב שכבר בניתם שישה דברים, והשביעי נראה לכם פתאום לגמרי בהישג יד.
אם אתם לא בטוחים במה לבחור, לכו על הפרויקט שקצת מפחיד אתכם. קפיצות המדרגה ביכולות שלכם קורות בקצה של אזור הנוחות, לא במרכז שלו.
ואם אתם נתקעים שוב ושוב בבסיס (סלקטורים שלא עובדים, פריסות שקורסות, Flexbox שלא מגיב), קחו הפסקה קלה מהפרויקט ועברו על כמה שיעורים ממוקדים כדי להשלים את הפערים.
מסלולי ה-HTML וה-CSS של Coddy מיועדים בדיוק לשם כך – תרגול קצר וממוקד בקונספט שבו נתקעתם, ואז חזרה מהירה לפרויקט שלכם.
Coddy הופכת את לימוד התכנות להרגל יומי של חמש דקות עם נקודות ניסיון (XP), רצפי למידה (streaks) ומסלול חינמי נדיב המכסה כל שיעור HTML ו-CSS, כדי שתוכלו סוף סוף לפתח את העקביות הדרושה להשלמת פרויקטים אמיתיים.
Share this article
About the Author
Coddy Team
Editorial Team
Frequently Asked Questions
מהו פרויקט ה-HTML וה-CSS הראשון הכי טוב עבור מתחילים לגמרי?
דף מחווה (tribute page) או דף "About Me" אישי. שניהם משתמשים ב-HTML בסיסי בלבד ובכמות קטנה של CSS, ותסיימו כל אחד מהם תוך שעות ספורות.
האם אני צריך ללמוד JavaScript לפני שאני עושה פרויקטים של HTML ו-CSS?
לא. אתם יכולים לבנות כמות מפתיעה של דברים באמצעות HTML ו-CSS בלבד: דפי נחיתה, תיקי עבודות, גלריות תמונות, תפריטי ניווט מונפשים, ואפילו סליידר תמונות פעיל. JavaScript נכנסת לתמונה כשאתם זקוקים לאינטראקטיביות ש-CSS לא יכולה להתמודד איתה, מה שבדרך כלל לא קורה לפני הפרויקט החמישי או השישי.
כמה זמן אמור לקחת פרויקט HTML ו-CSS למתחילים?
פרויקט ראשון אמור לקחת סוף שבוע לכל היותר. תקועים עליו שבועיים? ההיקף גדול מדי. קצצו פיצ'רים עד שתגיעו למשהו מוכן לפרסום, סיימו את הגרסה הזו, והוסיפו עוד רק אם אתם עדיין רוצים בכך.
האם כדאי לעשות פרויקטים של CSS אם אני רוצה להיות מפתח backend?
כן, לפחות כמה מהם. רוב תפקידי ה-backend עדיין מצפים מכם להיות פונקציונליים עם HTML ו-CSS עבור משימות frontend בסיסיות, כלים פנימיים ודפי ניהול (admin). שלושה או ארבעה פרויקטים יעבירו אתכם את שלב ה-"אני אפילו לא מסוגל" אל שלב ה-"אני יכול להרכיב משהו כשצריך".
אילו פרויקטים של HTML ו-CSS נראים הכי טוב בתיק עבודות?
בחרו בגיוון: דף נחיתה מלוטש אחד, פריסה רספונסיבית אחת (כמו בלוג או דאשבורד), פרויקט אחד שמציג מיומנות באנימציית CSS, ואידיאלית שכפול (clone) של אתר אמיתי כדי להוכיח שאתם יכולים להתאים לעיצוב קיים. ארבעה פרויקטים שנעשו היטב עדיפים על חמישה עשר שנעשו בחצי כוח.
איך הופכים פרויקטים של HTML ו-CSS לרספונסיביים?
התחילו עם פריסה למסכים קטנים (mobile-first), ואז הוסיפו CSS media queries כדי להתאים למסכים גדולים יותר. השתמשו ביחידות מידה יחסיות כמו rem ו-% במקום רוחב פיקסלים קבוע בכל מקום. בדקו זאת על ידי שינוי גודל חלון הדפדפן שלכם או שימוש בסרגל הכלים של המכשירים (device toolbar) ב-dev tools.
האם אפשר ללמוד HTML ו-CSS ב-Coddy בחינם?
כן. HTML ו-CSS נמצאים שניהם במסלול החינמי, וכל שיעור כלול בו. המסלול החינמי מגביל את כמות הפעולות שניתן לבצע בכל סשן (מערכת אנרגיה שמתמלאת מחדש לאורך זמן), אך הוא אינו נועל תוכן מאחורי חומת תשלום.
אילו מושגי CSS כדאי להכיר לפני שמתחילים פרויקטים ברמת ביניים?
ה-box model, Flexbox, CSS Grid, מיקומים (relative, absolute, fixed), ולפחות עיצוב רספונסיבי בסיסי עם media queries. אם מישהו מהם מרגיש לכם מעורפל, בצעו כמה שיעורי תרגול לפני שאתם קופצים לפרויקט פריסה (layout). אחרת, תבלו את רוב הפרויקט בחיפוש בגוגל במקום בבנייה.
