Sstobo

Set up a new project with Webpack:

Create a new folder for your project:
Remember to run npm init in your project’s root directory.
Remember to create a .gitignore file and add node_modules at the top
Create the following folders within:
src
build
Create the following files:
index.html (in project root)

Sstobo

// LINKED NODES 
  var gulp = require('gulp'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename'),
  browserSync = require('browser-sync').create(),
  eslint = require("gulp-eslint"),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  cssnano = require('gulp-cssnano'),
  prettyError = require('gulp-prettyerror'),

Sstobo

.screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
}

Sstobo

###############
initialization
###############

create folder
git init
get git info from github
create files
create gitignore
commit files

Sstobo

<form class="form1">
          <input class="email-input" type="text" placeholder="Your Email" o>
          <button class="email-button">Subscribe</button>
      </form>




$(".email-button").click(function() {
  var x = $(".email-input").val();

Sstobo

Clean as you go - dont wait till the end

A11Y - accessability
WCAG 2.0 - Web Content Accessibility Guidelines

Perceivable, Operable, Understandable, Robust

##################
Snips
##################

Sstobo

	display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    height: auto;

Sstobo

.super-div{
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
}
/* shorthand syntax */
.super-div {
   transition:
      top 2s,
      left 1s,
      border-radius 0.5s,

Sstobo

$('button').on('click', function() {
   $.ajax({
      method: 'GET',
      url: 'https://api.openweathermap.org/data/2.5/weather?q=Vancouver,ca&appid=4a48e1e1428fd83889074671fbf259d9'
   })
   .done(function(data) {
     console.log(data)
      $('.weather').append("City: " + data.name + "</br>" + "Wind Speed: " + data.wind.speed + "</br>" + "Clouds: " + data.weather[0].description);
   });
});

Sstobo

npm install --global gulp-cli
npm install --save-dev gulp
npm install --save-dev gulp-clean-css