initial commit

45 files changed, 8647 insertions, 0 deletions

diff --git a/files/pl/learn/accessibility/index.html b/files/pl/learn/accessibility/index.html
new file mode 100644
index 0000000000..6f11284331
--- /dev/null
+++ b/files/pl/learn/accessibility/index.html
@@ -0,0 +1,62 @@
+---
+title: Accessibility
+slug: Learn/Accessibility
+tags:
+  - ARIA
+  - Accessibility
+  - Articles
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Learn
+  - Module
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer, but your knowledge needs to go further than just using the technologies — you need to use them responsibly so that you maximize the audience for your websites and don't lock anyone out of using them. To achieve this, you need to adhere to general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), do <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and consider accessibility from the start. In this module we'll cover the latter in detail.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p>
+
+<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 can 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>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt>
+ <dd>This article starts the module off with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt>
+ <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt>
+ <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt>
+ <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessiblity.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt>
+ <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt>
+ <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these plartforms. This article looks at mobile-specific accessibility considerations.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt>
+ <dd>In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li>
+ <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li>
+</ul>
diff --git a/files/pl/learn/accessibility/what_is_accessibility/index.html b/files/pl/learn/accessibility/what_is_accessibility/index.html
new file mode 100644
index 0000000000..c9461540df
--- /dev/null
+++ b/files/pl/learn/accessibility/what_is_accessibility/index.html
@@ -0,0 +1,193 @@
+---
+title: Czym jest dostępność?
+slug: Learn/Accessibility/What_is_accessibility
+tags:
+  - AT
+  - CSS
+  - Dostępność
+  - HTML
+  - JavaScript
+  - artykuł
+  - czytnik ekranu
+  - technologie wspomagające
+  - użytkownicy
+translation_of: Learn/Accessibility/What_is_accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div>
+
+<p class="summary">Niniejszy artykuł stanowi wstęp do modułu i jednocześnie obszerną odpowiedź na pytanie, czym właściwie jest dostępność — w tym jakie grupy ludzi powinniśmy brać pod uwagę i dlaczego, jakich narzędzi używają oni do interakcji z siecią oraz jak uczynić dostępność częścią naszej organizacji zadań.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania</th>
+   <td>Podstawowe umiejętności obsługi komputera, podstawowa znajomość HTML i CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Zaznajomienie z ideą dostępności, z uwzględnieniem jej definicji oraz wpływu na pracę programisty Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Czym_więc_jest_dostępność">Czym więc jest dostępność?</h2>
+
+<p>Dostępność jest praktyką dostosowywania stron internetowych do użytku przez tak wielu ludzi, jak jest to możliwe — przyjęło się, że mamy w tym miejscu na myśli osoby niepełnosprawne, jednak w praktyce pojęcie to odwołuje się też do ludzi używających urządzeń mobilnych czy tych z wolnym połączeniem sieciowym.</p>
+
+<p>Możemy myśleć o dostępności jako o zapewnieniu tych samych możliwości wszystkim ludziom, bez względu na ich ograniczenia. W taki sam sposób, w jaki nie jest w porządku wykluczenie kogoś z korzystania z budynku, ponieważ porusza się on na wózku inwalidzkim (obecnie większość budynków publicznych posiada podjazdy dla wózków inwalidzkich albo windy), nie jest w porządku wykluczenie z używania strony internetowej osoby z ograniczeniami wzroku lub używającej urządzenia z małym wyświetlaczem. Każdy z nas jest inny, ale przecież wszyscy jesteśmy ludźmi, mamy więc te same (ludzkie) prawa.</p>
+
+<p>Toteż dostępność jest czymś co po prostu powinniśmy robić, bo jest właściwe. Z drugiej strony w niektórych państwach obowiązują wymogi prawne wymuszające jej stosowanie, dostępność może też pomóc w dotarciu do ważnych grup docelowych, które bez niej nie będą w stanie używać naszych usług, kupować naszych produktów itd.</p>
+
+<p>Dostępność i dobre praktyki które pociąga ona za sobą mogą przynieść korzyść każdemu:</p>
+
+<ul>
+ <li>Semantyczny HTML (którzy usprawnia dostępność) poprawia też SEO, sprawiając, że nasza strona jest łatwiejsza do znalezienia.  </li>
+ <li>Dbanie o dostępność jest przejawem rozwiniętej moralności, co pozytywnie wpływa na nasz wizerunek publiczny.</li>
+ <li>Dobre praktyki poprawiające dostępność ułatwiają obsługę strony również ludziom z takich grup docelowych jak użytkownicy telefonów komórkowych, wolnych łączy sieciowych itp. Tak naprawdę każdy użytkownik może skorzystać z usprawnień dostępności.</li>
+ <li>Wspomnieliśmy już o przepisach prawnych obowiązujących w niektórych państwach?</li>
+</ul>
+
+<h2 id="Jakie_rodzaje_ograniczeń_bierzemy_pod_uwagę"><strong>Jakie rodzaje ograniczeń bierzemy pod uwagę? </strong></h2>
+
+<p>Ludzie z niepełnosprawnościami są równie bardzo zróżnicowani jak ludzie bez nich, również pod względem swoich ograniczeń. Kluczową lekcją jest tutaj myślenie wykraczające poza schemat naszego codziennego użytkowania Internetu na naszym komputerze i zastanowienie się nad tym, jak robią to inni —<em>użytkownicy naszych stron to nie my.</em> Główne rodzaje niepełnosprawności które należy rozważyć są opisane poniżej, wraz ze specjalnymi narzędziami, które ułatwiają cierpiącym na nie ludziom dostęp do treści internetowej (znane jako <strong>technologie wspomagające</strong>, ang. <strong>AT - assistive technologies</strong>).</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Według dokumentu Disability and health Światowej Organizacji Zdrowia, „ponad miliard ludzi, około 15% światowej populacji, posiada jakąś formę niepełnosprawności” i „od 110 do 190 milionów dorosłych boryka się ze znacznymi trudnościami w funkcjonowaniu”.</p>
+</div>
+
+<h3 id="Osoby_niepełnosprawne_wzrokowo">Osoby niepełnosprawne wzrokowo</h3>
+
+<p>Ta grupa obejmuje użytkowników z ślepotą, obniżoną ostrością wzroku, daltonizmem itp. Wielu z nich używa powiększalników (zarówno fizycznych urządzeń, jak i programów typu lupa ekranowa — większość współczesnych przeglądarek i systemów operacyjnych ma taką funkcjonalność), inni korzystają z czytników ekranu, czyli oprogramowania umożliwiającego odsłuchanie treści tekstowej strony. Wśród nich wyróżniamy:</p>
+
+<ul>
+ <li>Płatne produkty, takie jak <a href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) i <a href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li>
+ <li>Darmowe produkty, tak jak <a href="http://www.nvaccess.org/">NVDA</a> (Windows), <a href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows, Mac OS X) i <a href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li>
+ <li>Programy wbudowane w systemy operacyjne, takie jak <a href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X, iOS), <a href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a href="http://www.chromevox.com/">ChromeVox</a> (Chrome OS), i <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
+</ul>
+
+<p>Dobrym pomysłem jest zapoznanie się działaniem czytników ekranowych, na przykład poprzez skonfigurowanie takiego czytnika na swoim urządzeniu i eksperymentowanie z różnymi rodzajami odczytywanej treści. Więcej informacji o ich używaniu można znaleźć w naszych <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testach obsługi czytników ekranu w różnych przeglądarkach</a>, a poniższy film prezentuje doświadczenie używania takiego programu.</p>
+
+<p>{{EmbedYouTube("IK97XMibEws")}}</p>
+
+<p>Pod względem statystycznym, według Światowej Organizacji Zdrowia „szacuje się, że 285 milionów ludzi na całym świecie jest niedowidzących: 39 milionów cierpi na ślepotę, a 246 ma obniżoną ostrość wzroku.” (zob. <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">Visual impairment and blindness</a>). To bardzo liczna i znacząca grupa użytkowników, do których możemy nie dotrzeć z powodu nieprawidłowo wykonanej strony internetowej — niemal tak liczna jak populacja Stanów Zjednoczonych.</p>
+
+<h3 id="Osoby_niepełnosprawne_słuchowo">Osoby niepełnosprawne słuchowo</h3>
+
+<p>Znane także jako osoby niedosłyszące, osoby głuche. Ci użytkownicy charakteryzują się problemami ze słuchem lub całkowitym brakiem zdolności słuchowych i wprawdzie używają oni technologii wspomagających (zob. <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders</a>), nie istnieją żadne ułatwienia tego typu zadedykowane użytkowaniu komputera/Internetu.</p>
+
+<p>Warto więc mieć na uwadze techniki zapewniania wizualnej alternatywy dla dźwiękowej treści strony, takie jak transkrypty nagrań czy napisy wyświetlane na filmach. Jeden z kolejnych artykułów porusza ten temat.</p>
+
+<p>Osoby z zaburzeniami słuchu również stanowią znaczącą grupę odbiorców — jak podaje Światowa Organizacja Zdrowia w <a href="http://www.who.int/mediacentre/factsheets/fs300/en/">Deafness and hearing loss</a>, „360 milionów ludzi na całym świecie jest niepełnosprawnych słuchowo”.</p>
+
+<h3 id="Osoby_niepełnosprawne_ruchowo">Osoby niepełnosprawne ruchowo</h3>
+
+<p>Ci użytkownicy odznaczają się ograniczeniami ruchowymi, które mają zarówno typowo fizyczne przyczyny (takie jak utrata kończyny czy paraliż) jak i neurologiczne/genetyczne, prowadzące do osłabienia zmniejszającego zdolności ruchowe lub niedowładu kończyn. Niektórym osobom mogą sprawiać trudność precyzyjne ruchy dłoni wymagane do operowania myszką, podczas gdy inne dotknięte są poważniejszymi upośledzeniami,  na przykład byciem sparaliżowanym w takim stopniu, że interakcja z komputerem jest niemożliwa bez używania <a href="https://www.performancehealth.com/baseball-cap-head-pointer">head pointera</a>.</p>
+
+<p>Ten rodzaj utrudnień dostępu może być również następstwem podeszłego wieku lub wynikać z ograniczeń sprzętowych — niektórzy użytkownicy mogą nie posiadać myszki.</p>
+
+<p>W praktyce programisty Web, odpowiedź na niepełnosprawność ruchową użytkownika oznacza najczęściej wdrożenie możliwości nawigowania po stronie za pomocą klawiatury — zajmiemy się tym zagadnieniem w dalszej części modułu, natomiast teraz polecamy mały test poruszania się po kilku stronach internetowych bez użycia myszki. Podczas niego zwracajmy uwagę na kwestie typu: czy możemy przemieszczać się między różnymi polami formularza używając klawisza tab? Więcej o nawigacji na stronach internetowych za pomocą klawiatury możesz znaleźć w naszych <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">testach obsługi ułatwień dostępu za pomocą klawiatury w różnych przeglądarkach</a>.</p>
+
+<p>Jeśli chodzi o statystyki, znaczący odsetek ludzi posiada ograniczenia ruchowe. Zgodnie z oceną Amerykańskiego Ośrodka Kontroli Chorób w artykule <a href="http://www.cdc.gov/nchs/fastats/disability.htm">Disability and Functioning (Noninstitutionalized Adults 18 Years and Over</a>, „odsetek dorosłych z borykających się z ograniczeniami ruchu: 15,1%”.</p>
+
+<h3 id="Osoby_z_zaburzeniami_funkcji_poznawczych">Osoby z zaburzeniami funkcji poznawczych</h3>
+
+<p>Do tej ostatniej kategorii należy prawdopodobnie najszerszy zakres różnych niepełnosprawności — pojęcie zaburzeń funkcji poznawczych pokrywa szereg utrudnień w funkcjonowaniu, od chorób psychicznych, trudności w uczeniu się, trudności w rozumieniu i koncentracji takich jak <a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">ADHD (zespół nadpobudliwości z deficytem uwagi)</a>, do <a href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">spektrum autystycznego</a>, <a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">schizofrenii</a> i wielu innych typów zaburzeń. Tego rodzaju utrudnienia mogą mieć wpływ na wiele aspektów codziennego życia związanych z pamięcią, rozwiązywaniem problemów, rozumieniem, skupieniem uwagi itp.</p>
+
+<p>Osoby z takimi niepełnosprawnościami mogą mieć problemy ze zrozumieniem tego jak wykonać konkretną czynność na stronie, pamiętaniem jak zrobiły to poprzednim razem lub wzrostem rozdrażnienia spowodowanego dezorientującą dla nich organizacją pracy i niespójnymi elementami układu i interfejsu strony.</p>
+
+<p>W przeciwieństwie do poprzednich zagadnień dostępności, w tym przypadku niemożliwe jest zdefiniowanie szybkich i prostych technik ułatwiającym użytkowanie strony takim osobom; zamiast tego należy zadbać o zaprojektowanie strony w sposób jak najbardziej logiczny, konsekwentny i prosty w użytku, na przykład przez upewnienie się, że:</p>
+
+<ul>
+ <li>układ stron jest konsekwentny — elementy nawigacji, nagłówka, stopki i głównej treści są zawsze w tych samych miejscach</li>
+ <li>narzędzia, z których korzystać będą użytkownicy strony, są proste w użyciu</li>
+ <li>wielostopniowe czynności wykonywane przez użytkowników są rozłożone na kilka logicznych kroków, z regularnie pojawiającymi się informacjami o tym, w którym miejscu jesteśmy i (jeśli okaże się to potrzebne) ile kroków pozostało do zakończenia procesu</li>
+ <li>organizacja pracy na stronie jest logiczna i prosta, a czynności do wykonania wymagają jak najmniej interakcji ze strony użytkownika. Na przykład, bardzo często rejestracja i logowanie okazują się być niepotrzebnie złożonymi procesami</li>
+ <li>poszczególne podstrony nie posiadają zbyt dużo prezentowanej za jednym razem treści</li>
+ <li>język użyty na stronie jest tak prosty i łatwy do zrozumienia jak tylko możliwe, bez używania zbędnego żargonu</li>
+ <li>ważne elementy treści są wyróżnione wizualnie</li>
+ <li>komunikaty o błędach spowodowanych działaniem użytkownika są dobrze wyeksponowane i zawierają informacje o sugerowanym rozwiązaniu problemu</li>
+</ul>
+
+<p>Powyższe zasady nie są tak naprawdę „technikami zapewnienia dostępności” — są po prostu dobrymi praktykami projektowania stron. Usprawnią korzystanie z naszej strony wszystkim użytkownikom i powinny być stałym standardem naszej pracy.</p>
+
+<p>Jeśli chodzi o statystyki, znów mamy do czynienia z wyraźnym odsetkiem ludzi. <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">2014 Disability Status Report</a> (PDF, 511KB) przygotowany przez Uniwersytet Cornella wskazuje, że w 2014 roku 4,5% populacji USA w przedziale wiekowym 21–64 lat borykała się z jakąś formą zaburzenia funkcji poznawczych.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Na stronie <a href="http://webaim.org/articles/cognitive/">WebAIM's Cognitive</a> znajduje się szersze omówienie powyższych praktyk, zdecydowanie polecamy się z nią zapoznać.</p>
+</div>
+
+<h2 id="Wdrażanie_dostępności"><strong>Wdrażanie dostępności</strong></h2>
+
+<p>Powszechnie panującym (i przeważnie błędnym) jest przekonanie, że dostępność jest drogim „ekstra dodatkiem” do projektu. To przekonanie<em> może</em> być prawdziwe, jeśli:</p>
+
+<ul>
+ <li>Próbujemy wdrożyć ją do wykonanej już strony internetowej z istotnymi problemami z dostępnością.</li>
+ <li>Zaczęliśmy brać pod uwagę jej wdrożenie w późnych stadiach projektu.</li>
+</ul>
+
+<p>Jeśli jednak rozważamy dostępność od samego początku projektu, koszt jej implementacji powinien być dosyć niski.</p>
+
+<p>Już na etapie planowania naszego projektu ustalmy dostępność jako stały element rutyny testowania i to element równie ważny, co pozostałe czynniki wpływające na odbiór strony w ważnych grupach docelowych (np. użytkowników komputerów stacjonarnych czy przeglądarek mobilnych). Testujmy ją często, poczynając od wczesnych etapów projektu, najlepiej wspomagając się automatycznymi testami poszukujących zdefiniowanych wcześniej błędów (takich jak brakujący <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">tekst alternatywny</a> przy obrazkach czy błędna budowa linku — zob. <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Relacje między elementami a kontekst</a>). Nie zapominajmy też o przeprowadzaniu testów z grupami niepełnosprawnych użytkowników w celu przekonać się, jak radzą sobie oni z bardziej złożonymi funkcjonalnościami strony. Na przykład:</p>
+
+<ul>
+ <li>Czy widżet wyboru daty może być używany przez ludzi korzystających z czytników ekranów?</li>
+ <li>Jeśli zawartość strony jest ładowana dynamicznie, czy osoby niepełnosprawne wzrokowo zauważą zmianę?</li>
+ <li>Czy z przycisków interfejsu użytkownika można korzystać z pomocą klawiatury i ekranów dotykowych?</li>
+</ul>
+
+<p>Możemy i powinniśmy sporządzać listy potencjalnych problemów w projekcie, które wymagać będą wypracowania dostępności. Upewnijmy się, że zostaną starannie przetestowane i pomyślmy o rozwiązaniach/alternatywach. Zawartość tekstowa (o czym przekonamy się w następnym artykule) jest łatwa do wypracowania dostępności, ale co z multimediami czy nowatorskimi grafikami 3D? Powinniśmy wziąć pod uwagę budżet projektu i racjonalnie podejść do wyboru możliwych do zrealizowania ułatwień dostępności. Możemy np. zapłacić za transkrypcję wszystkich plików dźwiękowych, co będzie drogie, ale jak najbardziej możliwe do zrealizowania.</p>
+
+<p>Poza tym, bądźmy realistyczni. „Stuprocentowa dostępność” jest nieosiągalnym celem — nie unikniemy sytuacji, w których dla wielu testujących użytkowników jakaś funkcjonalność strony ciągle będzie trudna do użytkowania — jednak powinniśmy zrobić tak dużo, jak jesteśmy w stanie. Jeśli planujemy zawrzeć na stronie trójwymiarowy wykres kołowy stworzony z użyciem WebGL, możemy np. zamieścić też tabelkę z danymi jako bardziej dostępną alternatywę. Możemy też zawrzeć samą tabelkę i pozbyć się wykresu 3D — tabelka jest łatwo dostępna dla wszystkich, szybsza w wykonaniu, zużywa mniej zasobów i łatwiejsza do późniejszej edycji.</p>
+
+<p>Z drugiej strony, jeśli pracujemy nad galerią internetową zawierającą ciekawe trójwymiarowe obrazy, nieracjonalnie byłoby oczekiwać, że uda się nam wypracować dostępność każdego z dzieł sztuki dla osób z zaburzeniami wzroku, w końcu jest to czysto wizualny środek przekazu.</p>
+
+<p>Możemy pokazać użytkownikom, że staramy się zapewnić im jak najwięcej ułatwień dostępu — na przykład przez dodanie komunikatu wyjaśniającego, że staramy się robić wszystko co w naszej mocy, aby ułatwić im korzystanie ze strony, oraz jakie kroki poczyniliśmy, aby to osiągnąć. Jeśli ktoś zgłasza skargę na utrudnienia na naszej stronie, bądźmy empatyczni, gotowi na otwarcie dialogu, a w razie możliwości podejmijmy właściwe kroki, aby rozwiązać ten problem.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: W naszym artykule <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Najczęstsze problemy dostępności i ich rozwiązania</a> omawiamy aspekty dostępności na które powinno się zwracać szczególną uwagę.</p>
+</div>
+
+<p>Podsumowując:</p>
+
+<ul>
+ <li>Bierzmy pod uwagę dostępność od samego początku projektu, testujmy ją od wczesnych etapów i często. Tak samo jak w przypadku każdego innego błędu, problemy dostępności będą kosztować tym więcej, im później zostały wykryte.</li>
+ <li>Pamiętajmy, że wiele dobrych praktyk wypracowujących dostępność zaowocuje korzyścią dla każdego, nie tylko dla użytkowników z niepełnosprawnością. Na przykład, nowoczesna semantyczna składnia HTML jest korzystna nie tylko dla czytników ekranów, jest także szybka w ładowaniu i przetwarzaniu, a więc lepsza dla każdego, zwłaszcza dla osób używających urządzeń mobilnych albo posiadających wolne łącze internetowe.</li>
+ <li>Umieszczajmy komunikaty o dostępności na naszych stronach i angażujmy się w dialog z osobami mającymi problemy z dostępem.</li>
+</ul>
+
+<h2 id="Wytyczne_dostępności_i_przepisy_prawne"><strong>Wytyczne dostępności i przepisy prawne</strong></h2>
+
+<p>Istnieje wiele list i wytycznych opisujących dostępność na stronach internetowych, co może wydawać się przytłaczające na pierwszy rzut oka. Naszą radą jest oswojenie się z konkretnymi wskazówkami, które okażą się najbardziej przydatne dla danego programisty, jak również zrozumienie ogólnej logiki stojącej za wytycznymi testów istotnych dla specyfiki projektu.</p>
+
+<ul>
+ <li>Na początek, W3C opublikowało rozległy i wyczerpujący dokument zawierający bardzo precyzyjne i otwarte na różne technologie wytyczne spójnej dostępności. Nazywa się <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> (WCAG) i zdecydowanie nie można go nazwać szybką lekturą. Kryteria są podzielone na cztery główne kategorie, każda z nich opisująca wdrożenia o różnej specyfice wykonania (np. w celu zapewnienia ułatwień wizualnych, czy też ułatwień wykonywania interakcji ze stroną). Najlepszym sposobem na zaczęcie tej lektury jest przejście przez szybkie wprowadzenie <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Oczywiście, nie ma potrzeby znania WCAG na pamięć — miejmy świadomość rozległości tematyki tego opracowania, a także faktu, iż zostało w nim opisane wiele technik i narzędzi które nie są bezpośrednio związane z kryteriami WCAG (patrz niżej).</li>
+ <li>W twoim państwie mogą obowiązywać konkretne przepisy regulujące poziom dostępności treści na stronach internetowych — na przykład amerykańska <a href="http://www.section508.gov/content/learn">ustawa dot. rehabilitacji osób niepełnosprawnych</a>, niemiecka <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Barrierefreie-Informationstechnik-Verordnung</a>, <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">ustawa o równości</a> w Wielkiej Brytanii, włoska <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a>, australijska <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">ustawa o dyskryminacji</a> itd.</li>
+</ul>
+
+<p>Więc podczas gdy WCAG jest po prostu zbiorem wytycznych przydatnych w projektowaniu i wdrażaniu, w twoim państwie prawdopodobnie obowiązują przepisy regulujące dostępność w Internecie, lub dostępność publicznych usług (takich jak strony internetowe, telewizja, budynki publiczne itd.). Dobrym pomysłem jest zapoznanie się z tymi prawami. Jeśli nie poczyniłeś żadnych kroków aby stworzyć odpowiednie ułatwienia dostępu, możesz mieć problemy prawne w momencie, gdy niepełnosprawni użytkownicy złożą skargę na twoją stronę.</p>
+
+<p>Brzmi to poważnie, jednak aby tego uniknąć wystarczy uznać dostępność jako główny priorytet programistycznych i projektowych praktyk, tak jak przedstawiono powyżej. Jeśli masz wątpliwości co do prawnego tła dostępności, zapytaj o radę wykwalifikowanego prawnika. Nie możemy zaoferować żadnej innej rady, ponieważ nie jesteśmy prawnikami.</p>
+
+<h2 id="API_dostępności"><strong>API dostępności</strong></h2>
+
+<p>Przeglądarki internetowe używają specjalnych <strong>API dostępności </strong>(dostarczanych przez system operacyjny, na którym działają) umożliwiających operowanie na informacjach użytecznych dla technologii wspomagających (AT). AT pracują głównie na informacjach semantycznych, ignorują więc style czy skrypty JavaScript. Informacje te tworzą drzewo informacji nazwane <strong>drzewem dostępności</strong>.</p>
+
+<p>Różne systemy operacyjne posiadają różne API dostępności:</p>
+
+<ul>
+ <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
+ <li>Mac OS X: NSAccessibility</li>
+ <li>Linux: AT-SPI</li>
+ <li>Android: Accessibility framework</li>
+ <li>iOS: UIAccessibility</li>
+</ul>
+
+<p>Gdy lokalne dane semantyczne dostarczane przez elementy HTML naszej aplikacji internetowej zawiodą, możemy zastąpić je funkcjami ze specyfikacji <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA</a>, które uzupełniają drzewo dostępności o semantyczne informacje, tym samym usprawniając dostępność. Więcej o WAI-ARIA można przeczytać w naszym artykule <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Podstawy WAI-ARIA</a>.</p>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Niniejszy artykuł powinien stanowić obszerny wstęp do kwestii dostępności, pokazać czemu jest ona tak ważna i objaśnić główne metody wdrażania jej do organizacji pracy programisty. Zakładamy, że teraz czytelnik czuje głód wiedzy odnośnie szczegółowych instrukcji implementacji dostępności na stronach internetowych. Temat ten zaczniemy omawiać w następnej sekcji, skupiając się na tym, czemu HTML jest dobrą podstawą do wypracowania dostępności.</p>
+
+<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>
diff --git a/files/pl/learn/common_questions/index.html b/files/pl/learn/common_questions/index.html
new file mode 100644
index 0000000000..a534656334
--- /dev/null
+++ b/files/pl/learn/common_questions/index.html
@@ -0,0 +1,135 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Tę sekcję Strefy Nauki zaprojektowano w celu podania odpowiedzi na popularne pytania, które mogą się pojawić, a niekoniecznie są częścią innych, ustrukturyzowanych ścieżek nauki (na przykład artykułów o <a href="/en-US/docs/Learn/HTML">HTML</a> czy <a href="/en-US/docs/Learn/CSS">CSS</a>). Jest to luźny zbiór pytań i odpowiedzi na nie.</p>
+
+<h2 id="Jak_działa_Sieć">Jak działa Sieć</h2>
+
+<p>Ta sekcja zawiera zasady działania sieci - pytania dotyczące ogólnej wiedzy o Sieci.</p>
+
+<dl>
+ <dt>
+ <h3 id="Jak_działa_Internet"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">Jak działa Internet?</a></h3>
+ </dt>
+ <dd><strong>Internet</strong> jest podstawą Sieci, techniczną infrastrukturą, która umożliwia jej funkcjonowanie. W swojej podstawie, Internet jest wielką siecią komputerów, które komunikują się ze sobą. Ten artykuł pokazuje jak to działa - na podstawowym poziomie.</dd>
+ <dd>
+ <h3 id="Jaka_jest_różnica_między_serwisem_internetowym_stroną_internetową_serwerem_i_wyszukiwarką"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Jaka jest różnica między serwisem internetowym, stroną internetową, serwerem i wyszukiwarką?</a></h3>
+ </dd>
+ <dd>Ten artykuł opisuje różne pojęcia związane z siecią - serwisy internetowe, strony, serwery i wyszukiwarki. Te pojęcia są często mylone przez początkujących albo używane w niewłaściwym kontekście. Nauczymy się, co każde z nich oznacza!</dd>
+ <dt>
+ <h3 id="Co_to_jest_URL">Co to jest<a href="/en-US/docs/Learn/Common_questions/What_is_a_URL"> URL?</a></h3>
+ </dt>
+ <dd>Obok {{Glossary("Hypertext")}} i {{Glossary("HTTP")}}, URL (Uniform Resource Locator) to jest jedno z kluczowych pojęć związanych z Internetem. Jest to mechanizm używany przez przeglądarki do znajdowania i wydobywania zasobów opublikowanych w Sieci.</dd>
+ <dt>
+ <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3>
+ </dt>
+ <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
+ <dt>
+ <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3>
+ </dt>
+ <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
+ <dt>
+ <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3>
+ </dt>
+ <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
+</dl>
+
+<h2 id="Tools_and_setup">Tools and setup</h2>
+
+<p>Questions related to the tools/software you can use to build websites.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
+ </dt>
+ <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
+ </dt>
+ <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
+ </dt>
+ <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
+ </dt>
+ <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
+ </dt>
+ <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
+ <dt>
+ <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3>
+ </dt>
+ <dd>
+ <div>
+ <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p>
+ </div>
+ </dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
+ </dt>
+ <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
+ </dt>
+ <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
+ </dt>
+ <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
+ </dt>
+ <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
+</dl>
+
+<h2 id="Design_and_accessibility">Design and accessibility</h2>
+
+<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
+ </dt>
+ <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
+ <dt>
+ <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
+ </dt>
+ <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
+ <dt>
+ <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
+ </dt>
+ <dd>This article introduces the basic concepts behind web accessibility.</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
+ </dt>
+ <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
+ </dt>
+ <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
+</dl>
+
+<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2>
+
+<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li>
+</ul>
diff --git a/files/pl/learn/common_questions/jak_dziala_internet/index.html b/files/pl/learn/common_questions/jak_dziala_internet/index.html
new file mode 100644
index 0000000000..1ee3d15096
--- /dev/null
+++ b/files/pl/learn/common_questions/jak_dziala_internet/index.html
@@ -0,0 +1,100 @@
+---
+title: Jak działa Internet?
+slug: Learn/Common_questions/Jak_dziala_Internet
+tags:
+  - Beginner
+  - Tutorial
+  - WebMechanics
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p>W tym artykule omówiono, czym jest Internet i jak działa.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania:</th>
+   <td>Żadnych, ale zachęcamy do przeczytania najpierw <a href="/en-US/docs/Learn/Thinking_before_coding">artykułu o wyznaczaniu celów projektu</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Poznasz podstawy technicznej infrastruktury sieciowej i różnicę między Internetem a siecią.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Streszczenie">Streszczenie</h2>
+
+<p><strong>Internet</strong> jest szkieletem sieci, infrastruktury technicznej, która umożliwia korzystanie z sieci. W swojej najbardziej podstawowej postaci, Internet jest dużą siecią komputerów, które komunikują się ze sobą nawzajem.</p>
+
+<p><a href="https://pl.wikipedia.org/wiki/Internet#Geneza_i_historia_internetu" rel="external">Historia Internetu jest nieco niejasna</a>. Zaczęło się w latach 60. jako projekt badawczy finansowany przez USA, a następnie przekształciło się w infrastrukturę publiczną w latach 80. przy wsparciu wielu publicznych uniwersytetów i firm prywatnych. Różne technologie wspierające Internet ewoluowały z czasem, ale sposób jego funkcjonowania nie zmienił się tak bardzo: Internet to sposób na połączenie komputerów razem i zapewnienie, że cokolwiek się wydarzy, znajdą one sposób na pozostanie w kontakcie.</p>
+
+<h2 id="Aktywna_Nauka">Aktywna Nauka</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Jak działa internet w 5 minut</a>: 5-minutowe wideo objaśniające podstawy Internetu, autorstwa Aarona Titusa.</li>
+ <li><a href="https://www.youtube.com/watch?v=x3c1ih2NJEg">Jak działa Internet?</a> Szczegółowe, dobrze zobrazowane 8-minutowe wideo.</li>
+</ul>
+
+<h2 id="Głębsze_zanurzenie">Głębsze zanurzenie</h2>
+
+<h3 id="Prosta_sieć">Prosta sieć</h3>
+
+<p>Kiedy dwa komputery muszą się komunikować, trzeba je połączyć albo fizycznie (zazwyczaj za pomocą <a href="https://pl.wikipedia.org/wiki/Kabel_krosowany" rel="external">kabla Ethernet</a>), albo bezprzewodowo (na przykład przy pomocy <a href="https://pl.wikipedia.org/wiki/Wi-fi" rel="external">Wi-Fi</a> lub <a href="https://pl.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Wszystkie nowoczesne komputery mogą utrzymywać dowolne z tych połączeń.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong> W dalszej części tego artykułu będziemy mówić tylko o kablach fizycznych, ale sieci bezprzewodowe działają tak samo.</p>
+</div>
+
+<p><img alt="Dwa komputery połączone razem" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>Taka sieć nie jest ograniczona do dwóch komputerów. Można podłączyć tyle komputerów, ile się chce. Ale to się szybko komplikuje. Jeśli próbujesz połączyć, powiedzmy dziesięć komputerów, potrzebujesz 45 kabli, z dziewięcioma wtyczkami na komputer!</p>
+
+<p><img alt="Dziesięć komputerów, wszystkie razem" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>Aby rozwiązać ten problem, każdy komputer w sieci jest podłączony do specjalnego malutkiego komputera zwanego <em>routerem</em>. Ten <em>router</em> ma tylko jedno zadanie: podobnie jak sygnalizator na stacji krajowej, dba o to, aby wiadomość wysłana z danego komputera dotarła do właściwego komputera docelowego. Aby wysłać wiadomość do komputera B, komputer A musi wysłać wiadomość do routera, który z kolei przekazuje wiadomość do komputera B i upewnia się, że wiadomość nie zostanie dostarczona do komputera C.</p>
+
+<p>Po dodaniu routera do systemu, nasza sieć składająca się z 10 komputerów wymaga tylko 10 kabli: jedna wtyczka na każdy komputer i router z 10 wtyczkami.</p>
+
+<p><img alt="Dziesięć komputerów z routerem" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="Sieć_sieci">Sieć sieci</h3>
+
+<p>Na razie w porządku. Ale co z podłączeniem setek, tysięcy, miliardów komputerów? Oczywiście pojedynczy <em>router</em> nie działa na tak dużą skalę, ale jeśli uważnie czytasz, powiedzieliśmy, że <em>router</em> jest komputerem jak każdy inny, więc co powstrzymuje nas przed połączeniem dwóch <em>routerów</em>? Nic, więc zróbmy to.</p>
+
+<p><img alt="Dwa routery połączone razem" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>Podłączając komputery do routerów, a następnie routery do routerów, jesteśmy w stanie skalować w nieskończoność.</p>
+
+<p><img alt="Routery połączone z routerami" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>Taka sieć jest bardzo zbliżona do tego, co nazywamy Internetem, ale czegoś nam brakuje. Zbudowaliśmy tę sieć dla naszych własnych celów. Są inne sieci: twoi przyjaciele, sąsiedzi, każdy może mieć swoją własną sieć komputerów. Ale tak naprawdę nie jest możliwe ułożenie kabli między domem a resztą świata, więc jak sobie z tym poradzić? Cóż, są już kable podłączone do twojego domu, na przykład zasilanie elektryczne i telefon. Infrastruktura telefoniczna już łączy Twój dom z kimkolwiek na świecie, więc jest to idealny przewód, którego potrzebujemy. Aby połączyć naszą sieć z infrastrukturą telefoniczną, potrzebujemy specjalnego urządzenia zwanego <em>modemem</em>. <em>Modem</em> ten zamienia informacje z naszej sieci w informacje zarządzane przez infrastrukturę telefoniczną i na odwrót.</p>
+
+<p><img alt="Router połączony z modemem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>Więc jesteśmy podłączeni do infrastruktury telefonicznej. Następnym krokiem jest wysłanie wiadomości z naszej sieci do sieci, do której chcemy dotrzeć. W tym celu podłączymy naszą sieć do Dostawcy Usług Internetowych (ISP). Dostawca usług internetowych to firma, która zarządza kilkoma specjalnymi <em>routerami</em>, które są ze sobą połączone i mogą również uzyskać dostęp do routerów innych dostawców usług internetowych. Tak więc wiadomość z naszej sieci jest przekazywana przez sieć dostawców usług internetowych do sieci docelowej. Internet składa się z całej tej infrastruktury sieci.</p>
+
+<p><img alt="Pełny stos Internetowy" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Wyszukiwanie_komputerów">Wyszukiwanie komputerów</h3>
+
+<p>Jeśli chcesz wysłać wiadomość do komputera, musisz określić, do którego. Tak więc każdy komputer podłączony do sieci ma unikalny adres, który go identyfikuje, zwany "adresem IP" (gdzie IP oznacza <em>Internet Protocol - Protokół Internetowy</em>). Jest to adres złożony z szeregu czterech liczb oddzielonych od siebie kropkami, na przykład <code>192.168.2.10</code>.</p>
+
+<p>To doskonale pasuje do komputerów, ale my, ludzie, mamy problem z zapamiętywaniem tego typu adresów. Aby to ułatwić, możemy nadać adres IP z czytelną dla człowieka nazwą zwaną <em>nazwą domeny</em>. Na przykład (w momencie pisania; adresy IP mogą się zmieniać) <code>google.com</code> to nazwa domeny używana do adresu IP <code>172.217.165.131</code>. Tak więc używanie nazwy domeny jest dla nas najłatwiejszym sposobem dotarcia do komputera przez Internet.</p>
+
+<p><img alt="Pokazuje, jak nazwa domeny może zmienić adres IP na inny" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="Internet_i_sieć">Internet i sieć</h3>
+
+<p>Jak można zauważyć, podczas przeglądania stron internetowych za pomocą przeglądarki internetowej, zwykle używamy nazwy domeny, aby dotrzeć do witryny. Czy to oznacza, że Internet i sieć są tym samym? To nie jest takie proste. Jak widzieliśmy, Internet jest infrastrukturą techniczną, która pozwala połączyć ze sobą miliardy komputerów. Wśród tych komputerów, niektóre (zwane <em>serwerami sieciowymi</em>) mogą wysyłać wiadomości zrozumiałe dla przeglądarek internetowych. <em>Internet</em> jest infrastrukturą, podczas gdy <em>Sieć</em> to usługa zbudowana na bazie tej infrastruktury. Warto zauważyć, że istnieje kilka innych usług zbudowanych na bazie Internetu, takich jak poczta elektroniczna i {{Glossary("IRC")}}.</p>
+
+<h2 id="Dalsze_kroki">Dalsze kroki</h2>
+
+<ul>
+ <li><a href="/pl/docs/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa Sieć</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Zrozumienie różnicy między witryną, stroną, serwerem i wyszukiwarką</a></li>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">Zrozumienie nazw domen</a></li>
+</ul>
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>
diff --git a/files/pl/learn/getting_started_with_the_web/css_basics/index.html b/files/pl/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..44783a7f55
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,272 @@
+---
+title: CSS podstawy
+slug: Learn/Getting_started_with_the_web/CSS_basics
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Kaskadowe arkusze stylów CSS (ang. Cascading Style Sheets) to kod służący do nadawania wyglądu strony. <em>CSS Podstawy</em> przeprowadzi cię przez bazowe zagadnienia, abyś mógł zacząć modyfikować wygląd swojej strony. Odpowiemy na takie pytania jak: Jak zrobić, żeby mój tekst był czarny albo czerwony? Jak wyświetlić poszczególną zawartość strony w wybranych miejscach ekranu? Jak dekorować stronę obrazami czy nadać kolor tła?</p>
+</div>
+
+<h2 id="Czym_właściwie_jest_CSS">Czym właściwie jest CSS?</h2>
+
+<p>Podobnie jak HTML, CSS nie jest językiem programowania. Nie jest jednak też <em>językiem znaczników</em> — jest językiem arkuszy stylów (ang. <em>style sheet language</em>). <span id="result_box" lang="pl"><span>Oznacza to, że pozwala on selektywnie stosować style do elementów w dokumentach HTML.</span> <span>Na przykład, aby zaznaczyć wszystkie paragrafy na stronie HTML i zmienić w nich kolor tekstu na czerwono, należy napisać ten kod CSS:</span></span></p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>Sprawdźmy: wklej te trzy linie kodu do nowego pliku. Plik nazwij <code>style.css</code> i umieść go w katalogu <code>styles</code>.</p>
+
+<p>Wciąż jednak musimy powiązać ten kod CSS z twoim dokumentem HTML. W przeciwnym wypadku stworzony kod CSS nie będzie miał wpływu na wygląd twojej strony. (Jeśli nie śledzisz naszego projektu od poczatku, przeczytaj <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Struktura plików witryny</a> oraz <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML podstawy</a>, żeby dowiedzieć się co wpierw należy wykonać.)</p>
+
+<ol>
+ <li>Otwórz plik <code>index.html</code> i wklej poniższy kod gdzieś w sekcji nagłówka (czyli pomiędzy elementami <code>&lt;head&gt;</code> i <code>&lt;/head&gt;</code>):
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Zapisz plik <code>index.html</code> a następnie otwórz go w przeglądarce. Powinieneś móc zobaczyć coś takiego:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Jeśli tekst twoich akapitów jest czerwony, gratulacje! Właśnie napisałeś swój pierwszy skuteczny kod CSS.</p>
+
+<h3 id="Anatomia_reguł_CSS">Anatomia reguł CSS</h3>
+
+<p>Przyjrzyjmy się nieco bardziej szczegółowo naszemu kodowi CSS:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>Cała struktura jest nazywana <strong>listą </strong><strong>dyrektyw</strong> - reguł. Oto nazwy poszczególnych części:</p>
+
+<dl>
+ <dt>Selektor</dt>
+ <dd>Element HTML na początku reguły. Wybiera poszczególne elementy (bądź też tylko jeden) do wystylizowania - w tym wypadku wszystkie elementy <code>p</code>. Aby dodać styl do innego elementu, po prostu zmień selektor;</dd>
+ <dt>Deklaracja</dt>
+ <dd>Pojedyncza reguła, taka jak <code>color: red;</code>, która ustala jakie <strong>właściwości</strong> elementu chcesz wystylizować.</dd>
+ <dt>Właściwości</dt>
+ <dd>Sposoby stylizowania danego elementu HTML. (W powyższym przykładzie <code>color</code> jest właściwością selektrora <code>p</code>.) W CSS wybierasz, która właściwość ma być nadana w danej deklaracji.</dd>
+ <dt>Wartość właściwości</dt>
+ <dd>Po prawej stronie właściwości za dwukropkiem mamy wartość właściwości, która wybiera jeden z wielu możliwych wyglądów dla danej właściwości (istnieje wiele wartości <code>color</code> oprócz <code>red</code>).</dd>
+</dl>
+
+<p>Zauważ inne ważne części składni:</p>
+
+<ul>
+ <li>Każda deklaracja (oprócz selektror) musi być ujęta w nawias klamrowy (<code>{}</code>).</li>
+ <li>W ramach każdej deklaracji należy użyć dwukropka (<code>:</code>), aby oddzielić właściwość od jej wartości.</li>
+ <li>W ramach każdej deklaracji należy użyć średnika (<code>;</code>), aby oddzielić każdą deklarację od następnej.</li>
+</ul>
+
+<p>Aby zmodyfikować wiele wartości właściwości jednocześnie, wystarczy napisać je oddzielone średnikami, np.:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Wybieranie_wielu_elementów">Wybieranie wielu elementów</h3>
+
+<p>Możesz również wybrać wiele typów elementów i zastosować dla nich jeden zestaw deklaracji. Wypisz kilka selektorów oddzielonych przecinkami. Na przykład:</p>
+
+<pre class="brush: css">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Inne_typy_selektorów">Inne typy selektorów</h3>
+
+<p>Istnieje wiele innych typów selektorów. Do tej pory używaliśmy tylko <strong>selektorów elementów</strong>, które wybierają wszystkie elementy danego typu z kodu HTML. Ale możemy stworzyć bardziej szczegółowe selektory. Oto kilka powszechnych typów selektorów:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nazwa selektora</th>
+   <th scope="col">Co wybiera?</th>
+   <th scope="col">Przykład</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Selektor elementu (czasem nazywany selektorem tagu lub typu)</td>
+   <td>Element(y) HTML o podanym typie.</td>
+   <td><code>p</code><br>
+    Wybiera elementy <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor ID</td>
+   <td>Element na stronie o podanym ID (na jednej stronie HTML możesz użyć konkretnego ID tylko raz).</td>
+   <td><code>#my-id</code><br>
+    Wybiera <code>&lt;p id="my-id"&gt;</code> lub <code>&lt;a id="my-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor klasy</td>
+   <td>Element(y) na stronie o podanej klasie (Tej samej klasy możesz użyć wiele razy na stronie).</td>
+   <td><code>.my-class</code><br>
+    Wybiera <code>&lt;p class="my-class"&gt;</code> oraz <code>&lt;a class="my-class"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor atrybutu</td>
+   <td>Element(y) na stronie o podanym atrybucie.</td>
+   <td><code>img[src]</code><br>
+    wybiera <code>&lt;img src="myimage.png"&gt;</code> ale nie <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selektor pseudo-klasy</td>
+   <td>Element(y) o określonym stanie np. najechanie myszą na element</td>
+   <td><code>a:hover</code><br>
+    Wybiera <code>&lt;a&gt;</code>, ale tylko gdy kursor znajduje się nad elementem.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Istnieje wiele innych typów selektorów, możesz je poznać w naszym <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectors guide</a>.</p>
+
+<h2 id="Czcionki_i_tekst">Czcionki i tekst</h2>
+
+<p>Teraz, gdy poznaliśmy podstawy CSS, dodajmy więcej reguł i informacji do naszego pliku <code>style.css</code> żeby nasz przykład wyglądał lepiej. Zacznijmy od zmiany wyglądu czcionek i tekstu.</p>
+
+<ol>
+ <li>Na początek, cofnij się i znajdź <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">output from Google Fonts</a>, który przechowałeś w bezpiecznym miejscu. Dodaj element {{htmlelement("link")}} gdzieś wewnątrz sekcji head w pliku <code>index.html</code> (gdziekolwiek pomiędzy tagami <code>&lt;head&gt;</code> i <code>&lt;/head&gt;</code>). Linijka będzie wyglądała podobnie do:
+
+  <pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>Następnie, usuń istniejące reguły w pliku <code>style.css</code>. To był dobry test, ale czerwony tekst nie wygląda najlepiej.</li>
+ <li>Dodaj poniższy kod, zastępując linie "placeholder" z <code>font-family</code> wygenerowanym w Google Fonts. (<code>font-family</code> oznacza czcionkę lub czcionki których chcesz używać). Pierwsza reguła ustala bazową wielkość tekstu i czcionkę dla całej strony (ponieważ <code>&lt;html&gt;</code> to element-rodzic całej strony i wszystkie elementy wewnątrz niego dziedziczą ten sam <code>font-size</code> i <code>font-family</code>):
+  <pre class="brush: css">html {
+  font-size: 10px; /* px oznacz 'piksele': bazowy rozmiar tekstu to teraz 10 pikseli wysokości  */
+  font-family: placeholder; /* tu powinnien być font-family wygenerowany w Google fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Uwaga</strong>: Wszystko w dokumencie CSS pomiędzy <code>/*</code> i <code>*/</code> jest <strong>komentarzem </strong><strong>CSS</strong>, który przyglądarka zignoruje podczas wyświetlania strony. To miejsce dla Ciebie na notatki dotyczące tego co dzieje się w danym miejscu.</p>
+  </div>
+ </li>
+ <li>Teraz ustawimy rozmiar czcionki dla elementów zawierających tekst wewnątrz ciała (body) HTML: ({{htmlelement("h1")}}, {{htmlelement("li")}}, i {{htmlelement("p")}}). Wycentrujemy również tekst naszego nagłówka i ustawimy wysokość linii tekstu i odstęp między znakami dla głównej treści aby uczynić ją bardziej czytelną:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Możesz dostosować wartości <code>px</code> na jakiekolwiek chcesz, aby uzyskać wygląd jaki chcesz, ale generalnie twoja strona powinna wyglądać podobnie jak ta:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Pudełka_pudełka_wszędzie_pudełka">Pudełka, pudełka, wszędzie pudełka</h2>
+
+<p>Jedną z rzeczy którą zauważysz podczas pisania CSS to, że wiele z nich dotyczy pudełek (ang. boxes) — ustawianie ich rozmiaru, koloru, pozycji etc. O większości elementów na stronie możesz myśleć jak o pudełkach stawianych jedne na drugim.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>Nic dziwnego, że układ CSS opiera się głównie na <em>modelu pudełkowym</em> (ang. <em>box model</em>). Każdy z bloków zajmujących miejsce na Twojej stronie ma takie właściwości:</p>
+
+<ul>
+ <li><code>padding</code>, przestrzeń wokół elementu (np. wokół paragrafu tekstu)</li>
+ <li><code>border</code>, obramowanie poza padding-iem</li>
+ <li><code>margin</code>, przestrzeń wokół zewnętrznej części elementu</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>W tej sekcji możemy także użyć:</p>
+
+<ul>
+ <li><code>width</code>, szerokość elementu,</li>
+ <li><code>background-color</code>, kolor pod zawartością i paddingiem elementu,</li>
+ <li><code>color</code>, kolor treści elementu (zazwyczaj tekstu),</li>
+ <li><code>text-shadow</code>: ustawia cień pod tekstem wewnątrz elementu,</li>
+ <li><code>display</code>: określa sposób wyświetlania elementu (póki co nie martw się tym).</li>
+</ul>
+
+<p>Dodajmy trochę więcej CSS do naszej strony! Dodawaj nowe reguły na dole pliku i nie bój się eksperymentować ze zmianą wartości, aby zobaczyć, jak działają.</p>
+
+<h3 id="Zmiana_koloru_strony">Zmiana koloru strony</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Ten zestaw reguł ustawi kolor tła dla całej strony. Zmień powyższy kod koloru na dowolny wybrany podczas<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color"> planning your site</a>.</p>
+
+<h3 id="Sortowanie_elementów_body">Sortowanie elementów body</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Teraz element {{htmlelement("body")}}. Jest tu kilka deklaracji, więc przejrzyjmy je wszystkie jedna po drugiej:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — wymusza, aby szerokość elementu body wynosiła 600 pikseli.</li>
+ <li><code>margin: 0 auto;</code> — Kiedy ustawiasz dwie wartości na właściwościach takich jak <code>margin</code> czy <code>padding</code>, pierwsza wartość dotyczy górnej i dolnej strony elementu (ustawia je na 0 w tym wypadku), a druga wartość ustawia lewą i prawą stronę (<code>auto</code> to specjalna wartość która dzieli dostępną przestrzeń w poziomie równo pomiędzy lewą i prawą stronę). Możesz równiej użyć jednej, dwóch, trzech lub czterech wartości tak jak zostało to opisane <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">tutaj</a>.</li>
+ <li><code>background-color: #FF9500;</code> — jak wcześniej, ustawia tło elementu. Użyliśmy czerwono-pomarańczowego koloru dla body, jako przeciwieństwa dla ciemno niebieskiego koloru dla elementu {{htmlelement("html")}}, ale nie krępuj się eksperymentować.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — mamy cztery wartości do ustawienia odstępów do uzyskania przestrzeni wokół elementu. Tym razem ustawiamy brak górnego odstępu i po 20 pikseli odstępu dla prawej strony, dołu i lewej strony. Wartości ustawiają kolejno górę, prawą stronę, dół i lewą stronę.</li>
+ <li><code>border: 5px solid black;</code> — ta prosta reguła ustawia obramowanie ciągłą linią o szerokości 5-ciu pikseli w czarnym kolorze dla każdego z boków.</li>
+</ul>
+
+<h3 id="Ustawianie_i_stylowanie_głównego_nagłówka">Ustawianie i stylowanie głównego nagłówka</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Być może zauważysz paskudną szparę na górze ciała strony. Dzieje się tak dlatego, że przeglądarki stosują pewne <strong>domyślne style</strong> dla elementu {{htmlelement("h1")}} (oraz innych), nawet jeżeli nie użyjesz żadnego stylu CSS! To może brzmieć jak zła koncepcja, ale chcemy by nawet nieostylowana strona wyglądała czytelnie. Aby pozbyć się luki, zmieniliśmy domyślny styl, ustawiając <code>margin: 0;</code>.</p>
+
+<p>Następnie ustawiliśmy górny i dolny margines nagłówka na 20 pikseli i nadaliśmy tekstowi nagłówka taki sam kolor, jak kolor tła dla html.</p>
+
+<p>Ciekawą właściwością, którą tutaj wykorzystaliśmy, jest <code>text-shadow</code>, który nadaje cień dla tekstu wewnątrz elementu. Jego cztery wartości są następujące: </p>
+
+<ul>
+ <li>Pierwsza wartość w pikselach określa <strong>przesunięcie poziome</strong> cienia od tekstu - jak daleko przesunąć go w poprzek: wartość ujemna powinna przesunąć cień w lewo.</li>
+ <li>Druga wartość w pikselach określa <strong>pionowe przesunięcie</strong> cienia - jak daleko przesunąć go w dół; Wartość ujemna przesunie cień w górę.</li>
+ <li>Trzecia wartość w pikselach to <strong>promień rozmycia</strong> cienia — większa wartość oznacza bardziej rozmyty cień.</li>
+ <li>Czwarta wartość określa kolor cienia.</li>
+</ul>
+
+<p>Ponownie, eksperymentuj z innymi wartościami i zobacz co możesz zrobić!</p>
+
+<h3 id="Centrowanie_obrazka">Centrowanie obrazka</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Wreszcie wycentrujemy obrazek żeby wyglądał lepiej. Możemy użyć ponownie triku <code>margin: 0 auto</code> którego użyliśmy w przypadku body, ale dodatkowo musimy zrobić coś jeszcze. Element {{htmlelement("body")}} jest <strong>blokowy (ang. block)</strong>, co oznacza, że zajmuje całą dostępną przestrzeń na stronie i możesz zastosować dla niego marginesy i inne ustawienia wielkości. Z drugiej strony, obrazki są elementali <strong>liniowymi</strong> (ang.inline) i nie posiadają takich właściwości. Dlatego żeby zastosować marginesy dla grafiki musimy zmienić jej sposób wyświetlania na blokowy używając <code>display: block;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Powyższe instrukcje zakładają, że używasz obrazu o szerokości mniejszej niż szerokość ustawiona dla elementu body (600 pikseli). Jeśli obraz jest większy, spowoduje to przelanie treści i rozlanie jej na resztę strony. Aby temu zapobiec możesz 1) zmniejszyć wielkość obrazu za pomocą <a href="https://pl.wikipedia.org/wiki/Edytor_grafiki_rastrowej">editora graficznego</a>, lub 2) zmniejszyć obraz przy użyciu CSS ustawiając właściwość {{cssxref("width")}} dla elementu <code>&lt;img&gt;</code> na mniejszą wartość (np., <code>400 px;</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Nie przejmuj się jeżeli jeszcze nie rozumiesz <code>display: block;</code> i różnicy między elementami liniowymi a blokowymi. Zrozumiesz z czasem zgłębiania wiedzy o CSS. Więcej o różnych dostępnych sposobach wyświetlania możesz znaleźć w naszym <a href="/en-US/docs/Web/CSS/display">display reference page</a>.</p>
+</div>
+
+<h2 id="Konkluzja">Konkluzja</h2>
+
+<p>Jeżeli prześledziłeś instrukcje z tego artykułu powinieneś zakończyć ze stroną wyglądającą jak ta (możesz również zobaczyć <a href="http://mdn.github.io/beginner-html-site-styled/">naszą wersję tutaj</a>):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Jeżeli utkniesz możesz zawsze porównać swój kod z naszym <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">gotowym przykładem na GitHub</a>.</p>
+
+<p>To naprawdę podstawowe informacje o CSS. Aby dowiedzieć się więcej sprawdź nasz <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html
new file mode 100644
index 0000000000..fe33799b70
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -0,0 +1,95 @@
+---
+title: Struktura plików witryny
+slug: Learn/Getting_started_with_the_web/Dealing_with_files
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Strona internetowa zawiera wiele plików: pliki z treścią, kod, arkusze stylów, media, i więcej. Kiedy budujesz stronę internetową, musisz zebrać je wszystkie razem i stworzyć z nich rozsądną strukturę na swoim komputerze oraz upewnić się, że mogą się one między sobą komunikować, zanim <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">wyślesz je na serwer hostingowy</a>. Sekcja <em>Struktura plików witryny</em> omawia podstawowe kwestie jakich powinieneś być świadomy, aby zbudować racjonalną strukturę plików dla twojej strony internetowej.</p>
+</div>
+
+<h2 id="Gdzie_na_twoim_komputerze_powinna_znajdować_się_twoja_strona_internetowa">Gdzie na twoim komputerze powinna znajdować się twoja strona internetowa?</h2>
+
+<p>Kiedy pracujesz lokalnie na swoim komputerze, powinieneś wszystkie pliki zwiazane z daną stroną trzymać w pojedynczym folderze, który będzie odzwierciedlał folder na serwerze, na którym zamierzasz publikować stronę.  Ten folder może się znajdować gdzie tylko chcesz, na twoim komputerze, choć raczej powinieneś go przechowywać w miejscu, które łatwo odnajdziesz. Może to być twój Pulpit czy folder domowy linuxa, albo bezpośrednio na dysku twardym bez katalogów nadrzędnych.</p>
+
+<ol>
+ <li>Wybierz miejsce przechowywania projektu strony. Utwórz katalog o nazwie <code>web-projects</code> (lub podobnej). Tu będzie się znajdował projekt twojej strony.</li>
+ <li>Wewnątrz katalogu utwórz kolejny folder do przechowywania twojej pierwszej strony internetowej. Nazwij go <code>test-site</code> (lub w bardziej kreatywny sposób).</li>
+</ol>
+
+<h2 id="Nazewnictwo_folderów_i_plików">Nazewnictwo folderów i plików</h2>
+
+<p>Jak zauważysz, w tym artykule poprosimy cię o nazywanie folderów i plików tylko małymi literami i bez spacji w nazwie. A to dlatego, że:</p>
+
+<ol>
+ <li>Wiele komputerów, a w szczególności serwerów sieciowych, jest wrażliwych na wielkość liter w nazwach. Tak więc na przykłąd, jeśli umieścisz obraz z twojej strony w <code>test-site/MyImage.jpg</code>, a następnie w innym pliku odwołasz się do niego jako <code>test-site/myimage.jpg</code>, to może nie zadziałać.</li>
+ <li>Przeglądarki, serwery sieciowe oraz języki programowania nie do końca radzą sobie ze spacjami w nazwach. Na przykład, jeśli użyjesz spacji w nazwie pliku, niektóre systemy potraktują tę nazwę jako dwie nazwy dwóch plików. Niektóre serwery zastąpią spacje w nazwie symbolem "%20" (kod znaku dla spacji w URIs), w rezultacie przestaną działać wszystkie twoje odnośniki do takiego pliku. Lepiej jest stosować myślniki niż podkreślenia: <code> my-file.html</code> vs. <code>my_file.html</code>.</li>
+</ol>
+
+<p>Krótko mówiąc powinieneś używać myślników w nazwach plików (oczywiście jeśli chcesz używać kilkuwyrazowych nazw). Wyszukiwarka Google traktuje myślnik jako separator słów, ale podkreślenie już nie. Z tego powodu najlepiej jest wyrobić sobie nawyk pisania nazw plików i folderów małymi literami i bez spacji, i raczej nie używać myślników czy podkreśleń, chyba że wiesz co robisz. W ten sposób unikniesz już części problemów jakie możesz napotkać.</p>
+
+<h2 id="Jaką_strukturę_powinna_mieć_twoja_strona_internetowa">Jaką strukturę powinna mieć twoja strona internetowa?</h2>
+
+<p>Następnie zobaczmy jaką strukturę powinna mieć twoja strona internetowa. <span id="result_box" lang="pl"><span>Najczęściej rzeczy, które będziemy mieli w każdym projekcie strony internetowej, który tworzymy, to podstawowy plik HTML </span></span><code>index.html</code><span lang="pl"><span> i foldery zawierające obrazy, pliki stylów i pliki skryptów</span></span> . Stwórzmy je teraz:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Ten plik zawiera podstawową treść strony głównej twojej witryny, czyli tekst i obrazy jakie ludzie widzą wchodząc na twoją stronę. Przy pomocy twojego edytora tekstowego stwórz plik o nazwie <code>index.html</code> i zapisz go w twoim folderze projektu <code>test-site</code>.</li>
+ <li><strong>katalog <code>images</code></strong>: Ten folder będzie zawierał obrazy jakie użyjesz na twojej stronie. Utwórz katalog <code>images</code> wewnątrz folderu <code>test-site</code>.</li>
+ <li><strong>katalog <code>styles</code></strong>: Ten folder będzie zawierał pliki CSS do nadania wyglądu twojej strony (np. ustawieni koloru tekstu i tła strony). Utwórz katalog <code>styles</code> wewnątrz folderu <code>test-site</code>.</li>
+ <li><strong>katalog <code>scripts</code></strong>: Ten folder będzie zawierał cały JavaScript użyty do uczynienia twojej strony interaktywną (np. przyciski wczytujące dane po kliknięciu). Utwórz folder o nazwie <code>scripts</code> wewnątrz katalogu <code>test-site</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Uwaga</strong>: W systemie Windows, możesz napotkać na problem z wyświetlaniem nazw plików, ponieważ domyślnie włączona jest opcja folderów zwana <strong>Ukryj rozszeżenia znanych typów plików</strong>. Możesz ją wyłączyć w prosty sposób. Otwórz Eksplorator Plików, kliknij opcję w menu <strong>Organizuj</strong> a następnie  <strong>Opcje folderów i wyszukiwania</strong>. W zakładce <strong>Widok</strong> odzdnacz opcję <strong>Ukryj rozszeżenia...</strong> Po bardziej szczegółowe informacje (w zależności od twojej wersji systemu Windows) sięgnij do strony Microsoft lub po prostu poszukaj w Internecie!</p>
+</div>
+
+<h2 id="Ścieżki_do_plików">Ścieżki do plików</h2>
+
+<p>Aby pliki mogły się między sobą komunikować, musisz ustawić odpowiednie ścieżki między nimi — po prostu chodzi o takie ścieżki, żeby pliki wiedziały wzajemnie, gdzie który się znajduje. Pokażemy ci o co chodzi tworząc nieco kodu w naszym pliku <code>index.html</code>, tak aby wyświetlał obraz jaki wybrałeś zgodnie ze wskazówkami artykułu <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Jak będzie wyglądała twoja strona internetowa?"</a></p>
+
+<ol>
+ <li>Skopiuj uprzednio wybrany obrazek do katalogu <code>images</code>.</li>
+ <li>Otwórz plik <code>index.html</code> i wklej do niego poniższy kod. Nie martw się na razie tym co on oznacza - przyjżymy się jego strukturze dalej.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>W linii <code>&lt;img src="" alt="My test image"&gt;</code> znajduje się kod HTML, który odpowiada za umieszczenie obrazu na twojej stronie. Musimy mu tylko wskazać, gdzie znajduje się plik z obrazem. Obrazek jest w katalogu <em>images</em>, który z kolei jest w tym samym folderze co <code>index.html</code>. Aby przejść od pliku <code>index.html</code> do naszego obrazu, ścieżka jaką potrzebujemy wskazać to <code>images/your-image-filename</code>. Na przykład, jeśli plik z obrazkiem nazywa się <code>firefox-icon.png</code>, ścieżką do niego jest <code>images/firefox-icon.png</code>.</li>
+ <li>Wstaw sieżkę do pliku we wskazanej wcześniej linii w cudzysłowie atrybutu <code>src=""</code>.</li>
+ <li>Zapisz plik HTML i otwórz go w przeglądarce (klikając na niego dwa razy). Powinieneś zobaczyć w oknie przeglądarki swój obrazek!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Kilka ogólnych reguł tworzenia ścieżek:</p>
+
+<ul>
+ <li>Aby wskazać plik znajdujący się w tym samym katalogu, co plik HTML, który się do niego odwołuje, po prostu podaj nazwę pliku, np. <code>moj-obraz.jpg</code>.</li>
+ <li>Aby wskazać plik znadujący się w podkatalogu, podaj nazwę katalogu, następnie slash i nazwę pliku, np. <code>podkatalog/moj-obraz.jpg</code>.</li>
+ <li>Aby wskazać plik znadujący się <strong>powyżej</strong> odwołującego się do niego pliku HTML, napisz dwie kropki. Przykładowo, jeśli <code>index.html</code> jest w podfolderze katalogu <code>test-site</code> a <code>moj-obraz.jpg</code> jest wewnątrz folderu <code>test-site</code>, możesz się do niego odnieść pisząc <code>../moj-obraz.jpg</code>.</li>
+ <li>Możesz łączyć powyższe reguły na różne sposoby, np <code>../podkatalog/inny-podkatalog/moj-obraz.jpg</code>.</li>
+</ul>
+
+<p>Jak narazie to wszystko co powinieneś o tym wiedzieć.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: W systemie Windows w ścieżkach do plików używa się znaku backslash a nie slash, enp. <code>C:\windows</code>. To jest nieistotne dla HTML — nawet jeśli tworzysz strony na Windowsie, nadal powinieneś używać w ścieżkach znaku slash.</p>
+</div>
+
+<h2 id="Co_jeszcze_należy_zrobić">Co jeszcze należy zrobić?</h2>
+
+<p>Na razie to tyle, a twoja struktura plików i folderów powinna wyglądać mniej więcej tak:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/getting_started_with_the_web/html_basics/index.html b/files/pl/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..1b7835d180
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,223 @@
+---
+title: HTML podstawy
+slug: Learn/Getting_started_with_the_web/HTML_basics
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<ol>
+ <li>
+  <h2 id="LearnSidebar">{{LearnSidebar}}</h2>
+ </li>
+</ol>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) jest to kod używany do tworzenia struktury strony i jej zawartości. <span id="result_box" lang="pl"><span>Na przykład treść może być uporządkowana w obrębie zestawu akapitów, listy punktowanych punktów lub tabel obrazów i danych.</span> <span>Jak sugeruje tytuł, ten artykuł daje podstawy do zrozumienia HTML i jego funkcji.</span></span></p>
+</div>
+
+<h2 id="Czym_właściwie_jest_HTML">Czym właściwie jest HTML?</h2>
+
+<p>HTML nie jest językiem programowania; jest <em>językiem znaczników</em> (ang. <em>markup language</em>). HTML składa się z serii znaczników (tagów), których używa się do zamknięcia, <em>opakowania </em>różnych części treści, tak aby wyglądały i/lub działały w określony sposób. Z pomocą tagów możesz ze słów czy obrazów zrobić linki do innych stron, sprawić by były napisane kursywą, większą czcionką, wytłuścić je itd. Na przykład weźmy poniższą treść:</p>
+
+<pre class="notranslate">My cat is very grumpy</pre>
+
+<p>Jeśli chcemy utworzyć z niej paragraf, wystarczy użyć odpowiednich tagów:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<h3 id="Anatomia_elementu_HTML">Anatomia elementu HTML</h3>
+
+<p>Przyjrzyjmy się nieco dokładniej jak tworzymy paragraf.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Główne składniki naszego elementu to:</p>
+
+<ol>
+ <li><strong>Tag otwierający:</strong> Znacznik ten zawiera nazwę elementu (w tym wypadku "p") otoczony parą ostrych nawiasów (<em>znak mniejszości i większości na klawiaturze - przyp. tłum.</em>)</li>
+ <li><strong>Tag zamykający:</strong> Jest w zasadzie taki sam jak tag otwierajacy z wyjątkiem tego, że obowiązkowo musi zawierać znak slash przed nazwą tagu. Oznacza to, że w tym miejscu kończy się dany element. Jeśli w kodzie nie umieścisz znaku końca elementu, co jest częstym błędem poczatkujących twórców stron, może to spowodować nieoczekiwane błędy podczas wyświetlania i działania strony.</li>
+ <li><strong>Zawartość:</strong> Po prostu treść elementu, w tym wypadku jest to tekst.</li>
+ <li><strong>Element:</strong> Element to całość tej konstrukcji: tag otwierający plus zawartość plus tag zamykajacy.</li>
+</ol>
+
+<p>Elementy mogą zawierać atrybuty, np:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Atrybuty zawierają dodatkowe informacje o elemencie, które nie są widoczne dla odwiedzających stronę. W tym przykładzie <code>class</code> jest <em>nazwą</em> atrybutu, a <code>editor-note</code> jest jego <em>wartością</em>. Atrybut <code>class</code> pozwala nadać elementowi indentyfikator, który potem może być użyty do nadania stylu elementowi przez CSS lub do innych celów.</p>
+
+<p>Atrybut zawsze powinien mieć:</p>
+
+<ol>
+ <li>Spację między nazwą tagu a nazwą atrybutu (lub innego atrybutu, jeśli dany element ma więcej atrybutów).</li>
+ <li>Nazwę atrybutu oraz znak równości.</li>
+ <li>Wartość podaną w cudzysłowie.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Uwaga</strong>: Proste wartości atrybutów, które nie zawierają białych znaków ASCII (ani żadnego ze znaków <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code> ) mogą pozostać bez cudzysłowów, ale zaleca się używać cudysłowów dla wszystkich wartości atrybutów, ponieważ czyni to kod bardziej spójnym i zrozumiałym.</p>
+</div>
+
+<h3 id="Zagnieżdżanie_elementów">Zagnieżdżanie elementów</h3>
+
+<p>Możesz elementy umieszczać wewnąrz innych elementów kodu HTML — nazywa się to <strong>zagnieżdżaniem</strong>. Jeśli chcemy podkreślić, że nasz kot jest <strong>bardzo</strong> gderliwy, możemy otoczyć slowo "bardzo" tagiem wytluszczającym {{htmlelement("strong")}}:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>Jednak musisz upewnić się, że elementy te są odpowiednio zagnieżdżone: w powyższym przykładzie najpierw otwieramy element {{htmlelement("p")}}, następnie element {{htmlelement("strong")}}, dalej musimy zamknąć element {{htmlelement("strong")}} a dopiero potem {{htmlelement("p")}}. Poniższy przykład jest błędny:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Elementy muszą zaczynać się i kończyć we właściwy sposób, tak aby jeden zawierał się w drugim. Jeśli elementy będą niewłaściwie domknięte, jak w przykładzie wyżej, przeglądarka będzie próbowała zgadnąć co miałeś na myśli, co może prowadzić do nieoczekiwanych rezultatów. Nie rób tak!</p>
+
+<h3 id="Elementy_puste">Elementy puste</h3>
+
+<p>Czasem elementy nie mają zawartości i nazwyamy je <strong>elementami pustymi</strong>. Weźmy element {{htmlelement("img")}}, który używaliśmy wcześniej w naszym kodzie HTML:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Element ten zawiera dwa atrybuty, ale nie posiada tagu zamykającego <code>&lt;/img&gt;</code>ani żadnej treści. To dlatego, że element ten nie opakowuje żadnej treści, której miałby nadawać wygląd. Jego zadaniem jest załączenie do strony obrazka, który pojawi się na stronie.</p>
+
+<h3 id="Anatomia_dokumentu_HTML">Anatomia dokumentu HTML</h3>
+
+<p><span id="result_box" lang="pl"><span>Na razie tyle podstaw poszczgólnych elementów. Teraz przyjrzymy się, w jaki sposób są one łączone, aby utworzyć całą stronę HTML.</span> <span>Powróćmy do kodu, który umieściliśmy w naszym przykładzie</span></span> <code>index.html</code> <span id="result_box" lang="pl"><span>(który poznaliśmy po raz pierwszy w artykule </span></span><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Struktura plików witryny</a>):</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Mamy tutaj:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — <span id="result_box" lang="pl"><span>doctype czyli typ dokumentu.</span> <span>Dawno temu, gdy HTML był jeszcze młody (około 1991/2 roku), doctypy miały działać jako linki do zestawu reguł, których strona HTML musiała przestrzegać, aby była uważana za poprawną HTML, co mogło służyć do automatycznego sprawdzania błędów i innych</span> <span>przydatnych rzeczy.</span> <span>Jednak w dzisiejszych czasach nikt nie dba o nie, a tak naprawdę jest tylko historycznym artefaktem, który trzeba uwzględnić, aby wszystko działało dobrze.</span> <span>Na razie to wszystko, co musisz wiedzieć.</span></span></li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — element {{htmlelement("html")}} zawiera całą treść strony i czasem nazwany jest elementem bazowym (ang. root element). Wskazuje, gdzie zaczyna i kończy się kod HTML.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — element {{htmlelement("head")}} to tzw. nagłówek strony. <span id="result_box" lang="pl"><span>Ten element działa jak kontener dla wszystkich elementów, które chcesz umieścić na stronie HTML, ale nie w treści, które wyświetlasz przeglądającym twoją stronę.</span> <span>Obejmuje to takie rzeczy jak </span></span> {Glossary("keyword", "keywords")}} <span lang="pl"><span> i opis strony, który ma się pojawiać w wynikach wyszukiwania, styl CSS, stylowanie naszej treści, deklaracje zestawu znaków, użytych skryptow i inne.</span></span></li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — element {{htmlelement("body")}}. <span id="result_box" lang="pl"><span>Zawiera <em>całą</em> zawartość, która ma być wyświetlana użytkownikom internetowym podczas odwiedzania Twojej strony, niezależnie od tego, czy chodzi o tekst, obrazy, wideo, gry, odtwarzalne ścieżki dźwiękowe czy cokolwiek innego.</span></span></li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — <span id="result_box" lang="pl"><span>ten element ustawia zestaw znaków, którego twój dokument powinien używać do wyświetlenia treści strony. W tym wypadku jest to UTF-8, który zawiera większość znaków z większości ludzkich języków pisanych.</span> <span>Zasadniczo jest w stanie obsłużyć dowolne treści tekstowe, które można na nim umieścić.</span> <span>Nie ma powodu, aby tego nie ustawiać, a to pomoże uniknąć późniejszych problemów.</span></span></li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — element {{htmlelement("title")}}.  Ustawia<span id="result_box" lang="pl"><span> tytuł strony, który jest tytułem wyświetlanym na karcie przeglądarki, do której wczytywana jest strona. Służy ona również do opisu strony po dodaniu jej do zakładek ulubionych, a także pokazuje tutuł strony w wynikach wyszukiwania.</span></span></li>
+</ul>
+
+<h2 id="Obrazy">Obrazy</h2>
+
+<p>Zajmijmy się teraz ponownie elementem {{htmlelement("img")}}:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>Jak powiedzieliśmy wcześniej, ten element odpowiada za wyświetlanie obrazu na stronie. Atrybut <code>src</code> (źródło - ang. source) wskazuje ścieżkę do pliku z obrazem.</p>
+
+<p>Mamy również załączony atrybut <code>alt</code> (ang. alternative). Ten atrybut określa jaki napis powinien pojawić się na stronie, jeśli użytkownikowi nie został z jakiegoś powodu wyświetlony obraz:</p>
+
+<ol>
+ <li>Użytkownicy niewidzący lub z poważnymi wadami wzroku często korzystają z narzędzi nazywanymi czytnikami ekranu, które pozwalają im odczytać tekst alternatywny.</li>
+ <li>Czasem coś pójdzie nie tak i obraz nie jest wyświetlany na stronie. Na przykład spróbuj zmienić ścieżkę wewnątrz atrybutu <code>src</code> na błędną. Jeśli zapiszesz i ponownie załadujesz stronę, powinieneś zobaczyć coś takiego zamiast obrazu:</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>Kluczowe dla atrybutu <code>alt</code> jest użycie dobrego opisu obrazka. Piszący tekst alternatywny powinien zapewnić czytelnikowi wystarczającą ilość informacji, aby ten mógł dobrze zrozumieć co przekazuje obraz. W tym przykładzie nasz alternatywny tekst "Mój obraz testowy" wcale nie jest dobry. Znacznie lepiej dla naszego obrazka z logo Firefoxa będzie napisać "Logo Firefoxa: płonący lis otaczający Ziemię".</p>
+
+<p>Teraz spróbuj wymyślić dobre teksty alternatywne dla swojego obrazka.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Dowiedz się więcej na temat dostępności na stronie <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p>
+</div>
+
+<h2 id="Tagowanie_tekstu">Tagowanie tekstu</h2>
+
+<p>W tej sekcji omowimy podstawowe znaczniki HTML do tagowania tekstu strony.</p>
+
+<h3 id="Nagłówki">Nagłówki</h3>
+
+<p><span id="result_box" lang="pl"><span>Elementy nagłówków pozwalają określić, że określone części treści są nagłówkami - lub podtytułami - treści.</span> <span>W taki sam sposób, w jaki książka ma tytuł główny, tytuły rozdziałów i napisy, może również wyglądać dokument HTML.</span> <span>HTML zawiera sześć poziomów nagłówków, {{htmlelement ("h1")}} - {{htmlelement ("h6")}}, chociaż najczęściej będziesz używać tylko co najwyżej 3-4 z nich:</span></span></p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>Teraz spróbuj dodać odpowiedni nagłówej do twojej strony w pliku HTML, tuż nad elementem {{htmlelement("img")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Zobaczysz, że Twój nagłówek na poziomie 1 ma już ustawiony niejawny styl. Nie używaj elementów nagłówka po to, aby uzyskać tekst większy lub pogrubiony, ponieważ są one używane z powodów <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#Text_content">semantycznych</a> i <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">innych przyczyn, takich jak SEO</a>. Spróbuj utworzyć znaczącą sekwencję nagłówków na swoich stronach, bez pomijania poziomów.</p>
+</div>
+
+<h3 id="Paragrafy">Paragrafy</h3>
+
+<p>Jak wyjaśniono wcześniej, elementy {{htmlelement("p")}} służą do formatowania parafrafów tekstu; <span id="result_box" lang="pl"><span>będziesz ich często używać podczas oznaczania zwykłej treści tekstowej:</span></span></p>
+
+<pre class="brush: html notranslate">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p>Dodaj do swojego tekstu na stronie jeden lub więcej paragrafów (powinieneś go mieć po lekturze artykułu <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Jak powinna wyglądać twoja strona internetowa?</em></a>). Paragrafy umieść bezpośrednio pod elementem {{htmlelement("img")}}.</p>
+
+<h3 id="Listy">Listy</h3>
+
+<p>Wiele stron internetowych posiada listy, a HTML ma odpowiedni element do ich utworzenia. Tworzenie listy zawsze wymaga przynajmniej dwóch elementów. Najpopularnieszymi typami list są lista numerowana i lista wypunktowana</p>
+
+<ol>
+ <li><strong>Lista wypunktowana</strong> jest rodzajem listy, gdzie kolejność jej elementów nie ma znaczenia, np. lista zakupów. Aby ją utworzyć użyj znacznika {{htmlelement("ul")}} (ang. unordered list).</li>
+ <li><strong>Lista numerowana</strong><strong> </strong>jest rodzajem listy, gdzie kolejność jej elementów ma znaczenie, np. przepis na coś. Do tego rodzaju listy używany jest znacznik {{htmlelement("ol")}} (ang. ordered list).</li>
+</ol>
+
+<p>Każdy element listy musi być umieszczony w swoim znaczniku {{htmlelement("li")}} (ang. list item).</p>
+
+<p>Na przykład, jeśli chcielibyśmy utworzyć listę z poniższego paragrafu:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>Możemy to zrobić w następujący sposób:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p>Spróbuj dodać oba rodzaje list do swojej przykładowej strony.</p>
+
+<h2 id="Linki_odnośniki">Linki (odnośniki)</h2>
+
+<p>Odnośniki są bardzo ważne — są tym co sprawia, że Sieć jest Siecią! Aby utworzyć odnośnik musimy użyć prostego elementu — {{htmlelement("a")}} — "a" jest skrótem od angielskiego "anchor", czyli kotwica. Aby zrobić z twojego teksu w paragrafie link, wykonaj następujące czynności:</p>
+
+<ol>
+ <li>Wybierz jakiś tekst. My wybraliśmy "Mozilla Manifesto".</li>
+ <li>Umieść go wewnątrz elementu {{htmlelement("a")}}:
+  <pre class="brush: html notranslate">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Nadaj elementowi {{htmlelement("a")}} atrybut <code>href</code>:
+  <pre class="brush: html notranslate">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>Wypełnij atrybut <code>href</code> odpowiednią zawartością, tj. adresem strony do jakiej twoj odnośnik ma prowadzić:
+  <pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Możesz otrzymać nieoczekiwany rezultat jeśli w adresie pominiesz część <code>https://</code> lub <code>http://</code>, zwana  <em>protokołem.</em> Po dodaniu linku przetestuj stronę czy odnośnik prowadzi tam gdzie chciałeś.</p>
+
+<div class="note">
+<p><code>href</code> może się wydawać niejasnym wyborem dla nazwy atrybutu. Jeśli masz problem z zapamiętaniem go, pamietaj że oznacza on hipertekstową referencję <em>(</em>ang.<em> <strong>h</strong>ypertext <strong>ref</strong>erence</em>)</p>
+</div>
+
+<p>Jeśli tego jeszcze nie zrobiłeś, dodaj odnośnik na twojej stronie.</p>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Jeśli podążałeś za instrukcjami zawartymi w tym artykule, obecnie twoja strona powinna wyglądać podobnie do tej poniżej (możesz ją również zobaczyć <a href="http://mdn.github.io/beginner-html-site/">tutaj</a>):<br>
+ <br>
+ <s><img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></s></p>
+
+<p>Jeśli gdzieś po drodze utknąłeś, zawsze możesz porównać swój kod z  GitHub <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">ukończonymi przykładami</a> na GitHubie.</p>
+
+<p>Tutaj jedynie prześlizgnęliśmy się po powierzchni HTMLa. Aby dowiedzieć się więcej przejdź do strony <a href="/en-US/Learn/HTML">Nauka HTMLa </a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/getting_started_with_the_web/index.html b/files/pl/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..622e465103
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,59 @@
+---
+title: Rozpocznij pracę z Siecią
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - NeedsTranslation
+  - TopicStub
+  - publishing
+  - theory
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Rozpocznij pracę z Siecią</em> to zwięzła seria wprowadzająca w praktyczne aspekty tworzenia stron internetowych. Skonfigurujesz narzędzia potrzebne do zbudowania prostej strony internetowej i opublikowania własnego prostego kodu.</p>
+</div>
+
+<h2 id="Historia_twojej_pierwszej_strony_internetowej">Historia twojej pierwszej strony internetowej</h2>
+
+<p>Stworzenie profesjonalnej strony internetowej to dużo pracy, więc jeśli dopiero zaczynasz tworzenie stron internetowych, zachęcamy do rozpoczęcia od czegoś małego. Nie zbudujesz od razu drugiego Facebooka, ale nie jest trudno zbudować własną, prostą stronę internetową, więc zaczniemy od tego.</p>
+
+<p>Przeglądając poniższe artykuły w sugerowanej kolejności, przejdziesz od zera do pierwszej strony internetowej. Zacznijmy naszą podróż!</p>
+
+<h3 id="Instalacja_podstawowego_oprogramowania"><a href="/pl/Learn/Getting_started_with_the_web/Installing_basic_software">Instalacja podstawowego oprogramowania</a></h3>
+
+<p>Jeśli chodzi o narzędzia do budowy strony internetowej, jest wiele do wyboru. Jeżeli dopiero zaczynasz, możesz być zdezorientowany przez szereg edytorów kodu, frameworków i narzędzi do testowania. <a href="/pl/Learn/Getting_started_with_the_web/Installing_basic_software">Instalując podstawowe oprogramowanie</a> pokazujemy ci krok po kroku, jak zainstalować tylko takie oprogramowanie, które jest Ci potrzebne do rozpoczęcia podstawowego tworzenia stron internetowych.</p>
+
+<h3 id="Jak_będzie_wyglądała_twoja_strona_internetowa"><a href="/pl/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Jak będzie wyglądała twoja strona internetowa?</a></h3>
+
+<p>Zanim zaczniesz pisanie kodu dla swojej strony internetowej, należy ją najpierw zaplanować. Jakie informacje prezentujesz? Jakich czcionek i kolorów używasz? <a href="/pl/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Jak będzie wyglądać twoja strona internetowa?</a> Przedstawiamy prostą metodę, którą możesz zastosować, aby zaplanować treść i wygląd witryny.</p>
+
+<h3 id="Radzenie_sobie_z_plikami"><a href="/pl/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a></h3>
+
+<p>Strona składa się z wielu plików: treści tekstowych, kodu, arkuszy stylów, treści multimedialnych itp. Kiedy budujesz stronę internetową, musisz zebrać te pliki w sensowną strukturę i upewnić się, że mogą się one między sobą komunikować. Sekcja <a href="/pl/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a> wyjaśnia, jak utworzyć sensowną strukturę plików dla swojej strony internetowej i jakich zagadnień trzeba mieć świadomość.</p>
+
+<h3 id="Podstawy_HTML"><a href="/pl/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a></h3>
+
+<p>Hipertekstowy język znaczników (HTML) to kod, którego używasz do strukturyzowania treści internetowych i nadawania im znaczenia i celu. Na przykład, czy zawartość mojej strony to zestaw akapitów, czy wypunktowana lista? Czy na mojej stronie znajdują się obrazy? Czy mam tabelę danych? Nie przytłaczając cię, <a href="/pl/Learn/Getting_started_with_the_web/HTML_basics">podstawy HTML</a> zapewniają wystarczającą ilość informacji, aby zapoznać Cię z HTML.</p>
+
+<h3 id="Podstawy_CSS"><a href="/pl/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a></h3>
+
+<p>Kaskadowe arkusze stylów (CSS) to kod, którego używasz do stylizacji swojej strony internetowej. Na przykład, czy chcesz, aby tekst był czarny, czy czerwony? W którym miejscu na ekranie ma być wyświetlana dana zawartość strony? Jakie obrazy i kolory tła powinny być użyte do udekorowania twojej strony? <a href="/pl/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a> przeprowadzą Cię przez to, czego potrzebujesz, aby zacząć.</p>
+
+<h3 id="Podstawy_JavaScript"><a href="/pl/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a></h3>
+
+<p>JavaScript to język programowania, którego używasz do dodawania interaktywnych funkcji do swojej strony internetowej. Przykładami mogą być gry, rzeczy, które zdarzają się po naciśnięciu przycisków lub wprowadzeniu danych w formularzach, dynamiczne efekty stylizacji, animacje i wiele innych. <a href="/pl/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a> dają ci wyobrażenie o tym, co jest możliwe z tym ekscytującym językiem i jak zacząć.</p>
+
+<h3 id="Publikowanie_swojej_strony_internetowej"><a href="/pl/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej strony internetowej</a></h3>
+
+<p>Po zakończeniu pisania kodu i organizowania plików, które składają się na twoją stronę internetową, musisz umieścić to wszystko w Internecie, aby ludzie mogli ją znaleźć.<a href="/pl/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej witryny</a> opisuje, jak przy minimalnym wysiłku można uzyskać prosty przykładowy kod online.</p>
+
+<h3 id="Jak_działa_sieć"><a href="/pl/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa sieć</a></h3>
+
+<p>Kiedy wchodzisz na swoją ulubioną stronę internetową, w tle dzieje się wiele skomplikowanych rzeczy, o których możesz nie wiedzieć. <a href="/pl/Learn/Getting_started_with_the_web/How_the_Web_works">Sposób działania sieci</a> określa, co dzieje się podczas przeglądania strony internetowej na komputerze.</p>
diff --git a/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html
new file mode 100644
index 0000000000..86fd252681
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/installing_basic_software/index.html
@@ -0,0 +1,80 @@
+---
+title: Instalacja podstawowego oprogramowania
+slug: Learn/Getting_started_with_the_web/Installing_basic_software
+tags:
+  - Beginner
+  - Browser
+  - Learn
+  - Setup
+  - Tools
+  - WebMechanics
+  - 'l10n:priority'
+  - text editor
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>W sekcji <em>Instalacja podstawowego oprogramowania</em> pokazujemy, jakie narzędzia są potrzebne do podstawowego tworzenia stron internetowych i jak je prawidłowo zainstalować.</p>
+</div>
+
+<h2 id="Jakich_narzędzi_używają_profesjonaliści">Jakich narzędzi używają profesjonaliści?</h2>
+
+<ul>
+ <li><strong>Komputer</strong>. Może wydaje się to oczywiste dla niektórych ludzi, ale część z Was czyta ten artykuł w telefonie lub na komputerze w bibliotece. Dla poważnego tworzenia stron internetowych, lepiej jest zainwestować w komputer stacjonarny lub laptop z systemem Windows, macOS lub Linux.</li>
+ <li><strong>Edytor tekstowy</strong>, do pisania kodu. Może to być edytor tekstowy (np. <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, lub <a href="https://www.vim.org/">VIM</a>), lub edytor hybrydowy (np. <a href="https://www.adobe.com/pl/products/dreamweaver.html">Dreamweaver</a> lub <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Edytory dokumentów biurowych nie nadają się do tego celu, ponieważ opierają się na ukrytych elementach, które zakłócają działanie silników renderujących używanych przez przeglądarki internetowe.</li>
+ <li><strong>Przeglądarki internetowe</strong>, do testowania kodu. Obecnie najczęściej używanymi przeglądarkami internetowymi są <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/pl">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://support.microsoft.com/pl-pl/help/17621/internet-explorer-downloads">Internet Explorer</a> i <a href="https://www.microsoft.com/pl-pl/edge">Microsoft Edge</a>. Należy także sprawdzić, jak twoja strona działa na urządzeniach mobilnych i na starszych przeglądarkach, których wciąż mogą używać twoi odbiorcy (takich jak IE 8–10.) <a href="https://lynx.browser.org/">Lynx</a>, terminalowa przeglądarka tekstowa, jest świetna do sprawdzenia, jak Twoja strona jest doświadczana przez użytkowników z wadami wzroku.</li>
+ <li><strong>Edytor graficzny</strong>, taki jak <a href="https://www.gimp.org/">GIMP</a>, <a href="https://www.figma.com/">Figma</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/pl/products/photoshop.html">Photoshop</a>, lub <a href="https://www.adobe.com/pl/products/xd.html">XD</a>, do tworzenia obrazów lub grafiki dla swoich stron internetowych.</li>
+ <li><strong>System kontroli wersji</strong>, do zarządzania plikami na serwerach, współpracy przy projekcie z zespołem, współdzielenia kodu i zasobów oraz unikania konfliktów edycyjnych. Obecnie <a href="http://git-scm.com/">Git</a> jest najpopularniejszym systemem kontroli wersji, wraz z serwisem hostingowym <a href="https://github.com/">GitHub</a> lub <a href="https://gitlab.com">GitLab</a>.</li>
+ <li><strong>Program FTP</strong>, używany na starszych kontach hostingowych do zarządzania plikami na serwerach (<a href="http://git-scm.com/">Git</a> coraz częściej zastępuje w tym celu FTP). Dostępnych jest wiele programów (S)FTP, w tym <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> i <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>System automatyzacji</strong>, taki jak <a href="https://webpack.js.org/">Webpack</a>, <a href="http://gruntjs.com/">Grunt</a> lub <a href="http://gulpjs.com/">Gulp</a>, który automatycznie wykonuje powtarzające się zadania, takie jak minifikacja kodu i przeprowadzanie testów.</li>
+ <li>Biblioteki, frameworki, itp., aby przyspieszyć pisanie powszechnych funkcji. Biblioteka jest zazwyczaj istniejącym plikiem JavaScript lub CSS, który zapewnia gotowe funkcje do wykorzystania w kodzie. Framework ma tendencję do kontynuowania tego pomysłu, oferując kompletny system z niestandardowymi składniami do pisania aplikacji internetowej na najwyższym poziomie.</li>
+ <li>Oraz wiele więcej narzędzi!</li>
+</ul>
+
+<h2 id="Jakich_właściwie_narzędzi_potrzebuję_na_teraz">Jakich właściwie narzędzi potrzebuję na teraz?</h2>
+
+<p>Wygląda to na przerażającą listę, ale na szczęście można zacząć tworzyć strony internetowe, nie wiedząc nic o większości z nich. W tym artykule przedstawimy Ci tylko minimum - edytor tekstu i kilka nowoczesnych przeglądarek internetowych.</p>
+
+<h3 id="Instalacja_edytora_tekstowego">Instalacja edytora tekstowego</h3>
+
+<p>Prawdopodobnie masz już podstawowy edytor tekstu na swoim komputerze. Domyślnie Windows zawiera <a href="https://pl.wikipedia.org/wiki/Notatnik_(program)">Notatnik</a> a macOS dostarczany jest z <a href="https://pl.wikipedia.org/wiki/TextEdit">TextEdit</a>. Dystrybucje Linuksa różnią się od siebie; na Ubuntu jest to <a href="https://pl.wikipedia.org/wiki/Gedit">gedit</a>.</p>
+
+<p>W przypadku tworzenia stron internetowych, przydałby ci się jednak lepszy edytor tekstowy. Polecamy zacząć od <a href="https://code.visualstudio.com/">Visual Studio Code</a>, który jest darmowym edytorem, oferującym podglądy na żywo i podpowiedzi do kodu.</p>
+
+<h3 id="Instalacja_nowoczesnych_przeglądarek_internetowych">Instalacja nowoczesnych przeglądarek internetowych</h3>
+
+<p>Na razie zainstalujemy kilka przeglądarek internetowych, aby przetestować nasz kod. Wybierz swój system operacyjny poniżej i kliknij odpowiednie linki aby pobrać instalatory swoich ulubionych przeglądarek:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>, <a href="https://brave.com">Brave</a> (System Windows 10 jest domyślnie wyposażony w przeglądarkę Edge; jeśli masz Windows 7 lub nowszy, możesz zainstalować Internet Explorer 11; w przeciwnym razie należy zainstalować alternatywną przeglądarkę).</li>
+ <li>macOS: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (macOS i iOS są domyślnie wyposażone w Safari).</li>
+</ul>
+
+<p>Zanim przejdziesz dalej, należy zainstalować co najmniej dwie z tych przeglądarek i mieć je gotowe do testów.</p>
+
+<div class="blockIndicator note">
+<p><strong>Uwaga</strong>: Internet Explorer nie jest kompatybilny z niektórymi nowoczesnymi funkcjami sieciowymi i może nie być w stanie uruchomić twojego projektu. Zazwyczaj nie musisz się martwić o to, aby twoje projekty były z nim kompatybilne, ponieważ bardzo niewiele osób nadal z niego korzysta - na pewno nie martw się o niego zbytnio podczas nauki. Czasami możesz natknąć się na projekt, który wymaga wsparcia.</p>
+</div>
+
+<h3 id="Instalacja_lokalnego_serwera_sieciowego">Instalacja lokalnego serwera sieciowego</h3>
+
+<p>Niektóre przykłady będą musiały być uruchamiane przez serwer sieciowy, aby działały poprawnie. Możesz dowiedzieć się jak to zrobić w <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Jak skonfigurować lokalny serwer testowy?</a></p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pl/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalacja podstawowego oprogramowania</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pl/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Jak będzie wyglądała twoja strona internetowa?</a></li>
+ <li id="Dealing_with_files"><a href="/pl/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a></li>
+ <li id="HTML_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a></li>
+ <li id="CSS_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a></li>
+ <li id="JavaScript_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/pl/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej strony internetowej</a></li>
+ <li id="How_the_web_works"><a href="/pl/docs/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa sieć</a></li>
+</ul>
diff --git a/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html b/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html
new file mode 100644
index 0000000000..6d1a97d33c
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html
@@ -0,0 +1,110 @@
+---
+title: Jak działa Sieć
+slug: Learn/Getting_started_with_the_web/Jak_dziala_Siec
+tags:
+  - Beginner
+  - Client
+  - DNS
+  - HTTP
+  - IP
+  - Infrastructure
+  - Learn
+  - Server
+  - TCP
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Jak działa Sieć</em> zapewnia uproszczony wgląd w to, co dzieje się podczas przeglądania witryny w przeglądarce internetowej na komputerze lub telefonie.</p>
+</div>
+
+<p>Teoria ta nie jest niezbędna do pisania kodu, ale na dłuższą metę zrozumienie tego, co dzieje się w tle, przynosi korzyści.</p>
+
+<h2 id="Klienci_i_serwery">Klienci i serwery</h2>
+
+<p>Komputery podłączone do sieci są nazywane <strong>klientami </strong>i <strong>serwerami</strong>. Uproszczony schemat ich interakcji może wyglądać w ten sposób:</p>
+
+<p><img alt="Dwa kółka reprezentujące klienta i serwer. Strzałka oznaczona jako zapytanie przechodzi z klienta do serwera, a strzałka oznaczona jako odpowiedź przechodzi z serwera do klienta." src="https://media.prod.mdn.mozit.cloud/attachments/2020/08/11/17375/3a120e53720c56bd08e3e0b3465edc88/simple-client-server_PL.png" style="height: 371px; width: 1193px;"></p>
+
+<ul>
+ <li>Klientami są typowe urządzenia użytkownika podłączone do Internetu (na przykład komputer podłączony do sieci Wi-Fi lub telefon podłączony do sieci komórkowej) oraz oprogramowanie umożliwiające dostęp do Internetu znajdujące się na tych urządzeniach (zazwyczaj przeglądarka internetowa, taka jak Firefox lub Chrome).</li>
+ <li>Serwery to komputery, na których przechowywane są witryny, strony lub aplikacje. Gdy urządzenie klienckie chce uzyskać dostęp do strony internetowej, kopia strony jest pobierana z serwera na komputer kliencki i wyświetlana w przeglądarce internetowej użytkownika.</li>
+</ul>
+
+<h2 id="Pozostałe_części_składowe">Pozostałe części składowe</h2>
+
+<p>Klient i serwer, o których pisaliśmy powyżej, nie opowiadają całej historii. Jest wiele innych części, które są związane z tym tematem, a my opiszemy je poniżej.</p>
+
+<p>Na razie, wyobraźmy sobie, że sieć to droga. Na jednym końcu tej drogi jest klient, który jest jak twój dom. Na drugim końcu drogi jest serwer, który jest sklepem, w którym chcesz coś kupić.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Oprócz klienta i serwera, musimy się również przywitać z:</p>
+
+<ul>
+ <li><strong>Twoim połączeniem internetowym</strong>: Pozwala na wysyłanie i odbieranie danych w sieci. W zasadzie jest jak ulica pomiędzy twoim domem a sklepem.</li>
+ <li><strong>TCP/IP</strong>: Protokół Sterowania Transmisją i Protokół Internetowy są protokołami komunikacyjnymi, które określają sposób przesyłania danych przez Internet. To tak jak mechanizmy transportowe, które pozwalają na składanie zamówień, chodzenie do sklepu i kupowanie towarów. W naszym przykładzie jest to samochód lub rower (lub jakkolwiek inaczej możesz się poruszać).</li>
+ <li><strong>DNS</strong>: System Nazw Domen jest jak książka adresowa dla stron internetowych. Kiedy wpisujesz adres internetowy w przeglądarce, przeglądarka patrzy na DNS, aby znaleźć prawdziwy adres strony internetowej, zanim będzie mogła go wyświetlić. Przeglądarka musi dowiedzieć się, na którym serwerze znajduje się strona internetowa, aby mogła wysłać wiadomości HTTP we właściwe miejsce (patrz poniżej). Jest to jak szukanie adresu sklepu, aby uzyskać do niego dostęp.</li>
+ <li><strong>HTTP</strong>: Hypertext Transfer Protocol jest {{Glossary("Protocol" , "protokołem")}} aplikacji, który definiuje język, w którym klienci i serwery mogą rozmawiać ze sobą. Jest to język, którego używasz do zamawiania swoich towarów.</li>
+ <li><strong>Plikami składowymi</strong>: Strona składa się z wielu różnych plików, które są jak różne części towaru kupowanego w sklepie. Pliki te występują w dwóch głównych typach:
+  <ul>
+   <li><strong>Pliki z kodem</strong>: Strony internetowe są zbudowane głównie z HTML, CSS i JavaScript, choć inne technologie poznasz nieco później.</li>
+   <li><strong>Zasoby</strong>: To wspólna nazwa dla wszystkich innych rzeczy, które składają się na stronę internetową, takich jak obrazy, muzyka, wideo, dokumenty Word i PDFy.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Więc_co_się_dokładnie_dzieje">Więc co się dokładnie dzieje?</h2>
+
+<p>Po wpisaniu adresu strony internetowej w przeglądarce (dla naszej analogii jest to jak chodzenie do sklepu):</p>
+
+<ol>
+ <li>Przeglądarka przechodzi do serwera DNS i znajduje rzeczywisty adres serwera, na którym znajduje się strona internetowa (znajduje się adres sklepu).</li>
+ <li>Przeglądarka wysyła do serwera wiadomość z żądaniem HTTP, prosząc go o przesłanie kopii strony internetowej do klienta (wchodzisz do sklepu i zamawiasz towar). Ta wiadomość i wszystkie inne dane wysyłane pomiędzy klientem a serwerem są przesyłane przez twoje połączenie internetowe przy użyciu TCP/IP.</li>
+ <li>Jeśli serwer zaakceptuje prośbę klienta, serwer wysyła do niego wiadomość "200 OK", co oznacza "Oczywiście możesz zajrzeć na tę stronę! Tutaj jest", a następnie zaczyna wysyłać pliki strony do przeglądarki w postaci serii małych kawałków zwanych pakietami danych (sklep daje Ci towar, a Ty przynosisz go z powrotem do domu).</li>
+ <li>Przeglądarka składa małe kawałki w kompletną stronę internetową i wyświetla ją Tobie (towar dociera do Twoich drzwi - nowe błyszczące rzeczy, niesamowite!).</li>
+</ol>
+
+<h2 id="Wyjaśnienie_DNS">Wyjaśnienie DNS</h2>
+
+<p>Prawdziwe adresy internetowe nie są miłymi, zapadającymi w pamięć słowami, które wpisujesz do paska adresu, aby znaleźć swoje ulubione strony. Są to specjalne numery, które wyglądają tak: <code>63.245.215.20</code>.</p>
+
+<p>Nazywa się to {{Glossary("IP Address", "adresem IP")}} i reprezentuje on unikalną lokalizację w sieci. Jednakże, nie jest to łatwe do zapamiętania, prawda? Właśnie dlatego wynaleziono system nazw domen. Są to specjalne serwery, które dopasowują adres internetowy, który wpisujesz do przeglądarki (np. "mozilla.org") do rzeczywistego adresu strony internetowej (IP).</p>
+
+<p>Do stron internetowych można dotrzeć bezpośrednio poprzez ich adresy IP. Adres IP strony internetowej można znaleźć wpisując jej domenę do narzędzia takiego jak <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<h2 id="Objaśnienie_pakietów">Objaśnienie pakietów</h2>
+
+<p>Wcześniej używaliśmy terminu "pakiety" do określenia formatu, w jakim dane są wysyłane z serwera do klienta. Co mamy tu na myśli? Zasadniczo, gdy dane są wysyłane przez sieć, są one wysyłane w postaci tysięcy małych kawałków, dzięki czemu wielu różnych użytkowników sieci może pobrać tę samą stronę w tym samym czasie. Gdyby strony internetowe były wysyłane jako pojedyncze duże kawałki, tylko jeden użytkownik mógłby pobrać jeden na raz, co oczywiście uczyniłoby sieć bardzo nieefektywną i mało przyjemną w użyciu.</p>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">Jak działa Internet</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li>
+</ul>
+
+<h2 id="Uznanie">Uznanie</h2>
+
+<p>Zdjęcie ulicy: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, autorstwa <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/pl/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instalacja podstawowego oprogramowania</a></li>
+ <li id="What_will_your_website_look_like"><a href="/pl/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Jak będzie wyglądała twoja strona internetowa?</a></li>
+ <li id="Dealing_with_files"><a href="/pl/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Radzenie sobie z plikami</a></li>
+ <li id="HTML_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/HTML_basics">Podstawy HTML</a></li>
+ <li id="CSS_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/CSS_basics">Podstawy CSS</a></li>
+ <li id="JavaScript_basics"><a href="/pl/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Podstawy JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/pl/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publikowanie swojej strony internetowej</a></li>
+ <li id="How_the_web_works"><a href="/pl/docs/Learn/Getting_started_with_the_web/Jak_dziala_Siec">Jak działa sieć</a></li>
+</ul>
diff --git a/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..cf62e22bb7
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,395 @@
+---
+title: Podstawy JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Początkujący
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript to język programowania, który dodaje interaktywność do Twojej witryny (na przykład: gry, odpowiedzi po naciśnięciu przycisków lub wprowadzeniu danych do formularza, dynamiczne stylowanie, animacja). Ten artykuł pomoże Ci rozpocząć przygodę z tym ekscytującym językiem oraz przedstawi przedsmak tego, co dzięki niemu jest możliwe.</p>
+</div>
+
+<h2 id="Czym_naprawdę_jest_JavaScript">Czym naprawdę jest JavaScript?</h2>
+
+<p>{{Glossary("JavaScript")}} (w skrócie "JS") jest pełnoprawnym {{Glossary("Dynamic programming language", "dynamicznym językiem programowania")}}, który po dodaniu do dokumentu {{Glossary("HTML")}}, może dostarczyć dynamiczną zawartość do stron internetowych. Został stworzony przez Brendan'a Eich, współtwórcę projektu Mozilla, Mozilla Foundation i Mozilla Corporation.</p>
+
+<p>JavaScript jest niezwykle wszechstronny. Możesz zacząć z czymś małym, z karuzelami, galeriami obrazków, zmiennymi układami strony i odpowiedziami na kliknięcia przycisków. Z większym doświadczeniem, będziesz w stanie stworzyć gry, animowane grafiki 2D i 3D, kompleksowe aplikacje oparte na bazach danych i wiele więcej!</p>
+
+<p>JavaScript jest dość zwarty, ale jednocześnie bardzo elastyczny. Programiści napisali wiele różnych narzędzi z wykorzystaniem rdzenia języka JavaScript, otwierając mnóstwo dodatkowych funkcjonalności przy minimalnym wysiłku. Obejmują one:</p>
+
+<ul>
+ <li>Browser Application Programming Interfaces ({{Glossary("API","APIs")}}) — API wbudowane w przeglądarki internetowe, zapewniające takie funkcjonalności jak dynamiczne tworzenie HTML i ustawianie stylów CSS, zbieranie i manipulowanie strumieniem wideo z kamery internetowej użytkownika lub generowanie grafiki 3D i próbek audio.</li>
+ <li>API innych firm umożliwiające programistom dołączenie do swoich witryn funkcjonalności pochodzących od innych dostawców treści, takich jak Twitter czy Facebook.</li>
+ <li>Frameworki i biblioteki innych firm zewnętrznych, które możesz  wykorzystać w swoim kodzie HTML, by umożliwić sobie szybkie tworzenie witryn i aplikacji internetowych.</li>
+</ul>
+
+<p>Ponieważ ten artykuł ma być jedynie lekkim wprowadzeniem do JavaScript, nie będziemy mieszać Ci na tym etapie mówiąc szczegółowo o tym, jaka jest różnica między jądrem języka JavaScript, a różnymi narzędziami wymienionymi powyżej. Możesz później nauczyć się tego wszystkiego szczegółowo, w naszym <a href="/en-US/docs/Learn/JavaScript">JavaScript learning area</a> i w pozostałych artykułach MDN.</p>
+
+<p>Poniżej przedstawimy kilka aspektów podstaw języka, będziesz miał także okazje pobawić się kilkoma funkcjonalnościami interfejsu API przeglądarki. Baw się dobrze!</p>
+
+<h2 id="Przykład_hello_world">Przykład "hello world"</h2>
+
+<p>Powyższa sekcja może brzmieć naprawdę ekscytująco i tak powinno być — JavaScript jest jedną z najbardziej żywych technologii internetowych i kiedy zaczniesz się nią dobrze posługiwać to twoje witryny internetowe wejdą w nowy wymiar mocy i kreatywności.</p>
+
+<p>Jednak uzyskanie poczucia komfortu w używaniu JavaScript jest trudniejsze niż w przypadku korzystania z HTML i CSS. Być może lepiej będzie zacząć powoli i kontynuować pracę za pomocą małych konsekwentnych kroków. Na początek pokażemy, jak dodać podstawowy kod JavaScript do Twojej strony tworząc przykład "hello world!" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">standard w podstawowych przykładach programowania</a>).</p>
+
+<div class="warning">
+<p><strong>Ważne</strong>: Jeśli nie podążałeś za wcześniejszą częścią naszego kursu, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">pobierz ten przykładowy kod</a> i użyj go jako punktu wyjścia.</p>
+</div>
+
+<ol>
+ <li>Po pierwsze, przejdź do swojej strony testowej i utwórz nowy folder o nazwie „scripts” (bez cudzysłowów). Następnie w nowym folderze skryptów utwórz nowy plik o nazwie <code>main.js</code>. Zapisz go w folrderze <code>scripts</code>.</li>
+ <li>Następnie w pliku <code>index.html</code> wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu <code>&lt;/body&gt;</code>:
+  <pre>&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>W zasadzie, ten kod działa identycznie, jak element {{htmlelement("link")}} w CSS — dodaje JavaScript do strony, więc może mieć wpływ na HTML (wraz z CSS i czymkolwiek innym na stronie).</li>
+ <li>Teraz dodaj następujący kod do pliku <code>main.js</code>:
+  <pre>var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj <code>index.html</code> w przeglądarce. Powinieneś zobaczyć coś takiego:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png"></li>
+</ol>
+
+<div class="note">
+<p><strong>Notatka</strong>: Powód, dla którego wstawiliśmy element {{htmlelement("script")}} w dolnej części pliku HTML jest to, że elementy w HTML są ładowane przez przeglądarkę w kolejności pojawienia się ich w pliku. Jeśli JavaScript jest ładowany jako pierwszy i ma wpływać na HTML poniżej, może to nie zadziałać, ponieważ JavaScript byłby ładowany przed HTML na którym ma pracować. Dlatego umieszczenie kodu JavaScript w dolnej części strony HTML jest często najlepszą strategią.</p>
+</div>
+
+<h3 id="Co_się_wydarzyło">Co się wydarzyło?</h3>
+
+<p>Twój tekst nagłówka został zmieniony na "Hello world!" przy użyciu JavaScript. Zrobiłeś to najpierw, używając funkcji zwanej <code>{{domxref("Document.querySelector", "querySelector()")}}</code> by chwycić referencje do nagłówka i przechowywać ją w zmiennej o nazwie <code>myHeading</code>. Jest to bardzo podobne do tego, co zrobiliśmy przy użyciu selektorów CSS. Kiedy chcesz coś zrobić z elementem, najpierw musisz go wybrać.</p>
+
+<p>Następnie ustawiłeś wartość właściwości<code>{{domxref("Node.textContent", "textContent")}}</code> zmiennej <code>myHeading</code> (która reprezentuje zawartość nagłówka) na "Hello world!".</p>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Obie funkcje, których używałeś powyżej, są częścią <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, który pozwala na manipulowanie treścią strony.</p>
+</div>
+
+<h2 id="Podstawy_języka">Podstawy języka</h2>
+
+<p>Wytłumaczmy niektóre podstawowe cechy języka JavaScript, aby lepiej zrozumieć, jak to wszystko działa. Warto zauważyć, że te cechy są wspólne dla wszystkich języków programowania, więc jeśli opanujesz te podstawy, jesteś na dobrej drodze aby móc programować w czymkolwiek!</p>
+
+<div class="warning">
+<p><strong>Ważne</strong>: W tym artykule spróbuj wprowadzać przykładowe linie kodu do konsoli JavaScript, aby zobaczyć, co się zdarzy. Więcej informacji na temat konsoli JavaScript można znaleźć w sekcji <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p>
+</div>
+
+<h3 id="Zmienne">Zmienne</h3>
+
+<p>{{Glossary("Variable", "Zmienne")}} są kontenerami w których można zapisywać wartości. Zacznij od zadeklarowania zmiennej za pomocą słowa kluczowego <code>var</code>, a następnie dowolnej nazwy, której chcesz użyć:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Średnik na końcu wiersza wskazuje, gdzie kończy się instrukcja; jest to bezwzględnie wymagane tylko w przypadku, gdy musisz oddzielić poszczególne instrukcje w jednej linii. Jednak niektórzy uważają, że dobrą praktyką jest umieszczenie ich pod koniec każdej instrukcji. Istnieją inne zasady kiedy należy, a kiedy nie powinno się ich używać — po więcej szczegółów zobacz <a href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Możesz dowolnie nazwać zmienną, ale istnieją pewne zastrzeżone nazwy (zobacz <a href="http://www.codelifter.com/main/tips/tip_020.shtml">w tym artykule o regułach nazewnictwa zmiennych</a>). Jeśli nie jesteś pewien, <a href="https://mothereff.in/js-variables">możesz sprawdzić nazwę zmiennej</a>, aby upewnić się, czy jest prawidłowa.</p>
+</div>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: JavaScript rozróżnia małe i duże litery — <code>myVariable</code>jest inną zmienną niż <code>myvariable</code>. Jeśli pojawiają się problemy w kodzie, sprawdź wielkość liter!</p>
+</div>
+
+<p>Po zadeklarowaniu zmiennej możesz nadać jej wartość:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Jeśli chcesz, możesz wykonać obydwie operacje w tej samej linii:</p>
+
+<pre>var myVariable = 'Bob';</pre>
+
+<p>Możesz pobrać wartość przez wywołanie zmiennej po nazwie:</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Po podaniu wartości zmiennej można ją później zmienić:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Warto zauważyć, że zmienne mają różne <a href="/en-US/docs/Web/JavaScript/Data_structures">typy danych</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Typ</th>
+   <th scope="col">Wyjaśnienie</th>
+   <th scope="col">Przykład</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Sekwencja tekstu znana jako ciąg znaków. Aby potwierdzić, że zmienna jest ciągiem, należy zamknąć jej wartość w apostrofach.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Liczba. Liczb nie zamyka się w apostrofach.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Prawda / Fałsz. Słowa <code>true</code> i <code>false</code> to specjalne słowa kluczowe w JS i nie potrzebują apostrofów.</td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Konstrukcja, która pozwala na przechowywanie wielu wartości w jednym odniesieniu.</td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Odwołaj się do każdego elementu tej tablicy:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, itd.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>Zasadniczo cokolwiek. Wszystko w JavaScript jest obiektem i może być przechowywane w zmiennej. Pamiętaj o tym podczas nauki.</td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    Również wszystkie powyższe przykłady.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Więc dlaczego potrzebujemy zmiennych? Cóż, zmienne są potrzebne, aby zrobić cokolwiek interesującego w programowaniu. Jeśli nie moglibyśmy zmieniać wartości, to nie możnaby zrobić nic dynamicznego, jak personalizacja powitania lub zmiana wyświetlanego obrazu w galerii.</p>
+
+<h3 id="Komentarze">Komentarze</h3>
+
+<p>Możesz umieścić komentarze w kodzie JavaScript, tak samo jak w CSS:</p>
+
+<pre class="brush: js">/*
+Wszystko pomiędzy to komentarz.
+*/</pre>
+
+<p>Jeśli Twój komentarz nie zawiera przerw między wierszami, często łatwiej jest umieścić go za dwoma ukośnikami:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// To jest komentarz
+</pre>
+
+<h3 id="Operatory">Operatory</h3>
+
+<p><code>{{Glossary("Operator")}}</code> jest symbolem matematycznym, który generuje wynik w oparciu o dwie wartości (lub zmienne). W poniższej tabeli można zobaczyć niektóre z najprostszych operatorów oraz kilka przykładów, które można wypróbować w konsoli JavaScript.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operator</th>
+   <th scope="col">Wyjaśnienie</th>
+   <th scope="col">Symbole</th>
+   <th scope="col">Przykład</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Dodawanie</th>
+   <td>Służy do dodawania dwóch liczb lub sklejenia dwóch ciągów znaków.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Odejmowanie, Mnożenie, Dzielenie</th>
+   <td>Robią to, co można oczekiwać od nich w podstawowej matematyce.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // mnożenie w JS jest gwiazdką<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Przypisanie wartości</th>
+   <td>Widzieliście już to: przypisuje wartość zmiennej.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Znak równości</th>
+   <td>Wykonuje test sprawdzający, czy dwie wartości są sobie równe i zwraca wynik <code>true</code> / <code>false</code> (Boolean).</td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Zaprzeczenie, Nie równa się</th>
+   <td>Zwraca logicznie odwrotną wartość tego, co poprzedza; zmienia <code>true</code> w <code>false</code>, itd. Kiedy jest używany wraz z operatorem równości, operator negacji sprawdza, czy dwie wartości <em>nie</em> są równe.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Podstawowe wyrażenie jest <code>true</code>, ale porównanie zwraca <code>false</code>, ponieważ zostało ono zanegowane:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Tu testujemy "czy <code>myVariable</code> NIE równa się 3". To zwraca wartość <code>false</code> ponieważ <code>myVariable</code> JEST równa 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Istnieje wiele więcej operatorów, ale to wystarczy na razie. Jeśli chcesz zobacz pełną listę sprawdź w <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a>.</p>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: Mieszanie typów danych może powodować dziwne efekty podczas wykonywania obliczeń, dlatego należy uważać, aby prawidłowo odwoływać się do zmiennych i uzyskać spodziewane wyniki. Na przykład wprowadź <code>"35" + "25"</code> do konsoli. Dlaczego nie dostaniesz oczekiwanego rezultatu? Ponieważ znaki cudzysłowów zmieniają liczby w ciągi znaków, więc skończyłeś na łączeniu łańcuchów zamiast dodawać liczby. Jeśli wpiszesz, <code>35 + 25</code> otrzymasz poprawny wynik.</p>
+</div>
+
+<h3 id="Warunki">Warunki</h3>
+
+<p>Warunkami są struktury kodu, które pozwalają na sprawdzenie, czy wyrażenie zwraca <code>true</code>, czy nie, i uruchamia inny kod ujawniony przez jego wynik. Bardzo popularną formą warunku są instrukcje <code>if ... else</code>. Na przykład:</p>
+
+<pre class="brush: js">var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p>Wyrażenie wewnątrz <code>if (...)</code> jest testem — który używa operatora tożsamości (opisanego powyżej) w celu porównania zmiennej <code>iceCream</code> z ciągiem znaków <code>chocolate</code>, aby sprawdzić, czy te dwa są równe. Jeśli to porównanie zwróci <code>true</code>, uruchomiony zostanie pierwszy blok kodu. Jeśli porównanie nie jest prawdziwe, pierwszy blok jest pomijany, a drugi blok kodu, po wywołaniu <code>else</code>, jest uruchamiany.</p>
+
+<h3 id="Funkcje">Funkcje</h3>
+
+<p>{{Glossary("Function", "Funkcje")}} są sposobem na zapakowanie funkcjonalności, które chcesz wykorzystać ponownie. Gdy potrzebujesz procedury, zamiast pisać cały kod za każdym razem, możesz wywołać funkcję z nazwą funkcji. Powyżej widzieliście już niektóre zastosowania funkcji, na przykład:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>Funkcje te, <code>document.querySelector</code> i <code>alert</code>, są wbudowane w przeglądarkę, aby używać w dowolnym momencie.</p>
+
+<p>Jeśli widzisz coś, co wygląda jak nazwa zmiennej, ale ma nawiasy — <code>()</code> — po niej, to prawdopodobnie jest to funkcja. Funkcje często biorą {{Glossary("Argument", "argumenty")}} — bity danych potrzebne do wykonywania ich pracy. Znajdują się one w nawiasach, oddzielone przecinkami jeśli jest więcej niż jeden argument.</p>
+
+<p>Na przykład, funkcja <code>alert ()</code> powoduje pojawienie się okna podręcznego wewnątrz okna przeglądarki, ale musimy dać mu ciąg znaków jako argument, aby powiedzieć użytkownikowi o tym, co należy wyświetlić w wyskakującym okienku.</p>
+
+<p>Dobrą wiadomością jest możliwość zdefiniowania własnych funkcji — w następnym przykładzie napiszemy prostą funkcję, która przyjmuje dwie liczby jako argumenty i mnoży je:</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Spróbuj uruchomić powyższą funkcję w konsoli, a następnie przetestuj kilka argumentów. Na przykład:</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Zanotuj</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> informuje przeglądarkę o zwróceniu zmiennej <code>result</code> z funkcji, dzięki czemu jest ona dostępna. Jest to konieczne, ponieważ zmienne zdefiniowane wewnątrz funkcji są dostępne tylko w tych funkcjach. Jest to tak zwany {{Glossary("Scope", "zakres")}} zmiennej. (Poczytaj <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">więcej o zakresie zmiennej</a>.)</p>
+</div>
+
+<h3 id="Zdarzenia">Zdarzenia</h3>
+
+<p>Prawdziwa interaktywność na stronie internetowej potrzebuje zdarzeń. Są to struktury kodu nasłuchające rzeczy, które dzieją się w przeglądarce i uruchamiajace kod w odpowiedzi. Najbardziej oczywistym przykładem jest zdarzenie kliknięcia, które jest uruchamiane przez przeglądarkę po kliknięciu na coś za pomocą myszy. Aby to zademonstrować, wpisz następujący kod w konsoli, a następnie kliknij na bieżącej stronie internetowej:</p>
+
+<pre>document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>Istnieje wiele sposobów dołączania zdarzenia do elementu. Tutaj wybieramy element {{htmlelement("html")}} i ustawiamy obsługę jego właściwości <code>onclick</code> równą funkcji anonimowej (tj. bezimiennej), która zawiera kod, który ma być uruchamiany.</p>
+
+<p>Zauważ że</p>
+
+<pre>document.querySelector('html').onclick = function() {};</pre>
+
+<p>jest równe temu</p>
+
+<pre>var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>To jest po prostu krócej.</p>
+
+<h2 id="Podrasowanie_naszej_przykładowej_strony">Podrasowanie naszej przykładowej strony</h2>
+
+<p>Omówiliśmy kilka podstawowych zasad JavaScript, dodajmy kilka ciekawych funkcji do naszej przykładowej witryny, aby zobaczyć, co jest możliwe.</p>
+
+<h3 id="Dodawanie_zmieniarki_obrazu">Dodawanie zmieniarki obrazu</h3>
+
+<p>W tej sekcji dodajemy dodatkowy obraz do naszej witryny, korzystając z kilku innych funkcji DOM API, używając JavaScript, aby przełączać się między nimi, gdy klikniesz obraz.</p>
+
+<ol>
+ <li>Na samym początku znajdź inne zdjęcie, które chciałbyś pokazać na stronie. Upewnij się, że jest tego samego rozmiaru, co pierwsze - albo przynajmniej jak najbliżej się da.</li>
+ <li>Zachowaj zdjęcie w swoim katalogu <code>images</code>.</li>
+ <li>Nazwij je 'firefox2.png' (bez apostrofów).</li>
+ <li>Otwórz swój plik <code>main.js</code>, następnie dopisz następujący kod (jeżeli nadal znajduje się tam skrypt "witaj, świecie" - usuń go).
+  <pre>var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Zapisz wszystko i otwórz <code>index.html</code> w przeglądarce. Teraz gdy klikniesz na obrazek, zmieni on się w inny!</li>
+</ol>
+
+<p>Przechowujesz odwołanie do elementu {{htmlelement("img")}} w zmiennej <code>myImage</code>. Następnie ustawiasz dla tej zmiennej obsługę zdarzenia <code>onclick</code> jako funkcję bez nazwy (finkcja anonimowa). Teraz za każdym razem, gdy kliknięty zostanie ten element:</p>
+
+<ol>
+ <li>Pobierasz wartość atrybutu <code>src</code> tego obrazu.</li>
+ <li>Za pomocą wyrażenia warunkowego sprawdzasz, czy wartość <code>src</code> jest równa ścieżce do oryginalnego obrazu:
+  <ol>
+   <li>Jeśli tak, zmienisz wartość <code>src</code> na ścieżkę do drugiego obrazu, zmuszając drugi obraz do załadowania do elementu {{htmlelement("img")}}.</li>
+   <li>Jeśli nie (to oznacza, że ​​już musiała się zmienić), wartość <code>src</code> zmienia się z powrotem na ścieżkę oryginalnego obrazu, do stanu oryginalnego.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Dodanie_spersonalizowanej_wiadomości_powitalnej">Dodanie spersonalizowanej wiadomości powitalnej</h3>
+
+<p>Następnie dodamy kolejny fragment kodu, zmieniając tytuł strony na spersonalizowaną wiadomość powitalną, gdy użytkownik po raz pierwszy odwiedzi witrynę. Ta wiadomość powitalna będzie trwała, nawet jeśli użytkownik opuści witrynę, a później wróci - zapiszemy ją za pomocą interfejsu <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Będzie również zawierać opcję zmiany użytkownika, a zatem będziemy mogli zmienić wiadomość powitalną w dowolnym momencie.</p>
+
+<ol>
+ <li>W pliku <code>index.html</code>, dodaj następujący wiersz tuż przed elementem {{htmlelement("script")}}:
+
+  <pre>&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li>Na końcu pliku <code>main.js</code>, umieść następujący kod, dokładnie tak, jak napisano — pobiera on odwołania do nowego przycisku i nagłówka, przechowując je w zmiennych:
+  <pre>var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Teraz dodaj następującą funkcję, aby ustawić spersonalizowane powitanie — to jeszcze nic nie zrobi, ale poprawimy to za chwilę:
+  <pre>function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}</pre>
+  Ta funkcja zawiera funkcję <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, która wyświetla okno dialogowe, przypominające komunikat <code>alert()</code>. Jednak ten komunikat <code>prompt()</code>, prosi użytkownika o wprowadzenie danych i zapisanie ich w zmiennej po naciśnięciu przycisku <strong>OK</strong><em>.</em> W takim przypadku prosimy użytkownika o podanie jego nazwy. Następnie wywołujemy interfejs API o nazwie <code>localStorage</code>, który pozwala nam przechowywać dane w przeglądarce, a następnie je odzyskać. Używamy funkcji <code>setItem()</code> dla localStorage, aby utworzyć i przechować element danych o nazwie <code>'name'</code>, ustawiając jego wartość jako wartość zmiennej <code>myName</code> która zawiera dane wprowadzone przez użytkownika. Na koniec ustawiamy <code>textContent</code> nagłówka jako string, oraz nowo zapisaną nazwę użytkownika.</li>
+ <li>Następnie dodaj poniższy blok <code>if ... else</code>, który możemy nazwać kodem inicjalizacji, ponieważ tworzy strukturę aplikacji podczas pierwszego ładowania:
+  <pre>if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}</pre>
+  W tym bloku najpierw używamy operatora negacji (logiczne NIE, reprezentuje znak wykrzyknika !) aby sprawdzić, czy obiekt <code>name</code> istnieje. Jeśli nie, to uruchamiana jest funkcja <code>setUserName()</code>, aby go utworzyć. Jeśli on istnieje (to znaczy, że użytkownik ustawił go podczas poprzedniej wizyty), pobieramy zapisaną nazwę za pomocą <code>getItem()</code> i ustawiamy <code>textContent</code> nagłówka jako string oraz nazwę użytkownika, podobnie jak robiliśmy to w <code>setUserName()</code>.</li>
+ <li>Na koniec poniższą funkcję przypisujemy do zdarzenia <code>onclick</code> przycisku. Kiedy zostanie on kliknięty, zostanie uruchomiona funkcja <code>setUserName()</code>. Dzięki temu użytkownik może ustawić nową nazwę, kiedy chce, naciskając przycisk:
+  <pre>myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Teraz, kiedy po raz pierwszy odwiedzisz witrynę, poprosi ona o podanie nazwy użytkownika, a następnie otrzymasz spersonalizowaną wiadomość. Możesz zmienić nazwę w dowolnym momencie, naciskając przycisk. Dodatkowym bonusem jest to, że nazwa utrzymuje się po zamknięciu strony, zachowując spersonalizowaną wiadomość przy następnym otwarciu strony! Dzieje się tak, ponieważ nazwa przechowywana jest w localStorage.</p>
+
+<h2 id="Wniosek">Wniosek</h2>
+
+<p>Jeśli wykonałeś wszystkie instrukcje zawarte w tym artykule, powinieneś otrzymać stronę, która wygląda mniej więcej tak (możesz również <a href="https://mdn.github.io/beginner-html-site-scripted/">zobaczyć naszą wersję tutaj</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png"></p>
+
+<p>Jeśli utkniesz, możesz porównać swoją pracę z naszym <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">gotowym przykładowym kodem na GitHub</a>.</p>
+
+<p>Ledwo zarysowaliśmy powierzchnię JavaScript. Jeśli lubisz grać i chcesz posunąć się jeszcze dalej, przejdź do naszego <a href="/pl/docs/Learn/JavaScript">następnego tematu kursu JavaScript</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..ac173eef00
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,124 @@
+---
+title: Publikacja strony internetowej
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - GitHub
+  - Początkujący
+  - Silnik Aplikacji Google
+  - Uczyć się
+  - serwer internetowy
+  - sieć
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your simple sample code online with little effort.</p>
+</div>
+
+<h2 id="Jakie_są_możliwości">Jakie są możliwości?</h2>
+
+<p dir="ltr" id="tw-target-text">Opublikowanie strony internetowej jest tematem złożonym, ponieważ istnieje wiele sposobów, aby to osiągnąć. W tym artykule nie probujemy udokumentować wszystkie możliwe metody. Zamiast tego wyjaśniamy zalety i wady trzech podejść, które są praktyczne dla początkujących. Następnie przechodzimy przez jedną metodę, która może działać od razu dla wielu użytkowników.</p>
+
+<h3 id="Getting_hosting_and_a_domain_name">Getting hosting and a domain name</h3>
+
+<p>To have more control over content and website appearance, most people choose to buy web hosting and a domain name:</p>
+
+<ul>
+ <li>Web hosting is rented file space on a hosting company's <a href="/en-US/Learn/What_is_a_web_server">web server</a>. You put website files on the web server. The web server provides website content to website visitors.</li>
+ <li>A <a href="/en-US/Learn/Understanding_domain_names">domain name</a> is the unique address where people find your website, such as <code>http://www.mozilla.org</code> or <code>http://www.bbc.co.uk</code>. You can rent your domain name for as many years as you want from a <strong>domain registrar</strong>.</li>
+</ul>
+
+<p>Many professional websites go online this way.</p>
+
+<p>In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> for more details) to actually transfer the website files over to the server. FTP  programs vary widely, but generally, you have to connect to your web server using details provided by your hosting company (typically username, password, hostname). Then the program shows you your local files and the web server's files in two windows, and provides a way for you to transfer files back and forth.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Tips_for_finding_hosting_and_domains">Tips for finding hosting and domains</h4>
+
+<ul>
+ <li>MDN does not promote specific commercial hosting companies or domain name registrars. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available.</li>
+ <li>Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments.</li>
+ <li>There are also free services available like <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, and <a href="https://wordpress.com/">WordPress</a>.  Sometimes you get what you pay for, but sometimes these resources are good enough for your initial experiments.</li>
+ <li>Many companies provide hosting and domains.</li>
+</ul>
+
+<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine">Using an online tool like GitHub or Google App Engine</h3>
+
+<p>Some tools let you publish your website online:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for storage in the <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to expose website code live on the web.</li>
+ <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> for more information.</li>
+</ul>
+
+<p>These options are usually free, but you may outgrow the limited feature-set.</p>
+
+<h3 id="Using_a_web-based_IDE_such_as_CodePen">Using a web-based IDE such as CodePen</h3>
+
+<p>There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript, and then display the result of that code as a website — all in one browser tab. Generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features). They host your rendered page at a unique web address. However, the features are limited, and these apps usually don't provide hosting space for assets (like images).</p>
+
+<p>Try playing with some of these examples to find out which one works best for you:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://glitch.com/">Glitch</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publishing_via_GitHub">Publishing via GitHub</h2>
+
+<p>Now let's examine how to easily publish your site via GitHub Pages.</p>
+
+<ol>
+ <li>First of all, <a href="https://github.com/">sign up for GitHub</a> and verify your email address.</li>
+ <li>Next, you need to <a href="https://github.com/new">create a repository</a> to store files.</li>
+ <li>On this page, in the <em>Repository name</em> box, enter <em>username</em>.github.io, where <em>username</em> is your username. For example, our friend Bob Smith would enter <em>bobsmith.github.io</em>.<br>
+  Check the "<em>Initialize this repository with a README" </em>box. Then click <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Drag and drop the content of your website folder into your repository. Then click <em>Commit changes</em>.<br>
+
+  <div class="note">
+  <p><strong>Note</strong>: Make sure your folder has an <code>index.html</code> file.</p>
+  </div>
+ </li>
+ <li>
+  <p>Navigate your browser to <em>username</em>.github.io to see your website online. For example, for the username <em>chrisdavidmills</em>, go to <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.</p>
+  </div>
+ </li>
+</ol>
+
+<p>To learn more, see <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>
+
+<h2 id="Further_reading">Further reading</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="W_tym_module"><font><font>W tym module</font></font></h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>Instalowanie podstawowego oprogramowania</font></font></a></li>
+ <li id="What_will_your_website_look_like"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><font><font>Jak będzie wyglądać Twoja strona internetowa?</font></font></a></li>
+ <li id="Dealing_with_files"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>Radzenie sobie z plikami</font></font></a></li>
+ <li id="HTML_basics"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics"><font><font>Podstawy HTML</font></font></a></li>
+ <li id="CSS_basics"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics"><font><font>Podstawy CSS</font></font></a></li>
+ <li id="JavaScript_basics"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics"><font><font>Podstawy JavaScript</font></font></a></li>
+ <li id="Publishing_your_website"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website"><font><font>Publikowanie Twojej witryny</font></font></a></li>
+ <li id="How_the_web_works"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>Jak działa internet</font></font></a></li>
+</ul>
diff --git a/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..da94d8989d
--- /dev/null
+++ b/files/pl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,99 @@
+---
+title: Jak będzie wyglądała twoja strona internetowa?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Assets
+  - Beginner
+  - Composing
+  - Content
+  - Deprecated
+  - Design
+  - Fonts
+  - Learn
+  - Simple
+  - 'l10n:priority'
+  - step by step
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<p><em>Jak będzie wyglądać twoja strona internetowa?</em> Omawia prace planistyczne i projektowe, które trzeba wykonać przed rozpoczęciem pisania kodu, w tym "Jakie informacje zawiera moja strona internetowa?", "Jakich czcionek i kolorów chcę użyć?" oraz "Co robi moja strona?".</p>
+
+<hr>
+<h2 id="Pierwsza_sprawa_planowanie">Pierwsza sprawa: planowanie</h2>
+
+<p>Zanim cokolwiek zrobisz, potrzebujesz kilku pomysłów. Co właściwie powinna robić twoja strona? Strona internetowa może robić w zasadzie wszystko, ale przy pierwszej próbie lepiej zachować prostotę. Zaczniemy od stworzenia prostej strony internetowej z nagłówkiem, obrazem i kilkoma akapitami.</p>
+
+<p>Na początek, musisz odpowiedzieć sobie na te pytania:</p>
+
+<ol>
+ <li><strong>O czym jest twoja strona internetowa?</strong> Lubisz psy, Nowy York albo Pac-Mana?</li>
+ <li><strong>Jakie informacje prezentujesz na ten temat?</strong> Napisz tytuł i kilka akapitów i pomyśl o obrazku, który chcesz pokazać na swojej stronie.</li>
+ <li><strong>Jak wygląda twoja strona internetowa</strong>, w prostych, ogólnych założeniach. Jaki jest kolor tła? Jaka czcionka jest odpowiednia: formalna, kreskówkowa, pogrubiona i donośna, subtelna?</li>
+</ol>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Złożone projekty wymagają dokładnych wytycznych, które zagłębiają się we wszystkie szczegóły dotyczące kolorów, czcionek, odstępów między elementami na stronie, odpowiedniego stylu pisania itd. Nazywa się to czasem przewodnikiem projektanta, systemem projektowania lub księgą marki, a przykład można zobaczyć w systemie projektowania <a href="https://design.firefox.com/photon/">Firefox Photon Design System</a>.</p>
+</div>
+
+<hr>
+<h2 id="Szkicowanie_twojego_projektu">Szkicowanie twojego projektu</h2>
+
+<p>Następnie złap za ołówek i papier i naszkicuj z grubsza, jak chcesz, aby twoja strona wyglądała. Na pierwszej prostej stronie internetowej, nie ma zbyt wiele do szkicowania, ale należy już teraz wyrobić sobie ten nawyk. To naprawdę pomaga — nie musisz być jak Van Gogh!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Nawet przy prawdziwych, skomplikowanych stronach internetowych, zespoły projektowe zazwyczaj rozpoczynają od szkiców wstępnych na papierze, a następnie budują cyfrowe makiety przy użyciu edytora graficznego lub technologii sieciowych.</p>
+
+<p>W skład zespołów webowych często wchodzi zarówno grafik, jak i projektant {{Glossary("UX", "doświadczeń użytkownika")}} (UX). Graficy przygotowują wizualizacje strony internetowej. Projektanci UX mają nieco bardziej abstrakcyjną rolę w zajmowaniu się tym, jak użytkownicy będą doświadczać i wchodzić w interakcję ze stroną internetową.</p>
+</div>
+
+<hr>
+<h2 id="Dobieranie_zasobów">Dobieranie zasobów</h2>
+
+<p>W tym momencie warto zacząć kompletować treść, która ma pojawić się na twojej stronie.</p>
+
+<h3 id="Tekst">Tekst</h3>
+
+<p>Nadal powinieneś mieć te kilka paragrafów i tytuł przygotowany wcześniej. Miej je w zanadrzu.</p>
+
+<h3 id="Kolor_motywu_strony">Kolor motywu strony</h3>
+
+<p>Aby wybrać kolor, użyj <a href="https://www.w3schools.com/colors/colors_picker.asp">tej strony, przygotowanej przez W3Schools</a> i znajdź kolor, jaki ci się podoba. Kiedy klikniesz na wybrany kolor, zobaczysz dziwny, sześciocyfrowy kod, jak np. <code>#660066</code>. To jest tzw. <em>kod</em> <em>hexadecymalny </em>(ang. hex code), który reprezentuje twój kolor. Na razie skopiuj go w jakieś bezpieczne miejsce.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="Obrazy">Obrazy</h3>
+
+<p>Aby wybrać jakiś obraz, odwiedź <a href="https://www.google.com/imghp?gws_rd=ssl">Grafikę Google</a> i znajdź coś, co ci odpowiada.</p>
+
+<ol>
+ <li>Kiedy wybierzesz jakiś obraz, kliknij na niego aby zobaczyć go w większym rozmiarze.</li>
+ <li>Kliknij na obraz prawym klawiszem myszy (Ctrl + klik na Macu), wybierz <em>Zapisz obraz jako...</em> i wybierz miejsce na komputerze, gdzie chcesz go zapisać. Możesz też skopiować adres URL obrazu, z paska adresowego twojej przeglądarki, aby mieć go pod ręką i skorzystać z niego w przyszłości</li>
+</ol>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/04/30/16599/62acc9942836dde3dac0a857fcd7dcd9/updated-google-images.png" style="height: 636px; width: 750px;"></p>
+
+<p>Pamiętaj jednak o tym, że większość obrazów w internecie, również tych w Grafice Google, jest chronione prawami autorskimi. Żeby zminimalizować prawdopodobieństwa naruszenia czyichś praw, możesz skorzystać z narzędzi filtrowania Google. Kliknij w przycisk <em>Narzędzia</em>, następnie w <em>Prawa użytkowania</em> i wybierz <em>Oznaczone do ponownego wykorzystania </em></p>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/04/30/16598/93d8101cce495b0149b51d452ed97f31/updated-google-images-licensing.png" style="height: 401px; width: 750px;"></p>
+
+<h3 id="Czcionki">Czcionki</h3>
+
+<p>Aby wybrać czcionkę:</p>
+
+<ol>
+ <li>Odwiedź witrynę <a href="http://www.google.com/fonts">Google Fonts</a> i poszukaj takiej czcionki, która ci odpowiada. Aby ułatwić sobie wyszukiwanie, możesz skorzystać z filtrów, które znajdują się po prawej stronie.</li>
+ <li>Kliknij <em>znaczek plusa</em> obok nazwy czcionki, która ci się podoba.</li>
+ <li>Kliknij na panel, który pojawi się na dole strony.</li>
+ <li>Skopiuj kod, który się pojawił i zapisz go dla późniejszego użycia</li>
+</ol>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2016/09/12/13871/4b391a133a9f3a7ab34476d70c0b16a2/font1.png" style="height: 1016px; width: 1697px;"></p>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2016/09/12/13873/acf07297222686c37649eda5c1e4b8e2/font2.png" style="height: 714px; width: 705px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/pl/learn/html/howto/index.html b/files/pl/learn/html/howto/index.html
new file mode 100644
index 0000000000..5343bdbaad
--- /dev/null
+++ b/files/pl/learn/html/howto/index.html
@@ -0,0 +1,155 @@
+---
+title: Use HTML to solve common problems
+slug: Learn/HTML/Howto
+tags:
+  - CodingScripting
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure">Basic structure</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hyperlinks">Hyperlinks</h3>
+
+<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Images_multimedia">Images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_styling">Scripting &amp; styling</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms">Forms</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Tabular_information">Tabular information</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
+</ul>
+
+<h3 id="Data_representation">Data representation</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Interactivity">Interactivity</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Advanced_images_multimedia">Advanced images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+</ul>
+
+<h3 id="Internationalization">Internationalization</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
+</ul>
+
+<h3 id="Performance">Performance</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/pl/learn/html/howto/use_data_attributes/index.html b/files/pl/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..9cd0b47a1c
--- /dev/null
+++ b/files/pl/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,82 @@
+---
+title: Używanie atrybutów danych
+slug: Learn/HTML/Howto/Use_data_attributes
+tags:
+  - Atrybuty data
+  - HTML5
+  - Web
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>
+
+
+<p>{{LearnSidebar}}<br>
+ <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> został zaprojektowany z myślą o rozszerzalności dla danych, które powinny być powiązane z konkretnym elementem, ale nie muszą mieć określonego znaczenia. <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset">Atrybuty <code>data-*</code></a> pozwalają nam przechowywać dodatkowe informacje w standardowych, semantycznych elementach HTML bez zbędnych obejść takich jak niestandardowe atrybuty, dodatkowe właściwości w DOMie, lub używanie {{domxref("Node.setUserData()")}}.</p>
+</div>
+
+<h2 id="Składnia_HTML">Składnia HTML</h2>
+
+<p>Składnia jest prosta. Jakikolwiek atrybut, którego nazwa zaczyna się od <code>data-</code> jest atrybutem danych. Powiedzmy, że masz element taki jak <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">article</span></font>, w którym chcesz przechowywać dodatkowe dane. W tym celu możesz użyć atrybutu <code>data</code> :</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Dostęp_w_JavaScript">Dostęp w JavaScript</h2>
+
+<p>Odczytanie wartości tych atrybutów w <a href="/en-US/docs/Web/JavaScript">JavaScript</a> jest także bardzo proste. Mógłbyś użyć {{domxref("Element.getAttribute", "getAttribute()")}} podając pełną nazwę HTML atrybutów by je odczytać, jednakże standard wskazuje na łatwiejszą metodę: {{domxref("DOMStringMap")}} można odczytać przez właściwość {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>By odczytać atrybut <code>data</code> przez obiekt <code>dataset</code>, użyj części nazwy atrybutu zaraz po <code>data-</code> (pauzy zamieniane są na camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Każda wartość jest łańcuchem znaków i może zostać odczytania i zapisana. W powyższym przykładzie, użycie <code>article.dataset.columns = 5</code> zamieni wartość tego atrybutu na <code>"5"</code>.</p>
+
+<h2 id="Dostęp_w_CSS">Dostęp w CSS</h2>
+
+<p>Warto zwrócić uwagę, że atrybuty danych to zwyczajne atrybuty HTML, więc można się do nich dostać w <a href="/en-US/docs/Web/CSS">CSS-ie</a>. By np. pokazać zawartość takiego atrybutu można użyć <a href="/en-US/docs/Web/CSS/content">content</a> w CSS z funkcją {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Możesz też użyć <a href="/en-US/docs/Web/CSS/Attribute_selectors">selektorów atrybutu</a> w CSS by zmienić styl głównego elementu w zależności od wartości atrybutów danych:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Możesz zobaczyć jak to działa <a href="http://jsbin.com/ujiday/2/edit">w tym przykładzie na JSBin</a>.</p>
+
+<p>Atrybuty danych można także używać do przechowywania danych, które stale się zmieniają, jak np. wyniki w grze. Używając selektorów CSS oraz JavaScript pozwala uzyskać fajne efekty bez pisania żmudnych procedur wyświetlania. Zobacz <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">to nagranie</a> dla przykładu użycia wygenerowanej treści i przejść w CSS-ie (<a href="http://jsbin.com/atawaz/3/edit">przykład na JSBin</a>).</p>
+
+<p>Wartości tych atrybutów to łańcuchy znakow. Wartości numeryczne należy opakować w cudzysłów w selektorze by zostały one uwzględnione.</p>
+
+<h2 id="Problemy">Problemy</h2>
+
+<p>Nie należy przechowywać w atrybutach danych treści, które powinny być widoczne dla użytkownika, ponieważ programy ułatwiające dostęp nie będą mogły się do nich dostać. Ponadto wyszukiwarki mogą nie indeksować wartości atrybutów danych.</p>
+
+<p>Najważniejszym problemem jaki należy wziąć pod uwagę to wydajność i wsparcie w  przeglądarce Internet Explorer. Internet Explorer 11+ wspiera standard atrybutu danych, ale wcześniejsze wersje <a href="http://caniuse.com/#feat=dataset">nie wspierają obiektu <code>dataset</code></a>. By wykorzystywać atrybuty danych w IE 10 i wcześniejszych wersach, musisz użyć {{domxref("Element.getAttribute", "getAttribute()")}}. Dodatkowo <a href="http://jsperf.com/data-dataset">wydajność czytania atrybutów danych</a> jest gorsza od trzymania danych w zwyczajnych obiektach JS.</p>
+
+<p>Pomimo to, atrybuty danych są świetnym rozwiązaniem dla obsługi meta danych powiązanych z elementami HTML.</p>
+
+<p>W Firefox 49.0.2 (i być może w nowszych lub starszych wersjach), atrybuty danych które przekraczają 1022 znaków nie zostaną odczytane przez Javascript (EcmaScript 4).</p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<ul>
+ <li>Ten artykuł jest oparty na <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS pochodzącego z hacks.mozilla.org</a>.</li>
+ <li>Atrybuty są także wspierane w SVG 2; zobacz {{domxref("SVGElement.dataset")}} i {{SVGAttr("data-*")}}.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>
diff --git a/files/pl/learn/html/index.html b/files/pl/learn/html/index.html
new file mode 100644
index 0000000000..e0fc65c2c9
--- /dev/null
+++ b/files/pl/learn/html/index.html
@@ -0,0 +1,50 @@
+---
+title: HTML
+slug: Learn/HTML
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Aby budować strony internetowe, powinneś znać {{Glossary('HTML')}} — podstawową technologię wykorzystywaną do definiowania struktury strony internetowej. HTML służy do określania, czy treść internetowa powinna być rozpoznawana jako akapit, lista, nagłówek, link, obraz, odtwarzacz multimedialny, formularz lub jeden z wielu innych dostępnych elementów lub nawet nowego elementu, który definiujesz.</p>
+
+<h2 id="Ścieżka_nauczania">Ścieżka nauczania</h2>
+
+<p>Najlepiej zacząć naukę, ucząc się HTML. Zacznij od czytania wstępnych treści. Możesz następnie przejść do nauki o bardziej zaawansowanych tematach, takich jak:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li>
+ <li><a href="/en-US/docs/Learn/CSS">CSS</a>, i jak używać go do stylu naszej strony (na przykład zmienić rozmiar czcionki, dodać obramowania i cienie, układać stronę z wieloma kolumnami, dodać animacje i inne efekty wizualne).</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, i jak go używać, żebyś mógł dodać dynamiczną funkcjonalność do stron internetowych (na przykład znaleźć swoją lokalizację i sprecyzować ją na mapie, stworzyć efekty specjalnie, gdy przełączasz przycisk, zapisujesz dane użytkowników lokalnie na swoich komputerach i wiele, wiele więcej.)</li>
+</ul>
+
+<p>Przed rozpoczęciem tego tematu należy mieć co najmniej podstawową znajomość korzystania z komputerów i używać pasywnej sieci Web (tzn. po prostu przeglądać internet). Powinieneś mieć podstawowe środowisko pracy skonfigurowane tak, jak to szczegółowo zostało opisane w części Instalowanie podstawowego oprogramowania i zrozumieć, jak tworzyć i zarządzać plikami, jak opisano szczegółowo w radzeniu sobie z plikami - są częścią naszego Pierwszego kroku z modułami dla początkujących.</p>
+
+<p>Zalecane jest abyś przerobił <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>zanim podejdziesz do tego tematu, jednak nie jest to absolutnie konieczne; wiele z tego, co występuje w artykule <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> jest również wyjaśnione w module <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>, aczkolwiek dużo bardziej szczegółowo.</p>
+
+<h2 id="Moduły">Moduły</h2>
+
+<p>W tym temacie znajdziesz następujące moduły, w sugerowanej kolejności ich przerabiania. Z całą pewnością powinieneś zacząć od pierwszego.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Wstęp to HTML</a></dt>
+ <dd>Ten moduł pozwoli ci poznać podstawy, przyzwyczaić się do używanych pojęć i składni a także zobaczyć w jaki sposób używa się języka HTML do określania właściwości tekstu, tworzenia hiperłączy i definiowania struktury strony internetowej.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt>
+ <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms_and_buttons">Forms and buttons</a></dt>
+ <dd>Forms and buttons are a very important part of the Web — these allow your site visitors to input data and send it to you (e.g. registration, login and feedback forms), and you to implement controls for controlling complex functionality (for example submitting a form to the server, or pausing playback of a video.) This module gets you started.</dd>
+ <dt>Tables (TBD)</dt>
+ <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd>
+</dl>
+
+<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2>
+
+<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p>
+
+<h2 id="See_also">See also</h2>
+
+<div class="document-head" id="wiki-document-head">
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN.</dt>
+ <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd>
+</dl>
+</div>
diff --git a/files/pl/learn/html/introduction_to_html/getting_started/index.html b/files/pl/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..1f40b24429
--- /dev/null
+++ b/files/pl/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,763 @@
+---
+title: Rozpoczynanie pracy z HTML
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+</div>
+
+<p class="summary">W tym artykule omówimy podstawy HTMLa. Żeby ułatwić ci rozpoczęcie nauki, zapoznamy się z elementami, atrybutami i innymi ważnymi terminami, które być może obiły ci się o uszy. Opowiemy też, jak te terminy odnoszą się do HTMLa. Nauczysz się jaką strukturę mają elementy wykorzystywane w HTMLu, jak wygląda struktura całej strony oraz poznasz inne ważne właściwości języka. W międzyczasie będzie okazja, aby też samemu poeksperymentować z pisaniem kodu!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Warunki wstępne:</th>
+   <td>Podstawowa umiejętność obsługi komputera, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">posiadanie podstawowego oprogramowania</a> oraz typowa wiedza jak <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">pracować z plikami</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Zapoznanie się z językiem HTML oraz zastosowanie w praktyce kilku jego elementów</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Czym_jest_HTML">Czym jest HTML?</h2>
+
+<p>{{glossary("HTML")}} (Hypertext Markup Language) nie jest językiem programowania. Jest to <em>język znaczników</em>, który mówi przeglądarce jaką strukturę ma strona, którą odwiedzasz. Może być ona albo bardzo skomplikowana albo bardzo prosta. Zależy to wyłącznie od osoby piszącej stronę. Na HTML składa się kolekcja {{glossary("Element", "elementów")}}, która służy do opisywania i grupowania treści, dzięki której zachowuje się ona, lub wygląda, w określony sposób. Okalające treść {{glossary("Tag", "tagi")}} mogą sprawić, że treść stanie się ona hiperłączem do innej strony, zostanie napisana kursywą oraz wiele innych rzeczy. Dla przykładu, spójrzmy na ten tekst:</p>
+
+<pre class="notranslate">Mój kot jest bardzo humorzasty</pre>
+
+<p>Jeżeli chcielibyśmy aby ten tekst się wyróżniał, możemy wydzielić go do oddzielnego akapitu, za pomocą elementu {{htmlelement("p")}}:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mój kot jest bardzo humorzasty&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Notka</strong>: Tagi HTMLa nie rozróżniają wielkości liter. Dla przykładu, tag {{htmlelement("title")}} może zostać zapisany jako <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</code>, etc. i nadal będzie działał. Jednakże dobrą praktyką jest pisanie nazw tagów małą literą, dla spójności, czytelność i kilku innych powodów</p>
+</div>
+
+<h2 id="Anatomia_elementu_HTML">Anatomia elementu HTML</h2>
+
+<p>Zagłębmy się w nasz akapit, który napisaliśmy w poprzedniej sekcji:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Anatomia tego elementu to:</p>
+
+<ul>
+ <li><strong>Tag otwierający:</strong> Składa się z nazwy elementu (w naszym przypadku <em>p</em>, pochodzącej od angielskiego słowa określającego akapit - <em>paragraph</em>), otoczonej nawiasami ostrokątnymi. Tag otwierający określa gdzie element się zaczyna, w tym przypadku gdzie zaczyna się akapit</li>
+ <li><strong>Zawartość:</strong> Jest nią to, co element ma przechowywać. W tym przypadku jest to treść akapitu</li>
+ <li><strong>Tag zamykający:</strong> Wygląda tak samo jak tag otwierający, z wyjatkiem posiadana przed nazwą ukośnika. Określa gdzie element się kończy. Jego brak może skutkować dziwacznymi błędami, więc szczególnie na początku nauki należy pamiętać o jego umieszczeniu</li>
+</ul>
+
+<p>Podsumowując: Element to tag otwierający, po którym następuje jego treść, a po treści znajduje się tag zamykający</p>
+
+<h3 id="Aktywne_uczenie_się_tworzenie_twojego_pierwszego_elementu_HTML">Aktywne uczenie się: tworzenie twojego pierwszego elementu HTML</h3>
+
+<p>Zedytuj poniższą linijkę, otaczając ją tagami <code>&lt;em&gt;</code> oraz <code>&lt;/em&gt;.</code> Aby określić początek elementu, umieść tag otwierający <code>&lt;em&gt;</code> na początku linijki. Aby określić koniec elementu, umieść tag zamykający <code>&lt;/em&gt;</code> na końcu linijki. Zrobienie tego powinno pokazać linijkę tekstu wypisaną kursywą!</p>
+
+<p>Jeżeli popełnisz błąd, możesz przywrócić pracę do stanu początkowego za pomocą przycisku <em>Reset</em>. Gdybyś nie wiedział jak wykonać to zadanie, możesz kliknąć w przycisk <em>Pokaż rozwiązanie</em>, aby zobaczyć gotowe rozwiązanie</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Podgląd na żywo&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Kod do edycji&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Naciśnij ESC, aby zabrać fokus z pola wejścia (Tab wstawia znak tabulatora).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+  Ten oto tekst jest mój
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Pokaż rozwiązanie" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;This is my text.&lt;/em&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Zagnieżdżanie_elementów">Zagnieżdżanie elementów</h3>
+
+<p>Elementy mogą znajdować się wewnątrz innych elementów. Nazywa się to <em>zagnieżdżaniem</em>. Jeżeli chcielibyśmy zaznaczyć, że nasz kot jest <strong>bardzo</strong> humorzasty, możemy zamknąć słowo <em>bardzo</em> w elemencie {{htmlelement("strong")}}, który wytłuści podany mu tekst</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mój kot jest &lt;strong&gt;bardzo&lt;/strong&gt; humorzasty.&lt;/p&gt;</pre>
+
+<p>Zagnieżdżanie można zrobić w poprawny oraz niepoprawny sposób. W powyższym przykładzie otworzyliśmy najpierw element <code>p</code>, potem element <code>strong</code>. Aby zadnieżdżanie zadziałało, musimy najpier zamknąć element <code>strong</code>, a następnie element <code>p</code>.</p>
+
+<p>Poniżej znajduje się przykład <em>niepoprawnego</em> zagnieżdżania:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Mój kot jest &lt;strong&gt;bardzo humorzasty.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p><strong>Jeżeli tak jest otwarty w jakimś elemencie, musi też być w nim zamknięty</strong>. Jeżeli pomieszamy tagi zamykające, tak jak w powyższym przykładzie, przeglądarka będzie musiała zgadywać, o co nam chodziło. A to zgadywanie może prowadzić do nieoczekiwanych wyników</p>
+
+<h3 id="Elementy_blokowe_a_elementy_w_linii">Elementy blokowe, a elementy w linii</h3>
+
+<p>There are two important categories of elements to know in HTML: block-level elements and inline elements.</p>
+
+<ul>
+ <li>Block-level elements form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are usually structural elements on the page. For example, a block-level element might represent paragraphs, lists, navigation menus, or footers. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li>
+ <li>Inline elements are contained within block-level elements, and surround only small parts of the document’s content. (not entire paragraphs or groupings of content) An inline element will not cause a new line to appear in the document. It is typically used with text. For example, as an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Consider the following example:</p>
+
+<pre class="brush: html notranslate">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;
+
+&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} is an inline element. As you see below, the first three elements sit on the same line, with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element. Each <em>p</em> element appears on a new line, with space above and below. (The spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs.)</p>
+
+<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: HTML5 redefined the element categories: see <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than <em>block</em> and <em>inline. </em>This article will stay with these two terms.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The terms <em>block</em> and <em>inline</em>, as used in this article, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> that have the same names. While the names correlate by default, changing the CSS display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. One reason HTML5 dropped these terms was to prevent this rather common confusion.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Find useful reference pages that include lists of block and inline elements. See <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p>
+</div>
+
+<h3 id="Puste_elementy">Puste elementy</h3>
+
+<p>Not all elements follow the pattern of an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. For example, the {{htmlelement("img")}} element embeds an image file onto a page:</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>This would output the following:</p>
+
+<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Empty elements are sometimes called <em>void elements</em>.</p>
+</div>
+
+<h2 id="Atrybuty">Atrybuty</h2>
+
+<p>Elements can also have attributes. Attributes look like this:</p>
+
+<p><img alt='&amp;amp;amp;amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Attributes contain extra information about the element that won't appear in the content. In this example, the <strong><code>class</code></strong> attribute is an identifying name used to target the element with style information.</p>
+
+<p>An attribute should have:</p>
+
+<ul>
+ <li>A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)</li>
+ <li>The attribute name, followed by an equal sign.</li>
+ <li>An attribute value, wrapped with opening and closing quote marks.</li>
+</ul>
+
+<h3 id="Aktywne_uczenie_się_Dodawanie_atrybutów_do_elementu">Aktywne uczenie się: Dodawanie atrybutów do elementu</h3>
+
+<p>Another example of an element is {{htmlelement("a")}}. This stands for <em>anchor</em>. An anchor can make the text it encloses into a hyperlink. Anchors can take a number of attributes, but several are as follows:</p>
+
+<ul>
+ <li><strong><code>href</code></strong>: This attribute's value specifies the web address for the link. For example: <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><strong><code>title</code></strong>: The <code>title</code> attribute specifies extra information about the link, such as a description of the page that is being linked to. For example, <code>title="The Mozilla homepage"</code>. This appears as a tooltip when a cursor hovers over the element.</li>
+ <li><strong><code>target</code></strong>: The <code>target</code> attribute specifies the browsing context used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the linked content in the current tab, just omit this attribute.</li>
+</ul>
+
+<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website.</p>
+
+<ol>
+ <li>Add the <code>&lt;a&gt;</code> element.</li>
+ <li>Add the <code>href</code> attribute and the <code>title</code> attribute.</li>
+ <li>Specify the <code>target</code> attribute to open the link in the new tab.</li>
+</ol>
+
+<p>You'll be able to see your changes update live in the <em>Output</em> area. You should see a link—that when hovered over—displays the value of the <code>title</code> attribute, and when clicked, navigates to the web address in the <code>href</code> attribute. Remember that you need to include a space between the element name, and between each attribute.</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;A link to my favorite website.&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;A link to my &lt;a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank"&gt;favorite website&lt;/a&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Atrybuty_logiczne">Atrybuty logiczne</h3>
+
+<p>Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example, consider the {{htmlattrxref("disabled", "input")}} attribute, which you can assign to form input elements. (You use this to <em>disable</em> the form input elements so the user can't make entries. The disabled elements typically have a grayed-out appearance.) For example:</p>
+
+<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>As shorthand, it is acceptable to write this as follows:</p>
+
+<pre class="brush: html notranslate">&lt;!-- using the disabled attribute prevents the end user from entering text into the input box --&gt;
+&lt;input type="text" disabled&gt;
+
+&lt;!-- text input is allowed, as it doesn't contain the disabled attribute --&gt;
+&lt;input type="text"&gt;
+</pre>
+
+<p>For reference, the example above also includes a non-disabled form input element.The HTML from the example above produces this result:</p>
+
+<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Pomijanie_cudzysłowia_przy_wartościach_atrybutu">Pomijanie cudzysłowia przy wartościach atrybutu</h3>
+
+<p>If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. For example, if we revisit our link example from earlier, we could write a basic version with <em>only</em> the <code>href</code> attribute, like this:</p>
+
+<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;favorite website&lt;/a&gt;</pre>
+
+<p>However, as soon as we add the <code>title</code> attribute in this way, there are problems:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website&lt;/a&gt;</pre>
+
+<p>As written above, the browser misinterprets the markup, mistaking the <code>title</code> attribute for three attributes:  a title attribute with the value <em>The</em>, and two Boolean attributes, <code>Mozilla</code> and <code>homepage</code>. Obviously, this is not intended! It will cause errors or unexpected behavior, as you can see in the live example below. Try hovering over the link to view the title text!</p>
+
+<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Always include the attribute quotes. It avoids such problems, and results in more readable code.</p>
+
+<h3 id="Cudzysłów_pojedynczy_czy_podwójny">Cudzysłów pojedynczy czy podwójny?</h3>
+
+<p>In this article you will also notice that the attributes are wrapped in double quotes. However, you might see single quotes in some HTML code. This is a matter of style. You can feel free to choose which one you prefer. Both of these lines are equivalent:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing quotes that will go wrong:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>However, if you use one type of quote, you can include the other type of quote <em>inside</em> your attribute values:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>To use quote marks inside other quote marks of the same type (single quote or double quote), use <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">HTML entities</a>. For example, this will break:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Instead, you need to do this:</p>
+
+<pre class="brush: html notranslate">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<h2 id="Anatomia_dokumentu_HTML">Anatomia dokumentu HTML</h2>
+
+<p>Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Here we have:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. Doctypes used to look something like this:
+
+  <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <code>&lt;!DOCTYPE html&gt;</code> is the shortest string of characters that counts as a valid doctype. That is all you need to know!</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: The {{htmlelement("html")}} element. This element wraps all the content on the page. It is sometimes known as the root element.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: The {{htmlelement("head")}} element. This element acts as a container for eveything you want to include on the HTML page, <strong>that isn't the content</strong> the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You'll learn more about this in the next article of the series.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: This element specifies the character set for your document to UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: The {{htmlelement("title")}} element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.</li>
+</ol>
+
+<h3 id="Aktywne_uczenie_się_Dodawanie_paru_właściwości_do_dokumentu_HTML">Aktywne uczenie się: Dodawanie paru właściwości do dokumentu HTML</h3>
+
+<p>If you want to experiment with writing some HTML on your local computer, you can:</p>
+
+<ol>
+ <li>Copy the HTML page example listed above.</li>
+ <li>Create a new file in your text editor.</li>
+ <li>Paste the code into the new text file.</li>
+ <li>Save the file as <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
+</div>
+
+<p>You can now open this file in a web browser to see what the rendered code looks like. Edit the code and refresh the browser to see what the result is. Initially the page looks like this:</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). Sharpen your skills by implementing the following tasks:</p>
+
+<ul>
+ <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code>&lt;h1&gt;</code> opening tag and <code>&lt;/h1&gt;</code> closing tag.</li>
+ <li>Edit the paragraph content to include text about a topic that you find interesting.</li>
+ <li>Make important words stand out in bold by wrapping them inside a <code>&lt;strong&gt;</code> opening tag and <code>&lt;/strong&gt;</code> closing tag.</li>
+ <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li>
+ <li>Add an image to your document. Place it below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. Earn bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).</li>
+</ul>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h1 {
+ color: blue;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Some music&lt;/h1&gt;&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favorite drummers is Neal Peart, who\ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Białe_znaki_w_HTMLu">Białe znaki w HTMLu</h3>
+
+<p>In the examples above, you may have noticed that a lot of whitespace is included in the code. This is optional. These two code snippets are equivalent:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Dogs are silly.&lt;/p&gt;
+
+&lt;p&gt;Dogs        are
+         silly.&lt;/p&gt;</pre>
+
+<p>No matter how much whitespace you use inside HTML element content (which can include one or more space character, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. So why use so much whitespace? The answer is readability.<br>
+ <br>
+ It can be easier to understand what is going on in your code if you have it nicely formatted. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you to choose the style of formatting (how many spaces for each level of indentation, for example), but you should consider formatting it.</p>
+
+<h2 id="Znaki_specjalne_w_HTML">Znaki specjalne w HTML</h2>
+
+<p>In HTML, the characters <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> and <code>&amp;</code> are special characters. They are parts of the HTML syntax itself. So how do you include one of these special characters in your text? For example, if you want to use an ampersand or less-than sign, and not have it interpreted as code.</p>
+
+<p>You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&amp;), and ends with a semicolon (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Literal character</th>
+   <th scope="col">Character reference equivalent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The character reference equivalent could be easily remembered because the text it uses can be seen as less than for '&amp;lt;' , quotation for ' &amp;quot; ' and similarly for others. To find more about entity reference, see <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a> (Wikipedia).<br>
+ <br>
+ In the example below, there are two paragraphs:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;
+
+&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>
+
+<p>In the live output below, you can see that the first paragraph has gone wrong. The browser interprets the second instance of <code>&lt;p&gt;</code> as starting a new paragraph. The second paragraph looks fine because it has angle brackets with character references.</p>
+
+<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long, as your HTML's <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</a>.</p>
+</div>
+
+<h2 id="Komentarze_HTML">Komentarze HTML</h2>
+
+<p>HTML has a mechanism to write comments in the code. Browsers ignore comments,  effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding. This is very useful if you return to a code base after being away for long enough that you don't completely remember it. Likewise, comments are invaluable as different people are making changes and updates.</p>
+
+<p>To write an HTML comment, wrap it in the special markers <code>&lt;!--</code> and <code>--&gt;</code>. For example:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;I'm not inside a comment&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>
+
+<p>As you can see below, only the first paragraph displays in the live output.</p>
+
+<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.<br>
+ <br>
+ At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As you start to learn more about HTML, consider learning the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language used to style web pages. (for example, changing fonts or colors, or altering the page layout) HTML and CSS work well together, as you will soon discover.</p>
+</div>
+
+<h2 id="Zobacz_również">Zobacz również</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+</ul>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<div></div>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/pl/learn/html/introduction_to_html/index.html b/files/pl/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..055f512d4c
--- /dev/null
+++ b/files/pl/learn/html/introduction_to_html/index.html
@@ -0,0 +1,67 @@
+---
+title: Wprowadzenie do HTML
+slug: Learn/HTML/Introduction_to_HTML
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p>W samym sercu, HTML jest dość prostym językiem składającym się z elementów, które można zastosować do fragmentów tekstu, aby nadać im różne znaczenie w dokumencie (Czy jest to akapit? Czy jest to wypunktowana lista? Czy jest to część tabeli?), ułożyć dokument w logiczne sekcje (Czy ma nagłówek? Trzy kolumny treści? Menu nawigacyjne?), a także osadzić treści takie jak obrazy i filmy na stronie. Ten moduł wprowadzi pierwsze dwa z nich i wprowadzi podstawowe pojęcia i składnie, które musisz znać, aby zrozumieć HTML.</p>
+
+
+
+<h2 id="Wymagania_wstępne">Wymagania wstępne</h2>
+
+<p>Nie wymagamy od Ciebie żadnych umiejętności związanych z HTML na początku tego kursu. Wymagane są jednak umiejętności obsługi komputera, a także podstawowa "pasywna" znajomość sieci (umiejętność przeglądania i przyswajania stron internetowych). Powinieneś mieć ustawione podstawowe środowisko (zgodnie z instrukcją z <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>), a także rozumieć, jak tworzyć i zarządzać plikami (tak jak zostało to dokładnie wytłumaczone w <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>). Te dwie rzeczy są częścią naszego tutoriala dla początkujących <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a>.</p>
+
+<div class="note">
+<p><strong>Notatka</strong>: Jeżeli pracujesz na komputerze/tablecie/innym urządzeniu, na którym nie możesz stworzyć plików, możesz wypróbować (przynajmniej większość) nasze przykłady w specjalnych serwisach, takich jak <a href="http://jsbin.com/">JSBin</a> czy <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Tutoriale">Tutoriale</h2>
+
+<p>Ten moduł składa się z poniższych artykułów, które wprowadzą Cię w podstawy HTML i dadzą możliwość wypróbowania nabytych umiejętności.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Rozgrzewanie silników HTML</a></dt>
+ <dd>Zajmuje się absolutnymi podstawani HTML - definiujemy elementy, atrybuty i inne ważne pojęcia, a także pokazuje jaką funkcję spełniają one w języku. Pokazuje w jaki sposób jest zbudowana typowa strona w HTML, wraz z budową samych elementów, a także wyjaśnia inne, podstawowe cechy języka. Podczas nauki zainteresujemy Cię HTML poprzez zabawę!</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Co jest w głowie (headzie)? Metadata w HTML</a></dt>
+ <dd>Znacznik <a href="/en-US/docs/Glossary/Head">head</a> i jego zawartość w dokumencie HTML<strong> nie jest</strong> wyświetlany kiedy strona zostaje załadowana. Zawiera on informacje takie jak {{htmlelement("title")}} (tytuł strony),  linki do {{glossary("CSS")}} (Jeżeli chcesz dodać stylowanie do zawartości html), linki do własnych faviconów, a także metadane (dane o stronie, takie jak autor i słowa, które opisują dokument).</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Podstawy tekstu w HTML</a></dt>
+ <dd>Głównym zadaniem HTML jest nadanie znaczenia tekstowi (także znane jako <a href="/en-US/docs/Glossary/Semantics">semantyka</a>), w taki sposób, aby przeglądarka wiedziała, jak wyświetlić go w prawidłowy sposób. Ten artykuł zajmuje się użyciem HTML w taki sposób, aby podzielić tekst na logiczne structury nagłówków i paragrafów, nadać większe znaczenie niektórym słowom, stworzyć listy, a także wiele innych.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Tworzenie hiperłączy</a></dt>
+ <dd>Hiperłącza są ważną częścią internetu - to one sprawiają, że sieć to sieć. Artykuł zajmuje się składnią hiperłączy a także omawia najlepsze praktyki ich tworzenia i użycia.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Zaawansowane formatowanie tekstu</a></dt>
+ <dd>Istnieją inne elementy HTMLa, których można użyć do formatowania i nie zostały omówione w artykule <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Podstawy tekstu w HTML.</a> Elementy użyte tutaj są mniej znane, jednak nadal warte poznania. Artykuł ten zajmuje się oznaczaniem cytatów, list opisowych, kodu w językach programowania, a także innych podobnych, indeksów - górnego i dolnego, danych kontaktów, a także wielu innych.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktura strony i dokumentu</a></dt>
+ <dd>HTML używane jest nie tylko do definiowania pojedynczych części strony ("paragraf" czy "zdjęcie"), lecz także do zaznaczenia większych częci strony (na przykład "nagłówek", "menu nawigacyjne" czy "główna zawartość"). Ten artykuł zajmuje się planowaniem struktury strony, a także jak pisać HTML, aby odwzorować daną struktrurę.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugowanie HTML</a></dt>
+ <dd>Pisanie HTML jest fajne, ale nie zawsze wszystko idzie jak z płatka. Zdarzają się sytuacje gdy "coś nie działa", a Ty nie masz pojęcia, co jest nie tak. Ten artykuł pokaże techniki i narzędzia, które są przydatne w takich sytuacjach.</dd>
+</dl>
+
+<h2 id="Zadania">Zadania</h2>
+
+<p>Poniższe zadania mają na celu przetetowanie Twojej znajomości podstaw HTML, które zostały przedstawione w artykułach wyżej.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Dodawanie stylów do listu</a></dt>
+ <dd>Prędzej czy później każdy z nas uczy się, w jaki sposób napisać list. Może to zostać wykorzystane do przetestowania naszych zdolności formatowania tekstu - w tym zadaniu masz za zadanie dodanie formatowania do listu.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Dodanie struktury strony</a></dt>
+ <dd>To zadanie testuje twoje umiejętności używania HTML  to dodania struktury strony, która zawiera nagłówek, stopkę, menu nawigacyjne, główną zawartość i pasek boczny.</dd>
+</dl>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Test zdolności w sieci 1</a></dt>
+ <dd>Doskonały kurs fundacji Mozilla, który przedstawia i testuje wiele umiejętności, o których mowa jest we <em>Wprowadzeniu do HTML.</em> Zainteresowani zaznajamiają sie w tym sześcioczęsciowym kursie z: czytaniem, pisaniem i byciem członkiem sieci Internet. Odkryj podstawy Internetu poprzez produkcję i współpracę.</dd>
+</dl>
+
+<div class="blockIndicator note">
+
+
+<h2 id="Feedback">  Feedback</h2>
+
+<p>Pomóż nam doskonalić nasze poradniki takie jak ten poprzez wypełnienie <a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">naszej ankiety</a>.</p>
+
+<p>(Ankieta w języku angielskim)</p>
+</div>
diff --git a/files/pl/learn/index.html b/files/pl/learn/index.html
new file mode 100644
index 0000000000..a19660883d
--- /dev/null
+++ b/files/pl/learn/index.html
@@ -0,0 +1,141 @@
+---
+title: Naucz się pisać strony internetowe!
+slug: Learn
+tags:
+  - Beginner
+  - Index
+  - Landing
+  - Learn
+  - Nauka
+  - Początkujący
+  - TopicStub
+  - Web
+  - sieć
+translation_of: Learn
+---
+<div class="summary">
+<p>Witamy w dziale nauki MDN. Ten zestaw artykułów pozwala wdrożyć całkowicie początkującego webmastera do wszystkiego, czego potrzebuje by zacząć tworzyć proste strony www.</p>
+
+<p>Chcesz nauczyć się tworzyć strony i aplikacje internetowe? Dobrze trafiłeś!</p>
+</div>
+
+<p>Web design to bardzo obszerny dział, ale nie masz się co martwić. Jesteśmy po to, by ci pomóc. Nieważne, czy dopiero zaczynasz, czy szlifujesz developerskie zdolności.</p>
+
+<p>Jeśli jesteś całkowicie zielony w technologiach webowych, a tworzenie stron jest dla ciebie wyzwaniem - poprowadzimy Cię za rekę i zapoznamy wystarczająco szczegółowo z poszczególnymi tematami. Powinieneś poczuć się jak w domu podczas nauki webmasteringu, niezależnie czy jesteś studentem (na własną rękę lub jako członek zespołu klasowego), nauczycielem poszukującym materiałów, hobbystą albo kimś kto chce dowiedzieć się więcej o technologiach stron internetowych.</p>
+
+
+
+
+
+<h2 id="Gdzie_zacząć">Gdzie zacząć</h2>
+
+<p>Powiedz nam, ile umiesz. Który z tych opisów najlepiej do ciebie pasuje?</p>
+
+<ul class="card-grid">
+ <li><span>Początkujący</span>
+
+  <p>Witaj! Powinieneś zacząć od naszej serii: <a href="/pl/docs/Learn/Getting_started_with_the_web">"Podstawy tworzenia stron internetowych"</a>. Poznasz tam wszystkie podstawy potrzebne ci, by zacząć zabawę z tworzeniem stron.</p>
+ </li>
+ <li><span>Mam jeszcze kilka pytań</span>Jeśli poszukujesz odpowiedzi na kilka frapujących kwestii dotyczących tworzenia stron nasza sekcja <a href="/pl/docs/Learn/Common_questions">Najczęściej zadawanych pytań</a> powinna Ci pomóc</li>
+ <li><span>To dla mnie nie pierwszyzna</span>
+  <p>Świetnie! W takim razie zacznij kopać głębiej, w samym sercu Internetu: <a href="/pl/docs/Learn/HTML">HTML</a>, <a href="/pl/docs/Learn/CSS">CSS</a>, i <a href="/pl/docs/Learn/JavaScript">JavaScript</a></p>
+ </li>
+ <li><span>Jestem Mistrzem!</span>
+  <p>Przepięknie! W takim razie zainteresują cię nasze <a href="/pl/docs/Web/Guide">przewodniki</a> i <a href="/pl/docs/Web/Tutorials">samouczki </a>dla zaawansowanych. Rozważ także podzielenie się swoją wiedzą w <a href="/pl/Learn/How_to_contribute">dziale nauki</a>. ;)</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Info</strong>: W przyszłości pojawią się inne ścieżki nauki - dla doświadczonych programistów z poradnikami, jak korzystać z konkretnych zaawansowanych technik, programistów, którzy nie mieli styczności z technologiami webowymi, a także dla tych, którzy chcą nauczyć się technik projektowania.</p>
+</div>
+
+<p>{{LearnBox({"title":"Coś na szybko: Słownik"})}}</p>
+
+<h2 id="Ucz_się_w_grupie">Ucz się w grupie</h2>
+
+<p>Jeśli masz jakieś pytania lub nadal nie wiesz, gdzie zacząć - Mozilla jest globalną społecznością entuzjastów, zrzeszającą mentorów i nauczycieli, którzy z chęcią ci pomogą! Skontaktuj się z nimi poprzez WebMaker:</p>
+
+<ul>
+ <li>Rozmawiaj z mentorami na <a href="http://discourse.webmaker.org/" rel="external">forum</a>.</li>
+ <li><a href="https://events.webmaker.org/">Szukaj wydarzeń</a> i ucz się technologii webowych z fajnymi ludźmi.</li>
+</ul>
+
+<h2 id="Dziel_się_wiedzą">Dziel się wiedzą</h2>
+
+<p>Cały ten dział jest tworzony przez użytkowników. Potrzebujemy cię w zespole. Nieważne, czy dopiero zaczynasz, czy znasz Web na wylot. Jeśli to cię interesuje, przejrzyj sekcję: <a href="/en-US/Learn/How_to_contribute">"Jak mogę pomóc?"</a>. Zachęcamy także do rozmowy z nami poprzez <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">listę mailingową</a> i <a href="/en-US/docs/MDN/Community#Get_into_IRC">Kanał IRC</a>. :)</p>
+
+
+
+<dl>
+ <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
+ <dd>Bezpłatne i otwarte kursy do nauki umiejętności technicznych, z mentoringu i uczenia się opartego na projektach</dd>
+</dl>
+
+<h2 id="Nawigacja">Nawigacja</h2>
+
+<ol>
+ <li><a href="/pl/Learn/Getting_started_with_the_web">Podstawy tworzenia stron internetowych </a></li>
+ <li><font color="#0b0115"><a href="/pl/Learn/Skills">Naucz się tworzenia storn i aplikacji</a></font>
+  <ol>
+   <li><a href="https://webmaker.org/en-US/literacy" rel="external">Mapa umiejętności webowych</a></li>
+   <li><a href="/pl/Learn/Web_Mechanics">Mechanika sieci</a></li>
+   <li><a href="/pl/Learn/Infrastructure">Infrastruktura</a></li>
+   <li><a href="/pl/Learn/Coding-Scripting">Kodowanie i skrypty</a></li>
+   <li><a href="/pl/Learn/Design_and_Accessibility">Projektowanie i dostępność</a></li>
+   <li><a href="/pl/Learn/Composing_for_the_web">Tworzenie i planowanie</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Naucz się technologii</a>
+  <ol>
+   <li><a href="/pl/Learn/HTML">HTML</a></li>
+   <li><a href="/pl/Learn/CSS">CSS</a></li>
+   <li><a href="/pl/Learn/JavaScript">JavaScript</a></li>
+   <li><a href="/pl/Learn/Python">Python</a></li>
+  </ol>
+ </li>
+ <li><a href="/pl/Learn/tutorial">Tutoriale</a>
+  <ol>
+   <li><a href="/pl/Learn/tutorial/How_to_build_a_web_site">Jak utworzyć stronę internetową?</a></li>
+   <li><a href="/pl/Learn/tutorial/Information_Security_Basics">Podstawy bezpieczeństwa informacji</a></li>
+  </ol>
+ </li>
+ <li><a href="http://weblitmapper.webmakerprototypes.org/">Zasoby edukacyjne</a></li>
+ <li><a href="/pl/Learn/help">Uzysaj pomoc</a>
+  <ol>
+   <li><a href="/pl/Learn/FAQ">FAQ</a></li>
+   <li><a href="/pl/docs/Glossary">Słownik</a></li>
+   <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Zadaj pytanie</a></li>
+   <li><a href="https://events.webmaker.org/" rel="external">Poznaj nauczycieli i mentorów</a></li>
+  </ol>
+ </li>
+ <li><a href="/pl/Learn/How_to_contribute">Jak uczestniczyć w projekcie</a></li>
+</ol>
+
+<h2 id="Skontaktuj_się_z_nami">Skontaktuj się z nami</h2>
+
+<h4 id="sect1"></h4>
+
+<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left; height: 672px;"><span lang="pl">Jeśli chcesz się z nami skontaktować w jakiejkolwiek sprawie, najlepszym sposobem jest przesłanie nam wiadomości w naszym wątku dyskursywnym lub kanałach IRC. Chcielibyśmy usłyszeć od Ciebie o wszystkim, co uważasz za błędne lub brakujące w witrynie, prośby o nowe tematy związane z uczeniem się, prośby o pomoc w przypadku przedmiotów, których nie rozumiesz, lub jakiekolwiek inne pytania lub wątpliwości.</span><span lang="pl"> Jeśli chcesz pomóc w rozwijaniu / ulepszaniu treści, zobacz, jak możesz pomóc i skontaktuj się z nami! Chętnie z Tobą porozmawiamy, niezależnie od tego, czy jesteś uczniem, nauczycielem, doświadczonym programistą lub kimś innym zainteresowanym w ulepszaniu nauki.</span></p>
+
+<h2 class="tw-data-text tw-ta tw-text-small" dir="ltr" id="Zobacz_też" style="text-align: left; height: 672px;"><span lang="pl">Zobacz też</span></h2>
+
+<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 1344px;"><span lang="pl">Biuletyn dla programistów Mozilli<br>
+     Nasz biuletyn dla twórców stron internetowych, który jest świetnym źródłem informacji dla wszystkich poziomów doświadczenia.<br>
+ Strona internetowa demystified<br>
+     Wspaniała seria filmów objaśniających podstawy internetowe, które mają na celu pełne przygotowanie do tworzenia stron internetowych. Stworzony przez Jérémie Patonnier.<br>
+ Codecademy<br>
+     Świetna interaktywna strona do nauki języków programowania od zera.<br>
+ Code.org<br>
+     Podstawowa teoria i praktyka kodowania, skierowana głównie do dzieci / osób początkujących.<br>
+ EXLskills<br>
+     Bezpłatne i otwarte kursy do nauki umiejętności technicznych, z mentoringu i uczenia się opartego na projektach<br>
+ freeCodeCamp.org<br>
+     Strona interaktywna z samouczkami i projektami do nauki tworzenia stron internetowych.<br>
+ Mapa umiejętności internetowych<br>
+     Struktura początkowych umiejętności korzystania z Internetu i umiejętności XXI wieku, która zapewnia również dostęp do zajęć dydaktycznych według kategorii.<br>
+ Działania dydaktyczne<br>
+     Seria działań dydaktycznych do nauczania (i uczenia się) stworzona przez Fundację Mozilla, obejmująca wszystko od podstawowej znajomości stron internetowych i prywatności po JavaScript i hakowanie Minecrafta.<br>
+ Edabit<br>
+     Setki interaktywnych wyzwań w zakresie kodowania w różnych językach.</span></p>
+
+<p dir="ltr"></p>
diff --git a/files/pl/learn/javascript/asynchronous/index.html b/files/pl/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..5a445f8b99
--- /dev/null
+++ b/files/pl/learn/javascript/asynchronous/index.html
@@ -0,0 +1,67 @@
+---
+title: Asynchronous JavaScript
+slug: Learn/JavaScript/Asynchronous
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Landing
+  - NeedsTranslation
+  - Promises
+  - TopicStub
+  - async
+  - asynchronous
+  - await
+  - callbacks
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+translation_of: Learn/JavaScript/Asynchronous
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> modules before attempting this.</p>
+
+<p>If you are not familiar with the concept of asynchronous programming, you should definitely start with the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> article in this module. If you are, then you can probably skip to the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> module.</p>
+
+<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 can 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://glitch.com">Glitch</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt>
+ <dd>
+ <p>In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt>
+ <dd>In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt>
+ <dd>Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt>
+ <dd>Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt>
+ <dd>Promises can be somewhat complex to set up and understand, and so modern browsers have implemented <code>async</code> functions and the <code>await</code> operator. The former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside <code>async</code> functions to wait for promises before the function continues. This makes chaining promises simpler and easier to read.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt>
+ <dd>To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> from the fantastic <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> online book by Marijn Haverbeke.</li>
+</ul>
diff --git a/files/pl/learn/javascript/asynchronous/introducing/index.html b/files/pl/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..d7fda6b10b
--- /dev/null
+++ b/files/pl/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,279 @@
+---
+title: Introducing asynchronous JavaScript
+slug: Learn/JavaScript/Asynchronous/Introducing
+translation_of: Learn/JavaScript/Asynchronous/Introducing
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">W tym artykule po krótce omówimy problemy związane z synchronicznością JavaScriptu i zapoznamy się z innymi asynchronicznymi technikami, które napotkasz, pokazując jak mogą pomóc rozwiązać wymienione problemy.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania:</th>
+   <td>Podstawy obsługi komputera, rzetelna znajomość podstaw JavaScriptu.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Zapoznanie się z asynchronicznym JavaScriptem, czym się różni od synchronicznego JavaScriptu i w jakich przypadkach warto go użyć</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Synchroniczny_JavaScript">Synchroniczny JavaScript</h2>
+
+<p>By pomóc nam zrozumieć czym <strong><a href="/en-US/docs/Glossary/Asynchronous">asynchroniczny</a></strong><a href="/en-US/docs/Glossary/Asynchronous"> </a>JavaScript jest, musimy pierw zrozumieć czym jest <a href="/en-US/docs/Glossary/Synchronous">synchroniczny </a>JavaScript. Ten rozdział podsumuje informacje które widzieliśmy w porzednim artykule.</p>
+
+<p>Wiele funkcji, które widzieliśmy w poprzednich modułach do nauki jest synchroniczna - uruchamiasz kod, a wynik jest zwracany tak szybko jak tylko przeglądarka może to zrobić. Spójrz na prosty przykład (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">przykład użycia</a> i <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">kod źródłowy</a>):</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+</pre>
+
+<p>W tym bloku każda linia jest wykonywana po kolei:</p>
+
+<ol>
+ <li>Pobieramy referencje do elementu {{htmlelement("button")}}, który jest już zdefiniowany w DOM'ie.</li>
+ <li>Dodajemy obserwatora zdarzeń <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> do niego, więc kiedy przycisk zostanie naciśnięty:
+  <ol>
+   <li>Wiadomość w funkcji <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> pojawi się w przeglądarce.</li>
+   <li>Kiedy zamkniemy wiadomość, stworzymy element typu {{htmlelement("p")}}.</li>
+   <li>Dodamuy do niego zawartość tekstową.</li>
+   <li>Na końcu dodamy akapit do ciała dokumentu HTML.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Podczas gdy jest wykonywana każda z tych operacji, nic innego nie może się wydarzyć - renderowanie jest wstrzymane. Dzieje się to z powodu, który został opisany w <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">poprzednim rozdziale</a>, <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts#JavaScript_is_single_threaded">JavaScript jest jednowątkowy</a>. Na głównym wątku nie można wykonywać kilku rzeczy na raz. Wszelkie inne działania są zablokowane dopóki nie zakończy obecnej operacji.</p>
+
+<p>W powyższym przykładzie, po kliknięciu przycisku akapit nie pojawi się dopóki nie wciśniesz przycisku OK w powiadomieniu. Możesz spróbować to samemu:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">button</span>&gt;Click me&lt;/<span class="pl-ent">button</span>&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Notatka</strong>: Ważnym jest by pamiętać, iż <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code>,  choć jest bardzo użyteczny by zademonstrować blokowanie wątku przez synchroniczne operacje, toteż jego użycie w prawdziwych aplikacjach jest okropne i wskazuje na brak wyczucia smaku.</p>
+</div>
+
+<h2 id="Asynchroniczny_JavaScript">Asynchroniczny JavaScript</h2>
+
+<p>Z powodów wymienionych wcześniej (np. blokowanie wątku), wiele funkcji Web API wykonuje kod asynchronicznie. Zwłaszcze te funkcje, które pobierają zasoby z zewnętrznego urządzenia, takie jak pliki z internetu, łączą się z bazą danych i zwracają z niej dane, łączą się ze strumieniem wideo z kamerki internetowej albo wyświetlają obraz w urządzeniach VR.</p>
+
+<p>Dlaczego to jest problem pracować na kodzie synchronicznym? Spójrz na krótki przykład. Kiedy pobierasz obrazek z serwera, nie możesz od razu zwrócić wyniku. To znaczy, że poniższy pseudokod nie będzie działać: </p>
+
+<pre class="brush: js notranslate">let response = fetch('myImage.png'); // fetch is asynchronous
+let blob = response.blob();
+// display your image blob in the UI somehow</pre>
+
+<p>Jest to spowodowane tym, że nie wiesz ile dokładnie czasu zajmie Tobie pobieranie obrazka i kiedy spróbujesz wykonać drugą linię kodu to zostanie zwrócony błąd (może czasami, może za każdym razem) ponieważ odpowiedź (<code>response</code>) z serwera nie jest jeszcze gotowy. Zamiast tego Twój kod musi poczekać zanim odpowiedź zostanie zwrócona nim spróbuje na niej wykonać operacje.</p>
+
+<p>Wyróżniamy dwa główne typy składni asynchronicznego kodu w JavaScript'cie. Starsza wywołanie zwrotne(<code>callback</code>) oraz nowsza obietnice (<code>promise</code>). W następnych rozdziałach kolejno przyjrzymy się każdej z nich.</p>
+
+<h2 id="Async_callbacks">Async callbacks</h2>
+
+<p>Async callbacks are functions that are specified as arguments when calling a function which will start executing code in the background. When the background code finishes running, it calls the callback function to let you know the work is done, or to let you know that something of interest has happened. Using callbacks is slightly old-fashioned now, but you'll still see them in use in a number of older-but-still-commonly-used APIs.</p>
+
+<p>An example of an async callback is the second parameter of the {{domxref("EventTarget.addEventListener", "addEventListener()")}} method (as we saw in action above):</p>
+
+<pre class="brush: js notranslate">btn.addEventListener('click', () =&gt; {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>The first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the event is fired.</p>
+
+<p>When we pass a callback function as an argument to another function, we are only passing the function's reference as an argument, i.e, the callback function is <strong>not </strong>executed immediately. It is “called back” (hence the name) asynchronously somewhere inside the containing function’s body. The containing function is responsible for executing the callback function when the time comes.</p>
+
+<p>You can write your own function containing a callback easily enough. Let's look at another example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<p>Here we create a <code>displayImage()</code> function that simply represents a blob passed to it as an object URL, then creates an image to display the URL in, appending it to the document's <code>&lt;body&gt;</code>. However, we then create a <code>loadAsset()</code> function that takes a callback as a parameter, along with a URL to fetch and a content type. It uses <code>XMLHttpRequest</code> (often abbreviated to "XHR") to fetch the resource at the given URL, then pass the response to the callback to do something with. In this case the callback is waiting on the XHR call to finish downloading the resource (using the <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code> event handler) before it passes it to the callback.</p>
+
+<p>Callbacks are versatile — not only do they allow you to control the order in which functions are run and what data is passed between them, they also allow you to pass data to different functions depending on circumstance. So you could have different actions to run on the response downloaded, such as <code>processJSON()</code>, <code>displayText()</code>, etc.</p>
+
+<p>Note that not all callbacks are async — some run synchronously. An example is when we use {{jsxref("Array.prototype.forEach()")}} to loop through the items in an array (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">see it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">the source</a>):</p>
+
+<pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+
+gods.forEach(function (eachName, index){
+  console.log(index + '. ' + eachName);
+});</pre>
+
+<p>In this example we loop through an array of Greek gods and print the index numbers and values to the console. The expected parameter of <code>forEach()</code> is a callback function, which itself takes two parameters, a reference to the array name and index values. However, it doesn't wait for anything — it runs immediately.</p>
+
+<h2 id="Promises">Promises</h2>
+
+<p>Promises are the new style of async code that you'll see used in modern Web APIs. A good example is the <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, which is basically like a modern, more efficient version of {{domxref("XMLHttpRequest")}}. Let's look at a quick example, from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a> article:</p>
+
+<pre class="brush: js notranslate">fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  products = json;
+  initialize();
+}).catch(function(err) {
+  console.log('Fetch problem: ' + err.message);
+});</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find the finished version on GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">see the source here</a>, and also <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">see it running live</a>).</p>
+</div>
+
+<p>Here we see <code>fetch</code><code>()</code> taking a single parameter — the URL of a resource you want to fetch from the network — and returning a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>. The promise is an object representing the completion or failure of the async operation. It represents an intermediate state, as it were. In essence, it's the browser's way of saying "I promise to get back to you with the answer as soon as I can," hence the name "promise."</p>
+
+<p>This concept can take practice to get used to; it feels a little like {{interwiki("wikipedia", "Schrödinger's cat")}} in action. Neither of the possible outcomes have happened yet, so the fetch operation is currently waiting on the result of the browser trying to complete the operation at some point in the future. We've then got three further code blocks chained onto the end of the <code>fetch()</code>:</p>
+
+<ul>
+ <li>Two <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> blocks. Both contain a callback function that will run if the previous operation is successful, and each callback receives as input the result of the previous successful operation, so you can go forward and do something else to it. Each <code>.then()</code> block returns another promise, meaning that you can chain multiple <code>.then()</code> blocks onto each other, so multiple asynchronous operations can be made to run in order, one after another.</li>
+ <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> block at the end runs if any of the <code>.then()</code> blocks fail — in a similar way to synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> blocks, an error object is made available inside the <code>catch()</code>, which can be used to report the kind of error that has occurred. Note however that synchronous <code>try...catch</code> won't work with promises, although it will work with <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, as you'll learn later on.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You'll learn a lot more about promises later on in the module, so don't worry if you don't understand them fully yet.</p>
+</div>
+
+<h3 id="The_event_queue">The event queue</h3>
+
+<p>Async operations like promises are put into an <strong>event queue</strong>, which runs after the main thread has finished processing so that they <em>do not block</em> subsequent JavaScript code from running. The queued operations will complete as soon as possible then return their results to the JavaScript environment.</p>
+
+<h3 id="Promises_versus_callbacks">Promises versus callbacks</h3>
+
+<p>Promises have some similarities to old-style callbacks. They are essentially a returned object to which you attach callback functions, rather than having to pass callbacks into a function.</p>
+
+<p>However, promises are specifically made for handling async operations, and have many advantages over old-style callbacks:</p>
+
+<ul>
+ <li>You can chain multiple async operations together using multiple <code>.then()</code> operations, passing the result of one into the next one as an input. This is much harder to do with callbacks, which often ends up with a messy "pyramid of doom" (also known as <a href="http://callbackhell.com/">callback hell</a>).</li>
+ <li>Promise callbacks are always called in the strict order they are placed in the event queue.</li>
+ <li>Error handling is much better — all errors are handled by a single <code>.catch()</code> block at the end of the block, rather than being individually handled in each level of the "pyramid".</li>
+ <li>Promises avoid inversion of control, unlike old-style callbacks, which lose full control of how the function will be executed when passing a callback to a third-party library.</li>
+</ul>
+
+<h2 id="The_nature_of_asynchronous_code">The nature of asynchronous code</h2>
+
+<p>Let's explore an example that further illustrates the nature of async code, showing what can happen when we are not fully aware of code execution order and the problems of trying to treat asynchronous code like synchronous code. The following example is fairly similar to what we've seen before (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">see it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">the source</a>). One difference is that we've included a number of {{domxref("console.log()")}} statements to illustrate an order that you might think the code would execute in.</p>
+
+<pre class="brush: js notranslate">console.log ('Starting');
+let image;
+
+fetch('coffee.jpg').then((response) =&gt; {
+  console.log('It worked :)')
+  return response.blob();
+}).then((myBlob) =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch((error) =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + error.message);
+});
+
+console.log ('All done!');</pre>
+
+<p>The browser will begin executing the code, see the first <code>console.log()</code> statement (<code>Starting</code>) and execute it, and then create the <code>image</code> variable.</p>
+
+<p>It will then move to the next line and begin executing the <code>fetch()</code> block but, because <code>fetch()</code> executes asynchronously without blocking, code execution continues after the promise-related code, thereby reaching the final <code>console.log()</code> statement (<code>All done!</code>) and outputting it to the console.</p>
+
+<p>Only once the <code>fetch()</code> block has completely finished running and delivering its result through the <code>.then()</code> blocks will we finally see the second <code>console.log()</code> message (<code>It worked :)</code>) appear. So the messages have appeared in a different order to what you might expect:</p>
+
+<ul>
+ <li>Starting</li>
+ <li>All done!</li>
+ <li>It worked :)</li>
+</ul>
+
+<p>If this confuses you, then consider the following smaller example:</p>
+
+<pre class="brush: js notranslate">console.log("registering click handler");
+
+button.addEventListener('click', () =&gt; {
+  console.log("get click");
+});
+
+console.log("all done");</pre>
+
+<p>This is very similar in behavior — the first and third <code>console.log()</code> messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button. The previous example works in the same way, except that in that case the second message is blocked on the promise chain fetching a resource then displaying it on screen, rather than a click.</p>
+
+<p>In a less trivial code example, this kind of setup could cause a problem — you can't include an async code block that returns a result, which you then rely on later in a sync code block. You just can't guarantee that the async function will return before the browser has processed the sync block.</p>
+
+<p>To see this in action, try taking a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">our example</a>, and changing the fourth <code>console.log()</code> call to the following:</p>
+
+<pre class="brush: js notranslate">console.log ('All done! ' + image.src + 'displayed.');</pre>
+
+<p>You should now get an error in your console instead of the third message:</p>
+
+<pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre>
+
+<p>This is because at the time the browser tries to run the third <code>console.log()</code> statement, the <code>fetch()</code> block has not finished running so the <code>image</code> variable has not been given a value.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: For security reasons, you can't <code>fetch()</code> files from your local filesystem (or run other such operations locally); to run the above example locally you'll have to run the example through a <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">local webserver</a>.</p>
+</div>
+
+<h2 id="Active_learning_make_it_all_async!">Active learning: make it all async!</h2>
+
+<p>To fix the problematic <code>fetch()</code> example and make the three <code>console.log()</code> statements appear in the desired order, you could make the third <code>console.log()</code> statement run async as well. This can be done by moving it inside another <code>.then()</code> block chained onto the end of the second one, or by simply moving it inside the second <code>then()</code> block. Try fixing this now.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">find an answer here</a> (see it <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">running live</a> also). You can also find a lot more information on promises in our <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a> guide, later on in the module.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>In its most basic form, JavaScript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time. But web browsers define functions and APIs that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user's interaction with the mouse, or the arrival of data over the network, for example). This means that you can let your code do several things at the same time without stopping or blocking your main thread.</p>
+
+<p>Whether we want to run code synchronously or asynchronously will depend on what we're trying to do.</p>
+
+<p>There are times when we want things to load and happen right away. For example when applying some user-defined styles to a webpage you'll want the styles to be applied as soon as possible.</p>
+
+<p>If we're running an operation that takes time however, like querying a database and using the results to populate templates, it is better to push this off the main thread and complete the task asynchronously. Over time, you'll learn when it makes more sense to choose an asynchronous technique over a synchronous one.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/pl/learn/javascript/building_blocks/index.html b/files/pl/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..364b91c45e
--- /dev/null
+++ b/files/pl/learn/javascript/building_blocks/index.html
@@ -0,0 +1,44 @@
+---
+title: JavaScript building blocks
+slug: Learn/JavaScript/Building_blocks
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">W tym module kontynuujemy omówienie najważniejszych, podstawowych funkcji języka Javascript. Zwrócimy uwagę na często spotykane typy bloków kodu, takie jak: pętle, funkcje oraz zdarzenia. Mogłeś zobaczyć te treści w poprzednim module, jednak tutaj omówimy je bardziej szczegółowo.</p>
+
+<h2 id="Wymagania">Wymagania</h2>
+
+<p>Przed rozpoczęciem tego modułu powinieneś znać podstawy <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML-a</a> oraz <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS-a</a>. Powinieneś również przyswoić treści zawarte w poprzednim module - <a href="/pl/docs/Learn/JavaScript/Pierwsze_kroki">Pierwsze kroki w Javascript</a></p>
+
+<p>Before starting this module, you should have some familiarity with the basics of <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, and you should have also worked through our previous module, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p>
+
+<div class="note">
+<p><strong>Informacja</strong>: Jeżeli pracujesz na komputerze/tablecie/innym urządzeniu na którym nie masz możliwości tworzenia własnych plików, możesz wypróbować przedstawione przykłady w programach online, takich jak: <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Przewodnik">Przewodnik</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Podejmowanie decyzji w kodzie — warunki</a></dt>
+ <dd>W każdym języku programowania kod musi podejmować decyje i odpowiednio reagować w zależności od wyniku operacji. Przykładem jest gra, w której jeżeli liczba graczy jest równa 0, wtedy gra się kończy. Inną aplikacją poglądową może być aplikacja pogodowa - jeżeli będziemy używać aplikacji rano, wtedy zostanie nam pokazany wschód słońca. Podziwiać gwiazdy i księżyć będziemy mogli podczas trwania nocy. W tym artykule odkryjemy jak działają struktury warunkowe w Javascript</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Pętle</a></dt>
+ <dd>Czasami będziesz potrzebować, aby zadanie zostało wykonane więcej niż raz - przykładem może być tutaj wyświetlenie listy nazwisk. W programowaniu pętle wykonują świetną robotę. W tym artykule spojrzymy na nie w kontekście języka Javascript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funkcje — wielokrotne wykorzystanie jednego bloku kodu</a></dt>
+ <dd>Inną podstawową koncepcją w kodowaniu jest funkcja. Funkcje umożliwiają przechowywanie fragmentu kodu, który jest odpowiedzialny za jedno zadanie. Do uruchomienia tego bloku kodu jest potrzebna krótka komenda - zamiast wielokrotnego pisania tego samego kodu. W tym artykule zbadamy podstawowe pojęcia dotyczące funkcji, takie jak: składnia, sposób wywołania, definiowanie funkcji, zasięg i parametry.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Zbuduj własną funkcję</a></dt>
+ <dd>W przeciwieństwie do poprzednich, czysto teoretycznych artykułów, ten artykuł przedstawia praktyczne wykorzystanie funkcji. Tutaj otrzymasz zadanie praktyczne, w której napiszesz własną, niestandardową funkcję. W międzyczasie wyjaśnimy też kilka przydatnych szczegółów związanych z funkcjami.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Funkcje zwracają wartości</a></dt>
+ <dd>Jest jeszcze jedna zasadnicza koncepcja, którą przedstawimy Ci w naszym kursie. Powiązana jest z funkcjami - zwracanie wartości. Niektóre funkcje nie zwracają konkretnej wartości po wykonaniu, a inne tak. Ważne jest, abyś zrozumiał jakie mogą być ich wartości, jak możesz je użyć w swoim kodzie oraz jak sprawdzić by Twoje własne funkcje zwróciły pomocne wartości.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Wprowadzenie do zdarzeń</a></dt>
+ <dd>Wydarzenia są akcjami, które występują w aplikacji podczas programowania, a które aplikacja pokaże Ci, abyś mógł na nie zareagować, jeżeli jest taka potrzeba. Przykładem jest tutaj sytuacja, w której użytkownik naciska przycisk na stronie internetowej, a Ty chciałbyś powiązać to wydarzenie z wyświetleniem informacyjnego okna. W tym ostatnim artykule poruszymy kilka ważnych tematów związanych z wydarzeniami i zobaczymy jak działają w przeglądarkach internetowych.</dd>
+</dl>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Poniższe podsumowanie sprawdzi Twoje rozumienie podstaw języka Javascript z powyższego przewodnika.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galeria zdjęć</a></dt>
+ <dd>Teraz, gdy przyjrzeliśmy się podstawowym elementom składowym JavaScript, przetestujemy Twoją wiedzę na temat pętli, funkcji, warunków i zdarzeń, budując dość popularny element, który zobaczysz na wielu stronach internetowych - galeria zdjęć z obsługą JavaScript .</dd>
+</dl>
diff --git a/files/pl/learn/javascript/client-side_web_apis/index.html b/files/pl/learn/javascript/client-side_web_apis/index.html
new file mode 100644
index 0000000000..0d8a6ed2cd
--- /dev/null
+++ b/files/pl/learn/javascript/client-side_web_apis/index.html
@@ -0,0 +1,37 @@
+---
+title: Interfejsy API działające po stronie klienta
+slug: Learn/JavaScript/Client-side_web_APIs
+translation_of: Learn/JavaScript/Client-side_web_APIs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Pisząc skrypty JavaScript po stronie klienta dla stron internetowych lub aplikacji szybko napotkamy Interfejsy Programowania Aplikacji (ang. <strong>Application Programming Interface</strong> - <strong>API</strong>). API to są funkcje programistyczne do manipulowania różnymi aspektami przeglądarki i systemu operacyjnego, na którym działa strona, lub manipulowania danymi z innych stron lub serwisów. W tym module dowiemy się czym są interfejsy API i jak korzystać z najbardziej popularnych interfejsów API, które często można napotkać w swoich pracach rozwojowych. </p>
+
+<h2 id="Wymagania_wstępne">Wymagania wstępne</h2>
+
+<p>By w pełni skorzystać z tego modułu, powinno się przejść przez poprzednie moduły JavaScript z tej serii (<a href="/pl/docs/Learn/JavaScript/Pierwsze_kroki">Pierwsze kroki w JavaScript</a>, <a href="pl/docs/Learn/JavaScript/Building_blocks">Klocki JavaScript</a>, i <a href="pl/docs/Learn/JavaScript/Obiekty">Wprowadzenie do obiektów JavaScript</a>). Moduły te, tak czy inaczej wymagają wielokrotnego użycia prostego API ponieważ trudno jest napisać przykłady JavaScriptu po stronie klienta, które wykonują bez nich coś uzytecznego! Wchodzimy tutaj na wyższy poziom, zkaładając znajomość podstawowego języka JavaScript i zgłębiając często używane interfejsy webowe API trochę bardziej szczegółowo.</p>
+
+<p>Podstawowa wiedza o <a href="/en-US/docs/Learn/HTML">HTML</a> i <a href="/en-US/docs/Learn/CSS">CSS</a> będzie również użyteczna.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Jeśli pracujesz na urządzeniu, którym nie masz możliwości tworzenia swoich plików, możesz wypróbować przykłady kodu (większość z nich) w internetowych programach kodujących takich jak <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Przewodnik">Przewodnik</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Wprowadzenie do webowych interfejsów API</a></dt>
+ <dd>First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulowanie dokumentami</a></dt>
+ <dd>When writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the {{domxref("Document")}} object. In this article, we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Pobieranie danych z serwera</a></dt>
+ <dd>Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Interfejsy API innych twórców</a></dt>
+ <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Rysowanie grafiki</a></dt>
+ <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Interfejsy API wideo i audio</a></dt>
+ <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt>
+ <dd>Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.</dd>
+</dl>
diff --git a/files/pl/learn/javascript/index.html b/files/pl/learn/javascript/index.html
new file mode 100644
index 0000000000..9109a05447
--- /dev/null
+++ b/files/pl/learn/javascript/index.html
@@ -0,0 +1,78 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+tags:
+  - Dla początkujących
+  - JavaScript
+  - Kodowanie
+  - Początkujący
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} <span lang="pl">To język programowania, który pozwala na zaimplementowanie skomplikowanych rzeczy na stronach internetowych. Za każdym razem, gdy strona internetowa robi coś więcej ponad wyświetlanie statycznych informacji, na które możesz popatrzeć - np. wyświetlanie bieżących aktualizacji treści, interaktywnych map, animowanych obrazów, Grafiki 2D/3D lub przewijanie wideo itp. - można założyć, że prawdopodobnie jest w to zaangażowany JavaScript.</span></p>
+
+<h2 id="Ścieżka_nauki">Ścieżka nauki</h2>
+
+<p><span lang="pl">JavaScript jest trudniejszy do nauczenia się niż powiązane technologie, takie jak</span> <a href="/pl/docs/Learn/HTML">HTML</a> oraz <a href="/pl/docs/Learn/CSS">CSS</a>. <span lang="pl">Zanim spróbujesz nauczyć się JavaScript, zalecamy zapoznanie się z przynajmniej tymi dwoma technologiami, a być może innymi. Zacznij od pracy poprzez następujące moduły:</span></p>
+
+<ul>
+ <li><a href="/pl/docs/Learn/Getting_started_with_the_web">Początek w Sieci</a></li>
+ <li><a href="/pl/docs/Web/Guide/HTML/Introduction">Wprowadzenie do HTML</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></li>
+</ul>
+
+<p><span lang="pl">Posiadanie wcześniejszego doświadczenia z innymi językami programowania może również pomóc. </span></p>
+
+<p><span lang="pl">Po zapoznaniu się z podstawami JavaScript powinieneś móc uczyć się o bardziej zaawansowanych kwestiach, takich jak:</span></p>
+
+<ul>
+ <li><span lang="pl">Pogłębianie wiedzy o JavaScript, jak uczy</span> <a href="/pl/docs/Web/JavaScript/Guide">poradnik JavaScript</a></li>
+ <li><a href="/en-US/docs/Web/API">API Stron Internetowych</a></li>
+</ul>
+
+<h2 id="Moduły">Moduły</h2>
+
+<p><span lang="pl">Ten temat zawiera następujące moduły, w sugerowanej kolejności ich pracy.</span></p>
+
+<dl>
+ <dt><a href="/pl/docs/Learn/JavaScript/First_steps">Pierwsze kroki z JavaScript</a></dt>
+ <dd><span lang="pl">W naszym pierwszym module JavaScript najpierw udzielamy odpowiedzi na podstawowe pytania, na przykład "co to jest JavaScript?", "Jak to wygląda?" i "co można zrobić" przed przejściem do pierwszego doświadczenia Pisania JavaScript. Następnie omówimy szczegółowo kluczowe funkcje języka JavaScript, takie jak zmienne, łańcuchy, liczby i tablice.</span></dd>
+ <dt><a href="/pl/docs/Learn/JavaScript/Building_blocks">Bloki budowy JavaScript</a></dt>
+ <dd><span lang="pl">W tym module kontynuujemy omówienie najważniejszych podstawowych funkcji języka JavaScript, zwracając uwagę na często spotykane rodzaje bloków kodu, takie jak stwierdzenia warunkowe, pętle, funkcje i zdarzenia. Widziałeś to już wcześniej, ale tylko cząstkowo - tutaj omówimy to wszystko jednoznacznie.</span></dd>
+ <dt><a href="/pl/docs/Learn/JavaScript/Objects">Wprowadzenie do obiektów JavaScript</a></dt>
+ <dd><span lang="pl">W JavaScript większość rzeczy to obiekty, od podstawowych funkcji JavaScript, takich jak ciągi znaków i tablice do interfejsów API przeglądarki na szczycie JavaScript. Można nawet tworzyć własne obiekty, aby zawęzić funkcje i zmienne do wydajnych pakietów. W JavaScript jest ważne, aby zrozumieć, czy chcesz poszerzyć swoją znajomość języka i napisać bardziej wydajny kod, dlatego udostępniliśmy ten moduł, aby Ci pomóc. Tutaj ukazujemy szczegółowo teorię obiektu i składnię, spójrzmy na sposób tworzenia własnych obiektów i wyjaśnijmy, jakie dane JSON są i jak z nimi pracować.</span></dd>
+</dl>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asynchroniczny JavaScript</a></dt>
+ <dd>
+ <p>W tym module przyjrzymy się asynchronicznemu skryptowi JavaScript, dowiemy się dlaczego jest on ważny i jak można go wykorzystać do skutecznego radzenia sobie z potencjalnymi operacjami blokującymi, takimi jak pobieranie zasobów z serwera.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><a href="/pl/docs/Learn/JavaScript/Client-side_web_APIs">Interfejsy sieciowe stroną klienta</a></dt>
+ <dd><span lang="pl">Podczas pisania JavaScript po stronie klienta w witrynach internetowych lub w aplikacjach nie zajdzie się daleko jeszcze przed rozpoczęciem korzystania z interfejsów API - interfejsów do manipulowania różnymi aspektami przeglądarki i systemu operacyjnego, na którym działa witryna, a nawet danych z innych stron internetowych lub usług. W tym module zbadamy, jakie interfejsy API są i jak posługiwać się najpopularniejszymi interfejsami API często spotykanymi w pracach rozwojowych.</span></dd>
+</dl>
+
+<h2 id="Rozwiązywanie_typowych_problemów_z_JavaScript"><span lang="pl">Rozwiązywanie typowych problemów z JavaScript</span></h2>
+
+<p><a href="/en-US/docs/Learn/JavaScript/Howto">Użyj Javascript do rozwiązywania typowych problemów</a> <span lang="pl">zawiera linki do sekcji z treściami wyjaśniającymi sposób korzystania z JavaScript w celu rozwiązania bardzo typowych problemów podczas tworzenia strony internetowej.</span></p>
+
+<h2 id="Zobacz_też">Zobacz też</h2>
+
+<dl>
+ <dt><a href="/pl/docs/Web/JavaScript">JavaScript na MDN</a></dt>
+ <dd><span lang="pl">Główny punkt wejścia do podstawowej dokumentacji JavaScript na MDN - tutaj znajdziesz obszerne dokumenty referencyjne dotyczące wszystkich aspektów języka JavaScript oraz niektóre zaawansowane ćwiczenia skierowane do doświadczonych programistów.</span></dd>
+</dl>
+
+<dl>
+ <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">Podstawy JavaScript w EXLskills</a></dt>
+ <dd>Ucz się JavaScript za darmo dzieki kursowi open-source EXLskills course, który zawiera wszystko, czego potrzebujesz, aby zacząć budować aplikacje w JS.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://www.youtube.com/user/codingmath">Matematyka kodowania</a></dt>
+ <dd><span lang="pl">Doskonała seria instruktażowych materiałów wideo, do nauki matematyki, którą musisz zrozumieć by być efektywnym programistą,</span> zrobiona przez: <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/pl/learn/javascript/obiekty/index.html b/files/pl/learn/javascript/obiekty/index.html
new file mode 100644
index 0000000000..9952e760a3
--- /dev/null
+++ b/files/pl/learn/javascript/obiekty/index.html
@@ -0,0 +1,47 @@
+---
+title: Wprowadzenie do obiektów JavaScript
+slug: Learn/JavaScript/Obiekty
+tags:
+  - JavaScript
+  - Objekt
+  - Początkujący
+  - samouczek
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">W JavaScript większość rzeczy jest obiektami, począwszy od najbardziej fundamentalnych rzeczy jak stringi czy tablice, na API przeglądarek zbudowanym na szczycie JavaScriptu kończąc. Możesz nawet stworzyć własne obiekty do hermetyzowania powiązanych funkcji i zmiennych w "pakietach", które będą działały jako podręczne kontenery. Obiektowość w JavaScripcie jest kluczowa do dalszego zrozumienia języka, dlatego też przygotowaliśmy ten moduł, aby ci pomóc.  Na początku nauczymy cię teorii obiektowości i składni, później popatrzymy na to, jak tworzyć własne obiekty.</p>
+
+<h2 id="Wymagania">Wymagania</h2>
+
+<p>Zanim rozpoczniesz ten moduł powinieneś być nieco zaznajomiony z HTML i CSS. Radzimy przejść przez moduły <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Wprowadzenie do HTML</a> i <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a> zanim rozpoczniesz naukę JavaScriptu.</p>
+
+<p>Powinieneś również być nieco zaznajomiony z podstawami JavaScript zanim zaczniesz zgłębiać szczegóły dotyczące obiektów w tym języku. Zanim rozpoczniesz ten moduł zapoznaj się z <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript pierwsze kroki</a> i <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript budowanie bloków</a>.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Jeśli pracujesz na komputerze/tablecie/innym urządzeniu gdzie nie masz możliwości tworzenia swoich własnych plików, powinieneś wypróbować (większość) przykładów kodu w aplikacji webowej takiej jak <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Przewodniki">Przewodniki</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></dt>
+ <dd>W pierwszym artykule dotyczącym obiektów JavaScript przyjrzymy się podstawom składni dla obiektów i powrócimy do tematów, które przerabialiśmy wcześniej. Powtórzymy niektóre fakty, które wskazują, że wiele właściwości, którymi się już zajmowałeś, to faktycznie obiekty.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></dt>
+ <dd>Po zapoznaniu się z podstawami skupimy się teraz na obiektowym JavaScript (OOJS) - ten artykuł przedstawia podstawowe spojrzenie na teorię programowania obiektowego (OOP), następnie bada, w jaki sposób JavaScript emuluje klasy obiektów za pomocą funkcji konstruktora, oraz jak tworzone są instancje obiektów.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></dt>
+ <dd>Prototypy są mechanizmem, za pomocą którego obiekty JavaScript dziedziczą cechy od siebie i działają inaczej niż mechanizmy dziedziczenia w klasycznych obiektowych językach programowania. W tym artykule badamy tę różnicę, wyjaśniamy, jak działają łańcuchy prototypów, i przyglądamy się, w jaki sposób można użyć właściwości prototypu do dodania metod do istniejących konstruktorów</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Dziedziczenie w JavaScript</a></dt>
+ <dd>Po wyjaśnieniu większości pikantnych szczegółów OOJS, artykuł pokazuje, jak tworzyć "potomne" klasy obiektów (konstruktory), które dziedziczą cechy z ich klas "nadrzędnych". Ponadto przedstawiamy poradę dotyczącą tego, kiedy i gdzie możesz korzystać z OOJS</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Praca z JSON</a></dt>
+ <dd>JavaScript Object Notation (JSON) to standardowy format tekstowy służący do reprezentowania danych strukturalnych, oparty na składni obiektów JavaScript, ktory jest powszechnie używany do reprezentowania i przesyłania danych w witrynach internetowych (t.j. wysyłanie niektórych danych z serwera do klienta, dzięki czemu mogą one być wyświetlane na stronie internetowej). Spotkasz to dość często, więc w tym artykule podajemy wszystko, czego potrzebujesz, aby pracować z JSON przy użyciu JavaScript, w tym analizować JSON w celu uzyskania dostępu do zawartych w nim danych oraz pisanie własnego JSON.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Praktyka budowania obiektów</a></dt>
+ <dd>W poprzednich artykułach zapoznaliśmy się ze wszystkimi niezbędnymi teoriami obiektów JavaScript i szczegółami składni, co daje Ci solidną podstawę do rozpoczęcia. W tym artykule zagłębiamy się w praktyczne ćwiczenie, dając Ci trochę więcej praktyki w budowaniu niestandardowych obiektów JavaScript, które tworzą coś ciekawego i kolorowego - jakieś kolorowe podskakujące kuleczki.</dd>
+</dl>
+
+<h2 id="Oceny">Oceny</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Dodajemy nowe funkcje do naszego demo z odbijającymi się piłkami</a></dt>
+ <dd>W tej części, jako punkt wyjścia, należy użyć demo odbijających się piłek z poprzedniego artykułu i dodać do niego kilka nowych i interesujących funkcji.</dd>
+</dl>
diff --git a/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html b/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html
new file mode 100644
index 0000000000..0d0f49c69a
--- /dev/null
+++ b/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html
@@ -0,0 +1,687 @@
+---
+title: A first splash into JavaScript
+slug: Learn/JavaScript/Pierwsze_kroki/A_first_splash
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Zaznajomiłeś się już nieco z teorią JavaScript i masz już pewne pojęcie co do zastosowania tego języka. Teraz zamierzamy udzielić Ci przyspieszonego kursu z podstawowych funkcji JavaScript'u poprzez ten, w pełni praktyczny, samouczek. Krok po kroku napiszesz tu prostą grę pod tytułem: "Zgadnij liczbę".</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania wstępne:</th>
+   <td>Podstawowa umiejętność posługiwania się komputerem, podstawowa znajomość HTML i CSS, podstawowa znajomość czym jest JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Pierwsze doświadczenia w pisaniu kodu w JavaScript i zrozumienie- przynajmniej w podstawowym stopniu- z czym związane jest pisanie programu w JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nie oczekujemy od Ciebie całkowitego zrozumienia kodu od zaraz - chcemy raczej przedstawić Ci nieco ogólniejsze spojrzenie i dać Ci odczuć sposób, w jaki działa JavaScript (jak również i inne języki programowania). W późniejszych artykułach wrócimy do użytych tu funkcjonalności w bardziej szczegółowy spsób.</p>
+
+<div class="note">
+<p>Wiele funkcjonalności, które zobaczysz w JavaScript, jest takich samych, jak w innych językach programowania (funkcje, pętle itd.) Składnia języka wygląda inaczej, ale zasada działania jest przeważnie ta sama.</p>
+</div>
+
+<h2 id="Myśleć_jak_programista">Myśleć jak programista</h2>
+
+<p>Składnia danego języka nie jest - wbrew pozorom - najtrudniejszym aspektem, z jakim trzeba zmierzyć się podczas nauki programowania. Sprawą znacznie poważniejszą jest bowiem nauczyć się stosować posiadaną wiedzę do rozwiązywania problemów ze świata realnego. Musisz zacząć myśleć jak programista. Wiąże się to z patrzeniem na opisy oczekiwanego efektu działania programu, przemyśleniem, jakich konstrukcji kodu w tym celu użyć i zaplanowaniem, jak połączyć je wszystkie w efektywnie współpracującą całość.</p>
+
+<p>Wymaga to połączenia ciężkiej pracy, doświadczenia ze składnią języków i praktyki - wraz z odrobiną kreatywności. Im więcej napiszesz kodu, tym lepszy w tym się staniesz. Nie możemy obiecać, że wypracujesz  w sobie "mózg programisty" w pięć minut, ale damy Ci wiele możliwości praktykowania myślenia jak programista w czasie trwania tego kursu.</p>
+
+<p>Pamiętając o tym, przyjrzyjmy się ogólnie procesowi pisania kodu dzieląc go na poszczególne konkretne zadania. Posłuży nam w tym celu poniższy przykładowy program.</p>
+
+<h2 id="Przykład_Gra_Zgadnij_liczbę">Przykład: Gra "Zgadnij liczbę"</h2>
+
+<p>Oto przykład prostej gry:</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Number guessing game<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+        <span class="selector token">html </span><span class="punctuation token">{</span>
+            <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+
+        <span class="selector token">body </span><span class="punctuation token">{</span>
+            <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50%</span><span class="punctuation token">;</span>
+            <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">800</span>px<span class="punctuation token">;</span>
+            <span class="property token">min-width</span><span class="punctuation token">:</span> <span class="number token">480</span>px<span class="punctuation token">;</span>
+            <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span> auto<span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+
+        <span class="selector token"><span class="class token">.lastResult</span> </span><span class="punctuation token">{</span>
+            <span class="property token">color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+            <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">3</span>px<span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>Number guessing game<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessField<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Enter a guess: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessField<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessField<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Submit guess<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessSubmit<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>resultParas<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guesses<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastResult<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lowOrHi<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+    <span class="comment token">// Your JavaScript goes here</span>
+    <span class="keyword token">let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span>
+    <span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> resetButton<span class="punctuation token">;</span>
+
+    <span class="keyword token">function</span> <span class="function token">checkGuess</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">let</span> userGuess <span class="operator token">=</span> <span class="function token">Number</span><span class="punctuation token">(</span>guessField<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>guessCount <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        guesses<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Previous guesses: '</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+      guesses<span class="punctuation token">.</span>textContent <span class="operator token">+</span><span class="operator token">=</span> userGuess <span class="operator token">+</span> <span class="string token">' '</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>userGuess <span class="operator token">===</span> randomNumber<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        lastResult<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Congratulations! You got it right!'</span><span class="punctuation token">;</span>
+        lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'green'</span><span class="punctuation token">;</span>
+        lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+        <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>guessCount <span class="operator token">===</span> <span class="number token">10</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        lastResult<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'!!!GAME OVER!!!'</span><span class="punctuation token">;</span>
+        lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+        <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        lastResult<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Wrong!'</span><span class="punctuation token">;</span>
+        lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span>
+        <span class="keyword token">if</span><span class="punctuation token">(</span>userGuess <span class="operator token">&lt;</span> randomNumber<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Last guess was too low!'</span> <span class="punctuation token">;</span>
+        <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span>userGuess <span class="operator token">&gt;</span> randomNumber<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Last guess was too high!'</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+      <span class="punctuation token">}</span>
+
+      guessCount<span class="operator token">++</span><span class="punctuation token">;</span>
+      guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    guessSubmit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> checkGuess<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">function</span> <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+      guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+      resetButton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      resetButton<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Start new game'</span><span class="punctuation token">;</span>
+      document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      resetButton<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> resetGame<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="keyword token">function</span> <span class="function token">resetGame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+      <span class="keyword token">const</span> resetParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.resultParas p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span> <span class="punctuation token">;</span> i <span class="operator token">&lt;</span> resetParas<span class="punctuation token">.</span>length <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        resetParas<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+      resetButton<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+      guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+      guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+      guessField<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'white'</span><span class="punctuation token">;</span>
+      randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Nie krępuj się - pograj sobie chwilę. Zwróć uwagę na elementy tej gry zanim przejdziesz dalej.</p>
+
+<p>Wyobraźmy sobie, że Twój szef postawił przed Tobą następujące zadanie:</p>
+
+<blockquote>
+<p>Chcę, żebyś napisał prostą grę typu "zgadnij liczbę". Gra powinna wybierać losową liczbę pomiędzy 1 a 100. Zadaniem gracza jest odgadnąć tę liczbę w najwyżej 10 próbach. Po każdej próbie gracz powinien otrzymać informację, czy zgadł, czy też nie i - jeśli nie odgadł, powinien dodatkowo dowiedzieć się, czy jego liczba miała wartość za małą, czy za dużą. Ponadto gracz powinien widzieć wybrane poprzednio przez siebie liczby. Gra ma się zakończyć gdy gracz poda prawidłową odpowiedź, lub gdy wykorzysta ostatnią próbę. Po zakończeniu gry gracz powinien mieć możliwośc rozpocząć ją od nowa.</p>
+</blockquote>
+
+<p>Zacznijmy od przedstawienia powyższego opisu w sposób bliższy myśleniu programisty i podzielmy go na proste pojedyncze zadania:</p>
+
+<ol>
+ <li>Wybierz losową liczbę z zakresu od 1 do 100.</li>
+ <li>Zapisz numer próby, którą podejmuje gracz. Zacznij od 1.</li>
+ <li>Podaj graczowi sposób, w jaki może odgadnąć tę liczbę.</li>
+ <li>Gdy padnie odpowiedź zapisz ją gdzieś, aby użytkownik mógł widzieć swoje poprzednie próby.</li>
+ <li>Sprawdź, czy padła prawidłowa odpowiedź.</li>
+ <li>Jeśli tak:
+  <ol>
+   <li>Wyświetl gratulacje.</li>
+   <li>Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).</li>
+   <li>Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.</li>
+  </ol>
+ </li>
+ <li>Jeśli nie i graczowi pozostały jeszcze próby:
+  <ol>
+   <li>Poinformuj o nieprawidłowej odpowiedzi.</li>
+   <li>Pozwól podać kolejną odpowiedź.</li>
+   <li>Zwiększ numer próby gracza o 1.</li>
+  </ol>
+ </li>
+ <li>Jeśli nie i graczowi nie pozostała już ani jedna próba:
+  <ol>
+   <li>Poinformuj o zakończeniu gry.</li>
+   <li>Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).</li>
+   <li>Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.</li>
+  </ol>
+ </li>
+ <li>Gdy gra uruchomi się ponownie, upewnij się, że dane z poprzedniej gry zostały całkowicie usunięte i interfejs powrócił do stanu początkowego. Przejdź do punktu nr 1.</li>
+</ol>
+
+<p>Zróbmy kolejny krok i spróbujmy zamienić powyższe punkty w kod, który zbuduje naszą grę. W ten sposób zobaczysz w działaniu kilka funcji JavaScript.</p>
+
+<h3 id="Przygotowanie">Przygotowanie</h3>
+
+<p>Aby rozpocząć pracę potrzebujesz mieć na swoim komputerze kopię pliku <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>). Otwórz go w edytorze tekstowym i jednocześnie w swojej przeglądarce. Plik ten zawiera nagłówek, akapit z krótką instrukcją gry, oraz (jeszcze nie działający) formularz do wprowadzania odpowiedzi.</p>
+
+<p>Nasz kod będziemy pisać w bloku określonym znacznikiem {{htmlelement("script")}} u dołu pliku HTML:</p>
+
+<pre class="brush: html">&lt;script&gt;
+
+  // Twój kod JavaScript
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="Pojemniki_na_dane_-_zmienne">Pojemniki na dane - zmienne</h3>
+
+<p>Zaczynamy. W pierwszej kolejności dodaj poniższe linijki kodu do bloku oznaczonego {{htmlelement("script")}}.</p>
+
+<pre class="brush: js">var randomNumber = Math.floor(Math.random() * 100) + 1;
+
+var guesses = document.querySelector('.guesses');
+var lastResult = document.querySelector('.lastResult');
+var lowOrHi = document.querySelector('.lowOrHi');
+
+var guessSubmit = document.querySelector('.guessSubmit');
+var guessField = document.querySelector('.guessField');
+
+var guessCount = 1;
+var resetButton;</pre>
+
+<p>Ta część kodu definiuje zmienne i stałe niezbędne do pracy programu. Najprościej rzecz ujmując, zmienne są pojemnikami na wartości takie jak liczby, czy ciągi znaków. Zmienną tworzymy używając słowo kluczowe <code>let</code> (lub <code>var</code>), po którym wpisujemy nazwę tej zmiennej. Następnie możemy tej zmiennej przypisać wartość. Robimy to za pomocą znaku równości (<code>=</code>), po którego prawej stronie wpisujemy żądaną wartość. Więcej informacji na temat różnic pomiędzy słowami kluczowymi <code>let</code> i <code>var</code> możesz znaleźć w <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">tym artykule</a>. Stałe natomiast mają za zadanie przechować dane, które mają się nie zmieniać i tworzy się je podobnie jak zmienne, ale przy użyciu słowa kluczowego <code>const</code>. W naszym przykładzie użyjemy stałych do przechowania odnośników (referencji) do poszczególnych części naszego interfejsu użytkownika. Tekst w niektórych z nich może w którymś momencie ulec zmianie, jednak bloki kodu HTML, do których odnoszą się nasze stałe pozostaną niezmienne.</p>
+
+<p>W naszym przykładzie:</p>
+
+<ul>
+ <li>Pierwsza zmienna — <code>randomNumber</code> — ma przypisaną losową liczbę z zakresu od 1 do 100, wybraną przez matematyczny algorytm.</li>
+ <li>Każda z trzech kolejnych stałych zawiera referencje do konkretnych paragrafów w naszym kodzie HTML. Zostaną one użyte do wstawienia odpowiednich wartości w dalszej części kodu:
+  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>Następne dwie zmienne mają za zadanie przechować referencje do pola tekstowego i przycisku zatwierdzania odpowiedzi. Przydadzą się do wprowadzania i zatwierdzania kolejnych odpowiedzi gracza.
+  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>Nasze dwie ostatnie zmienne zawierają kolejno: wartość domyślną 1 (tej zmiennej użyjemy do liczenia ilości prób odpowiedzi), oraz referencję do przycisku "reset", który co prawda jeszcze nie istnieje, ale niebawem się to zmieni.</li>
+</ul>
+
+<div class="note">
+<p>Na temat zmiennych i stałych będziesz dowiadywał się coraz więcej w toku trwania kursu, począwszy już od <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">tego artykułu</a>.</p>
+</div>
+
+<h3 id="Funkcje">Funkcje</h3>
+
+<p>Wstaw następujący kod poniżej dodanego w poprzednim kroku:</p>
+
+<pre class="brush: js">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p>Funkcje są blokami kodu "wielokrotnego użytku". Napisane raz, mogą być wywoływane wielokrotnie bez potrzeby ponownego pisania ich w całości. Ta cecha funkcji nie tylko oszczędza czas pisania kodu, ale również znacząco poprawia jego czytelność. Istnieje kilka sposobów definiowania funkcji. W tym przykładzie zajmiemy się jednym z prostszych. Rozpoczynamy od słowa kluczowego <code>function</code>, następnie piszemy nazwę naszej funkcji, a na jej końcu- nawiasy zwykłe. Potem wstawiamy dwa nawiasy klamrowe (<code>{ }</code>). To właśnie w nich zawarte jest ciało funkcji - kod, który będzie wykonywał się, ilekroć wywołamy tę funkcję.</p>
+
+<p>Funkcje wywołuje się pisząc jej nazwę wraz z nawiasami zwykłymi.</p>
+
+<p>Spróbujmy. Zapisz zmiany w swoim pliku z kodem i odśwież okno przeglądarki. Teraz przejdź do <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">konsoli JavaScript w narzędziach programisty</a> w przeglądarce i wprowadź tę linię:</p>
+
+<pre class="brush: js">checkGuess();</pre>
+
+<p>Po zatwierdzeniu klawiszem <kbd>Return</kbd>/<kbd>Enter</kbd>, powinno pojawić się okno alertu z tekstem: "<samp>I am a placeholder</samp>". Dzieje się tak, poniważ w naszym kodzie zdefiniowaliśmy funkcję, która uruchamia ten alert, kiedy tylko ją wywołamy.</p>
+
+<div class="note">
+<p>W  <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">dalszej części kursu</a> dowiesz się znacznie więcej o funkcjach.</p>
+</div>
+
+<h3 id="Operatory">Operatory</h3>
+
+<p>Za pomocą operatorów w JavaScript możemy przeprowadzać porównania, dokonywać obliczeń, łączyć ze sobą ciągi znaków i robić wiele innych przydatnych rzeczy.</p>
+
+<p>Jeśli jeszcze nie zapisałeś zmian w swoim pliku z kodem, oraz nie odświeżyłeś okna przeglądarki, zrób to teraz. Otwórz <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">konsolę Javascript w narzędziach programisty</a> w przeglądarce. Teraz będziesz mógł sprawdzić działanie operatorów. Przepisz dokładnie każde z poleceń z kolumny "Example" i zatwierdź każde z nich klawiszem <kbd>Return</kbd>/<kbd>Enter</kbd>. Obserwuj wyniki. Jeśli z jakiegoś powodu nie masz dostępu do  narzędzi programistycznych w Twojej przeglądarce, możesz użyć poniższej prostej konsoli:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+      inputDiv.focus();
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Najpierw zajmiemy się operatorami arytmetycznymi:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Dodawanie</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Odejmowanie</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Mnożenie</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Dzielenie</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Operatora <code>+</code> możemy też użyć do łączenia ciągów znaków (takie działanie nazywa się w programowaniu <em>konkatenacją</em>). Wprowadź poniższe linie, oddzielając je klawiszem <code>Return / Enter </code>:</p>
+
+<pre class="brush: js">var name = 'Bingo';
+name;
+var hello = ' says hello!';
+hello;
+var greeting = name + hello;
+greeting;</pre>
+
+<p>Dostępne są również pewne ułatwiające życie skróty, zwane złożonymi <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">operatorami przypisania</a>. Jeśli na przykład chcielibyśmy w prosty sposób dodać nowy ciąg tekstowy do już istniejącego, możemy napisać tak:</p>
+
+<pre class="brush: js">name += ' says hello!';</pre>
+
+<p>Co jest równoznaczne z:</p>
+
+<pre class="brush: js">name = name + ' says hello!';</pre>
+
+<p>Kiedy dokonujemy sprawdzenia prawda / fałsz (na przykład w instrukcjach warunkowych - zobacz {{anch("Instrukcje warunkowe", "poniżej")}}) używamy <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operatorów porównania</a>. Na przykład:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Ścisła równość (czy jest dokładnie tym samym?)</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Różne od (czy nie jest tym samym?)</td>
+   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Mniejsze od</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Większe od</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Instrukcje_warunkowe"><a name="Instrukcje warunkowe">Instrukcje warunkowe</a></h3>
+
+<p>Wrócmy teraz do naszej funkcji <code>checkGuess()</code>.  Z pewnością lepiej mogłaby nam się przysłużyć, gdyby jej działanie nie ograniczało się tylko do wyświetlenia komunikatu "placeholder". Mamy dla niej o wiele ważniejsze zadanie - chcemy, by sprawdzała każdą odpowiedź gracza i odpowiednio reagowała.</p>
+
+<p>W tym celu zastąp obecną funkcję <code>checkGuess()</code> jej nową wersją:</p>
+
+<pre class="brush: js">function checkGuess() {
+  var userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>Sporo kodu, prawda? Przyjrzyjmy mu się bliżej:</p>
+
+<ul>
+ <li>Pierwsza linia w ciele funkcji (linia nr 2) deklaruje zmienną <code>userGuess</code> i przypisuje jej wartość równą obecnej wartości wpisanej do pola tekstowego. Jednocześnie weryfikujemy tę wartość wbudowaną metodą <code>Number()</code>, aby mieć pewność, że wartość ta jest na pewno liczbą.</li>
+ <li>Następnie, w liniach 3–5, napotykamy nasz pierwszy blok kodu z instrukcją warunkową. Instrukcja warunkowa pozwala nam uruchamiać inne części kodu, w zależności od tego, czy dany warunek zostanie spełniony, czy też nie. Być może przypomina to trochę funkcję, ale nią nie jest. Najprostsza instrukcja warunkowa rozpoczyna się słowem kluczowym <code>if</code>, po którym następują nawiasy zwykłe i dalej nawiasy klamrowe. Wewnątrz nawiasów zwykłych umieszczamy nasz warunek. Jeśli warunek jest spełniony (wartość <code>true</code>), uruchamiany jest kod wewnątrz nawiasów klamrowych. Jeśli nie (wartość <code>false</code>)  - kod w nawiasach klamrowych nie jest uruchamiany i przechodzimy do następnej części kodu. W tym przypadku następuje sprawdzenie, czy zmienna <code>guessCount</code> jest równa <code>1</code> (tzn., czy jest to pierwsza odpowiedź gracza):
+  <pre class="brush: js">guessCount === 1</pre>
+  Jeśli tak jest zmieniamy tekst paragrafu (akapitu) <code>guesses</code> na "<samp>Previous guesses: ".</samp> W przeciwnym wypadku - nie.</li>
+ <li>Linia nr 6 dodaje aktualną wartośc zmiennej <code>userGuess</code> na końcu akapitu <code>guesses</code>, oraz białą spację aby oddzielić od siebie kolejne odpowiedzi.</li>
+ <li>Kolejna część kodu (linie 8 - 24) wykonują kilka operacji sprawdzenia:
+  <ul>
+   <li>Pierwsza instrukcja <code>if(){ }</code> sprawdza, czy odpowiedź gracza jest równa wartości zmiennej <code>randomNumber</code> wybaranej losowo na początku naszego programu. Jeśli tak jest, oznacza to, że gracz odpowiedział poprawnie i gra jest zakończona. Możemy zatem pogratulować zwycięzcy użwając sympatycznego zielonego koloru, wyczyścić zawartość akapitu informującego czy podana liczba jest za mała lub za duża (paragraf <code>lowOrHi</code>) i uruchomić funkcję <code>setGameOver()</code>, o której opowiemy sobie za chwilę.</li>
+   <li>Bezpośrednio pod właśnie opisaną instrukcją rozpoczynamy kolejny test, używając struktury <code>else if(){ }</code>. Sprawdza ona, czy obecna próba odpowiedzi gracza jest ostatnią (równą 10). Jeśli tak jest, program wykona te same operacje, co poprzednio, z tą różnicą, że zamiast gratulacji ma wyświetlić napis "game over".</li>
+   <li>Ostatnia z instrukcji warunkowych ma postać  <code>else { }</code> i zawiera kod uruchamiany tylko w przypadku, gdy żaden z poprzednich warunków nie został spełniony (tzn., że gracz nie odgadł liczby, ale pozostały mu jeszcze próby). W tym przypadku poinformujemy go, że się pomylił i przeprowadzimy kolejne sprawdzenie, czy wpisana przez niego liczba była większa czy mniejsza od prawidłowej odpowiedzi. Oczywiście wyświetlimy odpowiedni komunikat</li>
+  </ul>
+ </li>
+ <li>Trzy ostatnie linie naszej funkcji <code>checkGuess(){ }</code> (linie 26–28) przygotowują grę do przyjęcia kolejnej odpowiedzi. W tym celu zostaje dodane 1 do wartości zmiennej <code>guessCount</code>, aby "zużyć" jedną próbę gracza (<code>++</code> oznacza zwiększenie o 1 - inkrementację), wyczyszczone zostaje pole formularza i - aby gracz wygodnie mógł wprowadzić swoją następną odpowiedź - ustawiony zostaje w tym polu oczekujący kursor.</li>
+</ul>
+
+<h3 id="Zdarzenia_events">Zdarzenia (events)</h3>
+
+<p>Udało nam się całkiem zgrabnie zaimplementować funkcję <code>checkGuess()</code>, jednak na razie nie wykona ona żadnej akcji z tej prostej przyczyny, że jeszcze jej nie wywołaliśmy. Funkcja ta ma zostać wywołana przy naciśnięciu przycisku "Submit guess". W tym celu użyjemy <strong>zdarzenia</strong>. Zdarzenie jest tym, co dzieje się w przeglądarce (np. kliknięcie przycisku, załadowanie strony, odtwarzanie filmu, itd.) i czego możemy użyć  w celu wywołania konkretnego bloku kodu. Konstrukty, które "nasłuchują", czy miało miejsce zdarzenie nazywane są <strong>detektorami zdarzeń</strong> (<strong>event listeners</strong>), a wywoływane w odpowiedzi na nie bloki kodu - <strong>modułami obsługi zdarzeń (event handlers).</strong></p>
+
+<p>Do swojej funkcji <code>checkGuess()</code> dodaj poniższą linię:</p>
+
+<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>W ten sposób dodałeś detektor zdarzenia do przycisku <code>guessSubmit</code>. Jest to metoda, która ma dwie dane wejściowe (zwane <em>argumentami</em>) zapisane w formie  ciągu znaków: typ zdarzenia, które ma zajść (w tym przypadku <code>click</code>), oraz fragment kodu, który ma zostać uruchomiony poprzez to zdarzenie (funkcja <code>checkGuess()</code>). Nazwę funkcji piszemy bez cudzysłowia. {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p>
+
+<p>Zapisz i odśwież swój kod. Powinien już prawie w pełni działać. Pozostała jeszcze jedna kwestia: gdy odgadniesz właściwą odpowiedź, lub wykorzystasz wszystkie próby odpowiedzi, gra zostanie przerwana, ponieważ jak dotąd nie zdefiniowaliśmy funkcji <code>setGameOver()</code>, która ma zostać wywołana w przypadku zakończenia gry. Dodajmy zatem brakującą część kodu, aby nasza gra zyskała wszystkie funkcjonalności.</p>
+
+<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3>
+
+<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p>
+
+<pre class="brush: js">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li>
+ <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "<samp>Start new game</samp>", and add it to the bottom of our existing HTML.</li>
+ <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li>
+</ul>
+
+<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p>
+
+<pre class="brush: js">function resetGame() {
+  guessCount = 1;
+
+  var resetParas = document.querySelectorAll('.resultParas p');
+  for (var i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:</p>
+
+<ul>
+ <li>Puts the <code>guessCount</code> back down to 1.</li>
+ <li>Clears all the information paragraphs.</li>
+ <li>Removes the reset button from our code.</li>
+ <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li>
+ <li>Removes the background color from the <code>lastResult</code> paragraph.</li>
+ <li>Generates a new random number so that you are not just guessing the same number again!</li>
+</ul>
+
+<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p>
+
+<p>All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.</p>
+
+<h3 id="Loops">Loops</h3>
+
+<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.</p>
+
+<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p>
+
+<pre class="brush: js">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p>
+
+<ol>
+ <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li>
+ <li><strong>An exit condition</strong>: Here we have specified <code>i &lt; 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li>
+ <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li>
+</ol>
+
+<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p>
+
+<pre class="brush: js">var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>This code creates a variable containing a list of all the paragraphs inside <code>&lt;div class="resultParas"&gt;</code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p>
+
+<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3>
+
+<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>var resetButton;</code> line near the top of your JavaScript, then save your file:</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.</p>
+
+<p>Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.</p>
+
+<p>In this particular case, we first created a <code>guessField</code> variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:</p>
+
+<pre class="brush: js">var guessField = document.querySelector('.guessField');</pre>
+
+<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p>
+
+<p>Because <code>guessField</code> now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is <code>focus()</code>, so we can now use this line to focus the text input:</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> variable contains a reference to a {{htmlelement("p")}} element, and <code>guessCount</code> contains a number.</p>
+
+<h3 id="Playing_with_browser_objects">Playing with browser objects</h3>
+
+<p>Let's play with some browser objects a bit.</p>
+
+<ol>
+ <li>First of all, open up your program in a browser.</li>
+ <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li>
+ <li>Type in <code>guessField</code> and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!</li>
+ <li>Now type in the following:
+  <pre class="brush: js">guessField.value = 'Hello';</pre>
+  The <code>value</code> property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!</li>
+ <li>Now try typing in <code>guesses</code> and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.</li>
+ <li>Now try entering the following line:
+  <pre class="brush: js">guesses.value</pre>
+  The browser will return <samp>undefined</samp>, because paragraphs don't have the <code>value</code> property.</li>
+ <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this:
+  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>Now for some fun stuff. Try entering the below lines, one by one:
+  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  Every element on a page has a <code>style</code> property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.</li>
+</ol>
+
+<h2 id="Finished_for_now...">Finished for now...</h2>
+
+<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html b/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html
new file mode 100644
index 0000000000..1a88f2b797
--- /dev/null
+++ b/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html
@@ -0,0 +1,257 @@
+---
+title: Co poszło nie tak? Rozwiązywanie problemów w JavaScript
+slug: Learn/JavaScript/Pierwsze_kroki/Co_poszlo_nie_tak
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Kiedy w poprzednim artykule budowałeś grę "Zgadnij numer", mogłeś stwierdzić, że ona po prostu nie działała. Nie martw się - ten artykuł ma na celu zatrzymanie cię przed wyrywaniem sobie włosów nad takimi problemami poprzez dostarczenie ci narzędzi do znajdowania i naprawienia błędów w programach napisanych w JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania wstępne:</th>
+   <td>Podstawowa znajomość obsługi komputera, podstawowe rozumenie HTML i CSS oraz wiedza, czym jest JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Zdobycie umiejętności i odwagi do rozwiązywania prostych problemów w twoim własnym kodzie.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Typy_błędów">Typy błędów</h2>
+
+<p>Każdy błąd w kodzie można w ogólności podzielić na dwa typy:</p>
+
+<ul>
+ <li><strong>Błędy składniowe: </strong> Są to literówki w twoim kodzie, które albo sprawią, że program w ogóle się nie uruchomi, albo przestanie działać w pewnym momencie - zwykle zostaną podane także wiadomości o błędzie. Zwykle naprawa ich nie jest trudno, tak długo jak znasz odpowiednie narzędzia i wiesz, co znaczą poszczególne komunikaty błędów!</li>
+ <li><strong>Błędy logiczne:</strong> Są to błedy, gdy składnia jest poprawna, ale kod zachowuje się inaczej niż chciałeś, aby to robił. Znaczy to, że program uruchamia się poprawnie, ale daje niepoprawne wyniki. Są to trudne błędy do naprawienia, gdyż często nie mają żadnej informacji, która by naprowadziła na źródło błędu.</li>
+</ul>
+
+<p>No dobra, nie jest to <em>tak</em> proste - istnieją także inne czynniki, które różnicują błędy. Powyższa klasyfikacja wystarczy jednak w tym początkowym etapie twojej kariery. W kolejnej częsci przyjrzymy się tym dwóm typom błędów.</p>
+
+<h2 id="Błędogenny_przykład">Błędogenny przykład</h2>
+
+<p>Zaczniemy od naszej poprzedniej gry "Zgadnij numer" - tylko że tym razem będziemy zajmować się wersją w której umyślnie ukryto trochę błędów. Odwiedź GitHub i wykonaj lokalną wersję  <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (Zobacz live demo <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">tutaj</a>).</p>
+
+<ol>
+ <li>Aby zacząć, otwój lokalną wersję w swoim ulubionym edytorze tekstu i w twojej przeglądarce.</li>
+ <li>Spróbuj zagrać w tę - odkryjesz że kiedy wciskasz przycisk "Zgadnij" - on po prostu nie działa!</li>
+</ol>
+
+<div class="note">
+<p><strong>Notatka:</strong> Równie dobrze możesz mieć swoją wersję gry, która ci nie działa. Wiemy, że może chciałbyś ją naprawić, ale chcemy, abyś wykorzystał naszą wersję, dzięki czemu nauczysz się technik, których tu uczymy. Następnie możesz  wykorzystać je do naprawienia własnego kodu.</p>
+</div>
+
+<p>W tym miejscu spójrzmy na narzędzia developerskie, dokładniej konsolę debugowania, aby sprawdzić, czy występują błędy składniowe, a jeżeli tak - naprawić je. Poniżej znajdują się instrukcje, jak tego dokonać.</p>
+
+<h2 id="Naprawa_błędów_składniowych">Naprawa błędów składniowych</h2>
+
+<p>Wcześniej pokazaliśmy kilka prostych komend JavaScript, które wpisałeś do <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">konsoli JavaScript w narzędziach deweloperskich </a> (jeżeli nie pamiętasz jak je otworzyć, kliknij w link, aby sobie przypomnieć). Jej bardzo przydatną funkcją jest wyświetlanie błędów w momencie gdy interpreter JavaScript przeglądarki napotka na błąd. Wyruszmy na poszukiwanie błędów!</p>
+
+<ol>
+ <li>Idź do karty z otwartą stroną <code>number-game-errors.html</code> i otwórz konsolę JavaScript. Znajdziesz tam błąd:<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>Jest to prosty błąd do wytropienia, a przeglądarka daje wiele przydatnych  wskazówek: (powyższy screen jest z Firefoxa, ale inne przeglądarki pokazują podobne informacje). Od lewej do prawej znajdują się:
+  <ul>
+   <li>Czerwony "x" dla pokazania, że jest to błąd.</li>
+   <li>Wiadomość błędu dla pokazania, co poszło nie tak: "TypeError: guessSubmit.addeventListener is not a function"</li>
+   <li>Link do "Learn More", który przekierowuje do strony na MDN, która wyjaśnia szczegółowo dany błąd.</li>
+   <li>Nazwa pliku JavaScript, która po kliknięciu kieruje do karty debuggera. Jeżeli klikniesz go, pokaże ci się dokładna linia z danym błędem.</li>
+   <li>Numer linii oraz znak, gdzie wystąpił błąd. W tym przypadku linia 86, znak 3.</li>
+  </ul>
+ </li>
+ <li>Spoglądając na linię 86, zobaczymy następujący kod:
+  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
+ </li>
+ <li>The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn <em>name-of-feature</em>" on your favourite search engine. Here's a shortcut to save you some time in this instance: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
+ <li>So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight different in spelling or casing will cause an error. Changing <code>addeventListener</code> to <code>addEventListener</code> should fix this. Do this now.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="Błędy_składniowe_-_podejście_drugie">Błędy składniowe - podejście drugie</h3>
+
+<ol>
+ <li>Zapisz stronę i odśwież - zobaczysz, że błąd zniknął.</li>
+ <li>Spróbuj teraz wpisać liczbę. Po kliknięciu na przycisk "Wyślij" zobaczysz... inny błąd!<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>Tym razem błąd to "TypeError: lowOrHi is null", on line 78.
+  <div class="note"><strong>Notatka</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> jest specjalną wartością, która oznacza "nic" bądź "brak wartości" A więc <code>lowOrHi</code> został zadeklarowany i zainicjalizowany - ale wartością pustą.</div>
+
+  <div class="note"><strong>Notatka</strong>: Ten błąd pojawił się jak tylko strona została załadowana, dlatego że błąd wystąpił podczas wykonywania funkcji (w środku bloku <code>checkGuess() { ... }</code>). Jak dowiesz się później bardziej szczegółowo, kod wewnątrz funkcji jest wykonywany w innej przestrzeni niż kod poza funkcją. W tym przypadku kod nie został uruchomiony, a błąd wyrzucony do momentu, aż funkcja <code>checkGuess()</code> nie dotarła do linijki 86.</div>
+ </li>
+ <li>Popatrz na linię 78. Zobaczysz tam następujący kod:
+  <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre>
+ </li>
+ <li>W tej linii następuje próba ustawienia właściwości <code>textContent</code> zmiennej <code>lowOrHi</code> na tekst, ale to się nie powiodło ze względu na fakt, że <code>lowOrHi</code> nie jest tym, czego oczekujemy.  Trzeba się dowiedzieć, dlaczego tak jest - wyszukajmy inne wystąpienia <code>lowOrHi</code>. Najwcześniejsze wystąpienie znajdziemy w linii 48:
+  <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>W tej linii próbujemy przypisać zmiennej referencję do elementu w dokumencie HTML. Sprawdźmy, czy wartością tej zmiennej jest null po wykonaniu tej linijki. Aby to zrobić, dodaj ten kod w linii 49:
+  <pre class="brush: js">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>Notatka</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> jest bardzo użyteczną funkcją do debugowania, której celem jest wypisanie wartości zmiennej do konsoli. W tym przypadku wypisze ona wartość<code>lowOrHi</code> do konsoli w takiej postaci, w jakiej została ona ustawiona w linii 48.</p>
+  </div>
+ </li>
+ <li>Zapisz plik i odśwież stronę. Po przejściu do konsoli zobaczysz efekt wywołania <code>console.log()</code>.<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">Możemy być pewni - w tym momencie wartością <code>lowOrHi</code> jest <code>null</code>. Oznacza to, że błąd jest zdecydowanie związany z linią 48.</li>
+ <li>Pomyślmy - co może być tutaj problemem? W linii 48 używamy <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> aby otrzymać referencję do elementu. Odbywa się to poprzez podanie selektora CSS jako parametr funkcji. W dalszej częsci pliku można znaleźć paragraf, którego referencji potrzebujemy:
+  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>To oznacza, że potrzebujemy tu selektora klasy. Zaczyna się on kropką (.) - ale selektor, którego używamy w <code>querySelector()</code> (linia 48) nie ma kropki. To może być nasz błąd! Spróbuj zmienić <code>lowOrHi</code> na <code>.lowOrHi</code> w linii 48.</li>
+ <li>Zapisz i odśwież stronę. Teraz <code>console.log()</code> powinien wyświetlić element  <code>&lt;p&gt;</code>, którego poszukiwaliśmy. Uff! Kolejny błąd naprawiony! Możesz już usunąć linię z <code>console.log()</code> (albo zostawić ją odniesienie na później - jak uważasz).</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="Błędy_składniowe_-_podejście_trzecie">Błędy składniowe - podejście trzecie</h3>
+
+<ol>
+ <li>Teraz gdy spróbujesz zagrać w grę, powinno Ci się więcej powieść - gra będzie grywalna, do momentu końca gry - nieważne, czy poprzez znalezienie właściwej liczby czy skończenie się żyć.</li>
+ <li>W tym miejscu gra nie działa, a w konsoli pojawie się ten sam błąd, co na początku - "TypeError: resetButton.addeventListener is not a function"! Tym razem jednak jest wywoływany z linii 94.</li>
+ <li>Spójrzmy na linię 94. Można łatwo zauważyć, że mamy do czynienia z tym samym błędem, co wcześniej - wystarczy zmienić <code>addeventListener</code> na <code>.addEventListener</code>. Zrób to teraz.</li>
+</ol>
+
+<h2 id="Błąd_logiczny">Błąd logiczny</h2>
+
+<p>Na tym etapie gra powinna być grywalna, ale po kilku uruchomieniach można łatwo zauważyć, że "losowa" liczba to zawsze 0 bądź 1. Nie jest to to, czego można od takiej gry oczekiwać!</p>
+
+<p>Musi to być jakiś problem z logiką aplikacji - gra nie zwraca błędu, jednak nie zachowuje się jak powinna.</p>
+
+<ol>
+ <li>Znajdźmy zmienną <code>randomNumber</code>  i linie, w których zmienna jest zadeklarowana i jej wartość ustalona. To miejsce znajduje się w okolicach linii 44:
+
+  <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre>
+  A linia, która generuje losową liczbę przed każdą grą, to linia 113:
+
+  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li>Aby sprawdzić czy to z tymi liniami jest problem, użyjmy naszego starego przyjaciela - polecenia <code>console.log()</code>. Wstaw następujący kod bezpośrednio pod wcześniej wymienionymi dwiema liniami kodu:
+  <pre class="brush: js">console.log(randomNumber);</pre>
+ </li>
+ <li>Zapisz i odśwież, następnie zagraj kilka razy - można zauważyć, że za każdym wywołaniem  <code>randomNumber</code> jest równe 1.</li>
+</ol>
+
+<h3 id="Praca_nad_logiką">Praca nad logiką</h3>
+
+<p>W celu naprawy tego błędu, należy najpierw pomyśleć, jak działa ten kod. Na samym początku wywołujemy <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, który generuje zmiennoprzecinkową liczbę pomiędzy 0 i 1, na przykład 0.5675493843.</p>
+
+<pre class="brush: js">Math.random()</pre>
+
+<p>Następnie uzyskaną liczbę podajemy jako parametr funkcji <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, której zadanie jest zaokrąglenie uzyskanej w parametrze liczby do największej liczby całkowitej równej bądź mniejszej od parametru. Następnie dodajemy 1 do wyniku:</p>
+
+<pre>Math.floor(Math.random()) + 1</pre>
+
+<p>Zaokrąglanie liczby zmiennoprzecinkowej w zakresie od 0 do 1 zawsze da 0 . Dodanie do niej 1 da więc wynik 1. Aby naprawić wynik zgodnie z wymaganiami, pomnóżmy naszą losową liczbę przez 100. Sprawi to, że dostaniemy losową liczbę od 0 do 99:</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100);</pre>
+
+<p>Jeżeli dodamy 1, dostaniemy liczbę z przedziału od 1 do 100:</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>
+
+<p>Zmień obie linie zgodnie z tym wzorem, zapisz i odśwież stronę - gra powinna zachowywać się tak jak od niej tego oczekujemy!</p>
+
+<h2 id="Inne_popularne_błędy">Inne popularne błędy</h2>
+
+<p>Istnieją inne popularne błędy, na które natkniesz się w swoim kodzie. Ta sekcja zawiera listę najpopularniejszych z nich.</p>
+
+<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3>
+
+<p>Ten błąd oznacza, że zapomniałeś o średniku na końcu linii. Czasem może jednak być bardziej enigmatyczny. Przykładem może być zmiana tej linii:</p>
+
+<pre class="brush: js">var userGuess = Number(guessField.value);</pre>
+
+<p>na</p>
+
+<pre class="brush: js">var userGuess === Number(guessField.value);</pre>
+
+<p>Ten kod wyrzuca błąd, gdyż myśli, że chcesz zrobić coś innego. Musisz być pewny, że nie mieszasz znaku przypisania (<code>=</code>) — zapisuje on wartość w zmiennej, z operatorem dokładnego porównania, który testuje czy jedna wartość jest dokładnie równa drugiej - zwraca ona wynik w postaci zmiennej logicznej <code>true</code>/<code>false</code>.</p>
+
+<div class="note">
+<p><strong>Notatka</strong>: Aby dowiedzieć się więcej o tym błędzie, odwiedź naszą stronę <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a>.</p>
+</div>
+
+<h3 id="Program_zawsze_twierdzi_że_wygrałeś_niezależnie_od_wprowadzonej_liczby">Program zawsze twierdzi, że wygrałeś, niezależnie od wprowadzonej liczby</h3>
+
+<p>Może to być objawem pomieszania operatorów przypisania i dokładnego porównania. Przykładowo jeżeli byśmy zmienili tę linię w funkcji <code>checkGuess()</code>:</p>
+
+<pre class="brush: js">if (userGuess === randomNumber) {</pre>
+
+<p>na</p>
+
+<pre class="brush: js">if (userGuess = randomNumber) {</pre>
+
+<p>ten test zawsze zwróciłby <code>true</code> (prawdę), co sprawiłoby, że program za każdym razem twierdziłby, że gra została przez Ciebie wygrana. Uważaj na błędy!</p>
+
+<h3 id="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3>
+
+<p>Ten błąd jest prosty — oznacza po prostu, że zapomniałeś dodać nawias zamykający na końcu funkcji/wywołania metody.</p>
+
+<div class="note">
+<p><strong>Notatka</strong>: Zobacz naszą  stronę referencyjną: <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>, aby dowiedzieć się więcej o tym błędzie.</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+
+<p>Ten błąd zwykle jest związany z niepoprawnie napisanym obiektem JavaScript. Tym razem jednak został spowodowany zmianą</p>
+
+<pre class="brush: js">function checkGuess() {</pre>
+
+<p>na</p>
+
+<pre class="brush: js">function checkGuess( {</pre>
+
+<p>Ten błąd spowodował, że przeglądarka zinterpretowała ten kod jako próbę podania wnętrza funkcji jako parametr funkcji. Uważaj na nawiasy!</p>
+
+<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+
+<p>This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the <code>checkGuess()</code> function.</p>
+
+<h3 id="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>
+
+<p>These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, <em>string</em> would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.</p>
+
+<p>For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p>
+</div>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>A wieć to jest to - podstawy szukania błędów w prostych programach w JS. Nie zawsze znalezienie błędu jest tak proste , ale przynajmniej ten artykuł może ci pomóc w zaoszczędzeniu kilku godzin snu i pozwolić na szybsze postępy w nauce.</p>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<div>
+<ul>
+ <li>Istnieje wiele innych typów błędów, które nie zostały tu przedstawione - tworzymy artykuł o tym, co one dokładnie oznaczają -zobacz <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li>
+ <li>Jeżeli napotkasz błędy w swoim kodzie, co do których nie jesteś pewny, jak je rozwiązać - nawet po lekturze tego artykułu - możesz uzyskać pomoc. Zapytaj na  <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, lub na kanale IRC  <a href="irc://irc.mozilla.org/mdn">#mdn</a> na <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Opisz swój błąd, a my spróbujemy Ci pomóc. Przedstawienie Twojego kodu będzie równie pomocne w owocnym rozwiązaniu problemu.</li>
+</ul>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/pl/learn/javascript/pierwsze_kroki/index.html b/files/pl/learn/javascript/pierwsze_kroki/index.html
new file mode 100644
index 0000000000..ab90523dce
--- /dev/null
+++ b/files/pl/learn/javascript/pierwsze_kroki/index.html
@@ -0,0 +1,61 @@
+---
+title: Pierwsze kroki w Javascript
+slug: Learn/JavaScript/Pierwsze_kroki
+tags:
+  - Artykuły
+  - Liczby
+  - Moduły
+  - Operatory
+  - Początkujący
+  - Przewodnik
+  - Pętle
+  - Zmienne
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">W pierwszym module, przed rozpoczęciem praktycznego pisania kodu w JavaScript, odpowiemy sobie na kilka fundamentalnych pytań takich jak: "czym jest JavaScript?", "czym się charakteryzuje?" oraz "co potrafi?". Następnie omówimy kilka kluczowych kwestii - zmienne, ciągi znaków, liczby oraz pętle w JavaScript.</p>
+
+<h2 id="Wymagania">Wymagania</h2>
+
+<p>Przed rozpoczęciem nauki tego modułu nie musisz posiadać żadnej wiedzy o JavaScript, ale powinieneś już znać podstawowe zagadnienia związane z HTML-em oraz CSS-em. Doradzamy Ci, abyś ukończył moduły przedstawione poniżej:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Rozpoczęcie przygody z programowaniem</a> (zawiera <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">podstawy JavaScriptu</a>). </li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Wprowadzenie do HTML-a</a>.</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS-a</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Informacja</strong>: Jeżeli pracujesz na komputerze/tablecie/innym urządzeniu na którym nie masz możliwości tworzenia własnych plików, możesz wypróbować przedstawione przykłady w programach online, takich jak:  <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Przewodnik">Przewodnik</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pl/docs/Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript">Czym jest JavaScript?</a></dt>
+ <dd>Witamy w MDN-owym kursie JavaScript dla początkujących! W tym artykule spojrzymy na JavaScript jeszcze nieco ogólne i odpowiemy sobie na podstawowe pytania:  "co to jest?" oraz "co robi?". To ważne, by znać cele stosowania tego języka.</dd>
+ <dt><a href="https://developer.mozilla.org/pl/docs/Learn/JavaScript/Pierwsze_kroki/A_first_splash">Pierwsze spojrzenie na JavaScript</a></dt>
+ <dd>Najpierw nauczysz się teorii JavaScript, oraz tego, co możesz zrobić za jego pomocą. Następnie przejdziesz przez instruktarz oparty o podstawowe cechy JavaScript, który będzie miał formę praktyczną - napiszesz prostą grę - "Zgadnij liczbę". Proces pisania pokażemy Ci krok po kroku.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Coś poszło nie tak? Rozwiązywanie problemów w JavaScript</a></dt>
+ <dd>Podczas pisania gry "zgadnij liczbę" z poprzedniego artykułu możesz natrafić na trudności, które spowodują problemy z jej poprawnym działaniem. Spokojnie - ten artykuł uchroni Cię przed wyrywaniem sobie włosów podczas sprawdzania swojego kodu. Pokażemy Ci kilka prostych sposóbów wykrywania i eliminowania błędów w programie napisanym w Javascript.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Przechowywanie informacji, których potrzebujesz — Zmienne</a></dt>
+ <dd>Po przeczytaniu poprzednich artykułów powinieneś wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, oraz jak możesz używać go wraz z innymi internetowymi technologiami. Ten artykuł poprowadzi Cię przez podstawowe "bloki", którymi będziesz posługiwać się podczas pisania programu w Javascript - zmienne.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Podstawy działań w JavaScript — liczby i operatory</a></dt>
+ <dd>W tym miesjcu kursu porozmawiamy o działaniach w JavaScript - dowiesz się jak możesz łączyć operatory oraz przeczytasz o innych cechach języka, aby poprawnie korzystać z liczb.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Przechowywanie tekstu — ciągi znaków w JavaScript</a></dt>
+ <dd>Następnie skupimy swoją uwagę na string-ach - tak nazywają się ciągi tekstu w programowaniu. W tym artykule spojrzymy na najważniejsze rzeczy, które potrzebujesz wiedzieć o ciągach znaków w JavaScript. Są nimi: tworzenie "string-ów", używanie cudzysłowia, oraz łączenie ze sobą ciągów znaków.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Użyteczne metody w string-ach</a></dt>
+ <dd>Po zaznajomieniu się z podstawami string-ów czas podnieść poprzeczkę. Zaczniemy mysleć o pomocnych operacjach, które możemy wykonać na ciągach znaków poprzez wbudowane funkcje, takie jak: obliczanie długości ciągu znaków, łączenie i rozdzielanie, zastępowanie jednego znaku innym i wiele więcej.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Pętle</a></dt>
+ <dd>W ostatnim artykule tego modułu przyjrzymy się pętlom - następnym sposobie przechowywania informacji w pojedynczej zmiennej. Dowiesz się tutaj dlaczego są one ważne, odkryjesz jak je stworzyć, dodać i usunąć z nich dane. </dd>
+</dl>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Poniższe podsumowanie sprawdzi Twoje rozumienie podstaw języka Javascript z powyższego przewodnika.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Generator niemądrych opowieści</a></dt>
+ <dd>W tej części zastosujesz zdobytą wiedzę, zebraną w powyższych artykułach, do stworzenia aplikacji - "Generatora niemądrych opowieści". Baw się dobrze!</dd>
+</dl>
diff --git a/files/pl/learn/javascript/pierwsze_kroki/math/index.html b/files/pl/learn/javascript/pierwsze_kroki/math/index.html
new file mode 100644
index 0000000000..3e5563d0da
--- /dev/null
+++ b/files/pl/learn/javascript/pierwsze_kroki/math/index.html
@@ -0,0 +1,455 @@
+---
+title: Basic math in JavaScript — numbers and operators
+slug: Learn/JavaScript/Pierwsze_kroki/Math
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">At this point in the course we discuss math in JavaScript — how we can use {{Glossary("Operator","operators")}} and other features to successfully manipulate numbers to do our bidding.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To gain familiarity with the basics of math in JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Wszyscy_kochają_matematykę">Wszyscy kochają matematykę</h2>
+
+<p>Ok, może nie. Niektórzy  kochają matematykę, inni nienawidzą  od kiedy musieli nauczyć się tabliczki mnożenia i dzielenia przez liczby wielocyfrowe w szkole podstawowej, a częśc jest gdzieś pośrodku. Ale nikt z nas nie może zaprzeczyć, temu że matematyka jest fundamentalną częścią życia, bez której nie zajdzie się daleko. Jest to szczególnie prawdziwe kiedy uczymy się programowania w JavaScript (lub jakimkolwiek innym języku) -   tak wiele z tego co robimy polega na przetwarzaniu danych liczbowych, obliczaniu nowych wartości i tak dalej, że nie będziesz zaskoczony, że JavaScript posiada w pełni funkcjonalny zestaw funkcji matematycznych.</p>
+
+<p>Artykuł omawia podstawy, które musisz znać na ten moment.</p>
+
+<h3 id="Typy_liczb">Typy liczb</h3>
+
+<p>W programowaniu, nawet na pozór łatwy system dziesiętny, który tak dobrze znamy jest bardziej skąplikowany niż mógłbyś sądzić. Używamy różnych terminów do opisania różnych typów liczb dziesiętnych, dla przykładu: </p>
+
+<ul>
+ <li><strong>Integers</strong> są to liczby całkowite, e.g. 10, 400, or -5.</li>
+ <li><strong>Floating point numbers</strong> (floats) have decimal points and decimal places, for example 12.5, and 56.7786543.</li>
+ <li><strong>Doubles</strong> are a specific type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places).</li>
+</ul>
+
+<p>We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like:</p>
+
+<ul>
+ <li><strong>Binary</strong> — The lowest level language of computers; 0s and 1s.</li>
+ <li><strong>Octal</strong> — Base 8, uses 0–7 in each column.</li>
+ <li><strong>Hexadecimal</strong> — Base 16, uses 0–9 and then a–f in each column. You may have encountered these numbers before when setting <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">colors in CSS</a>.</li>
+</ul>
+
+<p><strong>Before you start to get worried about your brain melting, stop right there!</strong> For a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever.</p>
+
+<p>The second bit of good news is that unlike some other programming languages, JavaScript only has one data type for numbers, both integers and decimals — you guessed it, {{jsxref("Number")}}. This means that whatever type of numbers you are dealing with in JavaScript, you handle them in exactly the same way.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Actually, JavaScript has a second number type, {{Glossary("BigInt")}}, used for very, very large integers. But for the purposes of this course, we'll just worry about <code>Number</code> values.</p>
+</div>
+
+<h3 id="Its_all_numbers_to_me">It's all numbers to me</h3>
+
+<p>Let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>.</p>
+
+<ol>
+ <li>First of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order:
+  <pre class="brush: js notranslate">let myInt = 5;
+let myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.</li>
+ <li>Now let's check that both our original variables are of the same datatype. There is an operator called {{jsxref("Operators/typeof", "typeof")}} in JavaScript that does this. Enter the below two lines as shown:
+  <pre class="brush: js notranslate">typeof myInt;
+typeof myFloat;</pre>
+  You should get <code>"number"</code> returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!</li>
+</ol>
+
+<h3 id="Useful_Number_methods">Useful Number methods</h3>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> object, an instance of which represents all standard numbers you'll use in your JavaScript, has a number of useful methods available on it for you to manipulate numbers. We don't cover these in detail in this article because we wanted to keep it as a simple introduction and only cover the real basic essentials for now; however, once you've read through this module a couple of times it is worth going to the object reference pages and learning more about what's available.</p>
+
+<p>For example, to round your number to a fixed number of decimal places, use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> method. Type the following lines into your browser's <a href="/en-US/docs/Tools/Web_Console">console</a>:</p>
+
+<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364;
+lotsOfDecimal;
+let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
+twoDecimalPlaces;</pre>
+
+<h3 id="Converting_to_number_data_types">Converting to number data types</h3>
+
+<p>Sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. This most commonly happens when data is entered into a <a href="/en-US/docs/Learn/Forms">form</a> input, and the <a href="/en-US/docs/Web/HTML/Element/input/text">input type is text</a>. There is a way to solve this problem — passing the string value into the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> constructor to return a number version of the same value.</p>
+
+<p>For example, try typing these lines into your console:</p>
+
+<pre class="brush: js notranslate">let myNumber = '74';
+myNumber + 3;</pre>
+
+<p>You end up with the result 743, not 77, because <code>myNumber</code> is actually defined as a string. You can test this by typing in the following:</p>
+
+<pre class="brush: js notranslate">typeof myNumber;</pre>
+
+<p>To fix the calculation, you can do this:</p>
+
+<pre class="brush: js notranslate">Number(myNumber) + 3;</pre>
+
+<h2 id="Arithmetic_operators">Arithmetic operators</h2>
+
+<p>Arithmetic operators are the basic operators that we use to do sums in JavaScript:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Addition</td>
+   <td>Adds two numbers together.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Subtraction</td>
+   <td>Subtracts the right number from the left.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplication</td>
+   <td>Multiplies two numbers together.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Division</td>
+   <td>Divides the left number by the right.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Remainder (sometimes called modulo)</td>
+   <td>
+    <p>Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.</p>
+   </td>
+   <td>
+    <p><code>8 % 3</code> (returns 2, as three goes into 8 twice, leaving 2 left over).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>**</code></td>
+   <td>Exponent</td>
+   <td>Raises a <code>base</code> number to the <code>exponent</code> power, that is, the <code>base</code> number multiplied by itself, <code>exponent</code> times. It was first Introduced in EcmaScript 2016.</td>
+   <td><code>5 ** 2</code> (returns <code>25</code>, which is the same as <code>5 * 5</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: You'll sometimes see numbers involved in arithmetic referred to as {{Glossary("Operand", "operands")}}.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in <code>Math.pow(7, 3)</code>, <code>7</code> is the base and <code>3</code> is the exponent, so the result of the expression is <code>343</code>. <code>Math.pow(7, 3)</code> is equivalent to <code>7**3</code>.</p>
+</div>
+
+<p>We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> to familiarize yourself with the syntax.</p>
+
+<ol>
+ <li>First try entering some simple examples of your own, such as
+  <pre class="brush: js notranslate">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example:
+  <pre class="brush: js notranslate">let num1 = 10;
+let num2 = 50;
+9 * num1;
+num1 ** 3;
+num2 / num1;</pre>
+ </li>
+ <li>Last for this section, try entering some more complex expressions, such as:
+  <pre class="brush: js notranslate">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Some of this last set of calculations might not give you quite the result you were expecting; the  section below might well give the answer as to why.</p>
+
+<h3 id="Operator_precedence">Operator precedence</h3>
+
+<p>Let's look at the last example from above, assuming that <code>num2</code> holds the value 50 and <code>num1</code> holds the value 10 (as originally stated above):</p>
+
+<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>
+
+<p>As a human being, you may read this as <em>"50 plus 10 equals 60"</em>, then <em>"8 plus 2 equals 10"</em>, and finally <em>"60 divided by 10 equals 6"</em>.</p>
+
+<p>But the browser does <em>"10 divided by 8 equals 1.25"</em>, then <em>"50 plus 1.25 plus 2 equals 53.25"</em>.</p>
+
+<p>This is because of <strong>operator precedence</strong> — some operators are applied before others when calculating the result of a calculation (referred to as an <em>expression</em>, in programming).  Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the calculation is always evaluated from left to right).</p>
+
+<p>If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:</p>
+
+<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>
+
+<p>Try it and see.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A full list of all JavaScript operators and their precedence can be found in <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
+</div>
+
+<h2 id="Increment_and_decrement_operators">Increment and decrement operators</h2>
+
+<p>Sometimes you'll want to repeatedly add or subtract one to or from a numeric variable value. This can be conveniently done using the increment (<code>++</code>) and decrement (<code>--</code>) operators. We used <code>++</code> in our "Guess the number" game back in our <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">first splash into JavaScript</a> article, when we added 1 to our <code>guessCount</code> variable to keep track of how many guesses the user has left after each turn.</p>
+
+<pre class="brush: js notranslate">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: These operators are most commonly used in <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">loops</a>, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">check it out live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">look at the source code</a> to see if you can spot the incrementors! We'll look at loops in detail later on in the course.</p>
+</div>
+
+<p>Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:</p>
+
+<pre class="brush: js notranslate">3++;</pre>
+
+<p>So, you can only increment an existing variable. Try this:</p>
+
+<pre class="brush: js notranslate">let num1 = 4;
+num1++;</pre>
+
+<p>Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, <em>then</em> increments the variable. You can see that it's been incremented if you return the variable value again:</p>
+
+<pre class="brush: js notranslate">num1;</pre>
+
+<p>The same is true of <code>--</code> : try the following</p>
+
+<pre class="brush: js notranslate">let num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can make the browser do it the other way round — increment/decrement the variable <em>then</em> return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use <code>++num1</code> and <code>--num2</code>.</p>
+</div>
+
+<h2 id="Assignment_operators">Assignment operators</h2>
+
+<p>Assignment operators are operators that assign a value to a variable. We have already used the most basic one, <code>=</code>, loads of times — it simply assigns the variable on the left the value stated on the right:</p>
+
+<pre class="brush: js notranslate">let x = 3; // x contains the value 3
+let y = 4; // y contains the value 4
+x = y; // x now contains the same value y contains, 4</pre>
+
+<p>But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+   <th scope="col">Shortcut for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Addition assignment</td>
+   <td>Adds the value on the right to the variable value on the left, then returns the new variable value</td>
+   <td style="white-space: nowrap;"><code>x += 4;</code></td>
+   <td style="white-space: nowrap;"><code>x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Subtraction assignment</td>
+   <td>Subtracts the value on the right from the variable value on the left, and returns the new variable value</td>
+   <td style="white-space: nowrap;"><code>x -= 3;</code></td>
+   <td style="white-space: nowrap;"><code>x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>Multiplication assignment</td>
+   <td>Multiplies the variable value on the left by the value on the right, and returns the new variable value</td>
+   <td style="white-space: nowrap;"><code>x *= 3;</code></td>
+   <td style="white-space: nowrap;"><code>x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>Division assignment</td>
+   <td>Divides the variable value on the left by the value on the right, and returns the new variable value</td>
+   <td style="white-space: nowrap;"><code>x /= 5;</code></td>
+   <td style="white-space: nowrap;"><code>x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.</p>
+
+<p>Note that you can quite happily use other variables on the right hand side of each expression, for example:</p>
+
+<pre class="brush: js notranslate">let x = 3; // x contains the value 3
+let y = 4; // y contains the value 4
+x *= y; // x now contains the value 12</pre>
+
+<div class="note">
+<p><strong>Note</strong>: There are lots of <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">other assignment operators available</a>, but these are the basic ones you should learn now.</p>
+</div>
+
+<h2 id="Active_learning_sizing_a_canvas_box">Active learning: sizing a canvas box</h2>
+
+<p>In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the {{domxref("Canvas API", "", "", "true")}}. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables <code>x</code> and <code>y</code>, which are initially both given a value of 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Open in new window</a></strong></p>
+
+<p>In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:</p>
+
+<ul>
+ <li>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</li>
+ <li>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</li>
+ <li>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</li>
+ <li>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</li>
+ <li>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</li>
+ <li>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</li>
+</ul>
+
+<p>Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.</p>
+
+<h2 id="Comparison_operators">Comparison operators</h2>
+
+<p>Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use <strong>comparison operators</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Strict equality</td>
+   <td>Tests whether the left and right values are identical to one another</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Strict-non-equality</td>
+   <td>Tests whether the left and right values are <strong>not</strong> identical to one another</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Less than</td>
+   <td>Tests whether the left value is smaller than the right one.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Greater than</td>
+   <td>Tests whether the left value is greater than the right one.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;=</code></td>
+   <td>Less than or equal to</td>
+   <td>Tests whether the left value is smaller than or equal to the right one.</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;=</code></td>
+   <td>Greater than or equal to</td>
+   <td>Tests whether the left value is greater than or equal to the right one.</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: You may see some people using <code>==</code> and <code>!=</code> in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from <code>===</code>/<code>!==</code>. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.</p>
+</div>
+
+<p>If you try entering some of these values in a console, you'll see that they all return <code>true</code>/<code>false</code> values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:</p>
+
+<ul>
+ <li>Display the correct text label on a button depending on whether a feature is turned on or off</li>
+ <li>Display a game over message if a game is over or a victory message if the game has been won</li>
+ <li>Display the correct seasonal greeting depending what holiday season it is</li>
+ <li>Zoom a map in or out depending on what zoom level is selected</li>
+</ul>
+
+<p>We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Start machine&lt;/button&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+const txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine is stopped.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Open in new window</a></strong></p>
+
+<p>You can see the equality operator being used just inside the <code>updateBtn()</code> function. In this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to  "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Such a control that swaps between two states is generally referred to as a <strong>toggle</strong>. It toggles between one state and another — light on, light off, etc.</p>
+</div>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">Test your skills: Math</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.</p>
+
+<p>In the next article, we'll explore text and how JavaScript allows us to manipulate it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a> and <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> articles.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html b/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html
new file mode 100644
index 0000000000..3898eb049c
--- /dev/null
+++ b/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html
@@ -0,0 +1,342 @@
+---
+title: Co to jest JavaScript?
+slug: Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Witamy w MDN na kursie JavaScript dla początkujących! W tym pierwszym artykule przyjrzymy się JavaScript z pewnej odległości, odpowiadając na pytania w stylu "co to jest?" i "co on robi?" oraz upewnimy się, że rozumiesz cel, któremu służy JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania wstępne:</th>
+   <td>Podstawowa znajomość komputera, podstawowa znajomość HTML i CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Zapoznanie z istotą JavaScript, co on robi i jak jest dopasowywany do strony internetowej.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Definicja_ogólna">Definicja ogólna</h2>
+
+<p>JavaScript to język programowania, który umożliwia wdrożenie na stronie internetowej skomplikowanych elementów, dzięki którym strona ta może nie tylko wyświetlać statyczne informacje, ale również obsługiwać zmianę treść odpowiednio do sytuacji, wyświetlać interaktywne mapy i animacje grafiki 2D/3D , wyświetlać video itd. Jest to trzecia warstwa standardowych technologii internetowych, z których dwie (<a href="/en-US/docs/Learn/HTML">HTML</a> i <a href="/en-US/docs/Learn/CSS">CSS</a>) omówiliśmy w innych częściach "Strefy nauki".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} jest to język znaczników, który używa się do sformułowania dokumentu HTML (wyświetlanego jako strona przeglądarki) i strukturyzacji treści zawartej w dokumencie HTML, na przykład zdefiniowania akapitów, nagłówków i tabel danych czy osadzenia obrazów i wideo.</li>
+ <li>{{glossary("CSS")}} jest to język reguł stylizacji, który używa się do stylizacji dokumentu HTML, na przykład ustawienia kolorów tła lub czcionki i układania treści w wielu kolumnach.</li>
+ <li>{{glossary("JavaScript")}} jest to skryptowy język, który umożliwia  obsługę dynamicznego tworzenia treści na stronie internetowej, kontrolowanie multimediów, animację obrazów i prawie wszystko inne  (no dobrze, nie wszystko, ale to niesamowite, co można osiągnąć kilkoma liniami kodu JavaScript.)</li>
+</ul>
+
+<p>Te trzy warstwy układają się jedna na drugiej. Jako przykład weźmy prostą etykietę tekstową. Możemy ją oznaczyć używajac kodu HTML, aby nadać jej strukturę:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Następnie możemy dodać kod CSS, aby nadać ładny wygląd:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>Na końcu możemy dodać kod Javascript, aby zaimplementować dynamiczne zachowanie:</p>
+
+<pre class="brush: js notranslate">var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}</p>
+
+<p>Kliknij na przycisk (etykietę tekstową), aby zobaczyć co się dzieje (na GitHub mozesz znależć kod źróðłowy i wersję demo — zobacz <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">kod źródłowy</a> lub <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">przykład na żywo</a>)!</p>
+
+<p>JavaScript pozwala osiągać o wiele bardziej zaawansowane efekty - sprawdź poniżej jego możliwości.</p>
+
+<h2 id="Co_można_zrobić">Co można zrobić?</h2>
+
+<p>Rdzeń języka JavaScript składa się z kilku funkcjonalności, które umożliwiają wykonanie rzeczy, takich jak te: </p>
+
+<ul>
+ <li>Przechowywanie wartości w zmiennych. W powyższym przykładzie pytamy użytkownika o imię, które następnie zapisujemy w zmiennej o nazwie <code>name</code>.</li>
+ <li>Operowanie na porcjach tekstu (zwanych w programowaniu "łańcuchami"). W powyższym przykładzie używamy łańcucha "Player 1: ", który łączymy ze zmienną <code>name</code>, aby stworzyć etykietę ''Player 1: Chris".</li>
+ <li>Uruchamianie kodu w odpowedzi na określone zdarzenia zaistniałe na stronie internetowej. W naszym przykładzie użyliśmy zdarzenie {{Event("click")}} do wykrywania klknięć przycisku (etykiety tekstowej). Po kliknieciu przycisku, uruchamiany jest kod, który zmienia etykiete tekstową.</li>
+ <li>I wiele więcej!</li>
+</ul>
+
+<p>Jeszcze bardziej ekscytująca jest możliwość stosowania tzw. interfejsów programowania aplikacji (<em>ang. Application Programming Interfaces - API</em>), działających na szczycie rdzenia języka JavaScript.</p>
+
+<p>Interfejsy API są gotowymi zestawami bloków kodu, które umożliwiają programistom implementować programy, które w przeciwnym razie byłyby bardzo trudne do napisania przez programistę a nawet często niemożliwe do napisania przez niego. Spełniają one w programowaniu tą samą rolę, co gotowe segmenty mebli przy umeblowaniu domu — o wiele łatwiej jest wykorzystać gotowe panele i je poskręcać, niż samemu opracować projekt mebli, znaleźć drewno, pociąć go na deski, wysuszyć, przyciąć je na elementy swoich mebli i w końcu je samemu zmontować.</p>
+
+<p>Interfejsy API dzielą się ogólnie na dwie kategorie:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Interfesy API przeglądarek internetowych</strong>, które są wbudowane w przeglądarki. Służą do udostępniania danych z komputera, ale też mogą wykonywać bardziej zaawansowane rzeczy. Na przykład:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pl/docs/Web/API/Document_Object_Model">API DOM (Document Object Model) </a>pozwala manipulować kodem HTML i CSS, tworząc, usuwając i zmianiając kod HTML, dynamiczne dodając do strony nowe style. Za każdym razem kiedy widzisz wyskakujące okienko pojawiające się na stronie lub zmianę fragmentu treści strony, to właśnie sprawka API DOM.</li>
+ <li><a href="https://developer.mozilla.org/pl/docs/Web/API/Geolocation">API Geolokalizacji</a> pozwala na pobranie informacji lokalizacyjnych i nie tylko. <a href="https://www.google.com/maps">Google Maps</a> używa tego API do znalezienieaTwojej lokalizacji i wyświetlenia jej na mapie.</li>
+ <li><a href="https://developer.mozilla.org/pl/docs/Web/API/Canvas_API">API Canvas</a> i <a href="https://developer.mozilla.org/pl/docs/Web/API/WebGL_API">API WebGL</a> umożliwiają tworzenie animacji 2D i 3D. Ludzie tworzą naprawdę szalone rzeczy używając tych technologii - sprawdź sam - <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> i <a href="http://webglsamples.org/">webglsamples</a>.</li>
+ <li>Interfejsy <a href="https://developer.mozilla.org/pl/Apps/Fundamentals/Audio_and_video_delivery">Audio i wideo</a>, takie jak {{domxref("HTMLMediaElement")}} czy <a href="/pl/docs/Web/API/WebRTC_API">WebRTC</a> umożliwiają robienie niezwykle interesujących rzeczy z multimediami, jak odtwarzanie wideo czy muzyki bezpośrednio na stronie internetowej, albo pobieranie transmisji wideo z Twojej kamery internetowej i wyświetlanie jej na stronie (sprawdź <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a>).</li>
+</ul>
+
+<div class="note">
+<p><strong>Uwaga: </strong>wiele z powyższych przykładów nie będzie działać w starszych przeglądarkach - podczas eksperymentowania warto używać najnowszych wersji przeglądarek takich jak Firefox, Chrome, Edge czy Opera. Powinieneś także brać pod uwagę konieczność testowania swoich rozwiązań w wielu przegladarkach. Kod, który działa dobrze w Chrome nie zawsze będzie działał w Edge. (sprawdź: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testowanie wieloprzegladarkowe</a>).</p>
+</div>
+
+<p><strong>Zewnętrzne interfejsy API</strong> nie są wbudowane w przeglądarki i trzeba samemu pobrać ich kod i informacje o zastosowaniu. Na przykład:</p>
+
+<ul>
+ <li><a href="https://dev.twitter.com/overview/documentation">API Twitter</a> umożliwia wyświetlania najnowszych tweetów na stronie internetowej.</li>
+ <li><a href="https://developers.google.com/maps/">API Google Maps </a>daje możliwość wyświetlania map na stronie internetowej oraz dostarcza innych związanych funkcji.</li>
+</ul>
+
+<div class="note">
+<p><strong>Uwaga: </strong> Interfesy API są zaawansowane i nie będziemy ich tu opisywać, możesz znaleźć o nich więcej informacji w module <a href="/pl/docs/Learn/JavaScript/Client-side_web_APIs">Interfejsy API działające po stronie klienta</a>.</p>
+</div>
+
+<p>W Internecie dostępnych jest bardzo dużo bibliotek API działających z przegladarkami internetowymi, ale jest to "temat na później". Nie zbudujesz następnego Facebooka czy Google Maps po 24 godzinach nauki JavaScriptu. Jest wiele zagadnień podstawowych, które musisz najpierw opanować. Ale przecież po to tu jesteś!</p>
+
+<h2 id="Co_robi_JavaScript_na_stronie_internetowej">Co robi JavaScript na stronie internetowej?</h2>
+
+<p>Tutaj zaczniemy faktycznie przyglądać się pewnemu kodowi i robiąc to, zbadamy, co takiego dzieje się po uruchomieniu tego kodu na stronie internetowej.</p>
+
+<p>Przypomnijmy sobie, co dzieje się podczas ładowania strony internetowej w przeglądarce (pierwsz raz omówiliśmy to w artykule <a href="/pl/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Jak działa CSS</a>). Po załadowaniu strony internetowej (dokumentu HTML) do przeglądarki, zostaje uruchomioney jej kod (HTML, CSS i JavaScript) w środowisku wykonawczym tworzonym przez przeglądarkę (zakładka przegladarki). Jest to podobne do fabryki, która przyjmuje surowe materiały (kod) a wypuszcza gotowy produkt (stronę internetową).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>JavaScript jest wykonywany przez silnik JavaScriptu w przeglądarce, po tym jak HTML i CSS zostaną skompletowane w stronę internetową. To zapewnia to, że struktura i style strony są już na miejscu w momencie gdy JavaScript zaczyna pracę.</p>
+
+<p>Jest to przydatne, jako że popularnym zastosowaniem JavaScriptu jest dynamiczne modyfikowanie HTMLa i CSSa aby edytować interfejs poprzez Document Object Model API. Jeżeli JavaScript załadowałby się i próbował wykonywać się przed tym jak HTML i CSS zostały załadowane, wtedy wystąpiłyby błędy.</p>
+
+<h3 id="Bezpieczeństwo_przeglądarki">Bezpieczeństwo przeglądarki</h3>
+
+<p>Każda karta przeglądarki jest swoim własnym kontenerem dla kodu, który w niej się wykonuje (te kontenery są nazywane technicznie "środowiskami wykonywania" (ang. "execution environments") - oznacza to, ze w większości przypadków kod w każdej karcie jest wykonywany oddzielnie i kod z jednej z kart nie jest w stanie bezpośrednio wpłynąć na ten wykonujący się w innej karcie. Jest to przykład dobrego środka bezpieczeństwa - jeżeli by tak nie było, wtedy możliwe stałoby się pisanie kodu, który wykradałby dane z innych witryn oraz  byłby w stanie wykonywać inne, podobnie złe rzeczy.</p>
+
+<div class="note">
+<p><strong>Notatka:  </strong>Istnieją sposoby na bezpieczne wysyłanie kodu i danych pomiędzy różnymi stronami/kartami. Wykraczają one jednak poziomem poza ten kurs i nie zostaną one tu omówione.</p>
+</div>
+
+<h3 id="Kolejność_wykonywania_kodu_JavaScript">Kolejność wykonywania kodu JavaScript</h3>
+
+<p>Kiedy przeglądarka napotyka blok kodu JS, wykonuje go po kolei, od góry do dołu. Oznacza to, że musisz być ostrożny, w jakiej kolejności umieszczasz instrukcje. Aby ukazać to zjawisko, wróćmy do bloku kodu z pierwszego przykładu:</p>
+
+<pre class="brush: js notranslate">var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Na początku wybieramy pierwszy paragraf (linia 1), dołączamy do niego event listener (linia 3), aby kiedy zostanie on klinięty, blok  <code>updateName()</code> (linie 5- 8) został uruchomiony. Blok  <code>updateName()</code> (ten typ kodu możliwego do użycia ponownie jest nazywany funkcją) pyta użytkownika o nowe imię, po czym wstawia to podane imię do paragrafu, aby uaktualnić widok.</p>
+
+<p>Jeżeli zamieniłbyś kolejność dwóch pierwszych linii kodu, przestałoby to działać - zamiast tego pojawiłby się błąd w konsoli przeglądarki - <code>TypeError: para is undefined</code>. Oznacza on, że ten obiekt jeszcze nie istnieje, a więc nie możemy dodać do niego event listenera.</p>
+
+<div class="note">
+<p><strong>Notatka:</strong> Jest to bardzo popularny błąd - musisz uważać na to, że obiekty do których istnieją odwołania istnieją przed tym jak cokolwiek z nimi zrobisz.</p>
+</div>
+
+<h3 id="Kod_interpretowany_kontra_kompilowany">Kod interpretowany kontra kompilowany</h3>
+
+<p>Mogłeś usłyszeć pojęcie kodu <strong>interpretowanego</strong> i <strong>kompilowanego<strong>. </strong></strong>JavaScript jest językiem interpretowanym - kod jest wykonywany od góry do dołu i wynik jest zwracany natychmiastowo. Nie musisz transformować kodu w jakąś inną postać przed tym jak przeglądarka go wykona.</p>
+
+<p>Języki kompilowane są natomiast transformowane (kompilowane) do innej formy przed ich wykonaniem. Dla przykładu C/C++ jest kompilowane do kodu assemblera, który jest następnie wykonywany przez komputer.</p>
+
+<p>Oba te podejścia mają swoje wady i zalety, które nie zostaną tutaj omówione.</p>
+
+<h3 id="Kod_server-side_kontra_client-side"><strong><strong>Kod server-side kontra client-side</strong></strong></h3>
+
+<p>Mogłeś także słyszeć pojęcia <strong>server-side</strong> i <strong>client-side</strong>, szczególnie w odniesieniu do tworzenia stron internetowych. Kod client-side jest kodem, który jest wykonywany na komputerze użytkownika - kiedy strona jest wyświetlana, kod client-side jest pobierany, następnie uruchamiany i wyświetlany przez przeglądarkę. W tym module JavaScript mówimy jednoznacznie o <strong>client-side JavaScript</strong>.</p>
+
+<p>Kod server-side jest natomiast wykonywany na serwerze, po czym wynik wykonania jest pobierany i wyświetlany przez przeglądarkę. Popularnymi przykładami języków server-side są PHP, Python, Ruby czy ASP.NET. I JavaScript! JavaScript może być także użyty jako język server-side, na przykład w popularnym środowisku Node.js - możesz więcej dowiedzieć się o tym w naszym poradniku <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a></p>
+
+<p>Słowo<strong> dynamiczny</strong> jest użyte zarówno do opisania zarówno client-side JavaScript i języki server-side — odnosi się ono do możliwości uaktualnienia widoku strony/aplikacji, aby możliwe było pokazanie różnych rzeczy w różnych okolicznościach; generując nową zawartość w zależności od potrzeb. Kod server-side  dynamicznie generuje nową zawartość na serwerze, na przykład stworzenie nowej tabeli HTML, kiedy client-side JavaScript dynamicznie generuje nową zawartość, na przykład tworząc nową tabelę HTML, wstawiając dane pobrane z serwera, następnie pokazując użytkownikowi tabelę na stronie. Znaczenie słowa jest lekko inne, ale podobne,  w dwóch kontekstach użycia i te dwa podejścia (server-side i client-side) zwykle współpracują ramię w ramię.</p>
+
+<p>Strona bez dynamicznie uaktualnianej zawartości nazywa się <strong>statyczną</strong> - zawsze pokazuje to samo.</p>
+
+<h2 id="W_jaki_sposób_dodać_JavaScript_do_twojej_strony"><strong><strong>W jaki sposób dodać JavaScript do twojej strony?</strong></strong></h2>
+
+<p>JavaScript jest dołączany do strony HTML w podobny sposób jak odbywa się to w wypadku CSS. Podczas gdy CSS używa elementów {{htmlelement("link")}} do dołączania zewnętrznych arkuszów i {{htmlelement("style")}} do dołączenia stylów bezpośrednio w dokumencie, JS potrzebuje tylko jednej rzeczy - elementu {{htmlelement("script")}}. Dowiedzmy się, jak to działa.</p>
+
+<h3 id="Osadzony_JavaScript">Osadzony JavaScript</h3>
+
+<ol>
+ <li>Po pierwsze stwórz lokalną kopię naszego przykładowego pliku <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html. </a>Zapisz go gdzieś w katalogu.</li>
+ <li>Otwórz plik w twojej przeglądarce i edytorze tekstu. Ujrzysz prostą stronę z przyciskiem, który można kliknąć.</li>
+ <li>Następnie wejdź do edytora i dodaj następujący kod tuż przed końcem <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate">&lt;script&gt;
+
+  // Kod JavaScript będzie tu umieszczony.
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Teraz dodamy trochę kodu w naszym elemencie  {{htmlelement("script")}}, aby strona wykonała coś bardziej interesującego  — dodaj poniższy kod bezpośrednio pod linią "// Kod JavaScript będzie tu umieszczony.":
+  <pre class="brush: js notranslate">function stworzParagraf() {
+  var para = document.createElement('p');
+  para.textContent = 'Kliknąłeś przycisk!';
+  document.body.appendChild(para);
+}
+
+var przyciski = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; przyciski.length ; i++) {
+  przyciski[i].addEventListener('click', stworzParagraf);
+}</pre>
+ </li>
+ <li>Zapisz plik i odśwież stronę w przeglądarce - teraz gdy klikniesz przycisk, nowy paragraf jest generowany i umieszczany poniżej.</li>
+</ol>
+
+<div class="note">
+<p><strong><strong><strong>Notatka</strong>:</strong></strong> Jeżeli przykład nie działa, przejdź go znowu krok po kroku, sprawdzając czy zrobiłeś wszystko poprawnie. Czy zapisałeś swoją lokalną wersję początkowego kodu jako plik <code>.html</code>? Czy dodałeś element  {{htmlelement("script")}} tuż przed zamknięciem  <code>&lt;/body&gt;</code>? Czy wprowadziłeś kod JavaScript dokładnie tak, jak podane w przykłądzie?</p>
+
+<p><strong>JavaScript uwzględnia wielkość liter i jest bardzo drobiazgowy, a więc musisz wprowadzić kod dokładnie tak,  jak zostało to pokazane. W innym wypadku może to nie zadziałać.</strong></p>
+</div>
+
+<div class="note">
+<p><strong><strong><strong><strong><strong>Notatka</strong>:  </strong></strong></strong></strong>Możesz zobaczyć ten kod także na GitHubie jako <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">zobacz to także na żywo</a>).</p>
+</div>
+
+<h3 id="Zewnętrzny_JavaScript"><strong><strong>Zewnętrzny JavaScript</strong></strong></h3>
+
+<p>Działa to świetnie, ale co by było, gdybyśmy chcieli umieścić nasz kod JavaScript w oddzielnym pliku? Zróbmy to teraz.<strong><strong> </strong></strong></p>
+
+<ol>
+ <li>Po pierwsze, stwórz nowy plik w tym samym katalogu, w którym umieściłeś twój plik HTML. Nazwij go <strong><code>script.js</code>  </strong>- upewnij się, że ma on rozszerzenie .js, jako że w ten sposób jest rozpoznawany jako JavaScript.</li>
+ <li>Następnie przekopiuj wszystkie skrypty z obecnego {{htmlelement("script")}}<strong> </strong>i wklej je do pliku .js. Zapisz ten plik.<strong>  </strong></li>
+ <li>Teraz zastąp obecny element {{htmlelement("script")}} poniższym kodem:
+  <pre class="brush: html notranslate"><strong><strong>
+</strong></strong>&lt;script src="script.js"&gt;&lt;/script&gt;</pre>
+  <strong><strong> </strong></strong></li>
+ <li>Zapisz i odśwież przeglądarkę - powinieneś zobaczyć to samo! Działa to w ten sam sposób, ale teraz mamy kod JavaScript w oddzielnym pliku. Jest to dobra praktyka organizowania kodu i umożliwiania jego ponownego wykorzystania między wieloma plikami HTML. Do tego HTML jest łatwiejszy do czytania bez bloków kodu pomiędzy.</li>
+</ol>
+
+<p><strong>Notatka</strong>: Możesz zobaczyć ten kod na GitHubie - <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html"> apply-javascript-external.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">Możesz zobaczyć to także na żywo tu</a>).</p>
+
+<h3 id="Interpretowanie_kodu_JavaScript_inline"><strong><strong>Interpretowanie kodu JavaScript inline</strong></strong></h3>
+
+<p>Czasami napotkasz kawałki prawdziwego kodu JavaScript pomiędzy kodem HTML. Może to wyglądać następująco:</p>
+
+<pre class="brush: js example-bad notranslate"><strong><strong>
+</strong></strong>function stworzParagraf() {
+  var para = document.createElement('p');
+  para.textContent = 'Kliknąłeś przycisk!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad notranslate"><strong><strong>
+</strong></strong>&lt;button onclick="createParagraph()"&gt;Kliknij mnie!&lt;/button&gt;</pre>
+
+<p>Możesz przetestować tę wersję poniżej:</p>
+
+<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}</p>
+
+<p>Ten przykład ma dokładnie tę samą funkcjonalność jak dwa poprzednie przykłady, za wyjątkiem tego, że element {{htmlelement("button")}} zawiera w sobie handler <strong><strong><code>onclick</code></strong></strong> . Sprawia to, że funkcja zostanie uruchomiona gdy zostanie wcisnięty przycisk.</p>
+
+<p><strong><strong><strong>Jednakże nie rób tego! Zanieczyszczanie HTMLa poprzez JavaScript jest uważane za złą praktykę. Jest to również nieefektywne - musiałbyś załączać atrybut </strong><code>onclick="stworzParagraf()"</code><strong>  do każdego przycisku, dla którego miałaby zastosowanie funkcja. </strong></strong></strong></p>
+
+<p>Używanie czystych konstrukcji JavaScript pozwala na wybranie wszystkich przycisków za pomocą jednej instrukcji. Kod, którego użyliśmy do wykonania tego wygląda następująco:</p>
+
+<pre class="notranslate">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>Może to wyglądać na lekko dłuższe niż atrybut  <code>onclick</code>, ale zadziała to dla wszyskich przycisków, bez znaczenia ile ich jest na stronie i ile z nich zostanie dodane bądź usunięte. Kod JS nie musi być zmieniony.</p>
+
+<div class="note">
+<p><strong><strong><strong><strong><strong>Notatka:  </strong></strong></strong></strong></strong>Spróbuj edytować twoją wersję <code>apply-javascript.html</code> i dodaj kilka innych przycisków. Kiedy przeładujesz stronę, odkryjesz, że wszystkie przyciski tworzą paragraf po kliknięciu. Nieźle, co?</p>
+</div>
+
+<h2 id="Komentarze"><strong><strong><strong><strong>Komentarze</strong></strong></strong></strong></h2>
+
+<p>Tak samo jak w HTML i CSS, możliwe jest pisanie komentarzy w kodzie JavaScript. Zostaną one zignorowane przez przeglądarkę - istnieją tylko po to, aby służyć pomocą tym, którzy współpracują przy tym kodzie (i tobie, kiedy po 6 miesiącach wrócić do kodu i nie będziesz pamiętać, co on robi). Komentarze są bardzo użyteczne i powinieneś używać ich często, szczególnie w dużych aplikacjach. Istniają dwa typy komentarzy:</p>
+
+<ul>
+ <li>Pojedynczy komentarz, pisany po podwójnym znaku / (//):
+  <pre class="brush: js notranslate">// Jestem komentarzem!</pre>
+  <strong><strong> </strong></strong></li>
+ <li>Komentarz wielolinijkowy, który jest pisany pomiędzy /* a */:
+  <pre class="brush: js notranslate"><strong><strong>
+</strong></strong>/*
+  Także jestem
+  komentarzem
+*/</pre>
+  <strong><strong> </strong></strong></li>
+</ul>
+
+<p>Przykładowo możemy skomentować nasz ostatni kod JavaScript w ten sposób:</p>
+
+<pre class="brush: js notranslate"><strong><strong>
+</strong></strong>// Funkcja: tworzy nowy paragraf i dodaje na koniec &lt;body&gt;.
+
+function stworzParagraf() {
+  var para = document.createElement('p');
+  para.textContent = 'Kliknąłeś przycisk!';
+  document.body.appendChild(para);
+}<strong>
+
+</strong>/*
+  1. Pobierz listę wskaźników na wszystke przyciski na stronie.
+  2. Przejdź po wszystkich przycisków i dodaj każdemu z nich akcję pod klinięcie.
+
+  Kiedy przycisk jest wciśnięty, funkcja stworzParagraf() zostanie wywołana.
+*/
+
+var przyciski = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length ; i++) {
+  przyciski[i].addEventListener('click', stworzParagraf);
+}</pre>
+
+<h2 id="Podsumowanie"><strong><strong><strong><strong>Podsumowanie</strong></strong></strong></strong></h2>
+
+<p>A więc proszę bardzo, oto twój pierwszy krok w kierunku świata JavaScript. Zaczęliśmy właśnie teorię, aby przyzwyczaić cię do używania JavaScript i do tego, co z jego pomocą można zrobić. W czasie trwania kursu między innymi zobaczyłeś kilka przykładów i nauczyłeś się, jak JavaScript jest używany z resztą kodu na twojej stronie<strong>.</strong></p>
+
+<p>JavaScript może wyglądać obecnie lekko odstraszająco, ale nie martw się - w tym kursie wprowadzimy cię w jego świat krok po kroku. W kolejnym artykule <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">zanurzysz się w praktycznej częsci</a>, poprzez budowanie twoich własnych przykładów kodu w JavaScript.</p>
+
+<ul>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="W_tym_module"><strong>W tym module</strong></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Co to jest JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Pierwszy skok do JavaScriptu</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Co poszło nie tak? Rozwiązywanie problemów JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Przechowywanie potrzebnych informacji - Zmienne</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Podstawowa matematyka w JavaScript - liczby i operatory</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Obsługa tekstu - ciągi znaków w JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Przydatne metody ciągów znaków</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Tablice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Podsumowanie: Generator głupich historii</a></li>
+</ul>
diff --git a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html b/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html
new file mode 100644
index 0000000000..d1b55aea20
--- /dev/null
+++ b/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html
@@ -0,0 +1,453 @@
+---
+title: Przechowywanie potrzebnych informacji — Zmienne
+slug: Learn/JavaScript/Pierwsze_kroki/Zmienne
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p>Po przeczytaniu kilku ostatnich artykułów, powinieneś juz wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, jak używać go razem z innymi technologiami webowymi, oraz jak jego główne cechy wyglądają z wysokiego poziomu. W tym artykule, przejdziemy do fundamentów, poznamy jak wygląda pracowa z najbardziej podstawowym konceptem JavaScript - Zmiennymi. </p>
+
+<div></div>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania:</th>
+   <td>Podstawowa znajomość komputera, podstawowe rozumienie HTML i CSS, oraz rozumienie czym jest JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Zapoznać się z podstawami dotyczącymi zmiennych w JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Potrzebne_Narzędzia">Potrzebne Narzędzia</h2>
+
+<p>Podczas tego artykułu, będziesz wpisywać linie kodu aby sprawdzić swoje rozumienie zawartości. Jeśli używasz przeglądarki desktopowej, najlepszym miejscem na wpisanie próbnego kodu jest konsola JavaScript Twojej przeglądarki (zobacz: <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> aby zasięgnąć szczegółowych informacji, jak otworzyć to narzędzie).</p>
+
+<p>Niemniej jednak, zapewniliśmy również prostą konsolę JavaScript wbudowaną w poniższą stronę, abyś mógł wpisywać kod w przypadku gdy nie używasz przeglądarki z łatwym dostępem do konsoli JavaScript lub konsola wewnątrz strony jest dla Ciebie wygodniejsza.</p>
+
+<h2 id="Czym_jest_zmienna">Czym jest zmienna?</h2>
+
+<p>Zmienna jest to kontener na wartość, jak liczba, którą możemy użyć w sumowaniu lub łańcuch znaków, który możemy wykorzystać jako część zdania. Ale jedną rzeczą, która wyróżnia zmienne jest to, że ich wartość może ulec zmianie. Popatrzmy na prosty przykład:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js notranslate">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>W tym przykładzie, naciśnięcie przycisku uruchamia kilka linijek kodu. Pierwsza linia powoduje pojawienie się okna na ekranie, które pyta o imię, a następnie przechowuje wartość w zmiennej. Druga linia wyświetla wiadomość powitalną zawierajaca imię pobrane ze zmiennej.</p>
+
+<p>Aby zrozumieć dlaczego jest to tak przydatne, pomyślmy o tym jak stworzylibyśmy ten przykład, nie używając zmiennej. W efekcie wygladałoby to mniej więcej tak:</p>
+
+<pre class="example-bad notranslate">var name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... i tak dalej ...</pre>
+
+<p>Możesz nie rozumieć w pełni składni której tu używamy (jeszcze!), ale powinieneś być w stanie zrozumieć o co chodzi - jeśli nie moglibyśmy używać zmiennych, musielibyśmy implementować gigantyczny blok kodu, który sprawdzałby jakie było wpisane imię, a następnie wyświetlał odpowiednią wiadomość dla tego imienia. Oczywiście jest to całkowicie nieefektywne (kod jest znacznie większy, nawet dla tylko pięciu możliwych wyborów) i po prostu nie działałoby - nie mógłbyś przecież przechowywać wszystkich możliwych wyborów.</p>
+
+<p>Zmienne po prostu mają sens i jak tylko nauczysz się więcej o JavaScript, używanie ich stanie się dla Ciebie czyms naturalnym.</p>
+
+<p>Kolejna rzecz, która wyróżnia zmienne jest to, że mogą one zawierać prawie wszystko - nie tylko łańcuchy znaków i liczby. Zmienne moga również zawierać skomplikowane dane, a nawet całe funkcje do robienia niesamowitych rzeczy. Nauczysz sie o tym więcej, w ciągu kursu.  </p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Mówimy że zmienne zawieraja wartości. Jest to ważne rozróżnienie. Zmienne nie są wartościami same w sobie; są kontenerami na wartości. Możesz je sobie wyobrazić jako kartonowe pudełka, w których możesz przechowywać rzeczy.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="Deklarowanie_zmiennej">Deklarowanie zmiennej</h2>
+
+<p>W celu użycia zmiennej, na początku musisz ją stworzyć - a dokładniej nazywa się to deklarowaniem zmiennej. Aby to zrobić, wpisujemy słowo kluczowe  <code>var</code> albo <code>let</code> a następnie nazwę, którą chcesz żeby miała Twoja zmienna:</p>
+
+<pre class="brush: js notranslate">let myName;
+let myAge;</pre>
+
+<p>Tutaj tworzymy dwie zmienne, które nazywają się <code>myName</code> i <code>myAge</code>. Spróbuj wpisać teraz te linie w konsoli Twojej przeglądarki lub w poniższej konsoli (możesz otworzyć <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">otworzyć tą konsolę</a> w oddzielnej karcie lub oknie jeśli wolisz). Nastepnie spróbuj stworzyć zmienną (lub dwie) z wybranymi przez Ciebie nazwami.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    let geval = eval;
+    function createInput() {
+      let inputDiv = document.createElement('div');
+      let inputPara = document.createElement('p');
+      let inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      let result;
+      try {
+        result = geval(e.target.value);
+      } catch(e) {
+        result = 'error — ' + e.message;
+      }
+
+      let outputDiv = document.createElement('div');
+      let outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: W JavaScript, wszystkie instrukcje kodu powinny być zakończone średnikiem (<code>;</code>) — Twój kod może działać poprawnie dla pojedynczych linii, ale prawdopodobnie nie będzie, jeśli napiszesz wiele linii kodu razem. Spróbuj wejść w nawyk wpisywania go.</p>
+</div>
+
+<p>Możesz przetestować czy te wartości istnieją teraz w środowisku wykonawczym wpisując po prostu nazwę zmiennej, np.</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>Obecnie nie mają one wartości; są pustymi kontenerami. Kiedy wpisujesz nazwy zmiennych, powinieneś otrzymać zwróconą wartość <code>undefined</code>. Natomiast jesli one nie istnieją, dostaniesz informację o błedzie — spróbuj wpisać:</p>
+
+<pre class="brush: js notranslate">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Nie pomyl zmiennej, która istnieje, ale nie ma zdefiniowanej wartości, ze zmienną, która wcale nie istnieje — to dwie zupełnie inne rzeczy. Wracając do porównania z pudełkami, które widziałeś wyżej — jeśli zmienna nie istnieje, to znaczy, że nie mamy żadnego kartonowego pudełka, do którego moglibyśmy wrzucić zawartość.<br>
+ Natomiast zmienna bez zdefiniowanej zawartości to po prostu puste pudełko. </p>
+</div>
+
+<h2 id="Inicjalizacja_zmiennej">Inicjalizacja zmiennej</h2>
+
+<p>Kiedy już zadeklarujesz zmienną, możesz ją zainicjować nadając wartość. Robi się to, wpisując nazwę zmiennej, a następnie znak równości (<code>=</code>), poprzedzajacy wartość, którą chcesz jej nadać. Na przykład:</p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>Spróbuj teraz wrócić do konsoli i wpisać te linie. Powinieneś zobaczyć wartość, którą przypisałeś do zmiennej zwróconą w konsoli aby potwierdzić to w obu przypadkach. Znowu, możesz zwrócić wartości zmiennych po prostu wpisujac ich nazwy w konsoli — spróbuj ponownie:</p>
+
+<pre class="brush: js notranslate">myName;
+myAge;</pre>
+
+<p>Możesz zadeklarować i zainicjować zmienną w tym samym czasie, tak jak tu:</p>
+
+<pre class="brush: js notranslate">let myDog = 'Rover';</pre>
+
+<p>Tak prawdopodobnie będziesz robił najcześciej, jako że jest to szybsze niż wykonywanie dwóch czynności w dwóch oddzielnych linijkach.</p>
+
+<h2 id="Róznice_między_var_i_let">Róznice między var i let</h2>
+
+<p>Możesz się teraz zastanawiać "Po co nam dwa słowa kluczowe do deklarowania zmiennych? Po co nam var i let?".</p>
+
+<p>Powód jest historyczny. Kiedy JavaScript został stworzony, mogliśmy korzystać tylko z <code>var</code>. Takie deklarowanie zmiennych działa, ale niesie ze sobą kilka niechcianych błędów.  Stworzono więc <code>let</code>, który jest obecnym standardem w języku JavaScript (to właśnie z niego powinniśmy korzystać). Główna róznica polega na tym, że <code>let</code> naprawia błędy, które mogliśmy napotkać podczas korzystania z <code>var</code>.</p>
+
+<p>A couple of simple differences are explained below. We won't go into all the differences now, but you'll start to discover them as you learn more about JavaScript (if you really want to read about them now, feel free to check out our <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let reference page</a>).</p>
+
+<p>For a start, if you write a multiline JavaScript program that declares and initializes a variable, you can actually declare a variable with <code>var</code> after you initialize it and it will still work. For example:</p>
+
+<pre class="brush: js notranslate">myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.</p>
+</div>
+
+<p>This works because of <strong>hoisting</strong> — read <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> for more detail on the subject.</p>
+
+<p>Hoisting no longer works with <code>let</code>. If we changed <code>var</code> to <code>let</code> in the above example, it would fail with an error. This is a good thing — declaring a variable after you initialize it makes for confusing, harder to understand code.</p>
+
+<p>Secondly, when you use <code>var</code>, you can declare the same variable as many times as you like, but with <code>let</code> you can't. The following would work:</p>
+
+<pre class="brush: js notranslate">var myName = 'Chris';
+var myName = 'Bob';</pre>
+
+<p>But the following would throw an error on the second line:</p>
+
+<pre class="brush: js notranslate">let myName = 'Chris';
+let myName = 'Bob';</pre>
+
+<p>You'd have to do this instead:</p>
+
+<pre class="brush: js notranslate">let myName = 'Chris';
+myName = 'Bob';</pre>
+
+<p>Again, this is a sensible language decision. There is no reason to redeclare variables — it just makes things more confusing.</p>
+
+<p>For these reasons and more, we recommend that you use <code>let</code> as much as possible in your code, rather than <code>var</code>. There is no reason to use <code>var</code>, unless you need to support old versions of Internet Explorer with your code (it doesn't support <code>let</code> until version 11; the modern Windows Edge browser supports <code>let</code> just fine).</p>
+
+<div class="note">
+<p><strong>Note</strong>: We are currently in the process of updating the course to use <code>let</code> rather than <code>var</code>. Bear with us!</p>
+</div>
+
+<h2 id="Updating_a_variable">Updating a variable</h2>
+
+<p>Once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. Try entering the following lines into your console:</p>
+
+<pre class="brush: js notranslate">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="An_aside_on_variable_naming_rules">An aside on variable naming rules</h3>
+
+<p>You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.</p>
+
+<ul>
+ <li>You shouldn't use other characters because they may cause errors or be hard to understand for an international audience.</li>
+ <li>Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.</li>
+ <li>Don't use numbers at the start of variables. This isn't allowed and will cause an error.</li>
+ <li>A safe convention to stick to is so-called <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.</li>
+ <li>Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.</li>
+ <li>Variables are case sensitive — so <code>myage</code> is a different variable to <code>myAge</code>.</li>
+ <li>One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So, you can't use words like <code>var</code>, <code>function</code>, <code>let</code>, and <code>for</code> as variable names. Browsers will recognize them as different code items, and so you'll get errors.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a fairly complete list of reserved keywords to avoid at <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
+</div>
+
+<p>Good name examples:</p>
+
+<pre class="example-good notranslate">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>Bad name examples:</p>
+
+<pre class="example-bad notranslate">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>Error-prone name examples:</p>
+
+<pre class="example-invalid notranslate">var
+Document
+</pre>
+
+<p>Try creating a few more variables now, with the above guidance in mind.</p>
+
+<h2 id="Variable_types">Variable types</h2>
+
+<p>There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.</p>
+
+<p>So far we've looked at the first two, but there are others.</p>
+
+<h3 id="Numbers">Numbers</h3>
+
+<p>You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:</p>
+
+<pre class="brush: js notranslate">let myAge = 17;</pre>
+
+<h3 id="Strings">Strings</h3>
+
+<p>Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise, JavaScript will try to interpret it as another variable name.</p>
+
+<pre class="brush: js notranslate">let dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="Booleans">Booleans</h3>
+
+<p>Booleans are true/false values — they can have two values, <code>true</code> or <code>false</code>. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:</p>
+
+<pre class="brush: js notranslate">let iAmAlive = true;</pre>
+
+<p>Whereas in reality it would be used more like this:</p>
+
+<pre class="brush: js notranslate">let test = 6 &lt; 3;</pre>
+
+<p>This is using the "less than" operator (<code>&lt;</code>) to test whether 6 is less than 3. As you might expect, it will return <code>false</code>, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.</p>
+
+<h3 id="Arrays">Arrays</h3>
+
+<p>An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:</p>
+
+<pre class="brush: js notranslate">let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];</pre>
+
+<p>Once these arrays are defined, you can access each value by their location within the array. Try these lines:</p>
+
+<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.</p>
+
+<p>You'll learn a lot more about arrays in <a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">a future article</a>.</p>
+
+<h3 id="Objects">Objects</h3>
+
+<p>In programming, an object is a structure of code that models a real-life object. You can have a simple object that represents a box and contains information about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.</p>
+
+<p>Try entering the following line into your console:</p>
+
+<pre class="brush: js notranslate">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>To retrieve the information stored in the object, you can use the following syntax:</p>
+
+<pre class="brush: js notranslate">dog.name</pre>
+
+<p>We won't be looking at objects any more for now — you can learn more about those in <a href="/en-US/docs/Learn/JavaScript/Objects">a future module</a>.</p>
+
+<h2 id="Dynamic_typing">Dynamic typing</h2>
+
+<p>JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (numbers, strings, arrays, etc).</p>
+
+<p>For example, if you declare a variable and give it a value enclosed in quotes, the browser will treat the variable as a string:</p>
+
+<pre class="brush: js notranslate">let myString = 'Hello';</pre>
+
+<p>It will still be a string, even if it contains numbers, so be careful:</p>
+
+<pre class="brush: js notranslate">let myNumber = '500'; // oops, this is still a string
+typeof myNumber;
+myNumber = 500; // much better — now this is a number
+typeof myNumber;</pre>
+
+<p>Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special operator called <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> — this returns the data type of the variable you pass into it. The first time it is called, it should return <code>string</code>, as at that point the <code>myNumber</code> variable contains a string, <code>'500'</code>. Have a look and see what it returns the second time you call it.</p>
+
+<h2 id="Constants_in_JavaScript">Constants in JavaScript</h2>
+
+<p>Many programming languages have the concept of a <em>constant</em> — a value that once declared can never be changed. There are many reasons why you'd want to do this, from security (if a third party script changed such values it could cause problems) to debugging and code comprehension (it is harder to accidently change values that shouldn't be changed and mess things up).</p>
+
+<p>In the early days of JavaScript, constants didn't exist. In modern JavaScript, we have the keyword <code>const</code>, which lets us store values that can never be changed:</p>
+
+<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+const hoursInDay = 24;</span></span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> works in exactly the same way as <code>let</code>, except that you can't give a <code>const</code> a new value. In the following example, the second line would throw an error:</span></span></span></span></p>
+
+<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+daysInWeek = 8;</span></span></span></span></pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">The first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/pl/learn/server-side/django/index.html b/files/pl/learn/server-side/django/index.html
new file mode 100644
index 0000000000..1eb4d61586
--- /dev/null
+++ b/files/pl/learn/server-side/django/index.html
@@ -0,0 +1,70 @@
+---
+title: Django Web Framework (Python)
+slug: Learn/Server-side/Django
+tags:
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Learn
+  - NeedsTranslation
+  - Python
+  - Server-side programming
+  - TopicStub
+  - django
+translation_of: Learn/Server-side/Django
+---
+<div>{{LearnSidebar}}</div>
+
+<p>Django is an extremely popular and fully featured server-side web framework, written in Python. This module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to start using it to create your own web applications.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module you don't need to have any knowledge of Django. Ideally, you would need to understand what server-side web programming and web frameworks are by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p>
+
+<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but is not essential to understanding the core concepts.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt>
+ <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt>
+ <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt>
+ <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt>
+ <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt>
+ <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt>
+ <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt>
+ <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt>
+ <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt>
+ <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt>
+ <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt>
+ <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt>
+ <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt>
+ <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt>
+ <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd>
+</dl>
diff --git a/files/pl/learn/server-side/express_nodejs/development_environment/index.html b/files/pl/learn/server-side/express_nodejs/development_environment/index.html
new file mode 100644
index 0000000000..f525a69f31
--- /dev/null
+++ b/files/pl/learn/server-side/express_nodejs/development_environment/index.html
@@ -0,0 +1,411 @@
+---
+title: Przygotowanie środowiska programisty Node
+slug: Learn/Server-side/Express_Nodejs/development_environment
+tags:
+  - Express
+  - Node
+  - Początkujący
+  - Wprowadzenie
+  - środowisko programisty
+translation_of: Learn/Server-side/Express_Nodejs/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary"></p>
+
+<p class="summary">Gdy już wiesz do czego służy Express, nadszedł czas, żeby pokazać Ci jak przygotować i przetestować środowisko programistyczne Node/Express w różnych systemach operacyjnych: Windows, Linux (Ubuntu) i macOS. Jakiegokolwiek systemu byś nie używał, w tym artykułe przygotujemy wszystko co Ci będzie potrzebne, by zacząć tworzyć aplikacje w Express.</p>
+
+<p class="summary"></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania:</th>
+   <td>
+    <p>Umiejętność pracy z terminalem lub w trybie wiersza poleceń. Umiejętność instalacji oprogramowania w systemie operacyjnym Twojego komputera, który będzie służył do programowania.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Przygotowanie środowiska programisty do tworzenia aplikacji w Express(4.x) na Twoim komputerze.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Przegląd_środowiska_programisty_Express">Przegląd środowiska programisty Express</h2>
+
+<p>Instalacja środowisk <em>Node</em> i <em>Express</em> jest stosunkowo prosta. W tej sekcji dokonamy przeglądu wszystkich potrzebnych narzędzi, przedstawimy kilka prostych metod instalacji <em>Node </em>(<em>Express </em>także) w systemach operacyjnych Ubuntu, macOS i Windows. Na koniec przetestujemy przygotowane środowisko.</p>
+
+<h3 id="Co_to_jest_środowisko_programisty_Express">Co to jest środowisko programisty Express?</h3>
+
+<p>Środowisko do tworzenia aplikacji <em>Express </em>wymaga zainstalowania pakietu <em>Node.js</em>, menadżera pakietów <em>NPM</em> oraz opcjonalnie pakietu <em>Express Application Generator.</em></p>
+
+<p>Środowisko <em>Node </em>i menadżer <em>NPM </em>mogą zostać zainstalowane razem z różnych źódeł. Mogą być to pakiety binarne, pakiety instalacyjne, menadżery pakietów systemu operacyjnego lub  pliki źródłowe (co zostanie pokazane w następnych sekcjach). Sam <em>Express</em> jest instalowany przez <em>NPM</em>, podobnie jak pozostałe zależności aplikacji webowej (inne biblioteki w tym silnik szablonów, sterowniki baz danych, moduły warstwy pośredniej do autentykacji, obsługi plików statycznych itd.)</p>
+
+<p>Przy pomocy <em>NPM </em>możemy też zainstalować <em>Express Application Generator</em>, który jest bardzo użytecznym narzędziem do generowania szkieletu aplikacji webowej w architekturze MVC. Oczywiście jest to narzędzie opcjonalne i nie jest wymagane, aby tworzyć aplikacje webowe przy pomocy <em>Express</em> o podobnej architekturze. Będziemy  niego korzystać, ponieważ ułatwia trudne początki w pracy nad aplikacją i promuje modułową strukturę aplikacji.</p>
+
+<div class="note">
+<p><strong>Uwaga: </strong>W odróżnieniu od pozostalych frameworków, środowisko programisty nie zawiera oddzielnego serwera WWW do celów deweloperskich. W Node/Express aplikacja sama tworzy i uruchamia własny serwer internetowy!</p>
+</div>
+
+<p>Potrzebne będą także inne narzędzia, które są typowymi składnikami środowiska programisty, jak edytory tekstu czy środowisko IDE do edycji kodu, systemy kontroli wersji np. Git, dzięki którym możemy bezpiecznie zarządzać wersjami kodu. Zakładamy, że posiadasz już tego typu narzędzia zainstalowane (w szczególności edytor tekstu).</p>
+
+<h3 id="Jakie_systemy_operacyjne_są_wspierane">Jakie systemy operacyjne są wspierane?</h3>
+
+<p><em>Node </em>można uruchomić w systemie Windows, macOS, wszelkim odmianach systemu Linux, czy kontenerach typu Docker (pełna lista znajduje się na stronie Node.js <a href="https://nodejs.org/en/download/">Downloads</a>). Praktycznie każdy komputer ma wystarczającą wydajność do uruchomienia <em>Node</em> w trakcie tworzenia aplikacji. <em>Express </em>jest uruchamiane w środowisku <em>Node</em>, co oznacza, że może działać na dowolnej platformie obsługującej Node.</p>
+
+<p>W tym artykule wyjaśnimy proces instalacji w systemie Windows, maxOS i dystrybucji Ubuntu systemu Linux.</p>
+
+<h3 id="Z_jakie_wersji_NodeExpress_możemy_skorzystać">Z jakie wersji Node/Express możemy skorzystać?</h3>
+
+<p>Środowisko <em>Node </em>wystepuje w <a href="https://nodejs.org/en/blog/release/">wielu wersjach</a> - najnowsze zawierają poprawki błędów, wsparcie dla najnowszych wersji standardu ECMASript (JavaScript) oraz lepsze API. </p>
+
+<p>Zasadniczo powinieneś korzystać z najbardziej aktualnej wersji <em>LTS</em> (ang. <em>long-term supported</em> - o długim okresie wsparcia) ponieważ jest bardziej stabilna od bieżących wersji, przy zachowaniu w miarę aktualnej funkcjonalności (i jest nadal aktywnie utrzymywana). Z wersji najbardziej aktualnych możesz korzystać, gdy chcesz mieć dostęp do najnowszych funkcji, których brak w wersji <em>LTS</em>.</p>
+
+<p>W przypadku pakietu <em>Express </em>powinieneś zawsze korzystać z najnowszej wersji</p>
+
+<h3 id="A_co_z_bazami_i_pozostałymi_zależnościami">A co z bazami i pozostałymi zależnościami?</h3>
+
+<p>Pozostałe potrzebne elementy aplikacji, jak sterowniki baz danych, generatory widoków, moduły autentykacji itd. są importowane do środowiska aplikacji za pomocą menadżera <em>NPM</em>. Zajmiemy się nim w późniejszych artykułach dotyczących tworzenia aplikacji.</p>
+
+<h2 id="Instalacja_Node">Instalacja Node</h2>
+
+<p>W tej sekcji zajmiemy się najłatwiejszym sposobem instalacji Node.js w wersji <em>LTS </em>dla różnych systemów operacyjnych: Ubuntu Linux 18.04, maxOS i Windows 10. </p>
+
+<div class="note">
+<p><strong>Wskazówka: </strong>Jeśli korzystasz z innego systemu operacyjnego lub po prostu chcesz poznać inne możliwości  swojej platformy zobacz <a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org).</p>
+</div>
+
+<h3 id="macOS">macOS</h3>
+
+<p>Instalacja <em>Node </em>wraz z <em>NPM </em>w systemach Windows i macOS jest dość łatwa, wystarczy użyć instalatora:</p>
+
+<ol>
+ <li>Pobierz wymagany instalator:
+  <ol>
+   <li>wejdź na stronę <a href="https://nodejs.org/en/">https://nodejs.org/en/</a></li>
+   <li>Wybierz przycisk z napisem "Recommended for most users", którym pobierzesz najnowszą wersję <em>LTS</em>.</li>
+  </ol>
+ </li>
+ <li>Zainstaluj <em>Node </em>podwójnie klikając w pobrany plik i postępuj zgodnie z pojawiającymi instrukcjami.</li>
+</ol>
+
+<h3 id="Windows">Windows</h3>
+
+<p>Najbardziej wskazaną metoda instalacji <em>Node </em>i <em>NPM </em>w systemie Windows jest skorzystanie z możliwości podsystemu Linux v2 (WSL2), co wymaga zainstalowania  niejawnego  programu testów systemu Windows (zobacz <a href="https://docs.microsoft.com/windows/nodejs/setup-on-wsl2">Set up your Node.js development environment with WSL 2</a>).</p>
+
+<p>Po zainstalowaniu podsytemu Linux możesz zainstalować Ubuntu 18.04 jako system dla środowiska Node.js. Gdy już WSL2 i Ubuntu zostały zainstalowane, możesz kontynuować proces instalacji Node.js zgodnie z opisem w punkcie dotyczącym instalacji Node na Ubutu 18.04.</p>
+
+<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3>
+
+<p>Najbardziej aktualną wersję <em>LTS </em>środowiska <em>Node </em>12.x najłatwiej jest zainstalować korzystając z <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">menadżera pakietów</a> pobranego z binarnego repozytorium systemu Ubuntu. Można to zrobić dwoma poleceniami w Twoim terminalu:</p>
+
+<pre class="brush: bash notranslate">curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+sudo apt-get install -y nodejs
+</pre>
+
+<div class="warning">
+<p><strong>Uwaga:</strong> Nie instaluj wprost z normalnych repozytoriów Ubuntu, ponieważ zawierają one bardzo stare wersje Node.</p>
+</div>
+
+<ol>
+</ol>
+
+<h3 id="Testowanie_Node.js_i_NPM_po_instalacji">Testowanie Node.js i NPM po instalacji</h3>
+
+<p>Testujemy poprawność instalacji wpisując polecenie "version" w wierszu poleceń. Jeśli instalacja się powiodła to zostanie wyśiwetlony numer aktualnej wersji:</p>
+
+<pre class="brush: bash notranslate">&gt; node -v
+v10.16.0</pre>
+
+<p>Razem ze środowiskiem <em>Node.js</em> powinien zostać zainstalowany także menadżer <em>NPM.</em> Poprawność instalacji możemy przetestować  ten sam sposób:</p>
+
+<pre class="brush: bash notranslate">&gt; npm -v
+6.9.0</pre>
+
+<p>Przeprowadzimy teraz test działania środowiska tworząc prosty serwer z użyciem wyłącznie pakietów znajdujących w <em>Node</em>, który wygeneruje dokument z napisem "Hello World":</p>
+
+<ol>
+ <li>Skopuj poniższy tekst do pliku o nazwie <strong>hellonode.js</strong>. Kod wykorzystuje wyłącznie funkcje <em>Node </em>(nie zawiera żadnych funkcji <em>Express</em>) i jest napisany z wykorzystaniem  składni ES6:
+
+  <pre class="brush: js notranslate">//Load HTTP module
+const http = require("http");
+const hostname = '127.0.0.1';
+const port = 3000;
+
+//Create HTTP server and listen on port 3000 for requests
+const server = http.createServer((req, res) =&gt; {
+
+  //Set the response HTTP header with HTTP status and Content type
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World\n');
+});
+
+//listen for request on port 3000, and as a callback function have the port listened on logged
+server.listen(port, hostname, () =&gt; {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
+</pre>
+
+  <p>W kodzie znajduje się import modułu "http", który to moduł jest wykorzystany do utworzenia serwera (<code>createServer()</code>) nasłuchującego na porcie 3000. Skrypt wysyła na konsolę komunikat z informacją pod jakim adresem URL działa nasz serwer. Funkcja tworząca serwer (<code>createServer()</code>) pobiera argument w postaci definicji funkcji zwrotnej, która zostanie wywołana w chwili odebrania żądania. W funkcji zwrotnej tworzymy prostą odpowiedź z kodem statusu HTTP 200 ("OK") i zwykłym tekstem "Hello World".</p>
+
+  <div class="note">
+  <p><strong>Uwaga:</strong>  Nie przejmuj się, jeśli nie rozumiesz tego kodu. Wszystko wyjaśnimy ze szczegółami, gdy zaczniemy korzystać z Express. </p>
+  </div>
+ </li>
+ <li>Uruchom serwer przechodząć najpierw w terminalu do katalogu z plikiem  <code>hellonode.js</code>  a następnie wydając polecenie <code>node</code> z nazwą skryptu:
+  <pre class="brush: bash notranslate">&gt;node hellonode.js
+Server running at http://127.0.0.1:3000/
+</pre>
+ </li>
+ <li>W przeglądarce wpisz URL <a href="http://127.0.0.1:3000">http://127.0.0.1:3000 </a>. Jeśli wszystko pracuje poprawnie w przegladarce powinieneś zobaczyć napis "Hello World".</li>
+</ol>
+
+<h2 id="Korzystanie_z_NPM">Korzystanie z NPM</h2>
+
+<p>Drugim ważnym narzędziem po samym <em>Node </em>jest menadżer pakietów <a href="https://docs.npmjs.com/">NPM</a>. Głównym jego zadaniem jest pobieranie pakietów (bibliotek JavaScript), których aplikacja potrzebuje w trakcie tworzenia, testowania i pracy w środowisku produkcyjnym. Możesz też go potrzebować do uruchamiania testów i narzędzi wykorzystywanych w trakcie programowania. </p>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Z punktu widzenia Node, Express jest tylko jednym z wielu pakietów, których potrzebujesz w swoim kodzie i musisz zainstalować przy pomocą NPM.</p>
+</div>
+
+<p>Możesz pobierać każdy z wymaganych modułów wpisując polecenia dla NPM do każdego modułu. W praktyce o wiele wygodniejszym rozwiązaniem jest zarządzanie zależnościami poprzez specjalny plik tekstowy o nazwie <a href="https://docs.npmjs.com/files/package.json">package.json</a>. W pliku tym znajduje się lista wszystkich potrzebnych modułów wymaganych przez tworzony pakiet JavaScript, a także nazwa pakietu, wersja, opis, początkowy plik do uruchomienia, zależności produkcyjne, zależności deweloperskie, wersja środowiska <em>Node</em>, w której pakiet może pracować itd. Plik <strong>package.json </strong>powinien zawierać wszystkie informacje wymagane przez <em>NPM</em>, dzięki którym możliwe jest pobranie i uruchomienie Twojej aplikacji (jeśli piszesz bibliotekę wykorzystywaną przez innych użytkowników musisz skorzystać z definicji opisującej załadowanie pakietu do repozytorium npm).</p>
+
+<h3 id="Dodawanie_zależności">Dodawanie zależności</h3>
+
+<p>W kolejnych krokach opiszemy jak możesz użyć <em>NPM</em> do pobrania pakietu, zapisania go w zależnościach projektu i oznaczenia go jako wymaganego przez naszą aplikację <em>Node</em>.</p>
+
+<div class="note">
+<p><strong>Uwaga: </strong>Pokażemy teraz instrukcje  pobrania i instalacji pakietu <em>Express. </em>Później poznamy jak ten pakiet i pozostałe  zostaną automatycznie wyspecyfikowane w projekcie, gdy utworzymy go modułem <em>Express Application Generator. </em>Ta sekcja jest po to, abyś mógł zrozumieć jak działa sam NPM i jakie korzyści daje wykorzystanie generatora aplikacji.</p>
+</div>
+
+<ol>
+ <li>Zaczniemy od utworzenia katalogu na Twoją nową aplikację.Potem musimy do niego wejść:
+  <pre class="brush: bash notranslate">mkdir myapp
+cd myapp</pre>
+ </li>
+ <li>
+  <p>Poleceniem <code>init</code> narzędzia npm utworzymy plik <strong>package.json</strong> dla naszej aplikacji. Pojawią się pytania o kilka istotnych rzeczy, jak nazwa i wersja Twojej aplikacji, nazwę pliku wejściowego aplikacji (domyślnie jest to <strong>index.js</strong>). Na razie zaakceptujemy ustawienia domyślne:</p>
+
+  <pre class="brush: bash notranslate">npm init</pre>
+
+  <p>Jeśli zajrzysz do pliku <strong>package.json</strong>, to zobaczysz zakceptowane ustawienia domyślne wraz z licencją na końcu.</p>
+
+  <pre class="brush: json notranslate">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+</pre>
+ </li>
+ <li>W kolejnym kroku zainstalujemy moduł <em>Expess </em>w katalogu <code>myapp</code> co spowoduje dodanie tego modułu jako zależności w naszym pliku <strong>package.json</strong>. </li>
+ <li>
+  <pre class="brush: bash notranslate">npm install express</pre>
+
+  <p>Możemy teraz zobaczyć dodaną na końcu w pliku <strong>package.json</strong> sekcję, która dołączy do naszej aplikacji pakiet Express.</p>
+
+  <pre class="brush: json notranslate">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+<strong>  "dependencies": {
+    "express": "^4.16.4"
+  }</strong>
+}
+</pre>
+ </li>
+ <li>Kolejnym krokiem po dołączeniu zależności do projektu, jest zaimportowanie pakietu w pliku źródłowym przy pomocy wywołania funkcji <code>require()</code>. Utwórz teraz plik <strong>index.js</strong> w katalogu aplikacji <code>myapp</code> i wpisz do niego poniższą zawartość:
+  <pre class="brush: js notranslate">const express = require('express')
+const app = express();
+
+app.get('/', (req, res) =&gt; {
+  res.send('Hello World!')
+});
+
+app.listen(8000, () =&gt; {
+  console.log('Example app listening on port 8000!')
+});
+</pre>
+
+  <p>Utworzony kod to odpowiednik aplikacji typu "Hello World!" w <em>Express</em>. Najpierw importujemy pakiet "express" funkcją <code>require()</code>, a następnie tworzymy serwer (<code>app</code>), który nasłuchuje żądań na porcie 8000 i wysyła komunikaty na konsolę z informacją o porcie pracującego serwera. Funkcja <code>app.get()</code> realizuje obsługę żądań wyłacznie typu GET skierowanych do głównej ścieżki URL aplikacji ('/'), na które generuje odpowiedź z komunikatem "Hello World!".</p>
+ </li>
+ <li>Możesz uruchomić serwer wywołując w terminalu polecenie node z parametrem w postaci nazwy naszego skryptu:
+  <pre class="brush: bash notranslate">&gt;node index.js
+Example app listening on port 8000
+</pre>
+ </li>
+ <li>Otwórz w przeglądarce stronę z URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>). Jeśli wszystko pracuje poprawnie powinieneś zobaczyć stronę z napisem "Hello World!".</li>
+</ol>
+
+<h3 id="Zależności_środowiska_deweloperskiego">Zależności środowiska deweloperskiego</h3>
+
+<p>Jeśli jakiś pakiet wykorzystujesz tylko podczas tworzenia aplikacji to powinieneś go dodać jako zależność deweloperską - "development dependency" (to spowoduje, że użytkownicy Twojej aplikacji (lub pakietu) nie będą instalować takiego pakietu w wersji produkcyjnej). Na przykład, gdy chcesz skorzystać z popularnej biblioteki <a href="http://eslint.org/">eslint</a> (jest to tzw. linter) to powinieneś wywołać NPM następująco:</p>
+
+<pre class="brush: bash notranslate"><code>npm install eslint --save-dev</code></pre>
+
+<p>W efekcie dostaniesz nowy wpis w pliku  <strong>package.json</strong> Twojej aplikacji:</p>
+
+<pre class="brush: js notranslate">  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+</pre>
+
+<div class="note">
+<p><strong>Uwaga:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Linter</a>y" to narzędzia do statycznej analizy kodu aplikacji służące do wykrywania i raportowania fragmentów, które nie są zgodne/lub są zgodne z dobrymi praktykami tworzenia oprogramowania.</p>
+</div>
+
+<h3 id="Uruchamianie_zadań">Uruchamianie zadań</h3>
+
+<p>Oprócz dodawania i pobierania zależności, w pliku <strong>package.json</strong> możesz też definiować tzw. nazwane skrypty. Przy pomocy NPM możesz je później uruchamiać poleceniem <a href="https://docs.npmjs.com/cli/run-script">run-script</a>. Jest to typowe rozwiązanie stosowane do automatyzacji takich zadań jak uruchamianie testów, fragmentów tworzonej aplikacji czy budowania ciągu uruchamianych narzędzi (np. uruchamianie narzędzi minimalizujących objętość kodu JavaScript, zmiany rozmiaru obrazów, LINT, analizatory kodu itp.).</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Możesz też korzystać z innych narzędzi do tego celu jak <a href="http://gulpjs.com/">Gulp</a> lub <a href="http://gruntjs.com/">Grunt</a> .</p>
+</div>
+
+<p>Przykładem może być skrypt do uruchomienia narzędzia eslint (jako zależność deweloperska) w postaci bloku dodanego do pliku <strong>package.json</strong> (zakładamy, że żródła naszej aplikacji znajdują się w katalogu /src/js):</p>
+
+<pre class="brush: js notranslate">"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+</pre>
+
+<p>Wyjaśnijmy teraz co dodaliśmu w bloku "scripts": jest to polecenie, które musiałbyś wpisać w oknie terminala, żeby uruchomić <code>eslint</code> dla wszystkich plików JavaScript w katalogu <code>src/js</code>.  Aby móć później się odwołać do tego polecenia nazwaliśmy go skrótem <code>lint</code>. </p>
+
+<p>Teraz możemy uruchomić <em>eslint</em> wywołując NPM z naszym skrótem:</p>
+
+<pre class="brush: bash notranslate"><code>npm run-script lint
+# OR (using the alias)
+npm run lint</code>
+</pre>
+
+<p>Choć wydaje się, że wywołanie utworzonego skrótu nie jest krótsze od oryginalnego polecenia, to pamiętaj, że możesz w skryptach zawrzeć znacznie dłuższe polecenia, jak i całe ciągi poleceń. Możesz też stworzyć jeden skrypt, który uruchamia wszystkie testy.</p>
+
+<h2 id="Instalacja_generator_aplikacji_Express_-_Express_Application_Generator">Instalacja generator aplikacji Express - Express Application Generator</h2>
+
+<p><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> to narzędzie do generowania szkieletu aplikacji Express. Zaczniemy od zainstalowania generatora przy pomocy NPM z flagą <code>-g</code>:</p>
+
+<pre class="notranslate"><code>npm install express-generator -g</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Uwaga: </strong>Może pojawić się konieczność wstawienia na początku wiersza polecenia <code>sudo</code> w systemach Ubuntu lub macOS. Flaga <code>-g</code> powoduje zainstalowanie pakietu w trybie globalnym, ktory pozwala na wywołanie go z dowolnego katalogu.</p>
+</div>
+
+<p>Żeby utworzyć aplikację "helloworld" z domyślnymi ustawieniami, wejdź do katalogu, w którym chcesz ją utworzyć i uruchom polecenie:</p>
+
+<pre class="brush: bash notranslate">express helloworld</pre>
+
+<div class="note">
+<p><strong>Uwaga:  </strong>Podczas instalacji możesz<strong> </strong>podać bibliotekę szablonów i wiele innych ustawień. Wpisz polecenie <code>help</code> żeby zobaczyć wszystkie możliwości:</p>
+
+<pre class="brush: bash notranslate">express --help
+</pre>
+</div>
+
+<p>NPM będzie tworzył nową aplikację Express w podfolderze bieżącego katalogu wypisując na konsoli komunikaty obrazujące postęp instalacji. Po zakończeniu zobaczysz komunikat z poleceniem instalującym zależności Node i uruchamiające aplikację.</p>
+
+<div class="note">
+<p><strong>Uwaga</strong>: Nowa aplikacja posiada własny plik package.json w swoim głównym katalogu. Możesz go otworzyć i sprawdzić zainstalowane zależności, w tym Express i bibliotekę szablonów Jade:</p>
+
+<pre class="brush: js notranslate">{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.0",
+    "http-errors": "~1.6.2",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0"
+  }
+}
+</pre>
+</div>
+
+<p>Zainstaluj wszystkie zależności do swojej aplikacji przy pomocy NPM:</p>
+
+<pre class="brush: bash notranslate">cd helloworld
+npm install
+</pre>
+
+<p>Następnie uruchom aplikację (polecenia różnią się nieco dla systemów Widnows i Lunux/macOS):</p>
+
+<pre class="brush: bash notranslate"># Run the helloworld on Windows with Command Prompt
+SET DEBUG=helloworld:* &amp; npm start
+
+# Run the helloworld on Windows with PowerShell
+SET DEBUG=helloworld:* | npm start
+
+# Run helloworld on Linux/macOS
+DEBUG=helloworld:* npm start
+</pre>
+
+<p>Polecenie DEBUG jest bardzo przydatne, gdyż uruchamia rejestrowanie zdarzeń, które możemy zobaczyć poniżej:</p>
+
+<pre class="brush: bash notranslate">&gt;SET DEBUG=helloworld:* &amp; npm start
+
+&gt; helloworld@0.0.0 start D:\Github\expresstests\helloworld
+&gt; node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms</pre>
+
+<p>Otwórz przeglądarkę i wpisz adres <a href="http://127.0.0.1:3000/">http://127.0.0.1:3000/</a>, a zobaczysz domyślną stronę powitalną aplikacji Express.</p>
+
+<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p>
+
+<p>Więcej o wygenerowanej aplikacji dowiemy się w artykule o generowaniu szkieletu aplikacji.</p>
+
+<ul>
+</ul>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Masz przygotowane środowisko do tworzenia i uruchamiania aplikacji webowych w środowisku Node. Poznałeś działanie menadżera NPM, dowiedziałeś się jak zaimportować pakiet Express do swojej aplikacji i jak utworzyć szkielet aplikacji przy pomocy generatora aplikacji Express a potem go uruchomić.</p>
+
+<p>W następnym artykule zaczniemy prawdziwe szkolenie, w trakcie którego stworzymy kompletną aplikację webową korzystając z Node.js i dostępnych w nim narzędzi.</p>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<ul>
+ <li><a href="https://nodejs.org/en/download/">Downloads</a> page (nodejs.org)</li>
+ <li><a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org)</li>
+ <li><a href="http://expressjs.com/en/starter/installing.html">Installing Express</a> (expressjs.com)</li>
+ <li><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> (expressjs.com)</li>
+ <li><a href="https://docs.microsoft.com/windows/nodejs/">Using Node.js with Windows subsystem for Linux</a> (docs.microsoft.com)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express/Node</a></li>
+ <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska programisty Node</a></li>
+ <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express: aplikacja webowa Biblioteka </a></li>
+ <li><a href="/en-US/pl/Learn/Server-side/Express_Nodejs/skeleton_website">Szkolenie z Express - część 2: Tworzenie szkieletu aplikacji</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/pl/learn/server-side/express_nodejs/index.html b/files/pl/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..3cb01fe7ae
--- /dev/null
+++ b/files/pl/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,70 @@
+---
+title: Tworzenie aplikacji z użyciem framework'u Express (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Express
+  - Express.js
+  - JavaScript
+  - Node
+  - Początkujący
+  - Wprowadzenie
+  - node.js
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express to popularny framework webowy stworzony w języku JavaScript działający w środowisku uruchomieniowym Node.js. W tym module znajdziesz kluczowe zalety framework'u, opis jak możesz przygotować środowisko deweloperskie, typowe metody tworzenia aplikacji webowych oraz proces ich instalacji i uruchamiania.</p>
+
+<h2 id="Wymagania_wstępne">Wymagania wstępne</h2>
+
+<p>Zanim zaczniesz ten moduł powinieneś wiedzieć czym jest programowanie po stronie serwera i czym są frameworki webowe. Najlepiej, gdybyś przeczytał nasze wprowadzadzenie <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>. Znajomość JavaScript i podstawowych zasad programowania na pewno Ci pomogą zrozumieć ten materiał, ale nie są konieczne do zrozumienia ogólnej koncepcji tworzenia aplikacji webowych.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Wiele przydatnych materiałów do nauki JavaScript'u znajdziesz w rozdziale <em>the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). Środowisko Node.js posługuje się językiem JavaScript, tym samym, który działa w Twojej przeglądarce, ale posiada dodatkowe API zapewniające pracę w środowisku poza przeglądarką  (np. daje możliwość uruchamiania serwerów HTTP, ma dostęp do systemu plikowego, ale brak mu API do pracy z przeglądarką i strukturą DOM).</p>
+
+<p>W tym przewodniku znajdziesz informacje o tym jak pracować z Node.js i Express, ale wiele wartościowych materiałów  jest w Internecie i książkach - część z nich jest podlinkowana w wątkach <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) i <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
+</div>
+
+<h2 id="Przewodnik">Przewodnik</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express/Node</a></dt>
+ <dd>Znajdziesz tutaj odpowiedzi na pytania "Czym jest Node?" i "Co to jest Express?", oraz zrozumiesz co czyni framework Express wyjątkowym. W dalszej części zostały przedstawione najistotniejsze możliwości wraz z głównymi elementami potrzebnymi do budowy aplikacji webowych w Express (choć jeszcze nie będziesz miał przygotowanego środowiska do tworzenia i testowania takich aplikacji).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska programisty do pracy z Node (Express)</a></dt>
+ <dd>Gdy już wiesz jakie możliwości oferuje Express, pokażemy Ci jak przygotować środowisko deweloperskie Node/Express dla systemów Windows, Linux(Ubuntu) i Mac OS X. Bez względu na system, którego używasz, w tej części powinieneś poznać wszystko to co będzie Ci potrzebne do tworzenia aplikacji w Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express - część 1: aplikacja webowa "Biblioteka"</a></dt>
+ <dd>W pierwszym artykule naszego cyklu praktycznych tutoriali wyjaśnimy Ci czego się nauczysz podczas tworzenia przykładowej aplikacji internetowej "Biblioteka". W kolejnych artykułach będziemy nad nią pracować i ją rozwijać<span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Szkolenie z Express - część 2: Tworzymy szkielet witryny</a></dt>
+ <dd>Artykuł zawiera opis jak stworzyć "szkielet" projektu naszej witryny, który będziesz mógł wypełnić takimi elemenatami jak: ścieżki do podstron witryny, szablony/widoki i bazy danych.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Szkolenie z Express - część 3: Korzystamy z bazy danych (Mongoose)</a></dt>
+ <dd>W artykule zapoznasz się z krótkim omówieniem baz danych wykorzystywanych w technologii Node/Express. W dalszej części opisujemy jak wykorzystać <a href="http://mongoosejs.com/">Mongoose</a> do zapisu danych naszej "Biblioteki" w tym jak zadeklarować schematy i modele bazy, jakie są główne typy danych i metody ich walidacji. W końcowej cześci zobaczysz jakimi metodami możesz operować na danych za pośrednictwem modeli<span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Szkolenie z Express - część 4: Rutery i kontrolery</a></dt>
+ <dd>W tej części cyklu zdefiniujemy ścieżki URL (z kodem obsługi takiego adresu) do wszystkich podstron naszej aplikacji, a z każdym takim URL skojarzymy funkcję (wstępnie będą to atrapy funkcji), która zostanie wywołana, gdy nadejdzie do niego żądanie. Po zakończeniu będziemy dysponować modułową strukturą kodu routingu, co zapewni nam łatwą rozbudowę aplikacji, gdy w następnych artykułach będziemy kod uzupełniać o rzeczywiste funkcje. Po tej części powinieneś dobrze rozumieć metodę tworzenia modularnego routingu w Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Szkolenie z Express - część 5: Prezentacja danych biblioteki</a></dt>
+ <dd>Jesteśmy teraz gotowi dodać do naszej aplikacji strony, które będą wyświetlać książki i pozostałe dane naszej "Biblioteki". Wśród nich znajdzie się strona domowa z informacją ile rekordów danego modelu znajduje się w bazie oraz strony ze szczegółami każdego modelu. Zdobędziesz cenne doświadczenie w pobieraniu danych z bazy i tworzeniu szablonów strony.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Szkolenie z Express - część 6: Praca z formularzami</a></dt>
+ <dd>Artykuł przeprowadzi Cię przez proces tworzenia formularzy HTML, które będą współpracować z Express. Skorzystamy z preprocesoram PUG, aby stworzyć formularze do tworzenia, modyfikacji i usuwania dokumentów w bazie danych naszej aplikacji.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Szkolenie z Express - część 7: Wdrożenie do produkcji</a></dt>
+ <dd>Masz już gotową super aplikację webową "Biblioteka" i zamierzasz ją zainstalować na publicznym serwerze WWW i w ten sposób stanie się dostępna dla pracowników biblioteki i użytkowników przez Internet. W artykule przedstawiono jak znaleźć odpowiedni hosting dla aplikacji i co powinienś zrobić aby była gotowa do działania w środowisku produkcyjnym.</dd>
+</dl>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Instalacji aplikacji "Biblioteka" w PWS/Cloud Foundry</a></dt>
+ <dd>Artykuł przedstawia praktyczną demonstrację instalacji aplikacji "Biblioteka" w serwisie <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a>, który jest w pełni funkcjonalnym, o otwarty kodzie, odpowiednikiem Heroku. PWS/Cloud Foundry jest warte sprawdzenia jeśli szukasz alternatywy dla Herooku lub po prostu chcesz spróbować czegoś innego.</dd>
+</dl>
+
+<h2 id="Zapotrzebowanie_na_kolejne_samouczki">Zapotrzebowanie na kolejne samouczki</h2>
+
+<div>
+<p>To koniec atrykułów szkoleniowych (jak na razie). Jeśli chcesz poszerzać bazę materiałow, to poniżej znaduje się spis tematów, które warto opracować:</p>
+
+<ul>
+ <li>Korzystanie z sesji.</li>
+ <li>Autentykacja użytkowników.</li>
+ <li>Autoryzacja i prawa dostępu użytkowników.</li>
+ <li>Testowanie applikacji webowych tworzonych w Express.</li>
+ <li>Bezpieczeństwo sieciowe w aplikacjach tworzonych w Express.</li>
+</ul>
+</div>
diff --git a/files/pl/learn/server-side/express_nodejs/introduction/index.html b/files/pl/learn/server-side/express_nodejs/introduction/index.html
new file mode 100644
index 0000000000..4c4049f67f
--- /dev/null
+++ b/files/pl/learn/server-side/express_nodejs/introduction/index.html
@@ -0,0 +1,538 @@
+---
+title: Wprowadzenie do Express/Node
+slug: Learn/Server-side/Express_Nodejs/Introduction
+tags:
+  - Początkujacy Express Node
+translation_of: Learn/Server-side/Express_Nodejs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<dl>
+ <dd>Znajdziesz tutaj odpowiedzi na pytania "Czym jest Node?" i "Co to jest Express?", oraz zrozumiesz co czyni framework Express wyjątkowym. W dalszej części zostały przedstawione najistotniejsze możliwości wraz z głównymi elementami potrzebnymi do budowy aplikacji webowych w Express (choć jeszcze nie będziesz miał przygotowanego środowiska do tworzenia i testowania takich aplikacji).</dd>
+</dl>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania:</th>
+   <td>Podstawowe umiejętności w posługiwaniu się komputerem. Rozumienie ogólnych zasad <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">programowania po stronie serwera</a>,  w szczególności mechanizmów <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">interakcji między klientem a serwerem aplikacji webowych</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>Zapoznanie się z frameworkiem Express, jego współpracą ze środowiskiem Node, jego funkcjonalnością i głównymi elementami aplikacji tworzonymi w tym frameworku.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Wprowadzenie_do_Node">Wprowadzenie do Node</h2>
+
+<p><a href="https://nodejs.org/">Node</a> (lub bardziej formalnie <em>Node.js</em>) jest wieloplatformowym oprogramowaniem o otwartym kodzie, które pozwala deweloperom na tworzenie wszelkiego rodzaju oprogramowania w języku JavaScript pracującym po stronie serwera. Jest to środowisko uruchomieniowe, które działa poza przeglądarką, współpracujące bezpośrednio z systemem operacyjnym. W ten sposób środowisko Node udostępnia swoim aplikacjom API systemu operacyjnego, w tym dostęp do systemu plików, bibliotek systemowych czy uruchomionych procesów, w tym serwerów HTTP.</p>
+
+<p>Z perspektywy tworzenia oprogramowania po stronie serwera, Node ma szereg zalet:</p>
+
+<ul>
+ <li>Wysoka wydajność! Node zostało zaprojektowane, aby optymalizować wydajność i skalowalność aplikacji webowych i jest dobrym rozwiązaniem wielu często występujących problemów podczas tworzenia aplikacji tego typu.</li>
+ <li>Kod aplikacji to "stary dobry JavaScript", co oznacza, że spędzamy mniej czasu na "przełączanie kontekstu" podczas pracy z różnymi językami po stronie klienta i serwera.</li>
+ <li>JavaScript jest relatywnie nowym językiem programowania i oferuje sporo ulepszeń w porównaniu do innych, tradycyjnie używanych po stronie serwera języków (np. PHP, Python itd.). Także wiele nowszych i popularnych języków jest kompilowanych/tłumaczonych do JavaScript, więc możesz korzystać także z TypeScript, CoffeScript, ClojureScript, Scala.js, LiveScript i innych.</li>
+ <li>Menadżer pakietów środowiska Node (NPM - Node Package Manager) daje Ci dostęp do setek tysięcy pakietów, z których możesz korzystać. Posiada on najlepszy w swojej klasie mechanizm rozwiązywania zależności i może być wykorzystany do automatyzacji pracy narzędzi budujących aplikację.</li>
+ <li>Node.js jest przenośne. Jest dostępne dla Microsoft Widnows, macOs, Linux, Solaris, FreeBSD, OpenBSD, WebOS, and NonStop OS. Jest także wspierane przez dostawców usług sieciowych, którzy zapewniają odpowiednią infrastrukturę i dokumentację do hostowania aplikacji Node.</li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Ma też bardzo aktywny ekosystem firm trzecich i społeczność programistów, którzy gotowi są służyć pomocą.</span></li>
+</ul>
+
+<p>Możesz teraz wykorzystać Node.js do stworzenia prostego serwera stron WWW posługując się pakietem HTTP.</p>
+
+<h3 id="Hello_Node.js">Hello Node.js</h3>
+
+<p>W poniższym przykładzie utworzymy serwer WWW, który będzie oczekiwał dowolnego rodzaju żądań HTTP skierowanych pod URL <code>http://127.0.0.1:8000/</code> - gdy żądanie zostanie odebrane, skrypt wyśle odpowiedź z łańcuchem "Hello World". Jeśli masz już zainstalowane Node, możesz wykonać poniższe kroki, aby wykonać przykład:</p>
+
+<ol>
+ <li>Otwórz terminal (w Windows otwórz wiersz poleceń - cmd.exe).</li>
+ <li>Utwórz katalog w miejscu, którym chcesz zapisać program, na przykład <code>test-node</code>, a następnie wejdź do nie niego wykonując polecenie w terminalu:</li>
+</ol>
+
+<pre>cd test-node</pre>
+
+<ol start="3">
+ <li>Korzystając z ulubionego edytora tekstu, utwórz plik o nazwie <code>hello.js</code> i wklej do niego poniższy kod:</li>
+</ol>
+
+<pre class="brush: js">// Load HTTP module
+const http = require("http");
+
+const hostname = "127.0.0.1";
+const port = 8000;
+
+// Create HTTP server
+const server = http.createServer((req, res) =&gt; {
+
+   // Set the response HTTP header with HTTP status and Content type
+   res.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // Send the response body "Hello World"
+   res.end('Hello World\n');
+});
+
+// Prints a log once the server starts listening
+server.listen(port, hostname, () =&gt; {
+   console.log(`Server running at http://${hostname}:${port}/`);
+})
+</pre>
+
+<ol start="4">
+ <li>Zapisz plik do katalogu, który utworzyłeś powyżej w punkcie 2.</li>
+ <li>Wróć do terminalu i wpisz następujące polecenie:</li>
+</ol>
+
+<pre class="brush: bash">node hello.js</pre>
+
+<p>W ostatnim kroku otwórz przeglądarkę WWW i wpisz adres <code>http://localhost:8000</code> ; powinieneś zobaczyć napis "<strong>Hello World</strong>" w lewy górnym rogu pustej strony.</p>
+
+<h2 id="Frameworki_do_budowy_aplikacji_webowych">Frameworki do budowy aplikacji webowych</h2>
+
+<p>Inne typowe zadania związane z tworzeniem aplikacji internetowych nie są bezpośrednio wspierane przez samo Node.js. Jeśli chcesz obsługiwać osobno każdą z metod HTTP (np. GET, POST, DELETE itp.), lub obsługiwać żądania w różnych ścieżkach URL („routes”), lub wysyłać statyczne dokumenty (jako pliki HTML) lub korzystać z szablonów do dynamicznego tworzenia odpowiedzi, to będziesz musiał napisać kod samemu. Albo zamiast wymyślać na nowo koło możesz użyć frameworka webowego do tworzenia aplikacji!</p>
+
+<h2 id="Wprowadzenie_do_Express">Wprowadzenie do Express</h2>
+
+<p><a href="https://expressjs.com/">Express</a> to jeden z najpopularniejszych frameworków webowych, który jest także wykorzystywany jako biblioteka w wielu innych popularnych <a href="https://expressjs.com/en/resources/frameworks.html">frameworkach Node</a>. Dostarcza następujących mechanizmów:</p>
+
+<ul>
+ <li>Tworzenie funkcji obsługujących żądania o różnych metodach HTTP i skierowanych do różnych ścieżek w URL (tzw. routing).</li>
+ <li>Integrację z różnymi silnikami do generowania widoków, które są tworzone na podstawie osadzanych danych w szablonach stron.</li>
+ <li>Konfigurowania typowych ustawień aplikacji webowych jak np. portu, lokalizacji szablonów do generowania widoków odpowiedzi.</li>
+ <li>Dodatkowe przetwarzanie żądań w warstwie pośredniej (tzw. "middleware"), które może być umieszczone w dowolnym miejscu łańcucha obsługi żądania.</li>
+</ul>
+
+<p>Ponieważ <em>Express </em>jest dość minimalistyczny, dlatego deweloperzy stworzyli wiele kompatybilnych z nim pakietów pracujących w warstwie pośredniej, które rozwiązują prawie każdy problem pojawiający się w aplikacjach webowych. Są dostępne biblioteki do zarządzania ciasteczkami, do pracy w trybie sesji, do logowania użytkowników, do parsowania: parametrów w URL, danych przesyłanych w żądaniach POST, nagłówków zabezpieczeń i wiele innych. Pełną listę bibliotek rozwijanych przez zespół programistów Express znajdziesz na stronie <a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a> (która zawiera także popularne pakiety firm trzecich).</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Ta elastyczność Express ma dwa różne oblicza. Jest wiele  pakietów warstwy pośredniej, które rozwiązują prawie każdy problem lub wymaganie, ale ich opracowanie jest czasem nie lada wyzwaniem. Nie ma także "jedynie słusznej" struktury aplikacji, wiele dostępnych w Internecie przykładów nie jest optymalnych, lub prezentują tylko niewielki wycinek tego, co musisz zrobić, aby zbudować aplikację webową.</p>
+</div>
+
+<h2 id="Skąd_się_wziął_Node_i_Express">Skąd się wziął Node i Express?</h2>
+
+<p>Pierwsza edycja Node została wydana, tylko dla systemu Linux, w 2009 roku. Menadżer pakietów NPM pojawił się w 2010, a natywne wsparcie dla systemu Windows dodano w 2012 roku. Bieżąca edycja LTS Node ma wersję v12.13.1, gdy najnowsza wersja Node ma numer 13.2.0. Jest to tylko krótki wycinek z bogatej historii; jeśli chcesz się więcej dowiedzieć zajrzyj do <a href="https://en.wikipedia.org/wiki/Node.js#History">Wikipedi</a>i.</p>
+
+<p>Express został pierwotnie wydany w listopadzie 2010 i obecnie jest dostępny w wersji 4.17.1. Możesz sprawdzić <a href="https://expressjs.com/en/changelog/4x.html">dziennik zmian</a>, aby uzyskać informacje o zmianach w bieżącej wersji, a <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a>, aby uzyskać bardziej szczegółowe informacje o historii wersji.</p>
+
+<h2 id="Jak_popularne_są_Node_i_Express">Jak popularne są Node i Express?</h2>
+
+<p>Popularność danego frameworku jest bardzo ważna, gdyż jest wskaźnikiem, czy będzie rozwijany i nadal będzie dostępna dokumentacja, dodatkowe biblioteki i wsparcie techniczne.</p>
+
+<p>Oczywiście nie ma miarodajnego wskaźnika popularności frameworków po stronie serwera (choć są strony takie jak <a href="http://hotframeworks.com/">Hot Frameworks</a>, które próbują oszacować popularność danego framworku na podstawie liczby projektów na GitHub i liczby pytań w serwisie StackOverflow). Lepszym pytaniem jest to, czy Node i Express są wystarczająco popularne, aby nie spotkał ich los niszowych lub zapomnianych platform. Czy mogą liczyć na dalszy rozwój. Czy możesz liczyć na pomoc, gdy będziesz jej potrzebował? Czy istniej możliwość dostania pracy jeśli nauczysz się platformy Express.</p>
+
+<p>Opierając się na liczbie znanych firm korzystających z Express, liczbie osób wnoszących wkład w kod źródłowy oraz liczbie osób zapewniających zarówno bezpłatne, jak i płatne wsparcie, można potwierdzić, że Express jest popularnym frameworkiem!</p>
+
+<h2 id="Czy_Express_jest_restrykcyjny">Czy Express jest restrykcyjny?</h2>
+
+<p>Frameworki webowe często określają siebie jako restrykcyjne lub elastyczne.</p>
+
+<p>Frameworki restrykcyjne to takie, które prezentują jeden „właściwy sposób” na wykonanie określonego zadania. Najczęściej wspierają szybki rozwój w określonej dziedzinie (rozwiązywanie problemów określonego typu), ponieważ ten właściwy sposób realizacji zadania jest zwykle dobrze rozpoznany i udokumentowany. Są jednak znaczniej mniej elastyczne w rozwiązywaniu problemów poza obszarem swojej głównej domeny i nie oferują dużych możliwości w kwestii wyboru komponentów czy rozwiązań, których można użyć.</p>
+
+<p>Przeciwieństwem są frameworki elastyczne, które mają znacznie mniejsze ograniczenia dotyczące wyboru połączenia komponentów w celu realizacji aplikacji, a nawet tego, które komponenty należy zastosować. Ułatwiają programistom na korzystanie z najodpowiedniejszych dla nich narzędzi do wykonania określonego zadania, aczkolwiek kosztem jest konieczność samodzielnego szukania takich komponentów.</p>
+
+<p>Express jest elastyczny. Możesz korzystać z dowolnego kompatybilnego oprogramowania w warstwie pośredniej, włączając je w dowolnym miejscu całego łańcucha obsługi żądań. Możesz tworzyć aplikację z kodem w jednym pliku lub podzielić kod na wiele plików, korzystając z dowolnej struktury katalogów. Czasami możesz odnieść wrażenie, że masz zbyt wiele możliwości!</p>
+
+<h2 id="Jak_wygląda_kod_Express">Jak wygląda kod Express?</h2>
+
+<p>Tradycyjna aplikacja webowa przetwarzająca dane czeka na żądania HTTP nadchodzące z przeglądarki (lub innego programu klienta). W chwili, gdy żądanie nadejdzie, aplikacja określa akcję, która musi być podjęta. O tym jaką akcję należy wybrać decydują wzorzec zawarty w URL i ewentualne informacje zawarte w żądaniu POST lub GET. W zależności od żądania aplikacja może odczytać lub zapisać informacje w bazie danych, może też wykonywać inne zadania. Gdy aplikacja zakończy akcję wysyła odpowiedź do przeglądarki klienta. Najczęściej tą odpowiedzią jest dynamicznie tworzony dokument HTML zawierający dane dla przeglądarki klienta. Dokument taki tworzony jest na podstawie szablonu HTML, w którym wyróżnione są miejsca na dane.</p>
+
+<p>W kolejnych sekcjach wyjaśnimy typowe elementy kodu, z którymi się spotkasz podczas pracy z Express i Node.</p>
+
+<h3 id="Hello_World_Express">Hello World Express</h3>
+
+<p>Na początek zajmiemy się nieśmiertelnym przykładem <a href="https://expressjs.com/en/starter/hello-world.html">Hello World</a> (przedyskutujemy każdy fragment kou w tej i następnych sekcjach).</p>
+
+<div class="note">
+<p><strong>Wskazówka: </strong>Jeśli już masz zainstalowany Node i Express (lub zainstalujesz oba według wskazówek zawartych w <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">następnym artykule</a>), zapisz poniższy kod w pliku <strong>app.js</strong> a następnie uruchom go wpisując w wierszu poleceń:</p>
+
+<p><strong><code>node ./app.js</code></strong></p>
+</div>
+
+<pre class="brush: js">var express = require('express');
+var app = express();
+
+<strong>app.get('/', function(req, res) {
+  res.send('Hello World!');
+});</strong>
+
+app.listen(3000, function() {
+  console.log('Example app listening on port 3000!');
+});
+</pre>
+
+<p>W pierwszych dwóch wierszach importujemy przez <code>require()</code> moduł o nazwie express a następnie tworzymy <a href="https://expressjs.com/en/4x/api.html#app">Aplikację Express</a>. Zwyczajowo obiekt aplikacji został nazwany <code>app</code> i zawiera metody do ustalania trasy (routing) żądań, konfiguracji warstwy pośredniej, renderowania widoków w HTML, rejestracji silnika szablonów i konfiguracji <a href="https://expressjs.com/en/4x/api.html#app.settings.table">ustawień aplikacji</a>, które kontrolują jej zachowanie (np. tryb środowiska, czy definicje routingu są wrażliwe na wielkość znaków itd.)</p>
+
+<p>W środkowej części kodu (trzy kolejne wiersze zaczynające  się od <code>app.get</code>) znajduje się definicja trasy. Metoda określa funkcję zwrotną, która zostanie wywołana, gdy pojawi się żądanie GET HTTP skierowane do ścieżki (<code>'/'</code>) względem katalogu głównego strony. Argumentami funkcji zwrotnej są obiekty żądania (request) i odpowiedzi (response). W ciele funkcji została wywołana metoda <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code>  odpowiedzi, która wysyła napis "Hello World!" do klienta.</p>
+
+<p>Ostatni blok odpowiada za uruchomienie serwera, który nasłuchuje na porcie 3000 i drukuje komunikaty logów na konsoli. Gdy serwer już działa możesz otworzyć przeglądarkę i po wpisaniu adresu <code>localhost:3000</code> powinieneś zobaczyć odpowiedź serwera.</p>
+
+<h3 id="Import_i_tworzenie_modułów">Import i tworzenie modułów</h3>
+
+<p>Modułem jest biblioteka lub plik JavaScript, który można zaimportować do innego pliku źródłowego przy użyciu funkcji <code>require()</code>. <em>Express </em>jest też modułem, podobnie jak biblioteki funkcji warstwy pośredniej czy baz danych.</p>
+
+<p>W kodzie poniżej widać, jak importujemy moduł przez nazwę, podobnie jak zaimportowaliśmy framework <em>Exress</em> w przykładzie. Najpierw wywołujemy funkcję <code style="font-style: normal; font-weight: normal;">require() </code>z podaną nazwą modułu (<code>'express'</code>), a potem wykorzystujemy zwrócony przez import obiekt, żeby utworzyć <a href="https://expressjs.com/en/4x/api.html#app">aplikację Express</a>. Mając obiekt aplikacji możemy korzystać z jego właściwości i metod.</p>
+
+<pre class="brush: js">var express = require('express');
+var app = express();
+</pre>
+
+<p>Oczywiście możesz też tworzyć własne moduły, które moga być importowane w ten sam sposób.</p>
+
+<div class="note">
+<p><strong>Wskazówka:</strong>  Dobrze, żebyś tworzył własne moduły, wtedy Twoja aplikacja będzia złożona z osobnych, łatwo zarządzanych części. Trzymanie całego kodu aplikacji w jednym pliku tworzy trudny do utrzymania i zrozumienia monolit. Korzystanie z modułów pomoże Ci w kontrolowaniu przestrzeni nazw, czyli na zewnątrz modułu będą dostępne tylko te zmienne, które jawnie z niego eksportujesz.</p>
+</div>
+
+<p>Obiekty, które mają być dostępne na zewnątrz modułu, muszą być przez Ciebie wskazane za pomocą dodanej właściwości obiektu <code>exports</code>. Przykładowy poniżej moduł, zapisany w pliku <strong>square.js</strong>, exportuje dwie metody: <code>area()</code> i <code>perimeter()</code>. </p>
+
+<pre class="brush: js">exports.area = function(width) { return width * width; };
+exports.perimeter = function(width) { return 4 * width; };
+</pre>
+
+<p>Możemy zaimportować moduł funkcją <code>require()</code> i wywołać wyeksportowane metody:</p>
+
+<pre class="brush: js">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
+console.log('The area of a square with a width of 4 is ' + square.area(4));</pre>
+
+<div class="note">
+<p><strong>Wskazówka:</strong>  Możesz też wskazać moduł podając ścieżkę absolutną do jego pliku (lub nazwy, tak jak to już robiliśmy).</p>
+</div>
+
+<p>Jeśli chcesz wyeksportować cały obiekt jednym przypisaniem (zamiast eksportować osobno każdą jego metodę lub pole) to przypisz ten obiekt do <code>module.exports</code> (możesz również tak zrobić, aby obiekt główny eksportu był konstruktorem lub inną funkcją):</p>
+
+<pre class="brush: js">module.exports = {
+  area: function(width) {
+    return width * width;
+  },
+
+  perimeter: function(width) {
+    return 4 * width;
+  }
+};
+</pre>
+
+<div class="note">
+<p><strong>Wskazówka:</strong>  Możesz traktować  <code>exports</code> jak <a href="https://nodejs.org/api/modules.html#modules_exports_shortcut">skrót</a> do <code>module.exports</code> w obrębie danego modułu. Faktycznie, <code>exports</code>  jest właśnie zmienną zainicjalizowana  wartością <code>module.exports</code> zanim modułe zostanie ewaluowany. Ta wartość jest referencją do obiektu (w tym przypadku pustego). Oznacza to, że <code>exports</code> przechowuje referencję do tego samego obiektu, którego odwołuje się <code>module.exports</code>.  To oznacza także, że przypisując do obiektu <code>exports</code> inną wartość przestaje on mieć związek z <code>module.exports</code>.</p>
+</div>
+
+<p>Więcej informacji o modułach znajdziesz w dokumentacji API Node: <a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a>.</p>
+
+<h3 id="Asynchroniczne_API">Asynchroniczne API</h3>
+
+<p>Kod JavaScript częściej wykorzystuje asynchroniczne wykonywanie operacji, których czas może być znaczny. Synchroniczne wykonywanie kodu zakłada, że następna operacja nie może się zacząć, dopóki poprzednia się nie zakończy. Przykładem może być wywołanie synchroniczne dwóch funkcji wysyłających komunikaty do konsoli, które powinny się wyświetlić w kolejności: "First, Second":</p>
+
+<pre class="brush: js">console.log('First');
+console.log('Second');
+</pre>
+
+<p>Przeciwieństwem jest kod wykonywany asynchronicznie, w którym kolejna operacja jest uruchamiana, i zanim się zakończy, wywołana jest następna. Gdy operacja się zakończy, mechanizm API wywołuje dodatkowe działanie. Poniższy przykład wyświetli na konsoli komunikaty "Second, First", ponieważ najpierw wywoływana jest funkcja <code>setTimeout()</code>, która po uruchomieniu odliczania czasu, natychmiast wraca i jest wywoływana następna funkcja.</p>
+
+<pre class="brush: js">setTimeout(function() {
+   console.log('First');
+   }, 3000);
+console.log('Second');
+</pre>
+
+<p>Korzystanie z nieblokującego asynchronicznego API jest znacznie ważniejsze w Node niż w przeglądarce, ponieważ Node jest jednowątkowym, sterowanym zdarzeniowo, środowiskiem uruchomieniowym. "Jednowątkowe" oznacza, że wszystkie żądania skierowane do serwera są wykonywane w tym samym wątku (czyli nie są uruchamiane w oddzielnych procesach, które mogłyby się wykonywać równocześnie). Taki model jest bardzo wydajny pod względem szybkość wykonywania i wykorzystania zasobów serwera, ale powoduje on, że jeśli zostanie wywołana synchronicznie funkcja, której wykonanie trwa długo, to zablokuje ona nie tylko bieżące żądanie, ale także wszystkie pozostałe obsługiwane w tym czasie przez aplikację.</p>
+
+<p>Jest kilka metod do sygnalizowania, że asynchroniczna operacja się zakończyła. Najczęściej wykorzystywana jest rejestracja funkcji zwrotnej podczas wywoływania asynchronicznego. Funkcja zwrotna zostanie wywołana, gdy asynchroniczna operacja się zakończy. Z takiego podejścia skorzystano w przykładzie powyżej.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Korzystanie z funkcji zwrotnych może prowadzić do bałaganu. Jeśli zaczniesz tworzyć sekwencję kolejnych wywołań operacji asynchronicznych, aby wykonały się we właściwym porządku, to w rezultacie powstaje wiele poziomów zagnieżdżonych wywołań. Jest to znany problem o nazwie "callback hell" (piekło funkcji callback).  Skutki problemu można złagodzić stosując dobre praktyki (zobacz <a href="http://callbackhell.com/">http://callbackhell.com/</a>), wykorzystując odpowiednie biblioteki jak np. <a href="https://www.npmjs.com/package/async">async</a>, lub możliwości standardu ES6 jak np. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Funkcje zwrotne w Node i Express stosują wspólną konwencję, według której pierwszym argumentem funkcji zwrotnej jest wartość błędu. Drugim argumentem jest obiekt zawierający wszystkie dane zwrócone po prawidłowym zakończeniu funkcji wywołującej. Blog <a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js" style="font-size: 1rem; letter-spacing: -0.00278rem;">The Node.js Way - Understanding Error-First Callbacks</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> (fredkschott.com) zawiera dobre wyjaśnienie, dlaczego ta konwencja jest tak użyteczna</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+</div>
+
+<h3 id="Tworzenie_procedur_obsługi_tras">Tworzenie procedur obsługi tras</h3>
+
+<p>W naszej przykładowej aplikacji Hello World zdefiniowaliśmy funkcję obsługującą żądania GET protokołu HTTP skierowane do katalogu głównego strony <code>'/'</code>).</p>
+
+<pre class="brush: js">app.<strong>get</strong>('/', function(req, res) {
+  res.send('Hello World!');
+});
+</pre>
+
+<p>Funkcja zwrotna podczas wywołania otrzymuje obiekty żądania i odpowiedzi jako argumenty. W naszym przypadku funkcja po prostu wywołuje <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> na obiekcie odpowiedzi ,żeby wysłać napis "Hello World!". Nie jest to jedyna metoda formułowania odpowiedzi na żądanie. Istnieje wiele metod kończących cykl procesu przetwarzania żądania w odpowiedzi np. możesz wywołać metodę <code><a href="https://expressjs.com/en/4x/api.html#res.json">json()</a></code>, żeby wysłać odpowiedź w formacie JSON lub <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">sendFile()</a></code>, aby wysyłać plik.</p>
+
+<div class="note">
+<p><strong>JavaScript tip:</strong>  W funkcji zwrotnej obiekty żądania i odpowiedzi mogą mieć dowolne nazwy, ważne abyś zapamiętał, że podczas wywołania tej funkcji zawsze pierwszym argumentem jest obiekt żądania, a drugim obiekt odpowiedzi. Jednak jest głęboki sens w tym, aby oba argumenty nazwać zgodnie z ich przeznaczeniem.</p>
+</div>
+
+<p>Obiekt aplikacji Express posiada odpowiednie metody do definiowania funkcji obsługujących pozostałe rodzaje żądań HTTP :</p>
+
+<p><code>checkout()</code>, <code>copy()</code>, <strong><code>delete()</code></strong>, <strong><code>get()</code></strong>, <code>head()</code>, <code>lock()</code>, <code>merge()</code>, <code>mkactivity()</code>, <code>mkcol()</code>, <code>move()</code>, <code>m-search()</code>, <code>notify()</code>, <code>options()</code>, <code>patch()</code>, <strong><code>post()</code></strong>, <code>purge()</code>, <strong><code>put()</code></strong>, <code>report()</code>, <code>search()</code>, <code>subscribe()</code>, <code>trace()</code>, <code>unlock()</code>, <code>unsubscribe()</code>.</p>
+
+<p>Jest  też jedna specjalna metoda <code>app.all()</code>, która jest wywoływana dla każdego żądania HTTP. Wykorzystuje się ją do instalowania funkcji warstwy pośredniej obsługujących wybraną trasę dla dowolnych żądań. Poniższy przykład (pochodzący z dokumentacji Express) ilustruje przypadek funkcji obsługującej wszystkie żądania (o dowolnej metodzie HTTP) skierowane do ścieżki  <code>/secret</code> (funkcja pochodzi z modułu <a href="https://nodejs.org/api/http.html#http_http_methods">http</a>).</p>
+
+<pre class="brush: js">app.all('/secret', function(req, res, next) {
+  console.log('Accessing the secret section ...');
+  next(); // pass control to the next handler
+});</pre>
+
+<p>Metody definiujące trasy są wywoływane na podstawie dopasowania do określonych wzorców w URL jak i wydobywają pewne części z URL i przekazują je jako parametry do funkcji obsługi żądania (jako atrybuty żądania).</p>
+
+<p>Często przydatne jest grupowanie procedur obsługi tras dla określonej części witryny i uzyskiwanie do nich dostępu za pomocą wspólnego przedrostka ścieżki (np. strona z Wiki może mieć wszystkie trasy związane z wiki w jednym pliku i mieć do nich dostęp w postaci ścieżki z prefiksem /wiki/). Za realizacje grupowania odpowiedzialny jest obiekt <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code>.  Wracając do przykładu Wiki: wszystkie trasy możemy umieścić w module <strong>wiki.js</strong> i wyeksportować je do obiektu <code>Router</code> , jak w przykładzie poniżej:</p>
+
+<pre class="brush: js">// wiki.js - Wiki route module
+
+var express = require('express');
+var router = express.Router();
+
+// Home page route
+router.get('/', function(req, res) {
+  res.send('Wiki home page');
+});
+
+// About page route
+router.get('/about', function(req, res) {
+  res.send('About this wiki');
+});
+
+module.exports = router;
+</pre>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Dodawanie tras do obiektu <code>Router</code> jest jak dodawanie tras do obiektu <code>app</code> (jak pokazaliśmy to już wcześniej).</p>
+</div>
+
+<p>Dołączamy utworzony router (nasz plik <strong>wiki.js</strong>) do głównego pliku aplikacji przez <code>require()</code>  i włączamy go do warstwy pośredniej aplikacji wywołując metodę <code>use()</code>. To spowoduje, że nasza aplikacja będzie teraz obsługiwać dwie ściezki: <code style="font-style: normal; font-weight: normal;">/wiki/</code> i <code style="font-style: normal; font-weight: normal;">/wiki/about/</code>.</p>
+
+<pre class="brush: js">var wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);</pre>
+
+<p>W dalszych częściach cyklu pokażemy więcej możliwości konfigurowania ścieżek, w szczególności korzystanie z obiektu  <code>Router</code> w rozdziale <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Routery i kontrolery.</a></p>
+
+<h3 id="Warstwa_pośrednia">Warstwa pośrednia</h3>
+
+<p>Warstwa pośrednia (middleware) jest bardzo istotną częścią aplikacji Express. Wykonuje ona wiele operacji począwszy od obsługi plików statycznych po kompresje odpowiedzi HTTP. Jeśli funkcje obsługi żądań są ostatnim etapem, w którym wysyłamy odpowiedź do klienta, to funkcje middleware po wykonaniu operacji na żądaniu lub odpowiedzi wywołują następną funkcje w łańcuchu, którą może być kolejna funkcja warstwy pośredniej lub końcowa funkcja obsługi żądania. O kolejnością wywołań funkcji middleware decyduje programista.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Warstwa pośrednia może wykonywać dowolne operacje, wykonywać dowolny kod, dokonywać zmian w żądaniu lub odpowiedzi a także może zakończyć cały cykl przetwarzania żądania w odpowiedź. Jeśli funkcja middleware nie kończy przetwarzania to musi wywołać metodę <code>next()</code>, która przekazuje sterowanie do następnej funkcji warstwy (w przeciwnym przypadku żądanie zostanie zawieszone). </p>
+</div>
+
+<p>Większość aplikacji korzysta z funkcji warstwy pośredniej firm trzecich, bo upraszcza to proces projektowania aplikacji webowych, w których korzystamy z ciasteczek, sesji, autentykacji użytkowników, danych w formacie JSON, logowania itd. Lista dostępnych pakietów znajduje się na stronie <a href="http://expressjs.com/en/resources/middleware.html">Express middleware</a> (łącznie z pakietami firm trzecich). Więcej pakietów jest dostępnych poprzez menadżer pakietów NPM.</p>
+
+<p>Pakiet middleware'u, który chcesz wykorzystać w swojej aplikacji, musisz najpierw zainstalować przy pomocy NPM. Załóżmy, że chcesz dodać logger żądań do warstwy pośredniej znajdujący się w pakiecie <a href="http://expressjs.com/en/resources/middleware/morgan.html">morgan</a> HTTP:</p>
+
+<pre class="brush: bash"><code>$ npm install morgan
+</code></pre>
+
+<p>Teraz powinieneś go dodać do stosu warstwy pośredniej wywołując metodę <code>use()</code>:</p>
+
+<pre class="brush: js">var express = require('express');
+<strong>var logger = require('morgan');</strong>
+var app = express();
+<strong>app.use(logger('dev'));</strong>
+...</pre>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Funkcje middleware'u i obsługi żadań wywoływane są w kolejności ich deklaracji. Dla wybranych pakietów ich miejsce w łańcuchu wywołań jest bardzo ważne (np. jeśli warstwa sesji zależy od warstwy obsługi ciasteczek, wtedy funkcja obsługi ciasteczek powinna być dodana jako pierwsza). W praktyce prawie zawsze funkcje warstwy pośredniej są dodawane przed definicją funkcji obsługi tras, gdyż w przeciwnym razie obsługa żądań nie będzie miała dostępu do funkcji warstwy pośredniej.</p>
+</div>
+
+<p>Oczywiście możesz tworzyć własne funkcje warstwy pośredniej, i prawdopodobnie będziesz zmuszony do ich definiowania (jak choćby funkcje obsługi błędów). Jedyną różnicą między funkcjami middleware'u, a funkcjami obsługi żądań jest dodatkowy, trzeci argument funkcji warstwy pośredniej. Argument ten, zazwyczaj o nazwie <code>next</code>, jest funkcją, której wywołanie uruchamia następną funkcje warstwy pośredniej. Każda funkcja middleware'u musi wywołać ten argument, gdyż tego oczekuje kontrakt przetwarzania żądania i odpowiedzi w warstwie pośredniej i to je odróżnia od funkcji, które tego nie robią lub nie posiadają takiego argumentu, na których kończy się cykl życia żądania.</p>
+
+<p>Wywołując metodę <code>app.use()</code> masz dwie możliwości włączania funkcji middleware'u do łańcucha przetwarzania żądania, określając czy funkcja ta obsługuje wszystkie żądania czy tylko o określonej metodzie protokołu HTTP (GET, POST itd.). Możesz też określić dla jakiś ścieżek funkcja ma działać, choć podanie ścieżki przy wowołaniu <code>app.use()</code> jest opcjonalne.</p>
+
+<p>W przykładzie poniżej możesz zobaczyć jak należy dodawać funkcje middleware'u bez i ze ścieżką.</p>
+
+<pre class="brush: js">var express = require('express');
+var app = express();
+
+// An example middleware function
+var a_middleware_function = function(req, res, <em>next</em>) {
+  // ... perform some operations
+  next(); // Call next() so Express will call the next middleware function in the chain.
+}
+
+// Function added with use() for all routes and verbs
+app.use(a_middleware_function);
+
+// Function added with use() for a specific route
+app.use('/someroute', a_middleware_function);
+
+// A middleware function added for a specific HTTP verb and route
+app.get('/', a_middleware_function);
+
+app.listen(3000);</pre>
+
+<div class="note">
+<p><strong>Wskazówka JavaScript:</strong> W przykładzie powyżej najpierw zadeklarowaliśmy funkcję middleware'u a następnie dodaliśmy ją jako funkcję zwrotną. W poprzednich przykładach funkcję zwrotną definiowaliśmy w miejscu definiowania funkcji obsługi żądania. W JavaScript oba podejścia są poprawne. </p>
+</div>
+
+<p>Dokumentacja Express zawiera o wiele więcej informacji na temat wykorzystania i definiowania warstwy pośredniej w aplikacjach webowych.</p>
+
+<h3 id="Obsługa_plików_statycznych">Obsługa plików statycznych</h3>
+
+<p>Aby Twoja aplikacja mogła obsługiwać pliki umieszczone na serwerze, jak pliki graficzne, CSS czy JavaScript, musi posiadać w warstwie pośredniej odpowiednią funkcję. Na szczęście jest ona częścią Express (jest to jedyna dostarczana z pakietem Express funkcja middlewaru). Jeśli na przykład, chcesz aby aplikacja umożliwiała klientom pobieranie plików z katalogu '<strong>public</strong>' (pliki CSS, JavaScript, grafika), który znajduje się w katalogu aplikacji, umieść poniższy kod:</p>
+
+<pre class="brush: js">app.use(express.static('public'));
+</pre>
+
+<p>Każdy plik z katalogu `public` jest teraz dostępny pod adresem URL z dołączoną na końcu nazwą tego pliku. Na przykład:</p>
+
+<pre><code>http://localhost:3000/images/dog.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/about.html
+</code></pre>
+
+<p>Możesz wielokrotnie dodać funkcję <code>static()</code>, aby dodać więcej katalogów z zasobami statycznymi. Jeśli plik nie zostanie znaleziony przez jedną funkcję middleware'u to żądanie tego pliku zostanie przekazane do następnej funkcji tej warstwy (kolejność wywołań funkcji jest zogdna z kolejnościa ich deklaracji).</p>
+
+<pre class="brush: js">app.use(express.static('public'));
+app.use(express.static('media'));
+</pre>
+
+<p>Istnieje też możliwość tworzenia wirtualnych przedrostów w URL do zasobów statycznych, tak aby nie udostępniać ich pod tym samym adresem bazowym URL. W rezultacie zasoby będą dostępne jakby były w odrębnym katalogu. Posłużmy się kolejnym przykładem, w którym podamy ścieżkę montowania katalogu `public` pod przedrostkiem "/media"</p>
+
+<pre class="brush: js">app.use('/media', express.static('public'));
+</pre>
+
+<p>Od tego momentu możesz dostać się do plików z katalogu <code>public</code> podając URL zakończony prefiksem  <code>/media</code> z umieszczoną za nim nazwą pliku:</p>
+
+<pre><code>http://localhost:3000/media/images/dog.jpg
+http://localhost:3000/media/video/cat.mp4
+http://localhost:3000/media/cry.mp3</code>
+</pre>
+
+<p>Więcej dowiesz się zaglądając do rozdziału <a href="Serving static files in Express">Udostępnianie plików statycznych w Express</a>.</p>
+
+<h3 id="Obsługa_błędów">Obsługa błędów</h3>
+
+<p>Błędy mogą być obsługiwane przez jedną lub więcej specjalnych funkcji middleware'u, które muszą posiadać cztery argumenty (w odróżnieniu od pozostałych, trójargumentowych funkcji tej warstwy) <code>(err, req, res, next)</code>. Popatrzmy na przykład poniżej:</p>
+
+<pre class="brush: js">app.use(function(err, req, res, next) {
+  console.error(err.stack);
+  res.status(500).send('Something broke!');
+});
+</pre>
+
+<p>Funkcje obsługi błędów mogą zwracać odpowiedzi o dowolnej zawartości, ale muszą zostać dodane metodą <code>app.use()</code>  po wszystkich pozostałych funkcjach tej warstwy, aby zostały wywołane na końcu procesu przetwarzania żądania.</p>
+
+<p>Express posiada wbudowany mechanizm obsługi wszelkich błędów mogących wystąpić w aplikacji. Ta domyślna obsługa znajduje się w warstwie pośredniej jako ostania funkcja tej warstwy. Jeśli wywołaniem <code>next()</code> przekażesz błąd do następnej funkcji, w której nic z tym błędem nie zrobisz, to zostanie on obsłużony przez domyślną funkcję, która wyśle do klienta opis błędu wraz z opisem śladu stosu.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Śledzenie stosu nie jest włączone do środowiska produkcyjnego. Aby je włączyć w trybie produkcyjnym musisz ustawić zmienną środowiskową <code>NODE_ENV</code> o wartości '<code>production'</code>. </p>
+</div>
+
+<div class="note">
+<p><strong>Uwaga:</strong> HTTP404  i pozostałe "błędy" kojarzone z kodem statusu nie są traktowane jako błędy. Jeśli chcesz je kontrolować to musisz dołączyć odpowiednią funkcję middleware'u. Więcej informacji znajdziesz w <a href="http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p>
+</div>
+
+<p>Więcje o obsłudze błędów możesz dowiedzieć się w <a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Dokumentacja Express).</p>
+
+<h3 id="Korzystanie_z_baz_danych">Korzystanie z baz danych</h3>
+
+<p>Aplikacja Express może korzystać z dowolnej bazy danych wspieranej przez środowisko Node (sam Express nie definiuje żadnych specjalnych zachowań ani wymagań odnośnie współpracy z bazami danych). Możliwa jest współpraca z wieloma silnikami BD, włączając takie jak PostgreSQL, MySQL, Redis, SQLite, MongoDB itd.</p>
+
+<p>Pierwszym krokiem jest zainstalowanie sterownika przy pomocy menadżera pakietów NPM. Na przykład zainstalowanie sterownika do popularnej bazy NoSQL MongoDB sprowadza się do wydania polecenia:</p>
+
+<pre class="brush: bash"><code>$ npm install mongodb
+</code></pre>
+
+<p>Silnik bazodanowy może być zainstalowany lokalnie lub na zdalnym serwerze. W kodzie aplikacji wymagany jest zainstalowany sterownik, przy pomocy którego łączymy się z bazą i wykonujemy typowe operacje jak tworzenie, odczyt, edycja i usunięcie (CRUD). W przykładzie poniżej (dokumentacja Express) możesz zobaczyć jak znaleźć i odczytać wszystkie ssaki z bazy zawierającej informacje o zwierzętach.</p>
+
+<pre class="brush: js">//this works with older versions of  mongodb version ~ 2.2.33
+var MongoClient = require('mongodb').MongoClient;
+
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
+  if (err) throw err;
+
+  db.collection('mammals').find().toArray(function (err, result) {
+    if (err) throw err;
+
+    console.log(result);
+  });
+});
+
+
+//for mongodb version 3.0 and up
+let MongoClient = require('mongodb').MongoClient;
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){
+   if(err) throw err;
+   let db = client.db('animals');
+   db.collection('mammals').find().toArray(function(err, result){
+     if(err) throw err;
+     console.log(result);
+     client.close();
+   });
+});
+</pre>
+
+<p>Innym, popularnym modelem współpracy aplikacji z bazą danych jest ORM (Object Relational Mapping - mapowanie obiektowo relacyjne). Korzystanie z ORM powoduje, że dane utrwalane w bazie definiujemy jako obiekty lub modele, które są automatycznie mapowane na format bazodanowy. Zaletą takiego podejścia, jest to, że możesz myśleć w kategoriach obiektów JavaScript a nie formatu danych bazy, które w dodatku podlegają sprawdzeniu poprawności danych. Bardziej szczegółowo bazy danych omówimy w późniejszym artykule.</p>
+
+<p>Więcej informacji znajdziesz w <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Dokumentacja Express).</p>
+
+<h3 id="Prezentacja_danych_widoki">Prezentacja danych (widoki)</h3>
+
+<p>Silniki szablonów (określane w Express jako "view engines") pozwalają Ci na łatwiejsze tworzenie dokumentów wysyłanych jako odpowiedź żądania. Taki dokument, a jest to najczęściej plik HTML lub inny typ dokumentu, zawiera specjalne znaczniki, w miejscu których silnik szablonów wstawia, przekazane z funkcji obsługi żądania, dane. Express wspiera wiele różnych silników widoków, więc przy wyborze najbardziej odpowiedniego można posłużyć się zestawieniem <a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More</a>.</p>
+
+<p>Jeśli chcesz budować swoją aplikację w architekturze MVC musisz w niej wskazać położenie plików szablonów. W sekcji konfiguracyjnej aplikacji wskaż atrybutami 'views' lub 'view engine' katalog szablonów, tak jak poniżej:</p>
+
+<pre class="brush: js">var express = require('express');
+var app = express();
+
+// Set directory to contain the templates ('views')
+app.set('views', path.join(__dirname, 'views'));
+
+// Set view engine to use, in this case 'some_template_engine_name'
+app.set('view engine', 'some_template_engine_name');
+</pre>
+
+<p>Wygląd szablonu zależy od zastosowanego silnika generującego widoki, ale niezależnie od niego przekazanie danych do szablonu wygląda podobnie. Zakładając, że plik szablonu ma nazwę "index.&lt;template_extension&gt;", a w nim znajdują się znaczniki na umieszczenie zmiennych o nazwach `title` i `message`, to w funkcji obsługi żądania powinieneś wywołać <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code>, żeby klient otrzymał wygenerowany z szablonu dokument HTML:</p>
+
+<pre class="brush: js">app.get('/', function(req, res) {
+  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
+});</pre>
+
+<p>Więcej informacji o szablonach znajdziesz w <a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (dokumentacja Express).</p>
+
+<h3 id="Struktura_plików">Struktura plików</h3>
+
+<p>Express nie wymaga sztywnej struktury plików, składających się na aplikację. Kontrolery, widoki, pliki statyczne i pozostałe elementy aplikacji mogą być rozmieszczone w dowolnej liczbie plików rozmieszczonych w dowolnej strukturze katalogów. Choć możliwe jest zawarcie całej aplikacji w jednym pliku, to znacznie bardziej rozsądnym rozwiązaniem jest podzielenie aplikacji na pliki o określonych funkcjach. (np. zarządzanie kontem, blogi, forum dyskusyjne) i zgodnie z architekturą aplikacji (np. model, widok i kontroler jeśli jest to aplikacja w architekturze <a href="/en-US/docs/Glossary/MVC">MVC</a>)</p>
+
+<p>W dalszych rozdziałach będziemy korzystać <em>Express Application Generator</em>, który tworzy modularny szkielet aplikacji, którą możemy łatwo rozbudowywać.</p>
+
+<ul>
+</ul>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Gratulacje, zrobiłeś pierwszy krok w swojej podróży z Express/Node! Mam nadzieję, że dobrze poznałeś najważniejsze zalety środowiska Express/Node i zrozumiałeś ogólne działanie najważniejszych elementów aplikacji (funkcje obsługi żądań, warstwa pośrednia, obsługa błędów, szablony widoków. Powinieneś też rozumieć, że Express jako elastyczny framework, nie narzuca Ci sposobu łączenia elementy aplikacji, ale Tobie pozostawia w tej kwestii wybór.</p>
+
+<p>W założeniu twórców Express jest lekkim frameworkiem. dlatego wiele jego zalet i możliwości pochodzi z bibliotek  i funkcji firm trzecich. Będziemy im się przyglądać bardzie szczegółowo w dalszych częściach cyklu. W następnym artykule będziemy poznawać konfigurację środowiska uruchomieniowego Node.</p>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<ul>
+ <li><a href="https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44">Venkat.R - Manage Multiple Node versions</a></li>
+ <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li>
+ <li><a href="https://expressjs.com/">Express</a> (home page)</li>
+ <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-middleware.html">Using middleware</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/starter/static-files.html">Serving static files in Express</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs)</li>
+</ul>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express/Node</a></li>
+ <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/pl/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/pl/learn/server-side/express_nodejs/skeleton_website/index.html b/files/pl/learn/server-side/express_nodejs/skeleton_website/index.html
new file mode 100644
index 0000000000..d3a949c8cd
--- /dev/null
+++ b/files/pl/learn/server-side/express_nodejs/skeleton_website/index.html
@@ -0,0 +1,528 @@
+---
+title: 'Szkolenie z Express - część 2: Tworzenie szkieletu aplikacji webowej'
+slug: Learn/Server-side/Express_Nodejs/skeleton_website
+tags:
+  - Express
+  - Początkujący
+  - Szkolenie
+  - Wprowadzenie
+  - środowisko programisty
+translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p class="summary">W drugim artykule cyklu <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express</a> zbudujemy "szkielet" aplikacji webowej, którą będziemy później rozbudowywać o kolejne elementy: ścieżki, szablony/widoki i odwołania do bazy danych. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania:</th>
+   <td>Przeczytanie artykułu <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Set up a Node development environment</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Cele:</th>
+   <td>Umiejętność samodzielnego utworzenia własnego projektu aplikacji webowej za pomocą <em>Express Application Generator</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Wstęp">Wstęp</h2>
+
+<p>Artykuł przedstawia tworzenie szkieletu aplikacji webowej Biblioteka przy pomocy narzędzia <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a>. W kolejnych artukułach będziemy ją rozbudowywać o kolejne elementy. Proces tworzenia jest bardzo prosty i wymaga wywołania tylko jednego polecenia z nazwą budowanej aplikacji. Opcjonalnie można także podać silnik do renderowania widoków i generator CSS.</p>
+
+<p>W kolejnych sekcjach przyjrzymy się bliżej działaniu generatora, poznamy opcje widoków/CSS. Zostanie też wyjaścniona struktura utworzonej aplikacji. Na zakończenie poznasz metody uruchomienia utworzonej aplikacji oraz zweryfikowania jej działania. </p>
+
+<div class="note">
+<p><span style="line-height: 1.5;"><strong>Uwaga</strong>: <em>Express Application Generator</em> nie jest jedynym narzędziem do tworzenia aplikacji Express, a struktura utworzonych projektów nie jest jedyną właściwą. Wygenerowana aplikacji posiada modularną strukturę, która może być łatwo rozszerzana oraz jest wystarczająco przejrzysta i zrozumiała.  Informacje o tym jak zrobić minimalną aplikację Express znajdziesz w <a href="https://expressjs.com/en/starter/hello-world.html">Hello world example</a> (dokumentacja Express).</span></p>
+</div>
+
+<div class="note">
+<p><span style="line-height: 1.5;"><strong>Uwaga</strong>: W tym szkoleniu wykorzystano wersję Express zdefiniowaną w pliku <strong>package.json</strong> utworzonym automatycznie przez <em>Express Application Generator.</em> I niekoniecznie jest to najnowsza wersja! </span></p>
+</div>
+
+<h2 id="Korzystanie_z_generatora_aplikacji">Korzystanie z generatora aplikacji</h2>
+
+<p>Powinieneś mieć zainstalowany generator jako część środowiska przygotowanego w artykule <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska programisty Node</a>. W ramach przypomnienia instalacja generatora aplikacji Express wymaga wpisania poniższego polecenia:</p>
+
+<pre class="brush: bash notranslate"><code>npm install express-generator -g</code></pre>
+
+<p>Generator posiada wiele opcji, które możesz poznać za pomocą polecenia <code>--help</code> (lub <code>-h</code>):</p>
+
+<pre class="brush: bash notranslate">&gt; express --help
+
+    Usage: express [options] [dir]
+
+
+  Options:
+
+        --version        output the version number
+    -e, --ejs            add ejs engine support
+        --pug            add pug engine support
+        --hbs            add handlebars engine support
+    -H, --hogan          add hogan.js engine support
+    -v, --view &lt;engine&gt;  add view &lt;engine&gt; support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+        --no-view        use static html instead of view engine
+    -c, --css &lt;engine&gt;   add stylesheet &lt;engine&gt; support (less|stylus|compass|sass) (defaults to plain css)
+        --git            add .gitignore
+    -f, --force          force on non-empty directory
+    -h, --help           output usage information
+</pre>
+
+<p>Wpisując wyłącznie polecenie <code>express</code> utworzysz projekt w bieżącym katalogu z domyślnym silnikiem zablonów Jade i czystym CSS. Dodanie nazwy katalogu spowoduje utworzenie projektu w tym właśnie katalogu.     </p>
+
+<pre class="brush: bash notranslate"><code>express</code></pre>
+
+<p>Opcją <code>--view</code> możesz wyspecyfikować inny generator widoków a <code>--css</code> podać preprocesor CSS.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Pozostałe opcje wyboru silnika szablonów(n.p. <code>--hogan</code>, <code>--ejs</code>, <code>--hbs</code> itd.) są już przestarzałe i nie należy z nich korzystać . Skorzystaj z opcji <code>--view</code> (or<code> -v</code>)!</p>
+</div>
+
+<h3 id="Jaki_silnik_szablonów_wykorzystać">Jaki silnik szablonów wykorzystać?</h3>
+
+<p>Paczka <em>Express Application Generator</em> pozwala na skonfigurowanie wielu popularnych silników renderujących, w tym <a href="https://www.npmjs.com/package/ejs">EJS</a>, <a href="http://github.com/donpark/hbs">Hbs</a>, <a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade), <a href="https://www.npmjs.com/package/twig">Twig</a> i <a href="https://www.npmjs.com/package/vash">Vash</a>, spośród których to Jade jest domyślnie instalowany w sytuacji braku specyfikacji silnika. Sam Express wspiera znaczną liczbę innych języków szablonów <a href="https://github.com/expressjs/express/wiki#template-engines">out of the box</a>.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Jeśli chcesz skorzystać z silnika, który nie jest wspierany przez generator to zapoznaj się publikacją <a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (dokumentacja Express) i dokuemntacją wybranego silnika.</p>
+</div>
+
+<p>Ogólnie mówiąc powinnieneś wybrać taki silnik szablonów, który dostarcza wszystkich potrzebnych Ci funkcji i pozwala na szybkie osiągnięcie produktywności. Innymi słowy kieruj się tymi samymi regułami, którymi się kierujesz wybierając pozostałe komponenty. Podczas wyboru powinieneś rozważyć kilka kwestii:</p>
+
+<ul>
+ <li>czas osiągnięcia zadawalającej produktywności - jeśli Twój zespół posiada już jakieś doświadczenie w pracy z danym jezykiem szablonów to zapewne szybciej osiągnie sprawność w posługiwaniu się nim. Jeśli nie, to rozważ język łatwy do przyswojenia.    </li>
+ <li>popularność i aktywność - rozważ wybór silnika popularnego i posiadającego aktywną społeczność. Jest to ważne, bo pozwala mieć wsparcie doświadczonych użytkowników w problematycznych sytuacjach pojawiających się w trakcie cyklu życia aplikacji. </li>
+ <li>styl - niektóre silniki szablonów korzystają ze speyficznych znaczników do oznaczania miejsc wypełnianych zawartością pośród "zwykłego" kodu HTML, a inne korzystają ze specyficznej składni (np. w postaci wcięć lub nazw bloków).</li>
+ <li>wydajność/ czas renderowania</li>
+ <li>funkcjonalność - warto uwzględnić podczas wyboru silnika także dostepność następujących funkcji:
+  <ul>
+   <li>Dziedziczenie layoutów: ten mechanizm pozwala zdefiniować szablon bazowy, który może zostać wykorzystany do budowy kolejnych poprzez przejęcie fragmentów bazowego i dodanie elementów specyficznych dla tworzonego szablonu. Jest to znacznie lepsze podejście od budowania szablonu na zasadzie dołączania wymaganych komponentów lub tworzenia za każdym razem od podstaw.    </li>
+   <li>Wsparcie dla dyrektywy typu "include": tego typu dyrektywa pozwala na umieszczanie w szablonie innych szablonów.</li>
+   <li>Możliwość definiowania zmiennych i wykonywania instrukcji ieracyjnych.</li>
+   <li>Zdolność formatowania wartości na poziomie szablonu (np. operacja typu upper-case, formatowanie daty).</li>
+   <li>Zdolność generowania dokumentów wyjściowych w innych formatach od HTML (np. JSON lub XML).</li>
+   <li>Obsługa operacji asynchronicznych i przesyłania strumieniowego.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Wskazówka: </strong> W Intenecie znajduje się wiele zasobów, które mogą pomóc w porównaniu wiel opcji!</p>
+</div>
+
+<p>W naszym projekcie wykorzystamy generator szablonów <a href="https://pugjs.org/api/getting-started.html">Pug</a> (poprzednio funkcjonował pod nazwą Jade), który jest najpopularniejszym narzędziem tego typu w środowisku Express/JavaScript i intalowanym wraz z generatorem aplikacji.</p>
+
+<h3 id="Jakiego_preprocesora_arkuszy_stylów_CSS_należy_użyć">Jakiego preprocesora arkuszy stylów CSS należy użyć?</h3>
+
+<p><em>Express Application Generator</em> pozwala na utworzenie projektu, który można skonfigurować do pracy z najbardziej znanymi preprocesorami stylów CSS: <a href="http://lesscss.org/">LESS</a>, <a href="http://sass-lang.com/">SASS</a>, <a href="http://compass-style.org/">Compass</a>, <a href="http://stylus-lang.com/">Stylus</a>.</p>
+
+<div class="note">
+<p><strong>Uwaga: </strong>CSS  posiada pewne ograniczenia, które czynią definiowanie niektórych reguł bardzo trudnymi. Preprocesory dają możliwość wykorzystania bogatszej i o znacznie wiekszych możliwościach składni do definiowania reguł styli i kompilacji ich do tradycyjnego formatu CSS wykorzystywanego przez przeglądarki.</p>
+</div>
+
+<p>Podobnie jak przy wyborze silnika szablonów, tak i przy wyborze preprocesora powinieneś się kierować preferencjami zespołu, aby osiągnąć żądaną produktywność. W naszym projekcie wykorzystamy ustawienia domyślne, czyli tzw. vanilla CSS, ponieważ nie będziemy korzystać ze zbyt skomplikowanych reguł, a czysty CSS będzie dla nas wystarczająco dobry.</p>
+
+<h3 id="Jakiej_bazy_danych_uzyć">Jakiej bazy danych uzyć?</h3>
+
+<p>Wygenerowany kod aplikacji nie jest skonfigurowany do współpracy z bazą danych. Oczywiście aplikacje <em>Express</em> moga korzystać z  <a href="https://expressjs.com/en/guide/database-integration.html">dowolnego silnika bazodanowego</a> wspieranego przez środowisko Node (sam <em>Express</em> nie stawia żadnych specjalnych wymagań co do stosowanej bazy danych). Itegrację aplikacji z bazą danych omówimy w późniejszym artykule.</p>
+
+<h2 id="Tworzenie_projektu">Tworzenie projektu</h2>
+
+<p>Stworzymy na początek przykładowy projekt pod nazwą <em>express-locallibrary-tutorial </em>korzystający z generatora szablonów Pug<em> </em>i<em> </em>czystego CSS.</p>
+
+<p>Utwórz katalog projektu o podanej wyżej nazwie i przejdź do niego. Uruch teraz <em>Express Application Generator</em> wpisując w wierszu poleceń (terminalu) poniższą komendę:</p>
+
+<pre class="brush: bash notranslate">express express-locallibrary-tutorial --view=pug
+</pre>
+
+<p>Generator aplikacji utworzy poniższą strukturę plików i katalogów.</p>
+
+<pre class="brush: bash notranslate">   create : express-locallibrary-tutorial\
+   create : express-locallibrary-tutorial\public\
+   create : express-locallibrary-tutorial\public\javascripts\
+   create : express-locallibrary-tutorial\public\images\
+   create : express-locallibrary-tutorial\public\stylesheets\
+   create : express-locallibrary-tutorial\public\stylesheets\style.css
+   create : express-locallibrary-tutorial\routes\
+   create : express-locallibrary-tutorial\routes\index.js
+   create : express-locallibrary-tutorial\routes\users.js
+   create : express-locallibrary-tutorial\views\
+   create : express-locallibrary-tutorial\views\error.pug
+   create : express-locallibrary-tutorial\views\index.pug
+   create : express-locallibrary-tutorial\views\layout.pug
+   create : express-locallibrary-tutorial\app.js
+   create : express-locallibrary-tutorial\package.json
+   create : express-locallibrary-tutorial\bin\
+   create : express-locallibrary-tutorial\bin\www
+
+   change directory:
+     &gt; cd express-locallibrary-tutorial
+
+   install dependencies:
+     &gt; npm install
+
+   run the app (Bash (Linux or macOS))
+     &gt; <code>DEBUG=express-locallibrary-tutorial:* npm start
+</code>
+   run the app (PowerShell (Windows))
+<code>     &gt; $ENV:DEBUG = "express-locallibrary-tutorial:*"; npm start
+</code>
+   run the app (Command Prompt (Windows)):
+     &gt; SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+</pre>
+
+<p>Na końcu zwróconych przez generator komunikatów znajdują się instrukcje w jaki sposób zainstalować wymagane pakiety (ich spis znajduje się w pliku <strong>package.json</strong>) i jak uruchomić aplikację.</p>
+
+<h2 id="Uruchomienie_szkieletu_aplikacji">Uruchomienie szkieletu aplikacji</h2>
+
+<p>W katalogu mamy na razie kompletny szkielet naszego projektu, a nasza aplikacja nie wykonuje zbyt wielu zadań. Warto jednak uruchmić ją w tej początkowej postaci, aby sprawdzić czy działa.</p>
+
+<ol>
+ <li>Na początku zainstaluj zależności(polecenie <code>install</code> pobierze wymienione w <strong>package.json</strong> pliki).
+
+  <pre class="brush: bash notranslate">cd express-locallibrary-tutorial
+npm install</pre>
+ </li>
+ <li>Uruchom aplikację.
+  <ul>
+   <li>W systemie Windows użyj tego polecenia:
+    <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
+   </li>
+   <li>W sytemach macOS lub Linux wpisz jak poniżej:
+    <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm start
+</pre>
+   </li>
+  </ul>
+ </li>
+ <li>Wpisz w przeglądarce adres <a href="http://localhost:3000/">http://localhost:3000/</a> aby dostać się do strony aplikacji.</li>
+</ol>
+
+<p>W przeglądarce powinieneś zobaczyć stronę podobą do tej poniżej:</p>
+
+<p><img alt="Browser for default Express app generator website" src="https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png" style="display: block; height: 403px; margin: 0px auto; width: 576px;"></p>
+
+<p>Gratulacje! Twoja aplikacja Express działa i jest dostępna na Twojej lokalnej maszynie pod portem 3000.</p>
+
+<div class="note">
+<p><strong>Uwaga: </strong>Możesz też uruchomić aplikację korzystająć z polecenia<strong> </strong><code>npm start</code>. Ustawiając zmienną DEBUG możesz włączyć wyświetlanie komunikatów logowania i debugowania. Przykładowo podczas odświeżenia powyższej strony aplikacji zobaczysz poniższe komunikaty w oknie konsoli:</p>
+
+<pre class="brush: bash notranslate">&gt;SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+
+&gt; express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
+&gt; node ./bin/www
+
+  express-locallibrary-tutorial:server Listening on port 3000 +0ms
+GET / 304 490.296 ms - -
+GET /stylesheets/style.css 200 4.886 ms - 111
+</pre>
+</div>
+
+<h2 id="Włączenie_restartowania_serwera_po_modyfikacji_plików">Włączenie restartowania serwera po modyfikacji plików</h2>
+
+<p>Jakakolwiek zmiana w naszym projekcie nie będzie widoczna dopóki nie wykonasz ponownego uruchomienia serwera. Z czasem może to być bardzo irytujące, gdy każda zmiana będzie wymagała ciągłego zatrzymywania i ponownego uruchamiania serwera. Dlatego warto poświecić nieco czasu na zautomatyzowanie tej czynności.</p>
+
+<p>Odpowiednim narzędziem do tego celu jest <a href="https://github.com/remy/nodemon">nodemon</a>. Zwykle jest instalowany globalnie, ale tutaj zainstalujemy go lokalnie jako zależność developerską, aby każdy developer pracujący z aplikacją miał go po zainstalowaniu projektu. Wywołaj poniższe polecenia w głównym katalogu naszego projektu::</p>
+
+<pre class="brush: bash notranslate">npm install --save-dev nodemon</pre>
+
+<p>Jeśli jednak chcesz zainstalować <a href="https://github.com/remy/nodemon">nodemon</a> globalnie, a nie tylko w swoim projekcie dodając wpis do <strong>package.json</strong>, to wpisz taką wersję polecenia:  </p>
+
+<pre class="brush: bash notranslate">npm install -g nodemon</pre>
+
+<p>Gdy otworzysz plik <strong>package.json </strong>swojego projektu to powinieneś zobaczyć nową sekcję z poniższą zależnością:</p>
+
+<pre class="brush: json notranslate"> "devDependencies": {
+    "nodemon": "^2.0.4"
+}
+</pre>
+
+<p>Ponieważ nasze narzedzie nie została zainstalowane globalnie, to nie możemy go uruchomić wprost z linii poleceń (dopóki nie dodamy go do ścieżki). Możemy je jednak wywołać wprost ze skryptu NPM, bo NPM wie wszystko o zainstalowanych pakietach. Znajdź sekcję <code>scripts</code> w swoim pliku <strong>package.json</strong>. Dodaj do niej dwa wiersze ze skryptami "devstart" i "serverstart", Pamiętaj o dodaniu na końcu każdego wiersza (oprócz ostatniego) znaku przecinka:    </p>
+
+<pre class="brush: json notranslate">  "scripts": {
+    "start": "node ./bin/www"<strong>,</strong>
+<strong>    "devstart": "nodemon ./bin/www",
+    "serverstart": "</strong>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart"</strong>
+  },
+</pre>
+
+<p>Możemy teraz uruchomić serwer w prawie taki sam sposób jak poprzednio, ale przy pomocy polecenia <code>devstart</code>: </p>
+
+<ul>
+ <li>W systemie Windows wpisz polecenie w takiej postaci:
+  <pre class="brush: bash notranslate">SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong></pre>
+ </li>
+ <li>W systemach macOS lub Linux użyj tej postaci:
+  <pre class="brush: bash notranslate">DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong>
+</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Od tej chwili każda zmiana jakiegokolwiek pliku projektu powoduje restart serwera (możesz też zrestartować serwer wpisując w dowolnym momencie polecenie rs w terminalu). Nadal jednak będziesz musiał odświeżać stronę w przeglądarce.</p>
+
+<p>Od teraz musimy uruchamiać skrypty poleceniem "<code>npm run <em>&lt;scriptname&gt;</em></code>" zamiast zwykłego <code>npm start</code>, ponieważ „start” jest w rzeczywistości poleceniem NPM, które jest odwzorowane na skrypt o takiej nazwie. Mogliśmy zamienić polecenie w skrypcie <em>start</em>, ale podczas programowania chcemy używać tylko <em>nodemon</em>, więc sensowne jest utworzenie nowego polecenia skryptu.</p>
+
+<p>Dodanie polecenia <code>serverstart</code> w sekji skryptów pliku <strong>package.json</strong> jest dobrym rozwiązaniem, które pozwala uniknąć wpisywania długim poleceń uruchamiających serwer. Zwróć uwagę, że niektóre konkretne polecenia dodane do skryptu działają tylko w systemie macOS lub Linux.</p>
+</div>
+
+<h2 id="Wygenerowany_projekt">Wygenerowany projekt</h2>
+
+<p>Przyjrzyjmy się bliżej projektowi, który stworzyliśmy.</p>
+
+<h3 id="Struktura_katalogów">Struktura katalogów</h3>
+
+<p>Utworzony projekt wraz z zainstalowanymi zależnościami ma przedstawioną poniżej strukturę (pliki są elementami z prefiksem "/").</p>
+
+<p>Plik <strong>package.json </strong>definiuje spis wymaganych przez naszą aplikację pakietów oraz zawiera wiele innych informacji o aplikacji. W pliku tym są też zdefiniowane skrypty, w tym też skrypt startowy, który wywołuje punkt wejścia aplikacji, czyli plik JavaScript <strong>/bin/www</strong>. Skrypt ten po ustawieniu mechanizmu obslugi błędów uruchamia plik <strong>app.js</strong>, który wykonuje resztę pracy.</p>
+
+<p>W katalogu <strong>/routes</strong> znajdują się moduły obsługujące ścieżki aplikacji. Szablony generowanych stron przechowywane są w katalogu <strong>/views</strong>.    </p>
+
+<pre class="notranslate">/express-locallibrary-tutorial
+    <strong>app.js</strong>
+    /bin
+        <strong>www</strong>
+    <strong>package.json</strong>
+    <strong>package-lock.json</strong>
+    /node_modules
+        [about 6700 subdirectories and files]
+    /public
+        /images
+        /javascripts
+        /stylesheets
+            <strong>style.css</strong>
+    /routes
+        <strong>index.js</strong>
+        <strong>users.js</strong>
+    /views
+        <strong>error.pug</strong>
+        <strong>index.pug</strong>
+        <strong>layout.pug</strong>
+
+</pre>
+
+<p>W kolejnych sekcjach znajdziesz więcej szczegółów dotyczących plików projektu. </p>
+
+<h3 id="package.json">package.json</h3>
+
+<p>Plik <strong>package.json</strong>:</p>
+
+<pre class="brush: json notranslate">{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.4",
+    "debug": "~2.6.9",
+    "express": "~4.16.1",
+    "http-errors": "~1.6.3",
+    "morgan": "~1.9.1",
+    "pug": "2.0.0-beta11"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.4"
+  }
+}
+</pre>
+
+<p>Sekcja zależności zawiera paczkę <em>express </em>i wybrany przez nas silnik szablonów (<em>pug</em>). Oprócz tego znajdują się w niej jeszcze inne paczki przydatne w aplikacjach webowych:</p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: służy do parsowania ciasteczek i zapewnia przeniesienie ich do <code>req.cookies</code> (zasadniczo daje możliwość wygodnego dostępu do informacji w nagłówkach cookie)</li>
+ <li><a href="https://www.npmjs.com/package/debug">debug</a>: niewielka paczka służąca do debugowania. której mechanizm jest wzorowany na technice wykorzystywanej w rdzeniu środowiska Node.</li>
+ <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: Narzędzie do rejestrowania zdarzeń (logger) w warstwie obsługi żądań HTTP.</li>
+ <li><a href="https://www.npmjs.com/package/http-errors">http-errors</a>: Tworzenie błędów HTTP w razie potrzeby (zgodnych z obsługa błędów w aplikacjach <em>express</em>).</li>
+</ul>
+
+<p>W sekcji scripts zdefiniowany jest skrypt "start", który jest tym samym skryptem wywoływanym poleceniem <code>npm start</code>, gdy chcemy uruchomić serwer. Z definicji tego skryptu wynika, że uruchomia on plik <strong>./bin/www </strong>z kodem JavaScript.  </p>
+
+<pre class="brush: json notranslate">  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www",
+    "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
+  },
+</pre>
+
+<p>Pozostałe skrypty <em>devstart</em> i <em>serverstart</em>  możemy wykorzystywać do uruchomienia tego samego pliku <strong>./bin/www</strong>  ale z użyciem <em>nodemon</em> niż <em>node</em> (jak zostało to wyjaśnione w sekcji <a href="#Enable_server_restart_on_file_changes">Włączenie restartowania serwera po modyfikacji plików</a>).</p>
+
+<h3 id="Plik_www">Plik www</h3>
+
+<p>Plik <strong>/bin/www</strong> jest punktem wejścia aplikacji! Pierwszą rzeczą jaką wykonuje ten plik to funkcja <code>require()</code>, która kieruje do prawdziwego punktu zaczynającego wykonywanie aplikacji (<strong>app.js</strong>, w głównym katalogu projektu), w którym następuje przygotowanie i zwrócenie obiektu aplikacji  <code><a href="http://expressjs.com/en/api.html">express()</a></code>.</p>
+
+<pre class="brush: js notranslate">#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+<strong>var app = require('../app');</strong>
+</pre>
+
+<div class="note">
+<p><strong>Uwaga:</strong> <code>require()</code> jest funkcją globalną środowiska Node, która importuje moduł do bieżącego pliku. W powyższym kodzie moduł <strong>app.js</strong> został podany z użyciem ścieżki względnej i z pominięciem opcjonalnego rozszerzenia <strong>.js</strong>.</p>
+</div>
+
+<p>Pozostała część kodu tego pliku konfiguruje serwer HTTP z aplikacją pracującą pod wskazanym portem (numer portu jest zdefiniowany w zmiennej środowiskowej lub przyjmowana jest wartość 3000 jeśli brak takiej zmiennej). W dalszej części następuje uruchomienie nasłuchiwania i raportowania błędów serwera i połączeń. Na razie nie musisz znać wszystkich szczegółów tego kodu (wszystko w tym pliku jest standardowym kodem), choć jeśli jesteś zainteresowany możesz go przejrzeć.</p>
+
+<h3 id="app.js">app.js</h3>
+
+<p>Ten plik jest odpowiedzialny za utworzenie obiektu aplikacji (pod konwencjonalną nazwą <code>app</code>), jej skonfigurowanie wraz z warstwami pośrednimi i wyeksportowanie jej z modułu. Kod poniżej zawiera tę cześć pliku app.js, która zawiera tworzenie i eksportowanie obiektu aplikacji:</p>
+
+<pre class="brush: js notranslate"><code>var express = require('express');
+var app = express();
+...
+</code>module.exports = app;
+</pre>
+
+<p>Powrót do punktu wejściowego, czyli do pliku <strong>www</strong>,  następuje w linii  zawierającej  <code>module.exports</code>, która eksportuje obiekt app aplikacji i zwraca go do wywołującego kodu, który ten moduł zaimportował.</p>
+
+<p>Czas teraz na szczegóły pliku app.js. Na początku importowne są dość użyteczne moduły przy pomocy funkcji <code>require()</code>, w tym <em>http-errors</em>, <em>express</em>, <em>morgan</em> i <em>cookie-parser, </em>które wcześniej zostały pobrane przez menadżera NPM, oraz pakiet <em>path</em>, który jest częścią środowiska Node i odpowiada za parsowanie ścieżek do plików i katalogów.  </p>
+
+<pre class="brush: js notranslate">var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+</pre>
+
+<p>Kolejne funkcje <code>require()</code>, importują moduły z katalogu <em>routes</em>. Zawierają one kody źródłowe obsługujące zbióry ścieżek naszej aplikacji (URL). Gdy będziemy rozbudowywać aplikację o kolejne ścieżki, na przykład zwracają listę wszystkich książek naszej biblioteki, to będziemy musieli dodać nowy plik z definicją operacji wykonywanych pod tą ścieżką.    </p>
+
+<pre class="brush: js notranslate">var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+</pre>
+
+<div class="note">
+<p><strong>Uwaga:</strong> W tym miejscu tylko zaimportowaliśmy moduły, na razie nie korzystamy z tych ścieżek (nastapi to później). </p>
+</div>
+
+<p>Następnie tworzymy obiekt <em>app </em>za pomocą zaimportowanego modułu <em>express</em>, po czym konfigurujemy go do pracy z wybranym silnikiem szablonów. W pierwszym kroku określa się lokalizację szablonów poprzez przypisanie katalogu do zmiennej 'views'. W drugim należy podać nazwę wykorzystywanej biblioteki szablonów (w naszym przypadku jest to "pug").   </p>
+
+<pre class="brush: js notranslate">var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+</pre>
+
+<p>Następna sekcja zawiera szereg wywołań metody <em>use </em>na obiekcie aplikacji, których zadaniem jest dodanie bibliotek wykorzystywanych w warstwie pośredniej całego łańcucha przetwarzania żądań. Oprócz dołączonych wcześniej modułów zewnętrznych, wykorzystujemy także moduł <code>express.static</code>, którego zadaniem jest obsługa plików statycznych z katalogu <strong>/public</strong> naszego projektu. </p>
+
+<pre class="brush: js notranslate">app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+<strong>app.use(express.static(path.join(__dirname, 'public')));</strong>
+</pre>
+
+<p>Po skonfigurowaniu warstwy pośredniej możemy dodać (poprzednio już zaimportowane) nasze skrypty obsługujące żądania ścieżek. Zaimportowane pliki definiują poszczególne ścieżki dla różnych części naszej aplikacji:</p>
+
+<pre class="brush: js notranslate">app.use('/', indexRouter);
+app.use('/users', usersRouter);
+</pre>
+
+<div class="note">
+<p><strong>Uwaga:</strong> Podane powyżej ścieżki  (<code>'/'</code> i '<code>/users'</code>) są traktowane jako przedrostki tras zdefiniowanych w importowanych plikach. Na przykład, jeśli zaimportowany moduł <strong>users</strong> definiuje ścieżkę względną <code>/profile</code>, to dostęp do tej ścieżki będzie możliwy pod <code>/users/profile</code>. Ścieżki zostaną dokładniej omówione w następnych artykułach.</p>
+</div>
+
+<p>Końcowym etapem konfigurowania warstwy pośredniej jest dodanie obsługi błędów i odpowiedzi HTTP 404.</p>
+
+<pre class="brush: js notranslate">// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+</pre>
+
+<p>Obiekt aplikacji Express jest teraz w pełni skonfigurowany. Ostatnim działaniem w skrypcie jest wyeksportowanie obiektu z bieżącego modułu (w ten sposób staje się on dostępny w pliku <strong>/bin/www </strong>po zaimportowaniu).</p>
+
+<pre class="brush: js notranslate">module.exports = app;</pre>
+
+<h3 id="Ścieżki">Ścieżki</h3>
+
+<p>Plik definiujący obsługę żądań kierowanych do ścieżki <strong>/routes/users.js</strong> znajduje się poniżej (struktura wszystkich plików ścieżek jest bardzo podobna, dlatego nie ma potrzeby oglądania pliku <strong>index</strong>). Na początku znajduje się znana już funkcja importująca moduł <em>express</em>, z którego pobierany jest obiekt <code>express.Router</code> . Po zdefiniowaniu obsługi żądania, obiekt rutera jest exportowany z modułu (dzięki czemu może być zaimportowany w <strong>app.js</strong>).    </p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+<strong>router.get('/', function(req, res, next) {
+  res.send('respond with a resource');</strong>
+});
+
+module.exports = router;
+</pre>
+
+<p>Ruter definiuje metodę, która będzie wywoływana w chwily pojawienia się żądania <code>GET</code> protokołu HTTP skierowanego pod adres zgodny z wzorcem. Pełna ścieżka do tej metody zostanie zdefiniowana gdy moduł ('<code>/users</code>') zostanie zaimportowany i zostanie dodany przedrostek ('<code>/</code>') w module importujacym. Krótko mówiąc, ściezka zostanie użyta, gdy skierowane zostanie  żądanie z URL zawierającym <code>/users/</code>.  </p>
+
+<div class="note">
+<p><strong>Wskazówka: </strong>Wypróbuj działanie rutera uruchamiając serwer i odwiedzając w przeglądarce URL <a href="http://localhost:3000/users/">http://localhost:3000/users/</a>. Powinieneś zobaczyć komunikat: 'respond with a resoure'. </p>
+</div>
+
+<p>Interesującym elementem w kodzie metody obsługującej żądanie GET jest trzeci argument <code>next</code>, co świadczy o tym, że jest to metoda warstwy poredniej a nie prosta funkcja zwrotna. Chociaż na razie w metodzie nie korzystamy z tego argumentu to być może będzie potrzebny w przyszłości, gdy zechsze dodać wiecej metod obsługujących ścieżkę  <code>'/'.</code></p>
+
+<h3 id="Widoki_szablony">Widoki (szablony)</h3>
+
+<p>Widoki (szablony) są przechowywane w katalogu <code>/views</code> (tak jak zdefiniowano to w pliku <strong>app.js</strong>) i posiadają rozszerzenie .<strong>pug</strong>. Metoda <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> jest wykorzystywana do renderowania strony HTML na podstawie szablonu i dostarczonych do niego wartości zmiennych, po czym gotowy dokument jest wysyłany do jako odpowiedź żądania. W znajdującym się kodzie poniżej pochodzącym z pliku możesz obaczyć jak funkcja obsługi żądania ścieżki renderuje szablon "index" na podstawie przekazanej zmiennej "title".  </p>
+
+<pre class="brush: js notranslate">/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('index', { title: 'Express' });
+});
+</pre>
+
+<p>Szablon "index" (<strong>index.pug</strong>) jest przedsatwiony poniżej. Składnię szablonów omówimy poźniej. To co na razie powinieneś wiedzieć to to, że zmienna <code>title</code> (zawierająca napisz '<code>Expres</code>s') została wstawiona w określonym miejscu szablonu.</p>
+
+<pre class="notranslate">extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
+</pre>
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Create a new route in <strong>/routes/users.js</strong> that will display the text "<em>You're so cool"</em> at URL <code>/users/cool/</code>. Test it by running the server and visiting <a href="http://localhost:3000/users/cool/">http://localhost:3000/users/cool/</a> in your browser</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You have now created a skeleton website project for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Local Library</a> and verified that it runs using <em>node</em>. Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.</p>
+
+<p>Next, we'll start modifying the skeleton so that it works as a library website.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/starter/generator.html">Express application generator</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html b/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html
new file mode 100644
index 0000000000..a23787a253
--- /dev/null
+++ b/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Szkolenie z Express: Projekt aplikacji webowej "Biblioteka"'
+slug: Learn/Server-side/Express_Nodejs/Szkolenie_aplikacja_biblioteka
+tags:
+  - Początkujący
+translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">W pierwszym artykule naszego cyklu praktycznych lekcji omówimy będziemy się uczyć i jak będzie wyglądała tworzona w trakcie nauki aplikacja webowa, którą nazwiemy Biblioteka.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Wymagania:</th>
+   <td>Przeczytanie artykułu <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do Express</a>. Aby móc aktywnie uczestwiczyć w szkoleniu potrzebne Ci będzie także <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska do tworzenia applikacji w Node</a>. </td>
+  </tr>
+  <tr>
+   <th scope="row">Cel:</th>
+   <td>
+    <p>Wprowadzenie do przykładowej aplikacji, która będzie tworzona w całym cyklu szkolenia i przedstawienie wszystkich tematów, które będą omawiane. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Wstęp">Wstęp</h2>
+
+<p>Witaj w cyklu szkoleń MDN pt. tworzenie aplikacji "Biblioteka" w frameworku Express(Node), w którym będziemy projektować aplikację webową do zarządzania biblioteką</p>
+
+<p>A oto co będziemy robić w tym cyklu:</p>
+
+<ul>
+ <li>Wykorzystywać <em>Express Application Generator</em> do stworzenia szkieletu naszej aplikacji webowej.</li>
+ <li>Uruchamiać i zatrzymywać serwer WWW.</li>
+ <li>Przechowywać dane aplikacji w bazie danych.</li>
+ <li>Tworzyć trasy do obsługi żądań skierowanych do aplikacji oraz wykorzystywać szablony (widoki) do generowania stron HTML z danymi aplikacji.</li>
+ <li>Pobierać dane od użytkownika przy pomocy formularzy.</li>
+ <li>Wdrażać aplikację w środowisku produkcyjnym.</li>
+</ul>
+
+<p>Część tematów nie powinna być Ci obca, bo zostały już po krótce omówione lub zasygnalizowane. Po zakończeniu szkolenia powinieneś umieć samodzielnie wykonać prostą aplikację Express.</p>
+
+<h2 id="Aplikacja_webowa_Biblioteka">Aplikacja webowa Biblioteka</h2>
+
+<p><em>Biblioteka </em>to nazwa naszej aplikacji, którą będziemy tworzyć i rozwijać w trakcie tego kursu. Domyślasz się, że celem aplikacji jest udostępnienie katalogu online do zarządzania niewielką biblioteką. Użytkownicy będą mogli przejrzeć dostępne książki i zarządzać swoim kontem.</p>
+
+<p>Temat przykładowej aplikacji został starannie dobrany, ponieważ możemy w niej skalować liczbę szczegółów według potrzeb oraz dobrze pokazać możliwości frameworku Express. Najważniejszą jednak sprawą jest to, że aplikacja będzie naszym przewodnikiem prowadzącym przez wszystkie funkcje, które są potrzebne w prawie każdej aplikacji webowej:</p>
+
+<ul>
+ <li>W kilku pierwszych artykułach zdefiniujemy aplikację w dość prostej wersji (tylko do odczytu), w której użytkownicy będą mogli tylko wyszukiwać dostępne książki. Pozwoli to nam zapoznać się z typowymi operacjami występującymi w prawie każdej aplikacji: odczytywanie i wyświetlanie danych z bazy.</li>
+ <li>W dalszej części kursy aplikacja będzie rozbudowywana o elementy demonstrujące bardzie zaawansowane możliwości. Przykładem może być rozszerzenie aplikacji o funkcję dodawania nowych książek do katalogu, w której pokażemy jak wykorzystywać formularze i wspierać autentykację użytkowników.</li>
+</ul>
+
+<p>Chociaż jest to przykład aplikacji o dużych możliwościach rozbudowy, to jej celem jest pokazanie minimum informacji potrzebnych do rozpoczęcia pracy z  Express. Dlatego będziemy przechowywać w niej informacje o książkach, kopiach książek, autorach itd. Nie będziemy jednak przechowywać informacji o innych elementach związanych z pracą biblioteki, ani nie zapewnimy infrastruktury niezbędnej do obsługi wielu witryn bibliotecznych lub innych funkcji „dużej biblioteki”. </p>
+
+<h2 id="Utknąłem_gdzie_znajdę_kod_źródłowy">Utknąłem, gdzie znajdę kod źródłowy?</h2>
+
+<p>W trakcie szkolenia będziemy prezentować kolejne fragmenty kodu źródłowego przykładowej aplikacji, żebyś mógł je skopiować i wkleić do swojego projektu. Będą też fragmenty, dzięki którym, mamy nadzieję, będziesz mógł samodzielnie ją rozbudować (z niewielką pomocą).</p>
+
+<p>Jednak zamiast stosowania metody "Copy Paste", postaraj się samodzielnie przepisać kod. To zaowocuje w przyszłości lepszą znajomością kodu, gdy będziesz pisał coś podobnego.</p>
+
+<p>Gdy jednak utkniesz, bo nie będziesz umiał znaleźć błędu popełnionego przy przepisywaniu, kompletny kod aplikacji możesz znaleźć w repozytorium <a href="https://github.com/mdn/express-locallibrary-tutorial">Github</a>.</p>
+
+<div class="note">
+<p><strong>Uwaga:</strong>  Wersje środowiska Node, Express oraz pozostałych modułów, dla których przetestowano opisywaną tu aplikację znajdują się w pliku <a href="https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json">package.json</a> projektu.</p>
+</div>
+
+<h2 id="Podsumowanie">Podsumowanie</h2>
+
+<p>Gdy już wiesz jaką aplikację będziemy tworzyć i czego będziesz się uczyć możesz przejść do następnego etapu i utworzyć <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">szkielet projektu</a> naszej przykładowej aplikacji.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="W_tym_module">W tym module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Wprowadzenie do środowiska Express/Node</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Przygotowanie środowiska do tworzenia aplikacji w Node(Express)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Szkolenie z Express: Projekt aplikacji webowej "Biblioteka"</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/pl/learn/server-side/index.html b/files/pl/learn/server-side/index.html
new file mode 100644
index 0000000000..7330545ac9
--- /dev/null
+++ b/files/pl/learn/server-side/index.html
@@ -0,0 +1,59 @@
+---
+title: Server-side website programming
+slug: Learn/Server-side
+tags:
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Server
+  - Server-side programming
+  - Topic
+  - TopicStub
+translation_of: Learn/Server-side
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p>
+
+<p>Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.</p>
+
+<p>In the modern world of web development, learning about server-side development is highly recommended.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.</p>
+
+<p>Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p>
+
+<p>You will need to understand "how the web works". We recommend that you first read the following topics:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li>
+</ul>
+
+<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks. </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt>
+ <dd>This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt>
+ <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd>
+</dl>
diff --git a/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html
new file mode 100644
index 0000000000..fa16dab55c
--- /dev/null
+++ b/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -0,0 +1,147 @@
+---
+title: Understanding client-side JavaScript frameworks
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+tags:
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - client-side
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.</p>
+
+<p class="summary">As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p>
+
+<p class="summary">In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:</p>
+
+<ul>
+ <li class="summary">Why should I use a framework? What problems do they solve for me?</li>
+ <li class="summary">What questions should I ask when trying to choose a framework? Do I even need to use a framework?</li>
+ <li class="summary">What features do frameworks have? How do they work in general, and how do frameworks' implementations of these features differ?</li>
+ <li class="summary">How do they relate to "vanilla" JavaScript or HTML?</li>
+</ul>
+
+<p class="summary">After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.</p>
+
+<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p>
+
+<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p>
+
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Introductory_guides">Introductory guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt>
+ <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt>
+ <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd>
+</dl>
+
+<h2 id="React_tutorials">React tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt>
+ <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt>
+ <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt>
+ <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt>
+ <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt>
+ <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt>
+ <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt>
+ <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd>
+</dl>
+
+<h2 id="Ember_tutorials">Ember tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt>
+ <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt>
+ <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt>
+ <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt>
+ <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt>
+ <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt>
+ <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd>
+</dl>
+
+<h2 id="Vue_tutorials">Vue tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt>
+ <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt>
+ <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt>
+ <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt>
+ <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code>&lt;input&gt;</code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt>
+ <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt>
+ <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt>
+ <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt>
+ <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt>
+ <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd>
+</dl>
+
+<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2>
+
+<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p>
+
+<ul>
+ <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li>
+ <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li>
+ <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li>
+ <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li>
+</ul>
+
+<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p>
+
+<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p>
diff --git a/files/pl/learn/tools_and_testing/index.html b/files/pl/learn/tools_and_testing/index.html
new file mode 100644
index 0000000000..9430b94ada
--- /dev/null
+++ b/files/pl/learn/tools_and_testing/index.html
@@ -0,0 +1,48 @@
+---
+title: Tools and testing
+slug: Learn/Tools_and_testing
+tags:
+  - Accessibility
+  - Automation
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - Testing
+  - Tools
+  - Topic
+  - TopicStub
+  - cross browser
+  - user testing
+translation_of: Learn/Tools_and_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from ready-rolled CSS and JavaScript, to testing and automation apps, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, and working out reliable testing plans for your code. This part of the learning area aims to give you what you need get started and make informed choices.</p>
+
+<p>The web industry is an exciting place to work, but it is not without its complications. The core technologies we use to build web sites are fairly stable now, but new features are being added all the time, and new tools — that facilitate working with, and are built on top of these technologies — are constantly appearing. On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browser the Web, and be usable by people with disabilities.</p>
+
+<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Because new tools appear and old ones go out of fashion all the time, we have deliberately written this material to be as neutral as possible — we want to focus first and foremost on the general types of tasks these tools will help you accomplish, and keep prescribing specific tools to a minimum. We obviously need to show tool usage to demonstrate specific techniques, but be clear that we do not necessarily recommend these tools as the best or only way to do things — in most cases there are other ways, but we want to provide you with a clear methodology that works.</p>
+</div>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, or making effective use of JavaScript libraries, or writing tests and running them against your code using test runners, etc.</p>
+
+<p>You need a solid foundation first.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<dl>
+ <dt>Real world web development tools (TBD)</dt>
+ <dd>In this module, we explore the different kinds of web development tools available. This includes reviewing the most common kinds of tasks you may be called on to solve, how they can fit together in a workflow, and the best tools currently avaiable for carrying out those tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt>
+ <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd>
+</dl>