שבוע 11 – יום 5: עימוד באמצעות CSS

הקדמה

במחברת הקודמת חיזקתם את הבסיס שלכם ב־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 תרגיל סיכום
2 לייקים