שיעור 1

מתחילים…

איך מתחילים? היכן כותבים את הקוד?

התוכנית הראשונה שלי hello world ותגית h

אפשרות לטקסט label, input

הפרדת שורות ע”י br והבנת שימוש נכון בתגיות

שיעור 2

תגיות חלק א’

הצגת רשימה ע”י ul וכן שימוש ב P, bold

הוספת תמונה

תרגיל ביניים

הוספת כפתור button וכן לינק ע”י תגית a

כתיבת הערות והוספת מרווח בודד

מעבר בין מסכים

תרגיל סיכום מעבר בין מסכים

שיעור 3

css בסיסי שלב א’

צבע, גודל כיתוב וצבע רקע

גובה, רוחב וההבדל בין תגיות Inline, block

מרווח בין אלמנטים ע”י magin

מסגרת בסיסית

תרגיל ביניים

מרווח בין מסגרת לתוכן האלמנט ע”י Padding

תרגיל סיכום

שיעור 4

סלקטורים

הוספת עיצוב כולל על כל התגיות לפי סלקטור תגית

הוספת css על קבוצה של תגיות באמצעות קלאס css

סלקטור מסוג id

תרגיל סיכום

שיעור 5

נושאים כלליים

מסך בסיסי

איך למצוא באגים ב css? הכרת Inspect

קיצורי מקשים במקלדת ב visual studio code

הזחת הקוד formatting

הגדרת !important

הסרת הגדרות

שיעור 6

מיקום אלמנטים באמצעות flex

העמדת אלמנטים אחד ליד השני ע”י display flex

העמדת אלמנטים אחד מתחת לשני והרחבה על flex direction

מיקום במרכז והוספת מרווחים באופן אחיד ע”י justify-content

תרגיל סיכום

שיעור 7

הרחבה על צבע, מסגרת, מירכוז טקסט והצורך ב box-sizing

אפשרויות שונות לצבע

הרחבה על מסגרת

ההבדל בין טקסט במרכז לבין אלמנט במרכז

האם יש border או Padding? יתכן וצריך box-sizing!

שיעור 8

תגיות חלק ב’

10 תגיות של טקסט כגון: del, sup, sub, i – הסבר ודוגמאות.

תגיות מעבר שורה hr, br, pre

תגיות ציטוט blockquote, q

תגית יצירת קשר address ותגית שם יצירה cite

קיצור מילה abbr והיפוך אותיות bdo

שיעור 9

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

הרחבה על תגית img

הגדרת איזור לחיצה על תמונה ומעבר מסך ע”י map, erea

תמונת רקע background-image והתאמה מדויקת לגודל המתאים

מיקום תמונת הרקע ע”י background-position, background-attachment

שיעור 10

מיקום אלמנט, אלמנט קבוע, גלישת טקסט

מיקום ביחס למסך, קבוע, ביחס לעצמו ע”י position

אלמנט מתחת לאלמנט אחר ע”י z-index

גלישת טקסט מהגודל הקיים overflow

שימוש ב float

שיעור 11

הרחבה על סלקטורים

סלקטור אב ובן וההבדל בין div p לבין div>p

סלקטור אח צמוד ואח כללי קטן div + p וכן div ~ p

בחירה לפי מצב עבור תגית a כגון hover ועוד.

הרחבה על מצבים

אפשרות של has והכלה על כל התגיות ע”י *

שיעור 12

תגיות חלק ג’

סוגי Input כגון: checkbox, file, radio

תגית של טבלה table, tr

תגיות פריסת מסך כגון: header, footer, nav, article, section ופירוט על form

תגיות נוספות main, aside, time, details, figure

שיעור 13

Css בסיסי שלב ב’ הגדרת רוחב; מינימום, מקסימום ואחוז min-width, max-width

ירידת שורה בין מילים ובין תגיות ע”י white space

סוג הכתב font-family, font-weight, font-style

מסגרת עוטפת מסגרת outline

אפשרויות רוחב

שיעור 14

רספונסיביות – הרחבה על flex

ברירת מחדל flex

אפשרות נפילת קוביות והגדרת מספר אלמנטים קבוע flex-wrap, flex-basis

מירכוז של האלמנטים באמצעות align-items ובאמצעות Justify-content: center

תרגיל ביניים

הרחבה וצמצום אלמנטים ביחס שונה ע”י flex-grow, flex shrink

משמעות הגדרת min-width and max-width בהגדרת flex

הבנת שימוש ב flex grow יחד עם flex basis

תרגיל סיכום

שיעור 15

הגדרות עיצוב בהתאם לגודל המסך ע”י @media והסתרת אלמנט

הגדרת css למסך צר בלבד באמצעות @media max width

הגדרת css למסך רחב בלבד באמצעות @media min width

הגדרת media עבור טאבלט

הסתרת אלמנט באמצעות display:none

הפרק הקודם

הפרק הבא

אפשרות לטקסט label, input

קורס פיתוח HTML ו CSS מתחילים… אפשרות לטקסט label, input