Hi guys,

This is really for graduates looking for employment. If you just finished school and now looking for employment the honest truth is you probably have no idea how things really work in the workplace but don't you worry about that I am here to share a little bit about how this all ways.

Today we looking at how to set up your HTML, CSS, and JavaScript project. This is just to get you to start. So tip number one in the real workplace you will be given work that you have no idea where to start looking so chin up - you will be strong, and you will know how to use google better than you know now.

Cool now that we done will that intro let's break this down before I finish my glass of wine. There are many ways of doing this stuff but I like using node so that is what will use today.

Step 1:

Install and get running the following on your pc:

• nodejs
• get yourself a sexy code editor (I'm using phpStorm)

Step 2:

• Where you like doing your development, create a folder.
• Create a file called package.json
• Copy and paste the following

  {
  "name": "My Website Template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mr Dube",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.10",
    "gulp": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "sass": "^1.53.0"
  }
  }
  

  The stuff under the devDependencies JSON object is all the stuff that you need in your development environment. These apps help you develop better so please google them guys.

Step 3

• Now save your file and open up your command prompt
• Navigate to the project and run npm install
• That command will install all the apps there were in the devDependencies JSON object.

Step 4

• Create a new file called gulpfile.json
• Copy and paste the following:

const { series, watch } = require('gulp');
const browserSync = require('browser-sync').create();

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function buildImages(cb) {
  cb();
}

function buildScripts(cb) {
  cb();
}

function buildStyles(cb) {
  gulp.src("./assets/scss/*.scss")
      .pipe(sass())
      .pipe(gulp.dest("./assets/css"))
      .pipe(browserSync.stream());
  cb();
}

function buildHtml(cb) {
  browserSync.reload();
  cb();
}

function clean(cb) {
  cb();
}

function serve(cb) {
  watch("assets/scss/**/*.scss", buildStyles);
  watch("*.html", buildHtml);

  browserSync.init( { server: { baseDir: "." } } );

  cb();
}

exports.serve = series(clean, buildStyles, buildScripts, buildImages, serve);
exports.default = series(clean, buildStyles, buildScripts, buildImages);

• Save the file and then go back to your command prompt
• Run gulp serve

Conclusion

Go through this code and these steps and let me know what you think. I am happy to explain line by line but google first and when you stuck ping me :)