python-il-forums-archive/t/11-5-css/8248.rss at main · PythonFreeCourse/python-il-forums-archive · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>שבוע 11 – יום 5: עימוד באמצעות CSS</title>
    <link>https://forums.pythonic.guru/t/11-5-css/8248</link>
    <description>## הקדמה

במחברת הקודמת חיזקתם את הבסיס שלכם ב־CSS.
העמקתם את התפיסה מאחורי הרעיונות, ולמדתם הרבה פיצ&#39;רים שקיימים ב־CSS לעיצוב אלמנטים בדף.

אחרי שחיזקתם את היסודות שלכם בשפה והשגתם יכולות לעצב אלמנטים שונים,
הגיע הזמן לחבר הכל ולדבר על עיצוב העימוד (layout) – איך מסדרים אלמנטים שונים בדף, ולגרום לדף להראות כמו שרצינו.

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

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

## חומרי הלימוד והתרגילים

|מספר תרגיל|עמוד לימוד|קישור לתרגיל|הערות|
| --- | --- | --- | --- |
||[מבוא](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction)||אל תדלגו על זה. קראו את זה ברפרוף (התעכבו בעיקר על ההתחלה), זה יסדר דברים בראש לקראת ההמשך שאינו פשוט.
||[זרימת עימוד רגילה](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow)||זה קצר וחשוב, קראו לעומק.
|220-223|[Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)|[Flexbox skills](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills)|זה חומר חשוב מאוד. ממליץ לחזק עם תרגולים נוספים ב־freeCodeCamp.
|224-227|[Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)|[Grid skills](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills)|זה חומר חשוב מאוד. ממליץ לחזק עם תרגולים נוספים ב־freeCodeCamp.
|228-230|[Floats](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats)|[Floats skills](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats_skills)|
|231-232|[Positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)|[Positioning Skills](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Position_skills)|
||[Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)|[Multicol skills](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills)|התרגילים אינם חובה
|233|[Responsive Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design), [Media queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries)|[Responsive Web Design skills](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills)|זה כנראה הנושא הכי מדובר בעשור של 2010 בעולם ה־frontend. חשוב להבין לעומק.
||[Legacy layout methods](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)||לא חובה, אבל מומלץ מאוד. חלק גדול מהאתרים עדיין נבנים כך.
||[תמיכה בדפדפנים ישנים](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)||לא חובה, אבל מומלץ מאוד. חובה עבור מי שחושב להיות מתכנת frontend או fullstack.
|234||[תרגיל סיכום](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)</description>
    <language>he</language>
    <lastBuildDate>Fri, 25 Sep 2020 08:52:47 +0000</lastBuildDate>
    <category>אשכולות הנהלה</category>
    <atom:link href="https://forums.pythonic.guru/t/11-5-css/8248.rss" rel="self" type="application/rss+xml" />
      <item>
        <title>שבוע 11 – יום 5: עימוד באמצעות CSS</title>
        <dc:creator><![CDATA[Yam]]></dc:creator>
        <description><![CDATA[

          <p><a href="https://forums.pythonic.guru/t/11-5-css/8248/2">קריאת הנושא במלואו</a></p>
        ]]></description>
        <link>https://forums.pythonic.guru/t/11-5-css/8248/2</link>
        <pubDate>Fri, 25 Sep 2020 08:52:56 +0000</pubDate>
        <guid isPermaLink="false">forums.pythonic.guru-post-8248-2</guid>
        <source url="https://forums.pythonic.guru/t/11-5-css/8248.rss">שבוע 11 – יום 5: עימוד באמצעות CSS</source>
      </item>
      <item>
        <title>שבוע 11 – יום 5: עימוד באמצעות CSS</title>
        <dc:creator><![CDATA[Yam]]></dc:creator>
        <description><![CDATA[
            <h2>הקדמה</h2>
<p>במחברת הקודמת חיזקתם את הבסיס שלכם ב־CSS.<br>
העמקתם את התפיסה מאחורי הרעיונות, ולמדתם הרבה פיצ’רים שקיימים ב־CSS לעיצוב אלמנטים בדף.</p>
<p>אחרי שחיזקתם את היסודות שלכם בשפה והשגתם יכולות לעצב אלמנטים שונים,<br>
הגיע הזמן לחבר הכל ולדבר על עיצוב העימוד (layout) – איך מסדרים אלמנטים שונים בדף, ולגרום לדף להראות כמו שרצינו.</p>
<p>זה למעשה החלק הקשה יותר ב־CSS, שעבורו עשינו את המסע עד כאן.<br>
היכולת שלנו לעצב עמוד שבו כל אלמנט מופיע בדיוק במקום שרצינו שיופיע, ובפרט – ההתאמה של העמוד שלנו לכל סוג מכשיר, היא לא עבודה של מה־בכך.</p>
<p>בחלק הזה של השבוע נכיר את הגישות השונות לנושא, ונסגור את פרק האינטרנט עם יכולות טובות מאוד ב־HTML ו־CSS שישמשו אתכם ביצירת מוצרים שלמים, קצה לקצה, בעתיד.</p>
<h2>חומרי הלימוד והתרגילים</h2>
<div class="md-table">
<table>
<thead>
<tr>
<th>מספר תרגיל</th>
<th>עמוד לימוד</th>
<th>קישור לתרגיל</th>
<th>הערות</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">מבוא</a></td>
<td></td>
<td>אל תדלגו על זה. קראו את זה ברפרוף (התעכבו בעיקר על ההתחלה), זה יסדר דברים בראש לקראת ההמשך שאינו פשוט.</td>
</tr>
<tr>
<td></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">זרימת עימוד רגילה</a></td>
<td></td>
<td>זה קצר וחשוב, קראו לעומק.</td>
</tr>
<tr>
<td>220-223</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Flexbox skills</a></td>
<td>זה חומר חשוב מאוד. ממליץ לחזק עם תרגולים נוספים ב־freeCodeCamp.</td>
</tr>
<tr>
<td>224-227</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">Grid skills</a></td>
<td>זה חומר חשוב מאוד. ממליץ לחזק עם תרגולים נוספים ב־freeCodeCamp.</td>
</tr>
<tr>
<td>228-230</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats_skills">Floats skills</a></td>
<td></td>
</tr>
<tr>
<td>231-232</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Position_skills">Positioning Skills</a></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills">Multicol skills</a></td>
<td>התרגילים אינם חובה</td>
</tr>
<tr>
<td>233</td>
<td>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive Layout</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Media queries</a>
</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Responsive Web Design skills</a></td>
<td>זה כנראה הנושא הכי מדובר בעשור של 2010 בעולם ה־frontend. חשוב להבין לעומק.</td>
</tr>
<tr>
<td></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></td>
<td></td>
<td>לא חובה, אבל מומלץ מאוד. חלק גדול מהאתרים עדיין נבנים כך.</td>
</tr>
<tr>
<td></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">תמיכה בדפדפנים ישנים</a></td>
<td></td>
<td>לא חובה, אבל מומלץ מאוד. חובה עבור מי שחושב להיות מתכנת frontend או fullstack.</td>
</tr>
<tr>
<td>234</td>
<td></td>
<td><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">תרגיל סיכום</a></td>
<td></td>
</tr>
</tbody>
</table>
</div>
          <p><a href="https://forums.pythonic.guru/t/11-5-css/8248/1">קריאת הנושא במלואו</a></p>
        ]]></description>
        <link>https://forums.pythonic.guru/t/11-5-css/8248/1</link>
        <pubDate>Fri, 25 Sep 2020 08:52:47 +0000</pubDate>
        <guid isPermaLink="false">forums.pythonic.guru-post-8248-1</guid>
        <source url="https://forums.pythonic.guru/t/11-5-css/8248.rss">שבוע 11 – יום 5: עימוד באמצעות CSS</source>
      </item>
  </channel>
</rss>