קורס כתיבת קוד CSS לאלמנטור ברמה בינלאומית

2370 ש"ח

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

תוכן הקורס

פרק 1 - יסודות הCSS (עיצוב ע"י תגית HTML, תפיסת Class או ID)

שיעור פתיחה לאליפות בCSS 5:18

יצירת תבנית פוסט עם תגובות – הכנה לקוד 6:46

עיצוב CSS לכותרות ולקישורים בפוסט 13:38

עיצוב CSS לבלוק ציטוט של פוסט 11:56

עיצוב CSS לכותרת ולתוויות בוידג’ט תגובה באלמנטור 14:53

עיצוב CSS לשדה טקסט וכפתור שליחה בוידג’ט תגובה באלמנטור 13:19

עיצוב CSS לשדות שם ואימייל בוידג’ט תגובה באלמנטור 17:20

הגדרות וורדפרס לתגובות שעולות לאתר 6:35

עיצוב CSS לתגובות העולות לאתר חלק #1 22:38

עיצוב CSS לתגובות העולות לאתר חלק #2 22:48

הוספת קוד CSS המשפיע על עמוד שלם 19:26

הוספת קוד CSS בתבנית הגלובלית של אלמנטור 6:40

עיצוב סרגל הגלילה באתר – שימוש בהתאמה אישית של התבנית באתר 7:22

כתיבת קוד HTML בסיסי 10:20

תרגיל עיצוב טופס תגובה לפי עיצוב מוכן בXD – כולל פתרון מלא! 19:28

פרק 2 - עיצובים מתקדמים בCSS עם מגוון וידג'טים של אלמנטור

התאמה אישית בCSS לוידג’ט חיפוש של אלמנטור 9:52

החלפת אייקון והוספת אנימציית מעבר בCSS לוידג’ט חיפוש 10:45

עיצוב CSS גלובלי לוידג’ט חיפוש של אלמנטור פרו 4:36

עיצוב CSS מתקדם לוידג’ט ארכיון פוסטים של אלמנטור פרו 9:58

עיצוב CSS לאנימציית מעבר להורדת תמונות – חלק #1 8:21

עיצוב CSS לאנימציית מעבר להורדת תמונות – חלק #2 7:07

עיצוב CSS לאנימציית מעבר להורדת תמונות – חלק #3 5:35

אנימציית מעבר בCSS עם חיתוך צורה #1 10:22

אנימציית מעבר בCSS עם חיתוך צורה #2 5:02

טריק בCSS לצביעת חלק מסוים מתוך עמודה 9:38

אנימציית מעבר מדהימה בCSS עם וידג’ט גלריה של אלמנטור פרו #1 5:55

אנימציית מעבר מדהימה בCSS עם וידג’ט גלריה של אלמנטור פרו #2 5:30

תרגיל סיכום אנימציית מעבר מורכבת בCSS, כולל פתרון מלא 10:24

פרק 3 - לעצב מה שאת רוצה עם הוספת אלמנטים Pseudo בCSS (שימוש מקצועי בafter וbefore)

שימוש בסיסי בPseudo הזרקת טקסטים בCSS 8:22

עיצוב CSS לצ’קבוקס בטופס של אלמנטור פרו #1 16:03

עיצוב CSS לצ’קבוקס בטופס של אלמנטור פרו #2 5:44

אנימציית מעבר עם תמונת עוגה נוחתת על כפתור של טופס אלמנטור פרו #1 6:25

אנימציית מעבר עם תמונת עוגה נוחתת על כפתור של טופס אלמנטור פרו #2 5:34

עיצוב לשדה מאומת של טופס אלמנטור פרו ויצירת קו טקסט אחיד לפונט בעייתי 6:38

הוספת קישוטים לוידג’ט כותרת עם after וbefore 8:37

רעיונות נוספים לעיצוב וידג’ט כותרת עם after וbefore 4:21

אפקט מעבר יפיפה לוידג’ט כפתור עם after וbefore 7:01

יצירת טולטיפ מונפש עם CSS בלבד 16:02

פרק 4 - יצירת אנימציות CSS ברמה גבוהה ובהתאמה אישית

בניית אנימציית CSS בצורה מדוייקת + אנימציית סיבוב 12:52

אנימציית פופ בהשהיה לכמה וידג’טים ביחד 17:24

יצירת אנימציית טיפות גשם אינסופית 13:23

קוד מקוצר לאנימציה + עיצוב אנימציית צעדים ברמה גבוהה 6:48

אנימציית גומי בכמה שלבים 9:07

אנימציית תלת מימד בכמה וריאציות 5:59

אנימציית ברק בשלבים + קוד מקוצר לנקודות העצירה של האנימציה 6:13

אנימציה טבעית לסירה שטה 4:58

שילוב אנימציות בוידג’טים מורכבים של אלמנטור 6:21

פרק 5 - יצירת אנימציות מורכבות על בסיס SVG (איורים וקטוריים)

שיטה מדוייקת להכנת קובץ וקטורי לאנימציית SVG עם אילוסטרייטור 5:53

אנימציית SVG למנורה נדלקת ומחליפה צבעים 8:57

אנימציית SVG לכתיבה על לוח 5:05

אנימציית SVG עם תנועה, הוספת מסגרת קו ושינוי צבע 11:44

אנימציית SVG מגניבה ליצירת שעון מסתובב אמיתי! 5:33

פרק 6 - רספונסיביות מקצועית שאפשר לבצע רק עם CSS!

העקרונות להגדרת רספונסיביות מדוייקת עם קוד CSS 9:05

דוגמאות נוספות ליצירת רספונסיביות עם קוד CSS 7:18

עיצוב רספונסיבי מדויק לתפריט של אתר עם קוד CSS + הגדרת הקוד לטווח מסוים של רוחב מסך 9:56

פרק 7 - שימוש מקצועי בflex וcss-grid לוידג'טים שונים באלמנטור

מה זה flex, ואיך מתחילים לעצב איתו? 9:54

הגדרות נוספות לקונטיינר עם flex 7:44

עיצוב אייקון מעל טקסט בוידג’ט כפתור של אלמנטור על ידי שימוש בflex 3:59

עיצוב ייחודי ומדויק לוידג’ט סליידר של אלמנטור עם flex 12:52

עיצוב מגניב לוידג’ט קופסה מתהפכת באלמנטור עם flex 14:22

הוספת קו עיטור גמיש לוידג’ט כותרת באלמנטור עם flex בלבד 6:31

שימוש בflex לעיצוב וידג’ט מוצרים באלמנטור פרו, ממש כמו ג’ט! 11:24

הבנה מעמיקה של flex-shrink וflex-basis 10:27

היכרות ושימוש בcss-grid לעיצוב גלריה א-סימטרית באלמנטור פרו 12:04

פרק 8 - איך למצוא בקלות קודים של CSS בגוגל + להתאים אותם 100% לאלמנטור

היכרות עם 5 אתרים מומלצים לחיפוש קודים בCSS 5:55

השיטה המדויקת לחיפוש קוד CSS בגוגל 6:32

איך לחפש קודים ולהשתמש בהם בקלות – המחשה בלייב! 5:59

שיטה בלעדית להמרת קוד מקודפן לשימוש באלמנטור – אפקט מהמם למעבר על תמונה 13:07

המרת קוד מקודפן לאלמנטור – אפקט מעבר מיוחד על כפתור 9:41

המרת קוד מstackoverflow לאלמנטור – החלפת טקסט של כפתור 9:48

פרק 9 - התאמת קוד CSS למגוון דפדפנים

איזה דפדפנים קיימים, ולמה צריך להתאים להם קוד 5:52

איך בודקים אם קוד יעבוד בדפדפן מסוים + דוגמה 4:53

חקירה והתאמה של קוד CSS לכל הדפדפנים 8:38

פרק 10 - שימוש מקצועי בכל תגיות HTML, לעיצוב מושלם בCSS

חיפוש וכתיבת קוד HTML בשיטה חכמה – רשימות #1 8:31

עיצוב, זיהוי והעתקת וידג’טים המבוססים על רשימות – רשימות #2 13:20

שיעורי בונוס - פתרונות והדרכות למגוון עיצובים בCSS

איך אפשר לגרום לוידג’ט פוסטים להיות לא לחיץ 6:11

איך ליצור אנימציית SVG עם הקלדת אותיות וכדור שמתגלגל ביניהן16:03

איך להגדיל רק חלק מהטקסט בתוך וידג’ט עורך הטקסט של אלמנטור 3:27

איך אפשר לקבוע גובה תמונה זהה בוידג’ט גלריה בסיסית של אלמנטור 8:56

אנימציית גלילה אינסופית לטקסט באלמנטור (לופ) עם קוד CSS 11:17

אנימציית סיבוב לנתיב טקסט של אלמנטור מסביב לתמונה, בלי שהתמונה מסתובבת 5:35

אנימציית פתיחה לתפריט צד עם אייקונים באלמנטור עם קוד CSS בלבד 28:05

איך ליצור תפריט עם לוגו משולש שמתקטן בגלילת העמוד 9:45

איך ליצור כפתור עם חיתוך מורכב בקוד CSS 10:58

יצירת מסגרת עגולה מחליפה צבעים לכפתור אלמנטור 3:40

מסגרת מחליפת צבעים לקונטיינר (גרדיאנט) 12:45

קורס כתיבת קוד CSS לאלמנטור ברמה בינלאומית

2370 ש"ח

תוכן הקורס

קבלי את הטיפים שלי למייל