initial commit

5 files changed, 675 insertions, 0 deletions

diff --git a/files/pl/learn/css/css_layout/flexbox/index.html b/files/pl/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..1a06738b54
--- /dev/null
+++ b/files/pl/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,340 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+tags:
+  - Nauka
+  - Początkujący
+  - Poradnik
+  - Poradnik dla początkujących
+  - flexibox
+  - po polsku
+  - podstawa
+  - podstawowy
+  - wygląd
+  - wyświetlanie zawartości
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Flexbox to nowa technologia która już ma szerokie wsparcie wśród przeglądarek, dlatego jego używanie staje się coraz bardziej powszechne. Flexbox wykorzystuje narzędzia, które pozwalają na szybkie tworzenie kompleksowego i elastycznego układu strony. Flexbox to jednowymiarowa metoda rozmieszczania elementów w wierszach lub kolumnach, przedmioty rozciągają się aby wypełnić dodatkową przestrzeń lub kurczą się aby dopasować się do mniejszych przestrzeni. W tym artykule zawarto podstawowe informacje na ten temat.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymogi:</th>
+   <td>Podstawy HTML (zajrzyj do <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>) oraz znajomość zasad funkcjonowania CSS ( więcej na ten temat znajdziesz tu <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Nauczenie się jak używać Flexboxa do tworzenia kreatywnego układu strony.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Dlaczego_Flexbox">Dlaczego Flexbox?</h2>
+
+<p>Przez długi czas jedynymi rzeczowymi narzędziami działającymi w przeglądarkach, do tworzenia układu strony w CSS były właściwości: float i position. Są dobre i działają, ale w niektórych przypadkach mogą być ograniczające i frustrujące.</p>
+
+<p>Poniższe wymagania dotyczące układu są trudne lub niemożliwe do osiągnięcia dzięki wcześniej wspomnianym narzędziom:</p>
+
+<ul>
+ <li>Pionowe wycentrowanie blokowego elementu z zawartością, względem rodzica.</li>
+ <li>Sprawienie by wszystkie "dzieci" w pojemniku zajęły taką samą ilość dostępnej szerokośći/wysokości, bez względu na to jaka szerokość/wysokość jest dostępna.</li>
+ <li>Umieszczenie kolumn o takiej samej wysokości w wielokolumnowym układzie nawet jeśli zawierają inną liczbę znaków</li>
+</ul>
+
+<p>Jak zauważysz w kolejnych sekcjach, flexbox ułatwia tworzenie układów strony. Zabawmy się!</p>
+
+<h2 id="Wprowadzenie_i_prosty_przykład">Wprowadzenie i prosty przykład</h2>
+
+<p>W tym artykule będziemy zachęcać cię do pracy poprzez serię ćwiczeń, które ułatwią ci zrozumienie jak działa flexbox. Aby zacząć musisz zrobić kopię pliku startowego — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> z naszego repozytorium na gitHubie — załadować w przeglądarce ( Firefox albo Chrome), i spojrzeć na kod w twoim edytorze kodu. Możesz także podejrzeć kod na żywo - <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">see it live here</a>.</p>
+
+<p>Zauważ, że mamy element {{htmlelement("header")}} z nagłówkiem w środku oraz {{htmlelement("section")}} zawierający trzy  {{htmlelement("article")}}. Użyjemy tego do stworzenia dość standardowego układu trzy-kolumnowego.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Określanie_które_elementy_układu_wykorzystać_jako_elastyczne_pudełka.">Określanie, które elementy układu wykorzystać jako elastyczne pudełka.</h2>
+
+<p>Aby zacząć musimy wybrać elementy, które mają zmienić położenie. Żeby to zrobić, ustawiamy specjalną wartość {{cssxref("display")}} na rodzicu elementu, na który chcemy oddziaływać.  W tym przypadku musimy poukładać elementy {{htmlelement("article")}}, więc display ustawiamy na{{htmlelement("section")}} (section staje się elastycznym kontenerem dla trzech bloków "article").</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Rezultatem tego powinno być takie coś:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>Pojedyncza deklaracja daje nam wszystko czego potrzebujemy — niewiarygodne, co nie? Mamy nasz układ kolumn z kilkoma kolumnami o jednakowych rozmiarach i mających tą samą wysokość. Dzieje się tak dlatego że domyślne wartości ustawione są w taki sposób żeby rowiązywać problem nierównych kolumn. Więcej o tym później.</p>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Możesz także ustawić display o wartości <code>inline-flex</code> jeśli życzysz sobie ułożenia liniowych elementów jako blokowe.</p>
+</div>
+
+<h2 id="Aside">Aside </h2>
+
+<p>Elementy blokowe w modelu flex box układają się względem dwóch osi:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>Główna oś biegnie w kierunku, w którym układane są elementy blokowe (na przykład jako rzędy wszerz strony lub kolumny wzdłuż). Początek i koniec tej osi nazywane są <strong>main start</strong> i <strong>main end</strong>.</li>
+ <li>Oś poprzeczna jest osią biegnącą prostopadle do kierunku układu elementów. Początek i koniec osi są nazywane <strong>cross start</strong> i <strong>cross end.</strong></li>
+ <li>Rodzic ma ustawioną wartość <strong>display:flex</strong> czyli {{htmlelement("section")}} w naszym przykładzie) i jest nazywany kontenerem - <strong>flex container</strong>.</li>
+ <li>Elementy poukładane jako elastyczne w kontenerze są nazywane <strong>flex items</strong> ( {{htmlelement("article")}} elementy w naszym przykładzie).</li>
+</ul>
+
+<p>Pamiętaj o tej terminologii podczas następujących sekcji. Zawsze możesz tu wrócić jeśli zagubisz się w jakimś używanym tutaj terminie.</p>
+
+<h2 id="Kolumny_czy_wiersze">Kolumny czy wiersze?</h2>
+
+<p>Flexbox wprowadza wartość nazywaną {{cssxref("flex-direction")}}, która określa w którym kierunku main axis - oś główna biegnie (w jakim kierunku układają się dzieci typu flexbox) - domyślnie ustawiona jest wartość row, co powoduje że elementy układają się w wierszu w kierunku, w którym działa domyśny język przegądarki (z lewej do prawej w przypadku Angielskich przegądarek) </p>
+
+<p>Spróbuj dodać następującą deklarację do pliku css:</p>
+
+<pre class="brush: css notranslate">flex-direction: column;</pre>
+
+<p>Jak widzisz elementy ponownie ułożyły się kolumnowo tak jak przed dodaniem jakiegokolwiek css. Zanim zaczniemy dalej usuń tą deklarację ze swojego przykładu.</p>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Możesz również ułożyć elementy w odwrotnym kierunku używając wartośći <code>row-reverse</code> and <code>column-reverse</code>. Poeksperymentuj także z tymi właściwościami!</p>
+</div>
+
+<h2 id="Zawijanie">Zawijanie</h2>
+
+<p>Jednym z problemów który pojawia się kiedy umieszczasz dużą liczbę elementów różnej szerokości i wysokości mogą one zacząć się wylewać z elementu rodzica niszcząc układ strony.</p>
+
+<p>Zajrzyjmy do przykłady  <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, i wypróbujmy <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">viewing it live</a> (zrób kopię pliku jeśli chcesz podążać za tym przykładem):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Widzimy tutaj że elementy potomne rzeczywiście się wylewają poza rodzica. Jednym ze sposobów który umożliwia umiejscowienie tych elementów jest następująca deklaracja :</p>
+
+<pre class="brush: css notranslate">flex-wrap: wrap;</pre>
+
+<p>Przetestuj to teraz; jak widzisz układ strony wygląda lepiej w tym zestawieniu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Teraz musimy powielić wiersze - w każdym wierszu mieści się sensowna liczba elementów potomnych, a wszystkie przepełnienia przenoszą się do kolejnego wiersza. Deklaracja <code>flex: 200px</code> ustawia właściwość dla każdego elementu "articles", która mówi że szerokość ma wynosić co najmniej 200px; wrócimy do tego trochę później. Jak mogłeś zauważyć ostatnie kilka dzieci w ostatnim wierszu są trochę szersze, więc cały wiersz jest wypełniony.</p>
+
+<p>Ale jest jeszcze coś co możemy zrobić. Po pierwsze, spróbuj zmienić twój flex-direction na wartość <code>row-reverse</code> - teraz jak widzisz, masz nadal wielowierszowy układ strony, ale zaczynający się od przeciwnego rogu okna przeglądarki i płynący w przeciwnym kierunku.</p>
+
+<h2 id="flex-flow_w_skrócie">flex-flow w skrócie</h2>
+
+<p>W tym punkcie dobrze zauważyć że istnieje skrót  {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Na przykład możesz zamienić to:</p>
+
+<pre class="brush: css notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>na to:</p>
+
+<pre class="brush: css notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Elastyczne_wymiarowanie_elementów_flex">Elastyczne wymiarowanie elementów flex</h2>
+
+<p>Wróćmy teraz do naszego pierwszego przykładu, spójrzmy jak możemy kontrolować jaką przestrzeń zajmują elementy. Uruchom kopię <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, albo zrób kopię z pliku <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> jako nowy punkt startowy (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">see it live</a>).</p>
+
+<p>Po pierwsze dodaj następującą regułę na dole twojego pliku CSS:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Jest to niepodzielna wartość procentowa określająca jaką część dostęnej przestrzeni wzdłuż głównej osi będzie zajmować każdy element elastyczny. W tym przypadku nadajemy każdemu elementowi {{htmlelement("article")}} wartość 1, co znaczy że wszystkie zajmują tyle samo wolnego miejsca, ile pozostało po ustawieniu dopełnienia i marginesu. Jest to proporcja co oznacza że nadanie każdemu elementowi wartośći 400000 dałoby dokładnie ten sam efekt.</p>
+
+<p>Teraz dodaj następującą zasadę poniżej poprzedniej:</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Teraz kiedy odświeżysz zauważysz że trzeci element {{htmlelement("article")}} zajmuje dwa razy tyle szerokości co pozostałe dwa — w sumie dostęne są cztery jednostki procentowe. Pierwsze dwa elementy mają po jeden, każdy więc zajmuje 1/4 dostępnej przestrzeni. Trzeci ma dwie jednostki, więc zajmuje 2/4 dostęnej przestrzeni (czyli 1/2).</p>
+
+<p>Możesz także ustawić minimalną wartość rozmiaru wewnątrz wartości flex. Spróbuj zaktualizować twój przykład następującymi zasadami:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>To w zasadzie stwierdza "Każdy element najpierw będzie otrzymywał 200px dostępnej przetrzeni. Potem reszta dostępnej przestrzeni będzie dzielona według wartości procentowych." Spróbuj odświeżyć i zobaczysz różnicę w tym jaka przestrzeń jest dzielona przez elementy. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>Prawdziwą wartość flexbox można zauważyć w flexibility/responsiveness — jeśli zmienisz rozmiar okna przeglądarki i dodasz {{htmlelement("article")}} element, układ strony nadal będzie działał prawidłowo.</p>
+
+<h2 id="flex_shorthand_versus_longhand">flex: shorthand versus longhand</h2>
+
+<p>{{cssxref("flex")}} to wartość skrótowa, którą możesz opisać trzy różne wartości:</p>
+
+<ul>
+ <li>The unitless proportion value we discussed above. This can be specified individually using the {{cssxref("flex-grow")}} longhand property.</li>
+ <li>A second unitless proportion value — {{cssxref("flex-shrink")}} — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</li>
+ <li>The minimum size value we discussed above. This can be specified individually using the {{cssxref("flex-basis")}} longhand value.</li>
+</ul>
+
+<p>We'd advise against using the longhand flex properties unless you really have to (for example, to override something previously set). They lead to a lot of extra code being written, and they can be somewhat confusing.</p>
+
+<h2 id="Horizontal_and_vertical_alignment">Horizontal and vertical alignment</h2>
+
+<p>You can also use flexbox features to align flex items along the main or cross axes. Let's explore this by looking at a new example — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">see it live also</a>) — which we are going to turn into a neat, flexible button/toolbar. At the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>First, take a local copy of this example.</p>
+
+<p>Now, add the following to the bottom of the example's CSS:</p>
+
+<pre class="brush: css notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically. We've done this via two new properties.</p>
+
+<p>{{cssxref("align-items")}} controls where the flex items sit on the cross axis.</p>
+
+<ul>
+ <li>By default, the value is <code>stretch</code>, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent hasn't got a fixed width in the cross axis direction, then all flex items will become as long as the longest flex items. This is how our first example got equal height columns by default.</li>
+ <li>The <code>center</code> value that we used in our above code causes the items to maintain their intrinsic dimensions, but be centered along the cross axis. This is why our current example's buttons are centered vertically.</li>
+ <li>You can also have values like <code>flex-start</code> and <code>flex-end</code>, which will align all items at the start and end of the cross axis respectively. See {{cssxref("align-items")}} for the full details.</li>
+</ul>
+
+<p>You can override the {{cssxref("align-items")}} behavior for individual flex items by applying the {{cssxref("align-self")}} property to them. For example, try adding the following to your CSS:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>Have a look at what effect this has, and remove it again when you've finished.</p>
+
+<p>{{cssxref("justify-content")}} controls where the flex items sit on the main axis.</p>
+
+<ul>
+ <li>The default value is <code>flex-start</code>, which makes all the items sit at the start of the main axis.</li>
+ <li>You can use <code>flex-end</code> to make them sit at the end.</li>
+ <li><code>center</code> is also a value for <code>justify-content</code>, and will make the flex items sit in the center of the main axis.</li>
+ <li>The value we've used above, <code>space-around</code>, is useful — it distributes all the items evenly along the main axis, with a bit of space left at either end.</li>
+ <li>There is another value, <code>space-between</code>, which is very similar to <code>space-around</code> except that it doesn't leave any space at either end.</li>
+</ul>
+
+<p>We'd like to encourage you to play with these values to see how they work before you continue.</p>
+
+<h2 id="Ordering_flex_items">Ordering flex items</h2>
+
+<p>Flexbox also has a feature for changing the layout order of flex items, without affecting the source order. This is another thing that is impossible to do with traditional layout methods.</p>
+
+<p>The code for this is simple: try adding the following CSS to your button bar example code:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>Refresh, and you'll now see that the "Smile" button has moved to the end of the main axis. Let's talk about how this works in a bit more detail:</p>
+
+<ul>
+ <li>By default, all flex items have an {{cssxref("order")}} value of 0.</li>
+ <li>Flex items with higher order values set on them will appear later in the display order than items with lower order values.</li>
+ <li>Flex items with the same order value will appear in their source order. So if you have four items with order values of 2, 1, 1, and 0 set on them respectively, their display order would be 4th, 2nd, 3rd, then 1st.</li>
+ <li>The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.</li>
+</ul>
+
+<p>You can set negative order values to make items appear earlier than items with 0 set. For example, you could make the "Blush" button appear at the start of the main axis using the following rule:</p>
+
+<pre class="brush: css notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Nested_flex_boxes">Nested flex boxes</h2>
+
+<p>It is possible to create some pretty complex layouts with flexbox. It is perfectly ok to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes. Have a look at <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">see it live also</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>The HTML for this is fairly simple. We've got a {{htmlelement("section")}} element containing three {{htmlelement("article")}}s. The third {{htmlelement("article")}} contains three {{htmlelement("div")}}s. :</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Let's look at the code we've used for the layout.</p>
+
+<p>First of all, we set the children of the {{htmlelement("section")}} to be laid out as flexible boxes.</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Next, we set some flex values on the {{htmlelement("article")}}s themselves. Take special note of the 2nd rule here — we are setting the third {{htmlelement("article")}} to have its children laid out like flex items too, but this time we are laying them out like a column.</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>Next, we select the first {{htmlelement("div")}}. We first use <code>flex:1 100px;</code> to effectively give it a minimum height of 100px, then we set its children (the {{htmlelement("button")}} elements) to also be laid out like flex items. Here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier.</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Finally, we set some sizing on the button, but more interestingly we give it a flex value of 1. This has a very interesting effect, which you'll see if you try resizing your browser window width. The buttons will take up as much space as they can and sit as many on the same line as they can, but when they can no longer fit comfortably on the same line, they'll drop down to create new lines.</p>
+
+<pre class="brush: css notranslate">button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Cross_browser_compatibility">Cross browser compatibility</h2>
+
+<p>Flexbox support is available in most new browsers — Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions of Android/iOS, etc. However you should be aware that there are still older browsers in use that don't support Flexbox (or do, but support a really old, out-of-date version of it.)</p>
+
+<p>While you are just learning and experimenting, this doesn't matter too much; however if you are considering using flexbox in a real website you need to do testing and make sure that your user experience is still acceptable in as many browsers as possible.</p>
+
+<p>Flexbox is a bit trickier than some CSS features. For example, if a browser is missing a CSS drop shadow, then the site will likely still be usable. Not supporting flexbox features however will probably break a layout completely, making it unusable.</p>
+
+<p>We'll discuss strategies for overcoming tricky cross browser support issues in a future module.</p>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Tu kończy się nasza krótka wycieczka po flexboxie. Mamy nadzieję że dobrze się bawiłeś i będziesz się dobrze bawił robiąc postępy w nauce.</p>
+
+<p>W dalszych artykułach przyjrzymy się innnemu ważnemu aspektowi układu strony w CSS - grid system (układ siatkowy).</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li>
+</ul>
+</div>
diff --git a/files/pl/learn/css/css_layout/index.html b/files/pl/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..f84177e392
--- /dev/null
+++ b/files/pl/learn/css/css_layout/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS layout
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - NeedsTranslation
+  - Positioning
+  - TopicStub
+  - flexbox
+  - float
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and modern layout tools like flexbox.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already:</p>
+
+<ol>
+ <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
+ <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
+ <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt>
+ <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt>
+ <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt>
+ <dd>With the basics of positioning covered in the last article, we will now look at building a couple of real world examples, to illustrate what kinds of things you can do with positioning.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd>A new technology, but with support now fairly widespread across browsers, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>Grid systems are another very common feature used in CSS layouts, which tend to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.</dd>
+</dl>
diff --git a/files/pl/learn/css/howto/generated_content/index.html b/files/pl/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..b027725c1a
--- /dev/null
+++ b/files/pl/learn/css/howto/generated_content/index.html
@@ -0,0 +1,140 @@
+---
+title: Treść
+slug: Learn/CSS/Howto/Generated_content
+tags:
+  - 'CSS:Na_początek'
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>
+</p><p>Ta strona opisuje niektóre metody, dzięki którym możesz użyć CSS-a, aby dodać treść do dokumentu w trakcie jego wyświetlania.
+</p><p>Zmodyfikujesz swój arkusz stylów, aby dodać treść oraz obrazek.
+</p>
+<h3 id="Informacja:_Tre.C5.9B.C4.87" name="Informacja:_Tre.C5.9B.C4.87"> Informacja: Treść </h3>
+<p>Jedną z ważnych zalet CSS-a jest to, że pomaga on oddzielić warstwę prezentacyjną dokumentu od jego treści.
+Zdarzają się jednak sytuacje, kiedy dobrym rozwiązaniem jest określenie treści jako elementu arkusza stylów, a nie dokumentu.
+</p><p>Treść określona w arkuszach stylów może składać się z tekstu i obrazów. Możesz określić treść w arkuszu stylów, kiedy jest ona blisko związana ze strukturą dokumentu.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Wstawianie treści w arkusz stylów może spowodować komplikacje. Na przykład możesz mieć wiele wersji językowych dokumentu, które dzielą arkusz stylów.
+<p>Jeżeli jakiś fragment arkusza stylów zawiera ciągi wymagające tłumaczenia, to musisz go wyciągnąć do osobnego pliku i przygotować osobną wersję dla każdej wersji językowej.
+</p><p>Unikniesz takich komplikacji, jeśli treść określona w arkuszach stylów będzie zawierała tylko symbole i obrazki, które pasują do wszystkich języków i kultur.
+</p><p>Treść określona w arkuszu stylów nie staje się częścią DOM-u.
+</p>
+</td></tr></tbody></table>
+<h4 id="Teksty" name="Teksty">Teksty</h4>
+<p>CSS pozwala umieścić tekst przed i po elemencie. Stwórz regułę i dodaj
+<code>:before</code> lub <code>:after</code> do selektora. Ustaw własność <code>content</code> z tekstem jako wartością.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła dodaje tekst <span style="font-weight: bold; color: navy;">Dokumentacja:</span> przed każdym elementem należącym do klasy <code>ref</code>:
+<div style="width: 30em;">
+<p>.ref:before {
+</p>
+<pre class="eval"> font-weight: bold;
+ color: navy;
+ content: "Dokumentacja: ";
+ }
+</pre>
+</div>
+</td></tr></tbody></table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Arkusz stylów domyślnie zakodowany jest jako UTF-8, ale można to zmienić w odnośniku, w samym arkuszu stylów lub w inny sposób. Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS, do rozdziału <a class="external" href="http://...">4.4 reprezentacja arkuszy stylów CSS</a>.
+<p>Pojedyncze znaki mogą także być zakodowane przy użyciu znaku odwróconego ukośnika. Na przykład \265B jest symbolem szachów dla czarnej królowej ♛. Aby dowiedzieć się więcej, zajrzyj do dokumentacji CSS, do rozdziałów <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Korzystanie ze znaków nie reprezentowanych w kodowaniu</a> oraz <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a>.
+</p>
+</td></tr></tbody></table>
+<h4 id="Obrazki" name="Obrazki">Obrazki</h4>
+<p>Aby dodać obrazek przed lub po jakimś elemencie, możesz określić URL pliku obrazka jako wartość własności <code>content</code>.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła dodaje wolną przestrzeń oraz ikonę po każdym odnośniku, który posiada klasę <code>glossary</code>:
+<div style="width: 45em;">
+<p>a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+</p>
+</div>
+</td></tr></tbody></table>
+<p>Aby dodać obrazek jako element tła, określ URL pliku obrazu jako wartość własności <code>background</code>. Jest to skrótowa własność, która określa kolor tła, obrazek tła, jak ten obrazek jest powielany i inne szczegóły.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Przykład
+</caption><tbody><tr>
+<td> Ta reguła określa tło podanego elementu, używając URL-a do określenia pliku obrazu.
+<p>Selektor określa identyfikator elementu.
+Wartość <code>no-repeat</code> powoduje, że obrazek wyświetlany jest tylko raz:
+</p>
+<div style="width: 50em;">
+<ol><li>sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+</li></ol>
+</div>
+</td></tr></tbody></table>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>Więcej szczegółów
+</caption><tbody><tr>
+<td> Aby dowiedzieć się więcej o poszczególnych własnościach tła oraz innych opcjach określanych dla obrazków tła, zajrzyj do dokumentacji CSS, rozdział <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">Tła</a>.
+</td></tr></tbody></table>
+<h3 id="Zadanie:_Dodawanie_obrazu_t.C5.82a" name="Zadanie:_Dodawanie_obrazu_t.C5.82a"> Zadanie: Dodawanie obrazu tła </h3>
+<p>Poniższy obrazek to biały prostokąt z niebieską linią na dole.
+Pobierz ten obrazek do katalogu, w którym trzymasz plik CSS:
+</p>
+<table style="border: 2px solid #ccc;">
+<tbody><tr>
+<td><img alt="Grafika:Blue-rule.png">
+</td></tr></tbody></table>
+<p>(Na przykład wciśnij prawy klawisz myszy, aby otworzyć menu kontekstowe, i wybierz Zapisz Obraz Jako... a następnie określ katalog, którego używasz w tym kursie.)
+</p><p>Wyedytuj swój plik CSS i dodaj tę regułę, aby ustawić obrazek tła dla całej strony.
+</p>
+<div style="width: 40em;">
+<p>background: url("Blue-rule.png");
+</p>
+</div>
+<p>Wartość <code>repeat</code> jest domyślna i nie musi być określana.
+Obrazek jest powtarzany horyzontalnie i wertykalnie, sprawiając wrażenie, jakby strona była kartką papieru w linie:
+</p>
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Grafika:Blue-rule-ground.png"></p>
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em;">
+<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets
+</p>
+</div>
+<div style="font-style: normal; padding-top: 2px; height: 8em;">
+<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets
+</p>
+</div>
+</div>
+</div>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Wyzwanie
+</caption><tbody><tr>
+<td> Pobierz ten obraz:
+<table style="border: 2px solid #ccc;">
+<tbody><tr>
+<td><img alt="Grafika:Yellow-pin.png">
+</td></tr></tbody></table>
+<p>Dodaj jedną regułę do Twojego arkusza stylów, aby wyświetlał obrazek na początku każdej linii:
+</p>
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Grafika:Blue-rule-ground.png"></p>
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="Grafika:Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets
+</div>
+<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="Grafika:Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets
+</div>
+</div>
+</div>
+</td></tr></tbody></table>
+<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
+<p>Zazwyczaj treść jest dodawana przez arkusz stylów podczas modyfikowania list.
+</p><p>Następna strona opisuje, jak określić style dla elementów listy:
+<b><a href="pl/CSS/Na_pocz%c4%85tek/Listy">Listy</a></b>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/Getting_Started/Content", "fr": "fr/CSS/Premiers_pas/Contenu", "ja": "ja/CSS/Getting_Started/Content", "pt": "pt/CSS/Como_come\u00e7ar/Conte\u00fado" } ) }}
diff --git a/files/pl/learn/css/howto/index.html b/files/pl/learn/css/howto/index.html
new file mode 100644
index 0000000000..1f087d3e22
--- /dev/null
+++ b/files/pl/learn/css/howto/index.html
@@ -0,0 +1,86 @@
+---
+title: Use CSS to solve common problems
+slug: Learn/CSS/Howto
+translation_of: Learn/CSS/Howto
+---
+<div>Translation in progress{{LearnSidebar}}</div>
+
+<p class="summary">The following links provide solutions to common problems you can solve with CSS.</p>
+
+<h2 id="Common_use_cases">Common use cases</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basics">Basics</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li>
+</ul>
+
+<h3 id="CSS_and_text">CSS and text</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Boxes_and_layouts">Boxes and layouts</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2>
+
+<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p>
+
+<h3 id="General">General</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Advanced_effects">Advanced effects</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p>
diff --git a/files/pl/learn/css/index.html b/files/pl/learn/css/index.html
new file mode 100644
index 0000000000..1859c169ff
--- /dev/null
+++ b/files/pl/learn/css/index.html
@@ -0,0 +1,52 @@
+---
+title: CSSs
+slug: Learn/CSS
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Kaskadowe arkusze styli (ang. Cascading Style Sheets) — lub po prostu CSS — jest drugą technologią której powinieneś się nauczyć po HTML, który jest używany do zdefiniowania struktury i semantyki zawartości strony. CSS jest używany do nadania jej wyglądu i rozmieszczenia elementów. Dla przykładu CSS możesz użyć do zmiany czcionki, koloru, wielkości, odstępu twojej zawartości, podzielenia jej na wiele kolumn, lub dodaniaanimacji i innych dekoracyjnych cech.</p>
+
+<h2 id="Ścieżka_nauczania">Ścieżka nauczania</h2>
+
+<p>Zanim przystąpisz do nauki CSS, powinieneś w pierwszej kolejności poznać podstawy HTML. Rekomendujemy, byś przerobił najpierw rozdział <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Wprowadzenie do HTML</a> — później możesz uczyć się o:</p>
+
+<ul>
+ <li>CSS, zaczynająć od rozdziału <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></li>
+ <li>Bardziej zaawansowanych <a href="https://developer.mozilla.org/en-US/Learn/HTML#Modules">Modułach HTML</a> </li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, i jak jej używać do dodawania dynamicznych funkcjonalności na stronach internetowych</li>
+</ul>
+
+<p>Kiedy już zrozumiesz absolutne podstawy HTML, rekomendujemy byś uczył się HTML i CSS jednocześnie, skacząc wte i wewte między tymi dwoma tematami. Powodem jest to, że HTML jest dalece bardziej interesujący z CSS, a z drugiej strony nie możesz naprawdę poznać CSS bez znajomości HTML.</p>
+
+<p>Zanim zaczniesz ten temat, powinieneś również mieć co najmniej podstawową umiejętność korzystania z komputera oraz biernego używania Internetu (tzn. przeglądania stron internetowych). Powinieneś mieć skonfigurowane podstawowe środowisko pracy w sposób wyszczególniony w rozdziale <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalowanie podstawowego oprogramowania</a>, a także rozumieć jak się tworzy i zarządza plikami, jak zostało to wyszczególnione w rozdziale <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a> — oba te rozdziały są częścią naszego modułu dla zupełnych początkujących <a href="/en-US/docs/Learn/Getting_started_with_the_web">Rozpocznij pracę z siecią</a>.</p>
+
+<p>Zalecane jest, byś przerobił najpierw moduł <a href="/en-US/docs/Learn/Getting_started_with_the_web">Rozpocznij pracę z siecią</a> zanim przystąpisz do tego tematu, jednak nie jest to absolutnie konieczne; wiele z tego, co zostało poruszone w artykule Podstawy CSS, znajduje się także w module Wprowadzenie do CSS, jednak opisane jest dużo bardziej szczegółowo.</p>
+
+<h2 id="Moduły">Moduły</h2>
+
+<p>Ten rozdział zawiera następujące moduły, w sugerowanej kolejności przerabiania ich. Zdecydowanie powinieneś zacząć po kolei, od pierwszego.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></dt>
+ <dd>Ten moduł pozwoli Ci zapoznać się z podstawami działania CSS, obejmującymi selektory i właściwości, pisanie reguł CSS, załączanie CSS do HTML, określanie wymiarów, kolorów i innych jednostek w CSS, kaskadowość i dziedziczenie, podstawy modelu pudełkowego (box model) oraz debugowanie CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Stylowanie tekstu</a></dt>
+ <dd>W tym module spojrzymy na podstawy stylowania tekstu, takie jak ustawianie czcionki, pogrubienia i kursywy, interlinie i odstępy między literami, cieniowania i inne cechy tekstu. Na koniec załączymy <span style="background-color: #f6d5d9;">niestandardowe </span>czcionki do Twojej strony oraz ostylujemy listy i linki.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Stylowanie kontenerów</a></dt>
+ <dd>Następnie zajmiemy się stylowaniem kontenerów, jednym z fundamentalnych kroków w kierunku tworzenia układów (layoutów) stron internetowych. W tym module powtórzymy model pudełkowy (box model), dalej spojrzymy na sposoby kontrolowania układu kontenerów poprzez ustawianie dopełnienia (padding), ramek (borders) i marginesów (margins), ustawimy spersonalizowane kolory tła, obrazków i innych cech, a także zajmiemy się bardziej wyszukanymi cechami jak cieniowania i filtry na kontenerach.</dd>
+ <dt>Układ (layout) CSS</dt>
+ <dd>W tym momencie spojrzeliśmy już na podstawy CSS, na to jak stylować tekst, a także na to jak stylować i manipulować kontenerami, w których zawarta jest Twoja treść. Teraz pora przyjrzeć się jak umieścić Twoje kontenery we właściwych miejscach na stronie, zarówno względem siebie, jak i w relacji do okna przeglądarki. Poznaliśmy już niezbędne warunki, można teraz się zagłębić w kwestię układu (layoutu) CSS, przyglądając się różnym ustawieniom wyświetlania, tradycyjnym metodom projektowania układów (layoutów) takimi jak floaty i pozycjonowanie, oraz tym świeżo wprowadzonym narzędziom jak flexbox.</dd>
+</dl>
+
+<h2 id="Rozwiązywanie_częstych_problemów_w_CSS">Rozwiązywanie częstych problemów w CSS</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Rozwiązywanie częstych problemów przy użyciu CSS</a> zapewnia linki do sekcji, w których dowiesz się jak rozwiązywać najczęstsze problemy w budowaniu stron internetowych.</p>
+
+<p>Na początku beziesz zmieniał kolory elementów kodu HTML oraz ich tła; rozmiary, kształty, pozycje na stronie oraz dodawał i definiował ich obramowania.<span lang="pl">Możesz zrobić wiele jeśli dobrze rozumiesz podstawy CSS. Jedną z najlepszych rzeczy w nauce CSS jest to, że kiedy poznasz podstawy, zazwyczaj masz dobre wyczucie, co można, a czego nie można zrobić, nawet jeśli tak naprawdę nie wiesz, jak to zrobić!</span></p>
+
+<h2 id="Zobacz_również">Zobacz również</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS w MDN</a></dt>
+ <dd><span lang="pl">Główny punkt wejścia do dokumentacji CSS w MDN, gdzie znajdziesz szczegółową dokumentację dla wszystkich funkcji języka CSS. Chcesz się dowiedzieć więcej? Tutaj możesz zacząć.</span></dd>
+</dl>