🌐 HTML & CSS — היסודות

HTML — השלד. CSS — האיפור. JavaScript — האישיות. ואם האתר לא responsive — כנראה שכחת את ה-viewport meta tag.

HTML — מבנה הדף

HTML (HyperText Markup Language) הוא שפת הסימון שמגדירה את מבנה דף האינטרנט.

Semantic HTML

שימוש בתגיות שמתארות את המשמעות של התוכן:

<!-- ❌ לא סמנטי -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ סמנטי -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

תגיות חשובות

CSS — עיצוב

Selectors

/* Element */
p { color: blue; }

/* Class */
.card { border: 1px solid gray; }

/* ID */
#header { background: white; }

/* Descendant */
.card p { font-size: 14px; }

/* Direct child */
.card > h2 { margin: 0; }

/* Pseudo-classes */
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }
input:focus { outline: 2px solid blue; }

/* Pseudo-elements */
p::first-line { font-weight: bold; }
.quote::before { content: "«"; }

Specificity — עדיפות

!important > inline style > #id > .class > element
1000         100           10     1

Flexbox

Flexbox הוא מערכת פריסה חד-ממדית — שורה או עמודה.

.container {
  display: flex;
  justify-content: center;    /* ציר ראשי */
  align-items: center;        /* ציר משני */
  gap: 16px;                  /* רווח בין items */
  flex-wrap: wrap;             /* שבירת שורה */
}

.item {
  flex: 1;                     /* גדל באופן שווה */
  flex-basis: 200px;           /* גודל בסיס */
  flex-shrink: 0;              /* לא מתכווץ */
}

.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

CSS Grid

Grid הוא מערכת פריסה דו-ממדית — שורות ועמודות.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 עמודות שוות */
  grid-template-rows: auto;
  gap: 20px;
}

/* פריסה responsive */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* מיקום ספציפי */
.hero {
  grid-column: 1 / -1;     /* כל הרוחב */
  grid-row: 1 / 3;          /* 2 שורות */
}

Responsive Design

/* Mobile First */
.container {
  padding: 16px;
  font-size: 14px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    font-size: 16px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

אל תשכחו את ה-meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

נגישות (Accessibility)

<!-- תמונות — alt חובה -->
<img src="chart.png" alt="גרף המציג עלייה של 30% במכירות">

<!-- כפתורים — טקסט ברור -->
<button aria-label="סגור חלון">✕</button>

<!-- Forms — labels -->
<label for="email">אימייל:</label>
<input id="email" type="email" required>

<!-- ניווט מקלדת -->
<div role="dialog" aria-modal="true" tabindex="-1">
  ...
</div>

📚 לימוד אקדמי

🛤️ מאיפה מתחילים

1. HTML בסיסי — תגיות, forms, semantic elements → freeCodeCamp
2. CSS בסיסי — selectors, box model, colors, typography
3. Flexbox — תרגול ב-Flexbox Froggy
4. Grid — תרגול ב-Grid Garden
5. Responsive — media queries, mobile-first approach
6. פרויקט — בנו דף נחיתה responsive מאפס
7. Tailwind CSS — utility-first framework (אופציונלי אבל פופולרי מאוד)

💼 שאלות לראיון עבודה