www/index.html

---
layout: cordova
permalink: /
priority: 1.0
change_frequency: monthly
---

<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="hero">
    <div class="container vertical-center-parent">
        <div id="hero_section" class="row vertical-center-child">
            <div class="col-xs-12 col-sm-5 cordova-bot">
                <img src="{{ site.baseurl }}/static/img/cordova_bot.png" />
            </div>
            <div class="col-xs-12 col-sm-7 hero_content">
                <img class="hero_logo hidden-xs" src="{{ site.baseurl }}/static/img/cordova-logo-newbrand-textonly.svg" />
                <!-- <img class="hero_logo visible-xs" src="{{ site.baseurl }}/static/img/logo_full_2.svg" /> -->
                <p>Mobile apps with <em>HTML</em>, <em>CSS</em> &amp; <em>JS</em></p>
                <p>Target multiple platforms with <em>one code base</em></p>
                <p>Free and <em>open source</em></p>
                <div class="hero_supported_platforms">
                    <img src="{{ site.baseurl }}/static/img/platform-logos.svg" width="140px" />
                </div>
                <div class="hero_buttons">
                    <a href="#getstarted" class="col-xs-12 col-sm-5 btn btn-lg btn-primary">
                        Get Started
                    </a>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/" class="col-xs-12 col-sm-6 btn btn-lg btn-primary">
                        Documentation
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="hero_bottom_strip">
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_shared_code"></div></div>
                    <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Reusable code across platforms</p></div></div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_offline"></div></div>
                    <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Support for offline scenarios</p></div></div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_apis"></div></div>
                    <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Access native device APIs</p></div></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="blue-divider"></div>
<div class="container get-started-section">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-12 text-center">
            <a id="getstarted" name="getstarted" class="fragment-anchor"></a>
            <h1>Get Started Fast</h1>
        </div>
    </div>
    <!-- GETTING STARTED -->
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">1</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>Installing Cordova</h2>
            <p>Cordova command-line runs on <a target="_blank" href="http://nodejs.org/">Node.js</a> and is available on
            <a target="_blank" href="https://npmjs.org/package/cordova">NPM</a>.
            Follow <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/index.html#develop-for-platforms">platform specific guides</a>
            to install additional platform dependencies. Open a command prompt or Terminal, and type <code>npm install -g cordova</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-npm-install-text">Copy</button>
                </div>
                $ npm install -g cordova
                <div id="copy-npm-install-text" class="copy-text">npm install -g cordova</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">2</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>Create a project</h2>
            <p>Create a blank Cordova project using the command-line tool.  Navigate to the directory where you wish to create your project and type <code>cordova create &lt;path&gt;</code>.</p>
            <p>For a complete set of options, type <code>cordova help create</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-create-text">Copy</button>
                </div>
                $ cordova create MyApp
                <div id="copy-cordova-create-text" class="copy-text">cordova create MyApp</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">3</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>Add a platform</h2>
            <p>After creating a Cordova project, navigate to the project directory.  From the project directory, you need to add a platform for which you want to build your app.</p>
            <p>To add a platform, type <code>cordova platform add &lt;platform name&gt;</code>.</p>
            <p>For a complete list of platforms you can add, run <code>cordova platform</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-platform-add-text">Copy</button>
                </div>
                <p>$ cd MyApp</p>
                <p>$ cordova platform add browser</p>
                <div id="copy-cordova-platform-add-text" class="copy-text">cd MyApp&#10;cordova platform add browser</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">4</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>Run your app</h2>
            <p>From the command line, run <code>cordova run &lt;platform name&gt;</code>.</p>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="well_code">
                <div>
                    <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-run-text">Copy</button>
                </div>
                $ cordova run browser
                <div id="copy-cordova-run-text" class="copy-text">cordova run browser</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-xs-2">
            <div class="number_circle">5</div>
        </div>
        <div class="col-md-7 col-xs-10">
            <h2>Common next steps</h2>
            <ul class="nav">
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/overview/">Read the docs</a>
                </li>
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/cli/#add-plugins">Add a Plugin</a>
                </li>
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/images.html">Customize app icons</a>
                </li>
                <li>
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/config_ref/">Configure Your App</a>
                </li>
            </ul>
        </div>
        <div class="col-md-4 col-xs-12">
        </div>
    </div>
</div>
<!-- /container -->

<div class="blue-divider"></div>
<div class="container-fluid dark vertical-aligned-columns">
    <div class="container">
        <div class="row showcase_section_intro" id="supported_platforms_section">
            <div class="col-md-12 text-center">
                <h1>Supported Platforms</h1>
                <h2>See a list of
                    <a href="{{ site.baseurl }}/docs/en/{{ site.default_linked_docs_version }}/guide/support/index.html">features supported</a> in each platform</h2>
                <p>
                    Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms.
                    These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every
                    phone or tablet on the market today and publish to their app stores.
                </p>
            </div>
        </div>
    </div><!-- /container -->

    <div class="container-fluid supported_platforms vertical-aligned-columns">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="platform_logos">
                        <li><img src="{{ site.baseurl }}/static/img/3rdparty_logo_sprite.svg"/></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {% include tools_and_showcase.html %}

</div><!-- /container-fluid -->