---
title: Understanding client-side web development tools
slug: Learn/Tools_and_testing/Understanding_client-side_tools
tags:
  - Aprender
  - CSS
  - Despliegue
  - HTML
  - Herramientas
  - JavaScript
  - Novatos
  - Transformación
  - client-side
  - lado del cliente
translation_of: Learn/Tools_and_testing/Understanding_client-side_tools
original_slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools
---
<div>{{LearnSidebar}}</div>

<p class="summary">Las herramientas del lado del cliente (<em>client-side</em> en inglés) pueden ser intimidantes, pero esta serie de artículos tiene como propósito ilustrar el propósito de algunos de los tipos de herramientas <em>client-side</em>, explicar las herramientas que puedes integrar, cómo instalarlas usando administradores de paquetes y cómo controlarlas usando la línea de comandos. Terminanos esta sección dando un ejemplo de cadena de herramientas para mostrarte cómo puedes ser más productivo</p>

<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Inicia ahora con nuestra "Introducción a las herraminetas <em>client-side</em>"</a></strong></p>

<h2 id="Requisitos_previos">Requisitos previos</h2>

<p>Debes aprender el núcleo básico de los lenguajes <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> y <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, antes de intentar usar las herramientas aquí descritas.</p>

<div class="callout">
<h3 id="¿Quieres_convertirte_en_un_desarrollador_front-end">¿Quieres convertirte en un desarrollador <em>front-end</em>?</h3>

<p>Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.</p>
<a class="cta primary" href="/docs/Learn/Front-end_web_developer">Inicia ahora</a></div>

<h2 id="Guías">Guías</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">1. Introducción a las herramientas <em>client-side</em></a></dt>
 <dd>En este artículo damos una introducción a las herramientas modernas de la web, los tipos de herramientas disponibles, donde te las puedes encontrar en el cliclo de desarrollo de aplicaciones web y como buscar ayuda con las herramientas individuales.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">2. Introducción a la linea de comandos</a></dt>
 <dd>En tu proceso de desarrollo seguramente vas a requeria correr algunos comandos en la terminal (o "línea de comandos"). Este artículo da una introducción a la terminal, los comandos básicos que vas a necesitar para utilizarla, cómo integrar diferentes comandos y cómo agregar tu propia interfaz de línea de comandos (<em>command line interface</em> - CLI en inglés).</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">3. Introducción al manejo de paquetes</a></dt>
 <dd>En este artículo exploramos los sistemas de administración de paquetes en detalle para entender cómo los podemos usar en nuestros proyectos, ya sea para instalar dependencias a nuestro proyecto, descargar actualizaciones y mucho más.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">4. Introduciendo una cadena de herramientas completa</a></dt>
 <dd>En los últimos dos artículos en esta serie vamos a solidificar tu conocimiento de las herramientas para el desarrollo web construyendo una cadena de herramients. Iniciaremos configurando un ambiente de desarrollo y colocando herramentas de transformación para desplegar nuestra aplicación en Netlify. En este artículo introducimos un estudio de caso, configuramos nuestro ambiente de desarrollo y configuramos herramientas de transformación de código.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">5. Desplegando nuestra aplicación</a></dt>
 <dd>En el artículo final de esta serie, utilizamos nuestra cadena de herramientas que construimos en el artículo previo y la extendemos para desplegar nuestra aplicación muestra. Subimos nuestro código a GitHub, desplegamos usando Netlify e incluso te enseñamos a realizar una prueba en el proceso.</dd>
</dl>