מבוא לקורס CSS

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

CSS מבצעת את הפרדה בין התכנים של הדף (HTML) לבין העיצוב הגרפי שלו, כך שניתן לשנות את סגנון הדף בקלות מבלי לשנות את התוכן עצמו. הפרדה זו מאפשרת כתיבת קוד HTML נקי ומסודר המכיל רק תוכן.

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

עבודה עם Grid ו-Flexbox

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

GRID היא מערכת לפריסת רשתות, המאפשרת ליצור פריסות מתקדמות ומורכבות יותר, כמו פריסת עמוד עם עמודות ושורות, או פריסת כרטיסים שמורכבת מתמונות וטקסט.

FLEXBOX הוא מערכת פריסה דינמית המאפשרת ליצור פריסות פשוטות יותר, עם רכיבים גמישים שניתן לסדר בצורה מעוצבת. כאשר משתמשים ב-FLEXBOX, ניתן לכוון את האב כדי ליצור פריסות מותאמות למסכים שונים ומספקות חווית משתמש טובה גם בשינוי גודל המסך.באמצעות שימוש ב-GRID וב-FLEXBOX נקבל את היכולת ליישם פריסות וסידור עמודות ושורות לפי המיקום והגודל המדוייק של התוכן בדף. כמו כן, ניתן להשתמש בהם יחד כדי ליצור פריסות מורכבות יותר ומותאמות יותר.

במהלך קורס CSS, נלמד להשתמש ב GRID ו-FLEXBOX בצורה מקיפה ונכונה נעבוד על יצירת רספונסיביות בשילוב GRID ו-FLEXBOX ועוד.

רספונסיביות CSS - התאמת האתר למסכים

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

על מנת ליצור אתר רספונסיבי נשתמש ב-Media Queries וכך נוכל לקבוע את הסגנון של עיצוב האתר על סמך גודל המסך של המשתמש. כאשר המסך קטן יותר, אתר רספונסיבי יכול להסתיר או לשנות את הצבע או הגודל של האלמנטים כדי להתאים אותו לגודל המסך. למשל, במסך קטן יותר ניתן להסתיר אלמנטים מיותרים כגון תפריטים, או לסדר את התוכן בצורה אחרת על מנת שהוא יראה נוח ונגיש יותר למשתמש. בנוסף לMedia Queries, ניתן להשתמש ב-FLEXBOX וב-GRID כדי ליצור התאמה למסכים שונים, ומאפשרות נוחות ונגישות למשתמשים על פי יחס ממדים ומקום בדף.

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

יצירת אנימציות בעזרת CSS

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

בקורס זה נלמד ליצור אנימציות פשוטות ומורכבות וכן להשתמש בתכונות כמו Transition,Animation,@keyframes על מנת ליצור אנימציה.