Sstobo

grid-template-columns: 1fr 1fr 50VW<------  1fr 1fr

set the wrappers grid box to VW to make nested items responsive

Sstobo

$("#update").click(function() {
    count++;
    $("#counter").html("My current count is: "+count);
}

Sstobo

   .wrapper {
    transition:all 1.4s;
    height: 2000px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 2fr 1fr 85% 1fr;
    background-color: black;
    color: white;
    max-width: 1240px;
    min-width: 320px;

Sstobo

var person = {
  name: "Brad",
  age: 35,
  kids: ["dave", "nick"],
  address: {
    street: "Mansfield",
    city: "ottawa"
  }
  }

Sstobo

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

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

.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

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

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

<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();