Interactive Media 2 (soon to be Web Design 2):

Week # 4

Project Update 3 Check

Set up a git repository in your project folder on your local machine and make your first commit. Instructions on how to set up a git repository can be found in the lecture slides for Week 3.

Guidelines:

1. Install Git on your computer

2. Initiate a git repository in your project folder

3. Stage your changes

4. Commit your changes

Git Review

We went over a lot of stuff last time. Let's see if we can recall anything 

Git WorkFlow

Notes

• box model: Every HTML element operates as a box element in CSS. That is, every HTML element is actually composed of 4 CSS properties: Content, padding, border, and margin. Here is a diagram depicting the elements:

Margin

Content

border

padding

Notes

• box model (continued):
  • margin: CSS property for determining space around an element.
  • padding: CSS property for determining the space within an element.
  • border: CSS property for determining the border color, size, and type around an element.
  • content: The actual HTML within the element. For example, the text inside of a p element. 

border

padding

p {

padding: 1px;
border: 2px solid black;
margin: 0px 2px;

}

Notes

• box model (continued):
  • margin: CSS property for determining space around an element.
  • padding: CSS property for determining the space within an element.
  • border: CSS property for determining the border color, size, and type around an element.
  • content: The actual HTML within the element. For example, the text inside of a p element. 

border

padding

p {

padding: 1px;
border: 2px solid black;
margin: 0px 2px;

}

Finish HTML/CSS Notes

https://goo.gl/NPgvtr

border

padding

Start using jQuery

jQuery is a Javascript library used to make life with JavaScript easier for developers. This works by creating shortcut methods made using JavaScript. 

border

padding

How Does jQuery Work?

jQuery works by being included as a single file either in your directory or stored on a server. Either way, you must link to the file somewhere in your HTML. Once you link to the file, you'll have access to all that jQuery has to offer. Plus, it's free. 

http://jquery.com/

Download jQuery

OR

Link to jQuery on a hosted CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Either way, make sure that the link to the jQuery file exists before the link to your script.js

border

padding

Let's learn jQuery by using it

https://goo.gl/NPgvtr

border

padding

Let's learn jQuery by using it

• <script></script> : The script element is used to either link a JavaScript file to the HTML file or to add some JavaScript directly into the HTML document. For example,

<script src="js/jquery.js"></script>
<script>

var something = 43;

</script>

• $ : The bling operator is used to tell JavaScript that you're about to use jQuery and that the following object is going to be selected. For example, the following would add text to all p elements. This works for other CSS selectors as well, including ids and classes.

$("p").text("Hey, I'm just some text being added");
$("#some_container").text("Adding some text.");
$(".gato").text("meow");

padding

Let's learn jQuery by using it

Learn how Script Tags and Document Ready Work

Target HTML Elements with Selectors Using jQuery

Target Elements by Class Using jQuery

Target Elements by ID Using jQuery

Delete your jQuery Functions

$( document ).ready(function() {

});

$("div");

$(".someElement");

$("#someOtherElement");

Discussion

Try implementing what you learned into your project. That is:

• Create a script.js file and link to it in any of your html files
• Target 3 different elements in your html file using an element selector, an id selector, and a class selector. 
• Discuss your progress with your partner and try and explain the concepts to each other in your own words.

Lecture Video for jQuery

https://goo.gl/ho5cCH

border

padding

Let's learn jQuery by using it

Target the same element with multiple jQuery Selectors

Remove Classes from an element with jQuery

Change the CSS of an Element Using jQuery

Disable an Element Using jQuery

$("div").addClass("someClass");

$("div").removeClass("someClass");

$("div").css("color", "purple");

$( "div" ).prop( "disabled", true );

Discussion

Try implementing what you learned into your project. That is, In your existing script.js file:

• Add a class to an element using the "addClass" method. 
• Remove the class that was added to an element using the "removeClass" method.
• Change the CSS of any of your elements using the "css" method
• Use the "prop" method on an element

Update 4

Continue building the HTML and CSS for your project. Have at least 50% of the styling to your web application using CSS. 

FCC Modules

https://goo.gl/NPgvtr