---
title: Розуміння інструментів веб-розробки на стороні клієнта
slug: Learn/Tools_and_testing/Understanding_client-side_tools
translation_of: Learn/Tools_and_testing/Understanding_client-side_tools
original_slug: Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта
---
<div>{{LearnSidebar}}</div>

<p class="summary">Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.</p>

<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Get started now, with our "Client-side tooling overview"</a></strong></p>

<h2 id="Prerequisites">Prerequisites</h2>

<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p>

<div class="in-page-callout webdev">
<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>

<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>

<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
</div>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">1. Client-side tooling overview</a></dt>
 <dd>In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">2. Command line crash course</a></dt>
 <dd>In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">3. Package management basics</a></dt>
 <dd>In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">4. Introducing a complete toolchain</a></dt>
 <dd>In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.</dd>
 <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">5. Deploying our app</a></dt>
 <dd>In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.</dd>
</dl>