דלג לתוכן הראשי
🎓 תלמיד רשום? חזור לפורטל לאחר הלימוד | 🚀 גולש חדש? הצטרף חינם

פרק 2: עיצוב ויזואלי וסגנון (Styling)

המדריך למתחילים ל HTML + CSS + JS ליצירת דפי אינטרנט

האזן להסבר

המדריך לעיצוב אתרים ב-CSS

שלום לכולם! בפרק זה נלמד כיצד להשתמש ב-CSS כדי להפוך קוד HTML פשוט לממשק משתמש מרהיב ומקצועי.

CSS

שפת גיליונות סגנון המשמשת לתיאור התצוגה של מסמך שנכתב ב-HTML.

SELECTOR

החלק ב-CSS שקובע על איזה אלמנט HTML יחול העיצוב.

BOX MODEL

מודל המתאר את המרווחים סביב אלמנט: MARGIN, BORDER, PADDING ו-CONTENT.

RESPONSIVE DESIGN

יכולת האתר להתאים את עצמו למסכים בגדלים שונים.

מקרה בוחן: המהפך של EcoStyle

חברת הסטארט-אפ 'EcoStyle' פיתחה פלטפורמה למכירת מוצרים אקולוגיים. בתחילה, האתר נבנה באמצעות HTML בלבד, ללא שום עיצוב ויזואלי. התוצאה הייתה דף ארוך, משעמם וקשה לקריאה. אחוז הנטישה עמד על 85%. לאחר חודש, החברה שכרה מעצב WEB שהטמיע CSS מודרני, השתמש ב-FLEXBOX לסדר את המוצרים ב-GRID נוח, והוסיף טיפוגרפיה נעימה לעין. התוצאה: אחוז הנטישה צנח ל-20%, וזמן השהייה הממוצע באתר עלה מ-30 שניות ל-4 דקות.
שאלה 1
מה מגדירה התכונה PADDING ב-BOX MODEL?
שאלה 2
איזו תגית HTML משמשת לחיבור קובץ CSS חיצוני?

ניתוח השפעת העיצוב על חוויית המשתמש

15
HTML בלבד
45
CSS בסיסי
90
CSS + FLEXBOX

במשימה זו, עליכם לבחון את הממשק הקיים ולזהות כיצד אלמנטים של CSS משפיעים על הפסיכולוגיה של המשתמש והמרות האתר.

🏆

כל הכבוד!

סיימתם את פרק 2 בהצלחה.