בקורס הזה נסביר את היסודות של CSS בצורה ברורה ופשוטה. במודולים הבאים נסביר איך פועלים ההיבטים המרכזיים של CSS ואיך להשתמש בהם ביעילות בפרויקטים שלכם. משתמשים בחלונית התפריט שלצד הלוגו Learn CSS כדי לנווט בין המודולים.
תלמדו את היסודות של CSS, כמו מודל התיבה, קסקדה וספציפיות, flexbox, רשת ו-z-index. בנוסף, תלמדו על פונקציות, סוגי צבעים, מעברי צבעים, מאפיינים לוגיים וירושה, כדי שתהיו מפתחי frontend מיומנים שמוכנים להתמודד עם כל ממשק משתמש.
כל מודול כולל הדגמות אינטראקטיביות ומבדקים עצמיים שבעזרתם תוכלו לבדוק את הידע שלכם. בנוסף ללמידה באמצעות קריאה והדגמות, לכל נושא מצורפת פרק של פודקאסט, כדרך נוספת ללמוד ולהרחיב את הידע.
הקורס הזה מיועד למפתחי CSS מתחילים ומתקדמים. אתם יכולים לצפות בסדרה מההתחלה ועד הסוף כדי לקבל הבנה כללית של CSS מלמעלה למטה, או להשתמש בה כהפניה לנושאים ספציפיים של סגנון. אם אתם חדשים בתחום פיתוח האתרים, מומלץ לעיין במאמר Learn HTML כדי ללמוד איך לכתוב תגי עיצוב ולקשר את גיליונות הסגנונות.
מה תלמדו:
Box Model
מכיוון שכל מה שמוצג ב-CSS הוא תיבה, הבנה של מודל התיבות של CSS היא בסיסית ל-CSS.
סלקטורים
כדי להחיל CSS על אלמנט, צריך לבחור אותו. שירותי CSS מציעים כמה דרכים שונות לעשות את זה, ואפשר לעיין בהן במודול הזה.
קינון
הוספת כללי סגנון CSS בתוך כללים אחרים יכולה לעזור לכם לארגן את גיליונות הסגנונות, להקל על הקריאה שלהם ולשפר את יכולת התחזוקה שלהם.
הקסקדה
לפעמים שני כללי CSS או יותר יכולים לחול על רכיב מסוים. כאן אפשר לקרוא איך הדפדפן בוחר באיזה מהם להשתמש, ואיך לשלוט בבחירה הזו.
ספציפיות
במודול הזה נתעמק בספציפיות, שהיא חלק מרכזי ב-cascade.
ירושה
חלק ממאפייני ה-CSS עוברים בירושה אם לא מציינים להם ערך. במודול הזה מוסבר איך זה עובד ואיך אפשר להשתמש בזה לטובתכם.
צבע
יש כמה דרכים שונות לציין צבע ב-CSS. במודול הזה נבחן את ערכי הצבעים הנפוצים ביותר.
יחידות מידה
כאן מוסבר איך משנים את הגודל של רכיבים באמצעות CSS, בעבודה עם המדיום הגמיש של האינטרנט.
פריסה
סקירה כללית של שיטות הפריסה השונות שניתן לבחור מתוכן כשיוצרים פריסת רכיב או פריסת דף.
Flexbox
Flexbox הוא מנגנון פריסה שנועד לפריסת קבוצות של פריטים בממד אחד. במודול הזה מוסבר איך להשתמש בו.
Grid
פריסת CSS Grid מספקת מערכת פריסה דו-ממדית, ששולטת בפריסה בשורות ובעמודות. כדאי לגלות את כל התכונות של התצוגה המקדימה.
מאפיינים לוגיים
מאפיינים וערכים לוגיים שקשורים לזרימת הטקסט, ולא לצורה הפיזית של המסך. כאן מוסבר איך להשתמש בגישה החדשה יותר הזו ל-CSS.
מאפיינים מותאמים אישית
מאפיינים בהתאמה אישית, או משתני CSS, מאפשרים לארגן ערכים ולעשות בהם שימוש חוזר ב-CSS, כך שהסגנונות גמישים יותר וקל יותר להבין אותם.
ריווח
כאן מוסבר איך לבחור את השיטה הכי טובה לריווח בין רכיבים בשיטת הפריסה שבה אתם משתמשים וברכיב שאתם בונים.
רכיבים פסאודו
רכיב פסאודו הוא כמו הוספה או טירגוט של רכיב נוסף בלי צורך להוסיף עוד HTML. יש להם מגוון תפקידים, ואפשר לקרוא עליהם במודול הזה.
פסאודו-מחלקות
מחלקות פסאודו מאפשרות להחיל CSS על סמך שינויים במצב. המשמעות היא שהעיצוב יכול להגיב לקלט של המשתמש, כמו כתובת אימייל לא תקינה.
גבולות
הגבול יוצר מסגרת לתיבות. כאן מוסבר איך לשנות את הגודל, הסגנון והצבע של הגבולות באמצעות CSS.
Shadows
יש כמה דרכים להוסיף צללים לטקסט ולרכיבים ב-CSS. כאן מוסבר איך להשתמש בכל אפשרות, ומהן המשימות שהיא נועדה לבצע.
מיקוד
להבין את החשיבות של המיקוד באפליקציות האינטרנט. תלמדו איך לנהל את המיקוד ואיך לוודא שהנתיב בדף פועל גם עבור אנשים שמשתמשים בעכבר וגם עבור אנשים שמשתמשים במקלדת כדי לנווט.
סמני מיקום וסמני עכבר
הסמן הוא דרך חיונית שמאפשרת למשתמשים לדעת עם מה הם מקיימים אינטראקציה. במודול הזה תלמדו איך לעצב סמני עכבר בנסיבות מסוימות.
Z-index והקשרים של שכבות
כאן מוסבר איך לשלוט בסדר שבו הרכיבים מוצבים אחד מעל השני באמצעות אינדקס-z והקשר הערימה.
מיקום העוגן
מיקום עוגן ב-CSS מאפשר להגדיר מיקום של אלמנט ביחס לאלמנט אחר.
חלון קופץ ודיאלוג
חלון קופץ הוא כל אלמנט עם מאפיין של חלון קופץ, והוא שימושי למגוון רחב של דפוסים אינטראקטיביים, כולל תיאורי כלים, התראות, הודעות קצרות ועוד.
פונקציות
ל-CSS יש מגוון פונקציות מובנות. כאן מוסבר על כמה מהפונקציות העיקריות ואיך משתמשים בהן.
נתיבים, צורות, חיתוך ומסכות
נתיבים, צורות, חיתוך ומסכות מאפשרים למפתחים לעבד צורות מורכבות ב-CSS באמצעות מגוון פונקציות שיכולות ליצור חוויות בלתי נשכחות למשתמשים.
Gradients
ביחידה הזו נלמד איך להשתמש בסוגים השונים של מעברי צבעים שזמינים ב-CSS. אפשר ליצור באמצעות מעברי צבעים מגוון רחב של אפקטים שימושיים, בלי להשתמש באפליקציות גרפיות ליצירת תמונות.
אנימציות
אנימציה היא דרך מצוינת להדגיש אלמנטים אינטראקטיביים, ולהוסיף עניין וכיף לעיצובים. איך מוסיפים אפקטים של אנימציה ושולטים בהם באמצעות CSS
מסננים
הפילטרים ב-CSS מאפשרים להוסיף אפקטים שאולי חשבתם שאפשר להוסיף רק באפליקציית גרפיקה. במודול הזה תוכלו לראות מה זמין.
מצבי מיזוג
במודול הזה תלמדו איך ליצור אפקטים של קומפוזיציה על ידי שילוב של שתי שכבות או יותר, ואיך לבודד תמונה עם רקע לבן.
רשימות
מבחינה מבנית, רשימה מורכבת מרכיב מאגר רשימה שמלא בפריטים של הרשימה. במודול הזה נלמד איך להגדיר סגנון לכל החלקים של רשימה.
Counters
ב-CSS יש כמה דרכים לשלוט במונים ברשימה לתרחישי שימוש שונים. במודול הזה נסביר איך לשלוט במונים ברשימה.
מעברים
כאן מוסבר איך מגדירים מעברים בין מצבים של רכיב. כדאי להשתמש במעברים כדי לשפר את חוויית המשתמש באמצעות משוב חזותי לאינטראקציה של המשתמש.
מעברים בין תצוגות באפליקציות SPA
מעברים בין תצוגות מאפשרים לכם להציג רצף או הקשר בין הדפים ב-SPA.
Overflow
המאפיין overflow קובע איך המערכת תתמודד עם תוכן שלא נכנס לגודל שהוגדר לאלמנט האב. במודול הזה נלמד איך לחשוב מחוץ לקופסה ולעצב תוכן שגולש.
רקעים
איך משנים את הרקע של תיבות באמצעות CSS
טקסט וטיפוגרפיה
כאן מוסבר איך לעצב טקסט באינטרנט.
שאילתות של מאגרי תגים
בשונה משאילתות מדיה, שאילתות של רכיבי container מאפשרות לבצע התאמות ספציפיות יותר לרכיבים על סמך הגודל והמצב של הרכיבים הקודמים שלהם, או של רכיבי ה-container.
סיכום והשלבים הבאים
מקורות מידע נוספים שיעזרו לכם להמשיך להתקדם.
אז, מוכנים ללמוד CSS? שנתחיל?