A Website

HTML5, CSS3, Sass, NPM , and JavaScript

Technologies Used

HTML5 CSS3 - Transitions
Grid/Flex Sass 
NPM - Package Manager 
JavaScript 
Git

Step 1

create folder for project and open text editor in projects folder

create dist folder in main directory

create index.html file in dist folder

in index.html file, using html emmet type ! followed by tab to create starter html template

add link tag in the index.html file in the header section above title

<link rel="stylesheet" href="css/main.css">

create scss folder in main directory

create main.scss file in scss folder

Step 2

in the terminal, cd into project-folder and run npm init. This creates package.json file in the main directory.

in the terminal run npm i node-sass. This creates node_modules folder in the main directory

Step 3

now inside the package.json file in the script section, change test into scss

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "My portfolio website",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass -w scss/ -o dist/css/ --recursive"
  },
  "author": "Joseph Hyatt",
  "license": "MIT",
  "dependencies": {
    "node-sass": "^4.11.0"
  }
}

In above code, on line 7 node-sass is to run node-sass program. -w scss/ to watch Scss folder. -o dist/css/ -o sets an output of the compiled sass eto dist/css. --recursive for the _partials loading with auto reload vscode.

to run an NPM script type npm run <script-name> in the terminal. In above example we called the NPM script sass

to run an NPM script type npm run <script-name> in the terminal. In above example we called the NPM script sass

npm run sass

create .gitignore file in main directory and add node_modules inside gitignore file