# CSS Grid Series: 1 - Starter Files and Tooling Setup

>*Live dev notes taken throughout the CSS Grid course by Wesbos —  [cssgrid.io](http://cssgrid.io/) *

## Tools
- Firefox - currently using the regular version
- Node.js - currently using version **v14.15.1**
- Terminal - currently using **Command Prompt**
- Code Editor - currently using **Sublime Text**

## Starter Files

Can be found [here](https://github.com/wesbos/css-grid)

---

# Browser Sync - Setup


> Browser Sync allows us to see the changes we make instantly appear in the browser without hitting refresh.

From the starter files, you'll notice there is already a `package.json` which has already been populated with some functions.


![2021-04-09_08h10_26.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618395990730/Euyb_q5em.png)
*Above: Starter files provided by Wesbos*

I've amended the `package.json` file so that it works specifically with the Firefox location on my computer.


![2021-04-09_08h24_07.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618396038252/FO27O5wDL.png)
*Above: Edited package.json to work on my computer*

```
"scripts": {
    "start": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"INSERT LOCATION HERE\\Mozilla Firefox\\firefox.exe\"",
  }
```

To open your starter files on Browser Sync, redirect your terminal to the starter files.

`npm install` - installs all dependencies listed in "devDependencies"
`npm start` - opens Firefox to your directory


![2021-04-09_16h49_41.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618396067628/fHNop6n-D.png)
*Above: Terminal will now continue to watch your files*


![2021-04-09_08h24_34.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618396114688/6BKIsQh6p.png)

Click into any of the folders and select a file to view the html.

Every time you hit save on a document, Browser Sync picks up the changes and refreshes the browser for you.

To exit Browser Sync, hit `ctrl + c` once or twice for it to terminate.