initial commit

3 files changed, 229 insertions, 0 deletions

diff --git a/files/fi/learn/index.html b/files/fi/learn/index.html
new file mode 100644
index 0000000000..151d18edcc
--- /dev/null
+++ b/files/fi/learn/index.html
@@ -0,0 +1,122 @@
+---
+title: Learn web development
+slug: Learn
+tags:
+  - Beginner
+  - Index
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Welcome to the MDN learning area. This set of articles aims to provide complete beginners to web development with all that they need to start coding simple websites.</p>
+
+<p>The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable". From there you should be able to start making your own way, learning from <a href="https://developer.mozilla.org/en-US/">the rest of MDN</a> and other intermediate to advanced resources that assume a lot of previous knowledge.</p>
+
+<p>If you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. You should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: The content in the learning area is being added to regularly. If you have questions regarding topics you'd like to see covered or feel are missing, see the {{anch("Contact us")}} section below for information on how to get in touch.</p>
+</div>
+
+<h2 id="Where_to_start">Where to start</h2>
+
+<ul class="card-grid">
+ <li><span>Complete beginner:</span> If you are a complete beginner to web development, we'd recommend that you start by working through our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> module, which provides a practical introduction to web development.</li>
+ <li><span>Specific questions:</span> If you have a specific question about web development, our <a href="/en-US/docs/Learn/Common_questions">Common questions</a> section may have something to help you.</li>
+ <li><span>Beyond the basics:</span> If you have a bit of knowledge already, the next step is to learn {{glossary("HTML")}} and {{glossary("CSS")}} in detail: start with our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module and move on to our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module.</li>
+ <li><span>Moving onto scripting:</span> If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to {{glossary("JavaScript")}} or server-side development. Begin with our <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side first steps</a> modules.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Our <a href="/en-US/docs/Glossary">glossary</a> provides terminology definitions.</p>
+</div>
+
+<p>{{LearnBox({"title":"Random glossary entry"})}}</p>
+
+<h2 id="Topics_covered">Topics covered</h2>
+
+<p>The following is a list of all the topics we cover in the MDN learning area.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a></dt>
+ <dd>Provides a practical introduction to web development for complete beginners.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML">HTML — Structuring the web</a></dt>
+ <dd>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is. This topic teaches HTML in detail.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS">CSS — Styling the web</a></dt>
+ <dd>CSS is the language that we can use to style and lay out our web content, as well as adding behavior like animation. This topic provides comprehensive coverage of CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript">JavaScript — Dynamic client-side scripting</a></dt>
+ <dd>JavaScript is the scripting language used to add dynamic functionality to web pages. This topic teaches all the essentials needed to become comfortable with writing and understanding JavaScript.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility">Accessibility — make the web usable by everyone</a></dt>
+ <dd>Accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. This topic gives you all you need to know.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance">Web Performance — making websites fast and responsive</a></dt>
+ <dd>Web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a users bandwidth, screen size, network, or device capabilities.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing">Tools and testing</a></dt>
+ <dd>This topic covers the tools developers use to facilitate their work, such as cross browser testing tools.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side">Server-side website programming</a></dt>
+ <dd>Even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials showing how to build up a server-side app using two popular frameworks — Django (Python) and Express (node.js). </dd>
+</dl>
+
+<h2 id="Getting_our_code_examples">Getting our code examples</h2>
+
+<p>The code examples you'll encounter in the Learning Area are all <a href="https://github.com/mdn/learning-area/">available on GitHub</a>. If you want to copy them all to your computer, the easiest way is to <a href="https://github.com/mdn/learning-area/archive/master.zip">download a ZIP of the latest master code branch</a>.</p>
+
+<p>If you'd rather copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions:</p>
+
+<ol>
+ <li><a href="https://git-scm.com/downloads">Install Git</a> on your machine. This is the underlying version control system software that GitHub works on top of.</li>
+ <li><a href="https://github.com/join">Sign up for a GitHub account</a>.</li>
+ <li>Once you've signed up, log in to <a href="https://github.com">github.com</a> with your username and password.</li>
+ <li>Open your computer's <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">command prompt</a> (Windows) or terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>)</li>
+ <li>To copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command:
+  <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre>
+ </li>
+ <li>You can now enter the directory and find the files you are after (either using your finder/file explorer or the <a href="https://en.wikipedia.org/wiki/Cd_(command)">cd command</a>).</li>
+</ol>
+
+<p>You can update the <code>learning-area</code> repository with any changes made to the master version on GitHub with the following steps:</p>
+
+<ol>
+ <li>In your command prompt/terminal, go inside the <code>learning-area</code> directory using <code>cd</code>. For example, if you were in the parent directory:
+
+  <pre class="brush: bash">cd learning-area</pre>
+ </li>
+ <li>Update the repository using the following command:
+  <pre class="brush: bash">git pull</pre>
+ </li>
+</ol>
+
+<h2 id="Contact_us">Contact us</h2>
+
+<p>If you want to get in touch with us about anything, the best way is to drop us a message on our <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">learning area discourse thread</a> or <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC channels</a>. We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or any other questions or concerns.</p>
+
+<p>If you're interested in helping develop/improve the content, take a look at <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.</p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla developer newsletter</a></dt>
+ <dd>Our newsletter for web developers, which is a great resource for all levels of experience.</dd>
+ <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
+ <dd>A great series of videos explaining web fundamentals, aimed at complete beginners to web development. Created by <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
+ <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd>A great interactive site for learning programming languages from scratch.</dd>
+ <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
+ <dd>Basic coding theory with a gamified learning process. Mainly focused on beginners.</dd>
+ <dt><a href="https://code.org/">Code.org</a></dt>
+ <dd>Basic coding theory and practice, mainly aimed at children/complete beginners.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
+ <dd>Free and open courses for learning tech skills, with mentorship and project-based learning</dd>
+ <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
+ <dd>Interactive site with tutorials and projects to learn web development.</dd>
+ <dt><a href="https://learning.mozilla.org/web-literacy/">Web literacy map</a></dt>
+ <dd>A framework for entry-level web literacy &amp; 21st Century skills, which also provides access to teaching activities sorted by category.</dd>
+ <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
+ <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd>
+ <dt><a href="https://edabit.com/">Edabit</a></dt>
+ <dd>Hundreds of free interactive coding challenges in various languages.</dd>
+</dl>
diff --git a/files/fi/learn/javascript/ensimmaiset_askeleet/index.html b/files/fi/learn/javascript/ensimmaiset_askeleet/index.html
new file mode 100644
index 0000000000..44a95ed91f
--- /dev/null
+++ b/files/fi/learn/javascript/ensimmaiset_askeleet/index.html
@@ -0,0 +1,54 @@
+---
+title: JavaScript ensimmäiset askeleet
+slug: Learn/JavaScript/Ensimmaiset_askeleet
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Meidän ensimmäisessä JavaScript moduulissa vastaamme muutamiin perus-kysymyksiin, kuten "mitä JavaScript on?", "miltä se näyttää?", ja "mitä se voi tehdä?", ennen kuin saat ensimmäisen käytännön kokemuksen JavaScriptin kirjoittamisesta. Tämän jälkeen me pohdimme joitakin keskeisiä rakennuspalkioita yksityiskohtaisesti, kuten muuttujat, merkkijonot, numerot ja taulukot.</p>
+
+<h2 id="Edellytykset">Edellytykset</h2>
+
+<p>Ennen tämän moduulin aloittamista sinulla ei tarvitse olla yhtään aikasempaa kokemusta JavaScriptistä, mutta sinun tulisi olla perehetynyt jonkin verran HTML:ään ja CSS:ään. Suosittelemme, että käyt läpi seuraavat moduulite ennen kuin aloitat JavaScriptin:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Alkuun Webin kanssa</a> (Joka sisältää todella <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">alkeis-JavaScript-esittelyn</a>).</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Esittelyssä HTML</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Esittelyssä CSS</a>.</li>
+</ul>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Huomio</strong>: Jos työskentelet tietokoneella/tabletilla/muulla laitteella, missä et voi luoda omia tiedostoja, sinä voit kokeilla (useimpia) koodi esimerkkejä online-koodausohjelmilla kuten  <a href="http://jsbin.com/">JSBin</a> tai <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Oppaat">Oppaat</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Mitä JavaScript on?</a></dt>
+ <dd>Tervetuloa MDN:n aloittelijoiden JavaScript kurssille! Ensimmäisessä artikkelissa katsomme JavaScriptiä korkealta tasolta, vastaten kysymyksiin kuten "mikä se on?" ja "mitä se tekee?", ja varmistamme että olet tyytyväinen JavaScriptin tarkoitukseen.such problems by providing</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Ensimmäinen sukellus JavaScriptiin</a></dt>
+ <dd>Nyt olet oppinut jotain JavaScriptin teoriasta, ja mitä voit tehdä sillä. Aiomme antaa sinulle tehokurssin JavaScriptin perusominaisuuksista täysin käytännönläheisen oppaan kautta. Täällä sinä tulet rakentamaan yksinkeraisen "Arvaa numero" pelin, askel askeleelta.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Mitä meni väärin? JavaScriptin vianmääritys</a></dt>
+ <dd>Kun rakensit "Arvaa numero" pelin edellisessä artikkelissa, saatoit huomata ettei se toiminut. Ole huoleti — tämän artikkelin tavoitteena on säästää sinut hiusten repimiseltä tällaisissa ongelmissa tarjoamalla muutamia neuvoja kuinka löytää ja korjata virhee JavaScript ohjelmassa.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Tallennetaan tarvitsemasi tiedot — muuttujat</a></dt>
+ <dd>Kun olet lukenut pari edellistä artikkelia, sinun pitäisi tietää mitä JavaScript on, mitä se voi tehdä sinulle, kuinka käyttää sitä muiden web-tekniikoiden rinnalla, ja mitkä on se n pää ominaisuudet katsottuna korkealta tasolta. Tässä artikkelissa menemme alas todellisiin perusteisiin, katsotaan kuinka työskennellään kaikkein yksinkertaisimpien JavaScriptin rakennuspalikoiden kanssa — Muuttujat.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Perus matematikkaa JavaScriptillä — numerot ja operaattorit</a></dt>
+ <dd>Tässä vaiheessa kurssia pohdimme matematikkaa JavaScriptissä — kuinka voimme yhdistää operaattoreita ja muita ominaisuuksia onnistuaksemme manipuloimaan numeroita komonnoissamme.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Tekstin käsittely — merkkijonot JavaScriptssä</a></dt>
+ <dd>Seuraavaksi käännämme huomiomme merkkijonoihin — tällä nimellä tekstin pätkiä kutsutaan ohjelmoinnissa. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Hyödyllisiä merkkijono metodeja</a></dt>
+ <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Taulukot</a></dt>
+ <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd>
+</dl>
+
+<h2 id="Arviointi">Arviointi</h2>
+
+<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Typerä tarina generaattori</a></dt>
+ <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd>
+</dl>
diff --git a/files/fi/learn/javascript/index.html b/files/fi/learn/javascript/index.html
new file mode 100644
index 0000000000..bb376953cd
--- /dev/null
+++ b/files/fi/learn/javascript/index.html
@@ -0,0 +1,53 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} on ohjelmointikieli, joka mahdollistaa monimutkaisten asioiden toteuttamisen web-sivuille — web-sivut tekevät aina enemmän, kuin vain ovat siellä ja näyttävät muutumatonta sisältöä katsottavaksesi — näyttävät ajankohtaisia sisältöpäivityksiä, vuorovaikutteisia karttoja, animoituja 2D/3D grafiikoita tai vierittävät video jukebokseja, jne, — voit lyödä vetoa, että JavaScript on todennäköisesti osallisena tähän.</p>
+
+<h2 id="Oppimispolku">Oppimispolku</h2>
+
+<p>JavaScript on luultavasti vaikeampi oppia, kuin siihen liittyvät tekniikat, kuten <a href="/en-US/docs/Learn/HTML">HTML</a> ja <a href="/en-US/docs/Learn/CSS">CSS</a>. Ennen kuin yrität opetella JavaScriptiä, sinun kannattaa ehdottomasti ensin tutustua ainakin näihin kahteen teknikkaan, ja ehkä muihinkin. Aloita seuraavista moduuleista:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Alkuun Webin kanssa</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Esittelyssä HTML</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Esittelyssä CSS</a></li>
+</ul>
+
+<p>Aiempi kokemus muista ohjelmointikielistä voi myös auttaa.</p>
+
+<p>JavaScriptin perusteiden tultua tutuiksi, sinun pitäisi olla kykeneväinen oppimaan lisää edistyneemmistä aiheista, esimerkiksi:</p>
+
+<ul>
+ <li>JavaScript perusteellisesti, joka opetetaan meidän <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript oppaassa</a></li>
+ <li><a href="/en-US/docs/Web/API">HTML5 API</a></li>
+</ul>
+
+<h2 id="Moduulit">Moduulit</h2>
+
+<p>Tämä aihe sisältää seuraavat moduulit, ehdotetussa opiskelujärjestyksessä.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript ensimmäiset askeleet</a></dt>
+ <dd>Ensimmäisessä JavaScript-moduulissamme, vastaamme ensiksi joihinkin peruskysymyksiin, kuten “Mikä on JavaScript”, “Miltä se näyttää?” ja “Mitä se voi tehdä?”, ennen kuin annamme sinulle ensimmäisen käytännön kokemuksen JavaScriptin kirjoittamisesta. Tämän jälkeen me käsittelemme joitakin keskeisiä JavaScriptin ominaisuuksia yksityiskohtaisesti, kuten muuttujat, merkkijonot, luvut ja taulukot.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScriptin rakenneosat</a></dt>
+ <dd>
+ <p dir="ltr" id="docs-internal-guid-e603018a-8f4c-9c95-0322-bddbf2b777b4" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;">Tässä moduulissa jatkamme kattavaa JavaScriptin keskeisten perusominaisuuksien läpikäyntiä, kääntäen huomiomme yleisimmin käytettyihin koodilohkojen tyyppeihin, kuten ehtolauseet, silmukat, funktiot ja tapahtumat. Olet nähnyt nämä jutut jo tällä kurssilla, mutta vain ohimennen - tässä käsitellään erityisesti niitä.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Esittelyssä JavaScript objektit</a></dt>
+ <dd>JavaScriptissä useimmat keskeiset ominaisuudet ovat objekteja, merkkijonoista ja taulukoista JavaScriptin päälle rakennettuihin selain API:hin. Voit jopa tehdä omia olioita yhdistämään toisiinsa liittyvät funktiot ja muuttujat tehokkaaksi paketiksi. Sinun on tärkeää ymmärtää JavaScriptin oliopohjainen luonne, jos haluat viedä eteenpäin tietämystäsi kielestä ja kirjoittaa tehokasta koodia, siksi olemme tehneet tämän moduulin, auttamaan sinua. Täällä opetamme olioiden teoriaa ja syntaksia yksityiskohtaisesti, katsomme kuinka luoda oma olio ja selitämme mitä JSON-tieto on ja kuinka työskennellä sen kanssa.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Asiakas-puolen web API:t</a></dt>
+ <dd>Kun kirjoitetaan asiakas-puolen JavaScriptiä web-sivuille tai sovelluksiin, et mene kovin pitkälle, ennen kuin aloitat käyttämään API:ja - rajapintoja selaimen ja käyttöjärjestelmään eri osioiden käsittelemiseen sivuston ollessa käynnissä, tai jopa toiselta web-sivulta tai palvelusta tulevan tiedon käsittelemiseen. Tässä moduulissa tutkimme mitä API:t ovat ja kuinka käyttää joitakin yleisimpiä API:ja, joihin tulet törmäämään usein kehitystyössä.</dd>
+</dl>
+
+<h2 id="Katso_myös">Katso myös</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript">MDN JavaScript</a></dt>
+ <dd>Tärkein tuloportti MDN:n JavaScript-dokumentaation ytimeen - täältä löydät laajat referenssiasiakirjat kaikkiin JavaScript-kielen osiin, ja joitakin edistyneitä tutoriaaleja, jotka on suunnattu kokeneille JavaScriptareille.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Koodauksen matematiikka</a></dt>
+ <dd>Erinomainen videotutoriaalien sarja oppia matematiikkaa, jota sinun tulee ymmärtää, ollaksesi tehokas ohjelmoija, tehnyt <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>