# Creating a starter project

{% hint style="warning" %}
You are reading the **NextGen Documentation**

**NextGen widgets** are a new and improved way to display UGC content onsite. 

From September 23rd 2025, all new widgets created will be NextGen.

Please check your widget version on the **Widget List page** to see if it is a **Classic** or **NextGen** widget.

You can read the [Classic Widget Documentation](https://docs.nosto.com/ugc/guides/onsite-widgets) here.

**Note: This feature is unique to NextGen widgets**
{% endhint %}

## Starter project activity

This project has been created with the sole purpose of:

1. Allowing you to see what is possible with widgets
2. A space for you to follow the activity provided to learn about how you can customise widgets with ease

### What you will learn

1. How to adjust styles for inline tiles & expanded tiles
2. How to adjust templates for inline tiles & expanded tiles.
3. How to hook into emitted events
4. How to apply dynamic css variables

### Getting started with the activity

* You will notice this widget is bouncing. Please stop the circle from bouncing.
* Why is the widget in a circle? Please remove the circle and ensure it is in a grid format, covering the entire screen.
* The border of the circle is based on the mood given to the method. Please update it so that it is using 'nosto' mood with a pink border to represent Nosto.
* Every time I expand a tile, a dog appears. Please change this to the actual tile image.
* Every time an event is emitted, a toast message appears, please remove this.

A successful attempt at this activity will be something like the following. 

<figure><img src="https://3731068598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F903dsFKGBuxQbjtVNMIV%2Fuploads%2FkZwpOEJrFyEnkNjzCgYt%2Fimage.png?alt=media&#x26;token=5c88203d-106f-4be5-8884-3bf1ee3925d6" alt=""><figcaption></figcaption></figure>

**Answers:**

* To stop the circle from bouncing, remove `@keyframes bounce { }` in extras.scss
* To remove the circle, remove the `border-radius` property in `extras.scss`
* To update the border color to the Nosto mood, update the `"--my-mood-border"` variable in the widget.tsx file.
* To change the dog image to the actual tile image, update the `tile.template` file to instead use the `tile.image` property.
* To remove the toast message, remove the eventListener in widget.tsx