path: root/files/ca/web/tutorials/index.html

---
title: Tutorials
slug: Web/Tutorials
tags:
  - Beginner
  - CSS
  - Code
  - Guide
  - HTML
  - JavaScript
  - MDN
  - Tutorial
  - Web Fundamental
  - Web_Design
translation_of: Web/Tutorials
---
<p>Els enllaços d'aquesta pàgina condueixen a una varietat de tutorials i material de formació. Ja sigui que estigueu començant l'aprenentatge dels conceptes bàsics, o si sou un gat vell en el desenvolupament web, podeu trobar recursos útils aquí per obtenir les millors pràctiques. Aquests recursos són creats per empreses amb visió de futur i desenvolupadors web que han abraçat els estàndards oberts i les millors pràctiques per al desenvolupament web i que proporciona o permet traduccions, a través d'una llicència de contingut obert, com Creative Commons.</p>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutorials HTML</h2>

<h3 id="Nivell_Introductori">Nivell Introductori</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introducció a HTML</a></strong></dt>
 <dd>El que és HTML, el que fa, la seva història en breu, i el que l'estructura d'un document HTML es sembla. Els articles que segueixen a aquest és una mirada a cada part individual d'HTML amb molta més profunditat.</dd>
 <dt><strong><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Estructura bàsica d'una pàgina Web</a> (SitePoint)</strong></dt>
 <dd>Aprèn com els elements HTML encaixen en un quadre més gran.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">MDN Referència dels Elements HTML</a></strong></dt>
 <dd>Una referència completa dels elements HTML, i com els diferents navegadors els donen suport.</dd>
 <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Reptes</a> (Wikiversity)</strong></dt>
 <dd>Utilitzeu aquests reptes per perfeccionar els vostres coneixements d'HTML (per exemple, "Haig de fer servir un element &lt;h2&gt; o un element &lt;strong&gt; ?"), centrant-se en el significatiu marge de guany.</dd>
</dl>
</div>
</div>

<h3 id="Nivell_Avançat">Nivell Avançat</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Suggeriments per crear pàgines HTML de càrrega ràpida</a></strong></dt>
 <dd>Optimitzar les pàgines web per proporcionar un lloc més sensible per als visitants i reduir la càrrega en el servidor web i connexió a Internet.</dd>
 <dt><strong><a href="http://www.html5rocks.com/tutorials/" rel="external">Tutorial HTML5</a> (HTML5 Rocks)</strong></dt>
 <dd>Realitzar una visita guiada a través de codi que utilitza característiques d'HTML5.</dd>
 <dt><strong><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semàntica en HTML5</a> (A List Apart)</strong></dt>
 <dd>Aprendre el sentit del marcat que és extensible i compatible amb versions posteriors.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Tutorial Canvas</a></strong></dt>
 <dd>Aprendre a dibuixar gràfics usant scripts i elements canvas.</dd>
 <dt><strong><a href="http://html5doctor.com/" rel="external">Doctor HTML5</a></strong></dt>
 <dd>Articles sobre l'ús d'HTML5 en aquest moment.</dd>
 <dt><strong><a href="http://www.elated.com/articles/html5-audio/" rel="external">L'alegria d'HTML5 Audio</a> (Exultant)</strong></dt>
 <dd>Aprèn a fer servir l'element HTML audio per inserir sons en les vostre pàgines web fàcilment. Un munt d'exemples de codi s'inclouen en el tutorial.</dd>
</dl>
</div>
</div>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutorial Javascript</h2>

<h3 id="Nivell_Introductori_2">Nivell Introductori</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript Primers Passos</a></strong></dt>
 <dd><span id="result_box" lang="ca"><span>JavaScript</span> <span>tutorial</span> <span>per a principiants</span> <span>que s'escriu</span> <span>com a part</span> <span>de l'<a href="https://developer.mozilla.org/en-US/docs/Learn">Àrea d'Aprenentatge</a></span><a href="https://developer.mozilla.org/en-US/docs/Learn"> </a><span>de</span> <span>MDN</span><span>.</span></span></dd>
 <dt><strong><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</strong></dt>
 <dd>Codecademy és una manera fàcil d'aprendre el codi JavaScript. És interactiu i ho pots fer amb els teus amics.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Introducció a JavaScript</a></strong></dt>
 <dd>Què és JavaScript i com pot ajudar?</dd>
 <dt><strong><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScript Millors Pràctiques</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</strong></dt>
 <dd>Aprendre sobre algunes de les millors pràctiques òbvies i (no tan) òbvies en escriure JavaScript.</dd>
</dl>
</div>
</div>

<h3 id="Nivell_Intermedi">Nivell Intermedi</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Una Re-Introducció a JavaScript</a></strong></dt>
 <dd><span id="result_box" lang="ca"><span>Una</span> <span>recapitulació</span> <span>del llenguatge de</span> <span>programació JavaScript</span> <span>dirigit als</span> <span>desenvolupadors</span> <span>de nivell</span> <span>intermedi</span></span></dd>
 <dt><strong><a href="http://eloquentjavascript.net/" rel="external">Eloqüent JavaScript</a></strong></dt>
 <dd><span id="result_box" lang="ca"><span>Una</span> <span>guia completa de</span> <span>les</span> <span>metodologies</span> <span>de nivell</span> <span>intermedi</span> <span>i</span> <span>avançat</span> <span>de JavaScript.</span></span></dd>
 <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Parlant JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd><span id="result_box" lang="ca"><span>Per als</span> <span>programadors que</span> <span>volen</span> <span>aprendre</span> <span>JavaScript</span> <span>ràpida</span> <span>i adequadament,</span> <span>i per als</span> <span>programadors</span> <span>de JavaScript que</span> <span>desitgen</span> <span>aprofundir els seus</span> <span>coneixements</span> <span>i</span><span>/</span><span>o</span> <span>buscar temes</span> <span>específics.</span></span></dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Patrons de disseny esencial JavaScript</a> (Addy Osmani)</strong></dt>
 <dd><span id="result_box" lang="ca"><span>Una</span> <span>introducció als</span> <span>patrons</span> <span>de disseny</span> <span>essencials</span> <span>de JavaScript.</span></span></dd>
 <dt><strong><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">El llenguatge de programació JavaScript</a> (YUI Blog)</strong></dt>
 <dd><span id="result_box" lang="ca"><span>Douglas</span> <span>Crockford</span> <span>explora</span> <span>el llenguatge</span> <span>com </span><span>és avui,</span> <span>i</span> <span>com va arribar</span> <span>a ser.</span></span></dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Introducció a Javascript Orientat a Objectes</a></strong></dt>
 <dd><span id="result_box" lang="ca"><span>Aprendre sobre</span> <span>el model</span> <span>d'objectes</span> <span>de JavaScript.</span></span></dd>
</dl>
</div>
</div>

<h3 id="Nivell_avançat">Nivell avançat</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">Guia JavaScript</a></strong></dt>
 <dd><span id="result_box" lang="ca"><span>Una guia</span> <span>completa, actualitzada</span> <span>regularment</span> <span>per a JavaScript</span> <span>per a tots</span> <span>els</span> <span>nivells</span> <span>d'aprenentatge,</span> <span>des de principiants</span> <span>fins a</span> <span>avançats.</span></span></dd>
 <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">No saps JS</a> (Kyle Simpson)</strong></dt>
 <dd>Una sèrie de llibres que ens permeten aprofundir en els mecanismes bàsics del llenguatge JavaScript.</dd>
 <dt><strong><a href="http://ejohn.org/apps/learn/" rel="external">Aprenentatge avançat JavaScript</a> (John Resig)</strong></dt>
 <dd>Guia avançada de JavaScript de John Resig's .</dd>
 <dt><strong><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducció al DOM JavaScript</a> (Exultant)</strong></dt>
 <dd>Què és el Document Object Model, i per què és útil? Aquest article us donarà una suau introducció a aquesta potent funció de JavaScript.</dd>
 <dt><strong><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">Un API Inconvenient: La Teoria del DOM</a> (YUI Blog)</strong></dt>
 <dd>Douglas Crockford explica el Document Object Model.</dd>
 <dt><strong><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">JavaScript avançat</a> (YUI Blog)</strong></dt>
 <dd>Douglas Crockford mira de prop els patrons de codis de les que els programadors de JavaScript poden triar en l'autoria de les seves aplicacions.</dd>
 <dt><strong><a href="http://javascript.crockford.com/" rel="external">JavaScript Tresor</a> (Douglas Crockford)</strong></dt>
 <dd>Accedir a una valuosa col·lecció de tot el contingut de JavaScript per Douglas Crockford.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Jardí</a></strong></dt>
 <dd>Documentació de les parts més peculiars de JavaScript.</dd>
 <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Explorar ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
 <dd>Informació fiable i detallada sobre ECMAScript 6.</dd>
 <dt><strong><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Descàrregues de JavaScript sense bloqueig</a> (YUI Blog)</strong></dt>
 <dd>Suggeriments sobre com millorar el rendiment de descàrrega de pàgines que contenen JavaScript.</dd>
 <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Patrons Javascipt</a></strong></dt>
 <dd>Un patró Javascript i una col.lecció antipatrons que cobreix els patrons de funció, patrons  jQuery, patrons de jQuery plugin, patrons de disseny, patrons generals, literals i els patrons de construcció, els patrons de creació d'objectes, patrons de reutilització de codi, DOM.</dd>
 <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Com funcionen els navegadors</a></strong></dt>
 <dd><span id="result_box" lang="ca"><span>Un article</span> <span>d'investigació</span> <span>detallada</span> <span>que descriu els</span> <span>diferents</span> <span>navegadors</span> <span>moderns</span><span>, els seus</span> <span>motors,</span> <span>la</span> <span>renderització</span> <span>de pàgines,</span> <span>etc.</span></span></dd>
 <dt><a href="https://github.com/bolshchikov/js-must-watch">Videos JavaScript</a> (GitHub)</dt>
 <dd><span id="result_box" lang="ca"><span>Una</span> <span>col·lecció de vídeos</span> <span>JavaScript</span> <span>per veure</span></span>.</dd>
</dl>
</div>
</div>

<h3 id="Desenvolupament_d'extensions"><span class="short_text" id="result_box" lang="ca"><span>Desenvolupament</span> <span>d'extensions</span></span></h3>

<div class="row topicpage-table" style="width: 100%;">
<div class="section">
<dl>
 <dt><strong><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Escriu la teva primera WebExtension</a></strong></dt>
 <dd>Un passeig a través de la creació d'un WebExtension per Firefox, de principi a fi.</dd>
 <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Afegir un botó a la barra d'eines</a></dt>
 <dd>Afegir botons a la barra d'eines del navegador usant WebExtension.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modificació d'una pàgina web</a></dt>
 <dd>Un passeig a través de la modificació d'una pàgina web utilitzant WebExtensions.</dd>
 <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercepció de Peticions HTTP</a></dt>
 <dd>Usar WebExtensions per interceptar i modificar peticions.</dd>
</dl>
</div>
</div>

<h2 class="Documentation" id="Documentation" name="Documentation">Tutorials CSS</h2>

<h3 id="Nivesll_introductori">Nivesll introductori</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">Inici en CSS</a></strong></dt>
 <dd>Aquest tutorial us presenta les fulles d'estil en cascada (CSS). Us guiarà a través de les funcions bàsiques de CSS amb exemples pràctics que podeu provar en el vostre ordinador.</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">Selector Classes CSS</a> (Wikiversity)</strong></dt>
 <dd>Què són les classes en CSS?</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">CSS Extern</a> (Wikiversity)</strong></dt>
 <dd>Ús de CSS des d'una fulla d'estil externa.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">Afegir un toc d'estil</a> (W3C)</strong></dt>
 <dd>Una guia breu per a principiants de com dissenyar pàgines web amb CSS.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Preguntes comuns de CSS</a></strong></dt>
 <dd>Preguntes i respostes comuns per als principiants.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors" title="http://codeavengers.com/">Selectors CSS</a></strong></dt>
 <dd>Una introducció als selectors CSS</dd>
</dl>
</div>
</div>

<h3 id="Nivell_Intermedi_2">Nivell Intermedi</h3>

<div class="row topicpage-table" style="width: 100%;">
<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Referéncia CSS</a></strong></dt>
 <dd>Referència completa de CSS, amb detalls sobre el suport de Firefox i altres navegadors.</dd>
 <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Reptes CSS</a> (Wikiversity)</strong></dt>
 <dd>Sigueu flexibles en les vostres habilitats CSS, i mireu on necessiteu més pràctica.</dd>
 <dt><strong><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">Posicionament 101 CSS</a> (Una llista apart)</strong></dt>
 <dd>Ús del posicionament per a un disseny compatible amb estàndards, lliure de taules.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Millora progersiva amb CSS</a> (Una llista apart)</strong></dt>
 <dd>Integreu la millora progressiva en les vostres pàgines web amb CSS.</dd>
 <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Reixetes fluides</a> (Una llista apart)</strong></dt>
 <dd>Esquemes de disseny que redimensionan de manera fluïda amb la finestra del navegador, sense deixar d'utilitzar una quadrícula tipogràfica.</dd>
</dl>
</div>
</div>

<h3 id="Nivell_advançat">Nivell advançat</h3>

<div class="row topicpage-table">
<div class="section">
<dl>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Ùs de les transformacions CSS</a></strong></dt>
 <dd>Aplicar la rotació, esbiaixar, escalar i desplaçar usant CSS.</dd>
 <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">Transicions CSS</a></strong></dt>
 <dd>Les transicions CSS, forman part del projecte d'especificació CSS3, proporcionen una manera d'animar als canvis en les propietats CSS, en lloc de que els canvis tinguin un efecte immediat.</dd>
</dl>
</div>

<div class="section">
<dl>
 <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guia ràpida per implementar Fonts Web amb @font-face</a> (HTML5 Rocks)</strong></dt>
 <dd><span id="result_box" lang="ca"><span>La característica</span> <span>@ font</span><span>-</span><span>face</span> <span>de CSS3</span> <span>permet l'ús</span> <span>de tipus de</span> <span>lletra</span> <span>personalitzats</span> <span>al web</span> <span>d'una manera</span> <span>accessible,</span> <span>manipulable i</span> <span>escalable.</span></span></dd>
 <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Començar a escriure CSS</a> (David Walsh)</strong></dt>
 <dd><span id="result_box" lang="ca"><span>Una</span> <span>introducció a</span> <span>les</span> <span>eines</span> <span>i</span> <span>metodologies</span> <span>per escriure</span> <span>CSS</span> <span>més</span> <span>succinta,</span> <span>mantenible</span> <span>i escalable.</span></span></dd>
</dl>
</div>
</div>