---
title: Getting Started
order: 2
layout: page
---
# Getting Started
This page will guide you through the installation of Vaadin Core Elements bundle and help you get started with your first project using these elements.
## Installation
There are three ways to use Vaadin Core Elements in your project: Bower, CDN and a ZIP archive. The only difference between these options is the URL you will use to import the necessary files into your HTML page.
### 1. Create a new folder
Start by creating a new folder for your project and change into the newly created folder.
$ mkdir my-project
$ cd my-project
### 2. Install Vaadin Core Elements
#### Bower
Recommended way to manage your front-end dependencies is using [Bower](http://bower.io). Follow the [Bower installation instructions](http://bower.io/#install-bower), then run the following command inside your project folder to install the most recent stable release.
$ bower install --save vaadin-core-elements
This will download Vaadin Core Elements bundle and its dependencies into the `bower_components` folder inside your project's folder.
----
>If you wish to use a development snapshot version of some element, you can install/update that separately. For example:
$ bower install --save vaadin-grid#master
----
#### CDN
You can use Vaadin Core Elements from CDN (see example below). This is especially convenient for services like JSFiddle, Codepen.io, etc.
For example, to import vaadin-grid, use the following URL:
https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html
To import all Vaadin Core Elements, use the following URL:
https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-core-elements/vaadin-core-elements.html
----
> You can also use the nightly snapshot versions of any component, e.g. `https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/vaadin-grid.html`
----
#### Download ZIP
1. Download the latest ZIP archive from [vaadin.com/download](https://vaadin.com/download#elements).
2. Extract the archive under your project folder, for example `deps`.
### 3. Create a HTML file
Create a new HTML file (for example `index.html`) inside your project folder and copy the following code into it.
Pay attention to the following details:
- HTML5 doctype (``) is required for everything to work smoothly.
- You need to adjust how the `webcomponents-lite.min.js` polyfill and `vaadin-core-elements.html` are imported according to the installation option you selected.
- Notice how the JavaScript logic waits for `WebComponentsReady` event before accessing the elements.
----
> **Serving the files during development**, when using Bower or the ZIP archive:
> Due to browser security restrictions, serving HTML imports from a `file:///` URL does not work. You need a web server to view pages where you use custom elements. One simple option is to use the [`serve`](https://www.npmjs.com/package/serve) NPM package.
----
First Name
Last Name
Email
After you have created the file and you have a local server serving the files, you should be able to open up the application in your browser at [http://localhost:3000/index.html](http://localhost:3000/index.html) (notice, that the port 3000 may vary depending on the server you use).
Vaadin Grid
Continue to Vaadin Grid documentation