Ajax to the Max

Workshop for the Gender in Music Hackathon led by Hannah Park and Kaitlin Gu. Forked from Blake Tarter's Giphy API Search project on Codepen.:sparkles: :sparkles: :sparkles:

Contacts

Kaitlin Gu: kaitlin.gu@gmail.com
Hannah Park: hannahmimipark@gmail.com

Agenda

HTML // CSS basics
How to build and style your own static page!
jQuery basics
How to call an API using the GIPHY API
How to parse and use an API response

####HTML and CSS

######HTML HTML is the basic building block of a web page. Each html site follows the basic structure.

<html>
  <head>
    <title>My First Web page</title>
  </head>
  <body>
    The content of my first web page
  </body>
</html>

######CSS You can use CSS to style your web page. CSS describes how HTML should be laid out on the web page.

The following code describes styling a h1 tag, this is an example of a tag selector:

/* Selector {Property: Value;} */
h1 {color: blue;}

You can also style based on class and id selectors:

#myparagraph {
  font-family: "Helevtica";
  font-size: 13px;
}

.title {
  font-family: "Times";
  font-size: 18px;
  color: blue;
}

####Building a Static Website Let's put HTML and CSS together to generate a static website. First, let's have a file named index.html and a stylesheet titled style.css

######index.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p id = "changeme">This is the content of my web page</p>
    <p>This is another paragraph</p>
  </body>
</html>

######style.css

h1{
  color: red;
  font-family: "Helvetica", sans-serif;
}

p{
  font-size: 10px;
}

####jQuery Basics jQuery is built on top of JavaScript and allows you to elements of an HTML page. We'll be going over event listeners and selectors.

######Selectors You use the $ to select ids, classes, and tags by name:

$('tag')
$('#id')
$('.class')

Once they are selected, you have a variety of methods that you can call:

.addClass('className');
.removeClass('className');
.toggleClass('className');

######Event Listeners

$( "button" ).on( "click", function() {
    console.log( "click" );
});

Also other events such as click, hover, keyup, and keydown

Exercise:

Create a site with a button that will enlarge the text upon click.
Example Interaction: Example Solution

itsmebeanie / ajax-to-the-max

Ajax to the Max

Contacts

Agenda

Exercise:

About

Languages