Live dev notes taken throughout the CSS Grid course by Wesbos — 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

---

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.

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.

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

Above: Terminal will now continue to watch your files

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.