CSS Grid Series: 1 - Starter Files and Tooling Setup

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.

2021-04-09_08h10_26.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 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 Above: Terminal will now continue to watch your files

2021-04-09_08h24_34.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.

No Comments Yet