CSS – עיצוב ומבנה רספונסיבי
נלמד לעצב אתרי Web: צבעים, פריסות, רספונסיביות, אנימציות ומראה מודרני. הקורס מלמד איך להפוך HTML פשוט לממשק יפה ומקצועי.
מסע הלימוד
8 מודוליםתרגול מקיף — שמשלב את כל מה שלמדתם
סדרת תרגילים בסביבת עבודה דמוית IDE. כתבו, שמרו, הגישו לבדיקה — וקבלו משוב מפורט.
כרטיס מוצר – השלמת HTML + CSS
בתרגיל זה עליך לבנות כרטיס מוצר מלא. הקוד שקיבלת חסר מחלקות ועוטפים, ובקובץ ה-CSS אין עדיין חוקים. עליך: ב־HTML: לעטוף את כל…
עמוד נחיתה – הוספת מחלקות + Grid + רספונסיביות
קיבלת HTML חלקי לעמוד נחיתה.עליך: ב־HTML: להוסיף class ל־header (למשל hero). לעטוף את בלוק הטקסט והתמונה ב־<section> עם class (למשל content). להוסיף…
תפריט ניווט – הוספת מחלקות, active ו־Flex רספונסיבי
עליך להשלים תפריט ניווט. ב־HTML: לעטוף את הקישורים ב־<nav> עם class (למשל nav). להוסיף class active לקישור הראשון. לוודא שזה מחובר ל־style.css.…
גלריית תמונות – הוספת wrapper + Grid + Hover Zoom
קיבלת 6 תמונות ללא מחלקות.עליך: ב־HTML: לעטוף את כל התמונות ב־<div> עם class (למשל gallery). לוודא שהקובץ מחובר ל־CSS. ב־CSS: ליצור Grid…
Sidebar + Main – השלמת DIVים, מחלקות ו־Position
קיבלת קוד HTML עם קישורים ותוכן, ללא חלוקה ל־sidebar ו־main.עליך: ב־HTML: לעטוף את שלושת הקישורים הראשונים ב־<div> עם class sidebar. לעטוף את…
פרויקט סיום הקורס — CSS – עיצוב ומבנה רספונסיבי
בונים דף נחיתה מיני (Hero + Features + Pricing) שמרכז את כל מה שלמדנו בקורס: חיבור CSS, סלקטורים, טיפוגרפיה, צבעים ורקעים, Box Model, פריסה (Grid/Flex), רספונסיביות (Media Queries + יחידות יחסיות), ואנימציות/טרנזישנים…
01תיאור הפרויקט
בונים דף נחיתה מיני (Hero + Features + Pricing) שמרכז את כל מה שלמדנו בקורס: חיבור CSS, סלקטורים, טיפוגרפיה, צבעים ורקעים, Box Model, פריסה (Grid/Flex), רספונסיביות (Media Queries + יחידות יחסיות), ואנימציות/טרנזישנים (hover, keyframes, loader/toast).
זהו פרויקט הסיום של הקורס
כדי לראות את ההוראות המלאות, התוצרים והקריטריונים — ולהגיש את הפרויקט — התחברו לחשבון.
התחברו כדי להגיש