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

1. נתון קטע ה HTML הבא:

<input type='password' required />
<input type='text' />
<input type='email' />

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

1. כתבו כלל CSS שיצייר גבול אדום סביב כל אלמנט img שאין לו מאפיין alt.

2. נתונה הרשימה הבאה ב HTML:

<ul>
  <li data-dir='up'>IRM (+0.59%)</li>
  <li data-dir='down'>BTC-USD (-0.37%)</li>
  <li data-dir='up'>JNJ (+0.60%)</li>
</ul>

החליפו את סימן ה Bullet הדיפולטי של הרשימה במשולש ירוק למעלה אם המניה עלתה ובמשולש אדום כלפי מטה אם ירדה. ניתן להשתמש במאפיין data-dir כדי לדעת את הכיוון.

1. נתון קטע HTML המייצג מספר רשימות:

<ul>
  <li>one</li>
  <li>two</li>
</ul>

<ul>
  <li>red</li>
  <li>blue</li>
  <li>white</li>
</ul>

<ul>
  <li>learn CSS</li>
  <li>write some HTML</li>
  <li>add cool JavaScript</li>
</ul>

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

מוזמנים להדביק קישורים לקודפנים עם פיתרונות שלכם בתגובות.