1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: Lär dig webbutveckling
slug: Learn
tags:
- Beginner
- Index
- Introduktion
- Landing
- Learn
- NeedsTranslation
- Nybörjare
- TopicStub
- Web
translation_of: Learn
---
<div>{{LearnSidebar}}</div>
<div>
<p class="summary">Välkommen till MDNs Inlärningsportal. De artiklar som återfinns här syftar till att hjälpa nybörjare inom webbutveckling med allt de behöver för att sätta igång och bygga enkla webbsidor.</p>
</div>
<p>Syftet med denna del av MDN är inte att ta dig från "nybörjare" till "expert" utan att ta dig från "nybörjare" till "bekväm". När du känner dig bekväm kan du själv ta dig vidare genom att fortsätta lära från <a href="https://developer.mozilla.org/en-US/">resten av MDN</a>, och andra resurser med en högre svårighetsnivå som kräver en del bakgrundskunskap.</p>
<p>Webbutveckling kan vara utmanande när du är en nybörjare, - vi kommer att hålla din hand och ge dig tillräckligt med information så att du kan börja känna dig bekväm och så att du kan lära dig ämnena ordentligt. Du borde känna dig som hemma, oavsett om du är en student som vill lära sig webbutveckling (självmant eller som del av din kurs), en lärare som letar efter kursunderlag, om du gör det som en hobby eller om du bara vill förstå mer om hur webbteknologier fungerar.</p>
<div class="warning">
<p><strong>Viktigt</strong>: Innehållet i Inlärningsportalen uppdateras ständigt. Om du har frågor kring ämnen som du vill se här eller som du känner saknas, se {{anch("Kontakt")}} sektionen nedan för information om hur du kan nå oss.</p>
</div>
<h2 id="Var_börjar_man">Var börjar man</h2>
<ul class="card-grid">
<li><span>Nybörjare:</span>Om du är helt ny inom webbutveckling rekommenderar vi att du börjar med att läsa genom vår modul <a href="/en-US/docs/Learn/Getting_started_with_the_web">Kom igång med Webben</a>. Den ger en praktisk introduktion inom webbutveckling.</li>
<li><span>Specifika frågor:</span>Om du har specifika frågor kring webbutveckling kan du kolla igenom våra <a href="/en-US/docs/Learn/Common_questions"> Återkommande frågor</a>.</li>
<li><span>Utöver grunderna:</span>Om du har lite kunskap redan, är nästa steg att lära dig {{glossary("HTML")}} och {{glossary("CSS")}} i mer detalj: börja med vår kurs <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduktion till HTML</a> eller fortsätt med kursen <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduktion till CSS</a>.</li>
<li><span>Fortsätt med skript:</span> Om du är bekväm med HTML och CSS redan, eller om du främst är intresserad av att koda, bör du börja med {{glossary("JavaScript")}} eller server-side-utveckling. Börja med kurserna <a href="/en-US/docs/Learn/JavaScript/First_steps">Javascript första steg</a> och <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side första steg</a>.</li>
</ul>
<div class="note">
<p><strong>Notera</strong>: I <a href="/en-US/docs/Glossary">Ordboken</a> finner du definitioner på terminologi.</p>
</div>
<div class="note">
<p><strong>Note</strong>: We'll publish more core learning material in the future. Our "Advanced learning material" menu on the left points to other learning material on MDN, which isn't necessarily part of the Learning Area, but is still useful.</p>
</div>
<p>{{LearnBox({"title":"Random glossary entry"})}}</p>
<h2 id="Behandlade_ämnen">Behandlade ämnen</h2>
<p>Följande lista innehåller alla de ämnen som du kan finna i inlärningsportalen</p>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Börja med webbutveckling</a></dt>
<dd>Innehåller en praktisk introduktion till webbutveckling för nybörjare.</dd>
<dt><a href="/sv-SE/docs/Web/HTML">HTML - Strukturera webben</a></dt>
<dd>HTML är språket vi använder för att strukturera olika delar av vårt innehåll och definierar vilken dess mening eller syfte är. Detta ämne lär ut HTML i detalj.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — Designa webben</a></dt>
<dd>CSS är språket vi använder för att designa och placera ut vårt innehåll på webben, så väl som lägga till animationer. Detta ämne ger en övergripande beskrivning av CSS.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — Dynamiskt skriptande client-side</a></dt>
<dd>JavaScript är skriptspråket som används för att lägga till dynamisk funktionalitet till webbsidor. Detta ämne lär ut grunderna som är nödvändiga för att bli bekväm med att skriva och förstå JavaScript.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Tillgänglighet — gör webben användbar av alla</a></dt>
<dd>Tillgänglighet handlar om att göra innehåll på webben tillgänglighet till så många människor som möjligt oavsett funktionnedsättning, vilken dator eller mobil du använder, var du bor eller andra faktorer. Detta ämne ger dig allt du behöver veta.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Webbprestanda — gör webbsidor snabba och responsiva</a></dt>
<dd>Webbprestanda är konsten att se till att webbapplikationer laddas ned snabbt och är responsiva för användarinteraktioner, oavsett användarens bandbredd, storlek på skärm, nätverk eller hårdvara.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Verktyg och testande</a></dt>
<dd>Här skrivs det om verktyg som utvecklare använder för att underlätta sitt arbete, såsom verktyg som testar över flera webbläsare.</dd>
<dt><a href="https://developer.mozilla.org/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 about how servers and server-side code features work. This topic provides a general introduction to how the server-side works, and detailed tutorials detailing 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:</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><code>git clone https://github.com/mdn/learning-area</code></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><code>cd learning-area</code></pre>
</li>
<li>Update the repository using the following command:
<pre><code>git pull</code></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="/en-US/docs/MDN/Community/Conversations#Asynchronous_discussions">mailing lists</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 anything else.</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.codecademy.com/">Codecademy</a></dt>
<dd>A great interactive site for learning programming languages from scratch.</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://www.freecodecamp.com/">FreeCodeCamp.com</a></dt>
<dd>Interactive site with tutorials and projects to learn Web Development.</dd>
</dl>
<dl>
<dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
<dd>A framework for entry-level web literacy & 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>
</dl>
|
