---
title: Tutoriales
slug: Web/Tutorials
tags:
  - Articulo Web
  - Código
  - Diseño Web
  - Guía
  - Principiante
  - Programa Web
  - Tutoriales
translation_of: Web/Tutorials
original_slug: Web/Tutoriales
---
<p>Los enlaces de esta página llevan a una gran variedad de tutoriales y material de formación. Tanto si estás en tus comienzos, aprendiendo lo básico, como si eres un veterano en desarrollo web, aquí puedes encontrar recursos que te ayuden a lograr mejores prácticas.</p>

<p>Estos recursos son creados por empresas innovadoras y desarrolladores web que han adoptado los estándares abiertos y las mejores prácticas para el desarrollo web proporcionando o permitiendo traducciones mediante licencias de contenido abierto como Creative Commons.</p>

<table class="topicpage-table">
 <tbody>
  <tr>
   <td>
    <h2 class="Documentation" id="Documentation" name="Documentation">Para principiantes completos de la web</h2>

    <dl>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Comenzando con la web</a></dt>
     <dd><em>Comenzando con la web</em> es una serie introductoria que te presenta los aspectos prácticos del desarrollo web. Podrás configurar las herramientas que necesites para construir una página web sencilla y publicar tu propio código.</dd>
    </dl>

    <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales de HTML</h2>

    <h3 id="Nivel_introductorio">Nivel introductorio</h3>

    <dl>
     <dt><a href="http://docs.webplatform.org/wiki/guides/the_basics_of_html" rel="external">Introducción a HTML</a> (WebPlatform.org)</dt>
     <dd>Este módulo establece el escenario, haciendo que te sea común el uso de conceptos importantes y sintaxis, buscando cómo aplicar el HTML al texto, cómo crear hiperenlaces y cómo utilizar el HTML para estructurar una página web.</dd>
     <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Estructura básica de una página web</a> (SitePoint)</dt>
     <dd>Aprende cómo los elementos HTML encajan juntos con un enfoque más amplio.</dd>
     <dt><a href="http://reference.sitepoint.com/html/elements" rel="external">Elementos fundamentales de HTML según MDN</a> (SitePoint)</dt>
     <dd>Es una referencia exhaustiva de los elementos HTML y cómo son soportados por los distintos navegadores.</dd>
     <dt><a href="http://htmldog.com/guides/htmlbeginner/" rel="external">Tutorial de HTML para principiantes</a> (HTML Dog)</dt>
     <dd>Tutorial y ejercicios sobre los fundamentos.</dd>
     <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Retos HTML</a> (Wikiversity)</dt>
     <dd>Acepta los retos para mejorar tus conocimientos sobre HTML (por ejemplo, "¿Debería usar un elemento &lt;h2&gt; o un elemento &lt;strong&gt;?") y marca las respuestas correctas. </dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">Manual de referencia MDN de elementos HTML</a></dt>
     <dd>Una amplia referencia de elementos HTML, así como la forma en que Firefox y otros navegadores los soportan.</dd>
    </dl>

    <h3 id="Nivel_intermedio">Nivel intermedio</h3>

    <dl>
     <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Incrustamiento y multimedia</a></dt>
     <dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluyendo las diferentes formas en las que pueden incluirse imágenes, y cómo incrustar video, audio o incluso otras páginas web completas.</dd>
     <dt><a href="/en-US/docs/Learn/HTML/Tables">Tablas HTML </a></dt>
     <dd>Representar datos tabulares en una forma comprensible puede ser un desafío, {{glossary("Accessibility", "accessible")}}. Este módulo cubre el marcado de una tabla básica, junto con características más complejas, como la implementación de epígrafes y resúmenes.</dd>
    </dl>

    <h3 id="Nivel_avanzado">Nivel avanzado</h3>

    <dl>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Consejos para crear páginas HTML que carguen rápidamente</a></dt>
     <dd>Optimiza las páginas web para que sean adaptables a los visitantes, reduciendo la carga de tu servidor web y de tu conexión a Internet.</dd>
     <dt><a href="http://diveintohtml5.info/" rel="external">Sumérgete en HTML5</a> (Mark Pilgrim)</dt>
     <dd>Aprende de una selección de características de HTML5, la versión más reciente de las especificaciones HTML.</dd>
     <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">Tutoriales de HTML5</a> (HTML5 Rocks)</dt>
     <dd>Haz una visita guiada por código que usa las características de HTML5.</dd>
     <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">Semántica en HTML5</a> (alistapart.com)</dt>
     <dd>Aprende marcas con significado, extensibles y compatibles con versiones tanto anteriores como posteriores.</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial" style="font-weight: bold;">Tutorial sobre Canvas</a></dt>
     <dd>Aprende cómo dibujar gráficos usando líneas de script y el elemento c<em>anvas</em>.</dd>
     <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
     <dd>Artículos sobre cómo usar HTML5 ahora mismo.</dd>
     <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">La alegría del audio en HTML5</a> (Elated)</dt>
     <dd>Aprende a utilizar el elemento audio en HTML para incluir sonidos en tus páginas web de forma sencilla. Hay montones de códigos de ejemplos incluidos en este tutorial.</dd>
    </dl>
   </td>
   <td>
    <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales CSS</h2>

    <dl>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <h3 id="Nivel_introductorio_2">Nivel introductorio</h3>

    <dl>
     <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">Lo básico en CSS</a></dt>
     <dd>Este tutorial te introduce en las hojas de estilo (<em>Cascading Style Sheets</em> o <em>CSS</em>). Además, te guiará a través de las características básicas de CCS con ejemplos prácticos que podrás probar por ti mismo en tu propio computador.</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a></dt>
     <dd>Este módulo profundiza en el funcionamiento de CSS, incluidos selectores y propiedades, redacción de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS; cascada y herencia; conceptos básicos de caja y depuración de CSS.</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes">Estilizando cajas</a></dt>
     <dd>A continuación analizamos las cajas de diseño, uno de los pasos fundamentales para diseñar una página web. En este módulo recapitulamos el modelo de caja y luego observamos los diseños de caja de control estableciendo relleno, bordes y márgenes, estableciendo colores de fondo personalizados, imágenes y otras características, y características extravagantes como sombras y filtros en cajas.</dd>
     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS">Hojas externas de CSS</a> (Wikiversity)</dt>
     <dd>Aquí aprenderás cómo usar CSS en el HTML desde una hoja de estilo externa (en inglés).</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Texto con estilo</a></dt>
     <dd>En esta sección repasaremos los fundamentos del estilo de texto, que incluyen la configuración de fuente, negrita e itálicas, el espaciado de líneas y letras, sombras paralelas y otras características de texto. Completaremos el módulo observando la aplicación de fuentes personalizadas en tú página y el diseño de listas y enlaces.</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/CSS_FAQ">Preguntas frecuentes sobre CSS</a></dt>
     <dd>Preguntas y respuestas frecuentes para principiantes.</dd>
    </dl>

    <h3 id="Nivel_Intermedio">Nivel Intermedio</h3>

    <dl>
     <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Referencia CSS </a></dt>
     <dd>Referencia completa para CCS con ayuda detallada por Firefox y otros navegadores.</dd>
     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Desafíos CSS </a> (Wikiversity)</dt>
     <dd>Reta tus habilidades en CCS, con lo que podrás descubrir aquello que necesita mejorar.</dd>
     <dt><a href="http://www.html.net/tutorials/css/" rel="external">Conceptos intermedios CSS</a> (HTML.net)</dt>
     <dd>Agrupación, pseudo-clases y mucho más.</dd>
     <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">Posicionamiento 101 CSS </a> (alistapart.com)</dt>
     <dd>Usando posicionamiento con estándares complacientes y tablas de libre disposición.</dd>
     <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">Mejora progresivamente con CSS</a> (alistapart.com)</dt>
     <dd>Intégrate mejorando progresivamente tus páginas web con CCS.</dd>
     <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Cuadrícula fluida</a> (alistapart.com)</dt>
     <dd>Diseño layouts que redimensiona fluidamente con la ventana del navegador, mientras sigue utilizando una cuadrícula tipográfica. </dd>
    </dl>
   </td>
   <td>
    <h3 id="Nivel_avanzado_2">Nivel avanzado</h3>

    <dl>
     <dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external">CSS3 en menos de 5 minutos</a> (Addy Osmani)</dt>
     <dd>Una rápida introducción a algunas de las características fundamentales introducidas en CSS3.</dd>
     <dt><a href="https://developer.mozilla.org/es/docs/CSS/Using_CSS_transforms">Usando las Transformaciones CSS</a></dt>
     <dd>Aplica rotación, inclinando escalando y traduce usando CCS.</dd>
     <dt><a href="/es/docs/CSS/Transiciones_de_CSS">Transiciones CSS</a></dt>
     <dd>CSS transiciones, parte del proyecto de la especificación CSS3, proporciona un modo para animar los cambios en las propiedades CSS, en lugar de que los cambios surtan efecto al instante.</dd>
     <dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external">Entendiendo las Transiciones CSS3</a> (alistapart.com)</dt>
     <dd>Comienza usando CSS3 por transiciones eligiendo cuidadosamente las situaciones  para utilizarlos.</dd>
     <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Guia rápida para implementar Web Fonts con @font-face</a> (HTML5 Rocks)</dt>
     <dd>La función @font-face de CSS3 te permite utilizar tipografías personalizadas en la web de una forma accesible, manipulable y adaptable.</dd>
     <dt><a href="/es/docs/CSS/Media_queries">Usando Media Queries</a></dt>
     <dd>Como realizar páginas web multiscreen con el uso de CSS y su propiedad @media.</dd>
     <dt><a href="/es/docs/Web/Guide/CSS/Cajas_flexibles">Modelo de cajas con Flexbox</a></dt>
     <dd>Permite distribuir el contenido de la web de forma sencilla y adaptable.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td></td>
   <td>
    <h2 class="Documentation" id="Documentation" name="Documentation">Tutoriales de JavaScript</h2>

    <h3 id="Nivel_introductorio_3">Nivel introductorio</h3>

    <dl>
     <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
     <dd>Codecademy es la forma más fácil de aprender a programar en JavaScript. Es interactivo, divertido y puedes compartir o hacer código con tus amigos.</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">Comenzar con JavaScript</a></dt>
     <dd>¿Qué es JavaScript y cómo puede ayudarte en el desarrollo web?</dd>
     <dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external">Programar – Los fundamentos</a> (WebPlatform.org)</dt>
     <dd>Fundamentos de programación. Los artículos te indican lo que puedes hacer con JavaScript, las mejores prácticas para utilizarlo y mucho más.</dd>
     <dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external">Las mejores prácticas en JavaScript</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
     <dd>Aprende algunas de las más evidentes (y no tan evidentes) mejores prácticas cuando escribes en JavaScript.</dd>
    </dl>

    <h3 id="Nivel_intermedio_2">Nivel intermedio</h3>

    <dl>
     <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Una reintroducción a JavaScript</a></dt>
     <dd>Resumen del lenguaje de programación JavaScript enfocado a desarrolladores de nivel intermedio.</dd>
     <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">JavaScript fluído</a></dt>
     <dd>Una guía completa para metodologías JavaScript intermedias y avanzadas.</dd>
     <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Fundamentos de patrones de diseño en JavaScript</a> (Addy Osmani)</dt>
     <dd>Una introducción a las bases del diseño de patrones en JavaScript.</dd>
     <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">El lenguaje de programación JavaScript</a> (YUI Blog)</dt>
     <dd>Douglas Crockford explora el lenguaje tal y como es hoy en día y cómo llegó a ser así.</dd>
     <dt><a href="https://developer.mozilla.org/es/docs/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos?redirectlocale=en-US&amp;redirectslug=JavaScript%2FIntroduction_to_Object-Oriented_JavaScript">Introducción a JavaScript Orientado a Objetos</a></dt>
     <dd>Aprende sobre el modelo de objetos en JavaScript.</dd>
    </dl>

    <h3 id="Nivel_avanzado_3">Nivel avanzado</h3>

    <dl>
     <dt><a href="http://ejohn.org/apps/learn/" rel="external">Aprender JavaScript avanzado</a> (John Resig)</dt>
     <dd>La guía de John Resig para JavaScript avanzado.</dd>
     <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">Introducción a DOM en JavaScript</a> (Elated)</dt>
     <dd>¿Qué es el Modelo de Objeto de Documento (<em>Document Object Model</em>) y para qué es útil? Este artículo te dará una buena introducción a esta característica de JavaScript.</dd>
     <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">Una API inconveniente: la teoría de DOM</a> (YUI Blog)</dt>
     <dd>Douglas Crockford explica el Modelo de Objeto de Documento (<em>Document Object Model</em>).</dd>
     <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">JavaScript avanzado</a> (YUI Blog)</dt>
     <dd>Douglas Crockford estudia con detenimiento los patrones de código con los que los programadores de JavaScript pueden elegir al escribir sus aplicaciones.</dd>
     <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
     <dd>Documentación sobre las partes más extravagantes de JavaScript.</dd>
     <dt><a href="http://www.maestrosdelweb.com/editorial/comparacion-frameworks-javascript/" rel="external">¿Qué framework de JavaScript?</a> (Maestrosdelweb)</dt>
     <dd>Consejos para escoger un framework de JavaScript.</dd>
     <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/">Carga de JavaScript sin bloqueos</a> (YUI Blog)</dt>
     <dd>Consejos para mejorar el rendimiento de bajada de páginas que contienen JavaScript.</dd>
     <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">Guía de JavaScript</a></dt>
     <dd>Una guía de JavaScript completa y actualizada frecuentemente para todos los niveles de aprendizaje, desde principiante hasta avanzado.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <h3 id="Desarrollo_de_extensiones">Desarrollo de extensiones</h3>
   </td>
   <td>
    <p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">Extensiones web</a></strong><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></p>

    <p>Extensiones Web es un sistema de navegación cruzada para desarrollar complementos del buscador. El sistema es en gran medida compatible con la <a href="https://developer.chrome.com/extensions">API (Interfaz de Programación de Aplicaciones) </a>respaldada por Google Chrome y Opera. En la mayoría de los casos, las extensiones escritas para estos buscadores pueden funcionar en Firefox o Microsoft Edge con <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">solo algunos cambios</a>. La API es compatible también con el <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocesador de Firefox</a>.</p>
   </td>
  </tr>
 </tbody>
</table>