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.
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.