הקדמה
במחברת הקודמת חיזקתם את הבסיס שלכם ב־CSS.
העמקתם את התפיסה מאחורי הרעיונות, ולמדתם הרבה פיצ’רים שקיימים ב־CSS לעיצוב אלמנטים בדף.
אחרי שחיזקתם את היסודות שלכם בשפה והשגתם יכולות לעצב אלמנטים שונים,
הגיע הזמן לחבר הכל ולדבר על עיצוב העימוד (layout) – איך מסדרים אלמנטים שונים בדף, ולגרום לדף להראות כמו שרצינו.
זה למעשה החלק הקשה יותר ב־CSS, שעבורו עשינו את המסע עד כאן.
היכולת שלנו לעצב עמוד שבו כל אלמנט מופיע בדיוק במקום שרצינו שיופיע, ובפרט – ההתאמה של העמוד שלנו לכל סוג מכשיר, היא לא עבודה של מה־בכך.
בחלק הזה של השבוע נכיר את הגישות השונות לנושא, ונסגור את פרק האינטרנט עם יכולות טובות מאוד ב־HTML ו־CSS שישמשו אתכם ביצירת מוצרים שלמים, קצה לקצה, בעתיד.
חומרי הלימוד והתרגילים
| מספר תרגיל | עמוד לימוד | קישור לתרגיל | הערות |
|---|---|---|---|
| מבוא | אל תדלגו על זה. קראו את זה ברפרוף (התעכבו בעיקר על ההתחלה), זה יסדר דברים בראש לקראת ההמשך שאינו פשוט. | ||
| זרימת עימוד רגילה | זה קצר וחשוב, קראו לעומק. | ||
| 220-223 | Flexbox | Flexbox skills | זה חומר חשוב מאוד. ממליץ לחזק עם תרגולים נוספים ב־freeCodeCamp. |
| 224-227 | Grids | Grid skills | זה חומר חשוב מאוד. ממליץ לחזק עם תרגולים נוספים ב־freeCodeCamp. |
| 228-230 | Floats | Floats skills | |
| 231-232 | Positioning | Positioning Skills | |
| Multiple-column Layout | Multicol skills | התרגילים אינם חובה | |
| 233 | Responsive Layout, Media queries | Responsive Web Design skills | זה כנראה הנושא הכי מדובר בעשור של 2010 בעולם ה־frontend. חשוב להבין לעומק. |
| Legacy layout methods | לא חובה, אבל מומלץ מאוד. חלק גדול מהאתרים עדיין נבנים כך. | ||
| תמיכה בדפדפנים ישנים | לא חובה, אבל מומלץ מאוד. חובה עבור מי שחושב להיות מתכנת frontend או fullstack. | ||
| 234 | תרגיל סיכום |