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:
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
Create a site with a button that will enlarge the text upon click.
Example Interaction:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent