מודול: עיצוב רספונסיבי קורס: CSS – עיצוב ומבנה רספונסיבי

עיצוב רספונסיבי - פרויקט מודרך

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

יש להתחבר למערכת.

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

בפרויקט הזה התלמיד בונה מקטע Landing מודרני של Pricing + Features שמסתדר נכון בכל מסך: מובייל/טאבלט/דסקטופ. תוך כדי משתמשים ב־% / vw/vh / em/rem, מוסיפים Media Queries, ובונוס: היכרות עם Bootstrap Grid System (אופציונלי).

טעימה מהצעדים במיני-פרויקט

זו רק הצצה לשלבים הראשונים. ביצוע מלא נפתח אחרי התחברות.

שלב 1: הכנה לרספונסיביות (Viewport + בדיקת מבנה)

פתח/י את responsive-design/index.html בדפדפן.
וודא/י שיש תגית <meta name="viewport" content="width=device-width, initial-scale=1"> (כבר קיימת — רק להבין למה).
פתח/י DevTools ועבר/י ל-Mobile View כדי לראות את הפריסה במובייל.

שלב 2: Container גמיש עם אחוזים (%)

שלב 3: יחידות Viewport (vh/vw) לקצב ורווחים

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

המיני-פרויקט זמין למשתמשים מחוברים

אחרי התחברות תוכל:

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

התחברות למערכת הרשמה חינמית לפלטפורמה

למה צריך להתחבר?

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

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