What will you build?

HTML

CSS

Javascript

Data

How Web Apps Work

HTML

The structure. HTML directs which elements on a page go where. Aka, this box about that box, this title to the left of this picture.

CSS

The design of a page. CSS controls colors, typography, spacing, and dimensions.

Javascript

The action on a page. Javascript can make things happen when elements are clicked, updated, hovered over, dragged, dropped, etc.

Data

Data is the information on a page. This usually comes from a database, either one your own or from what's called an API.

Make a new folder on your desktop

Open Sublime Text Editor

Create a new file

Save the file in your folder, as index.html

Type Hello World, and then be sure to save.

Go to your browser, hit Control+O (command on mac) and open your file.

This is actually a website

Websites and web apps are just files.

They sit on a computer. Right now, your website is on your computer, so it can only be opened on your computer.

If we want our website to be accessed from the Internet we put it on a computer connected to the Internet called a Server.

A Browser gets a file (usually through that files address, or url) and then reads it.

bit.ly/republic-redesign

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>

        Hello World




    </body>
</html>

Copy this into your file.

For now, everything we do will be in what's called the opening and closing body tags.

Options

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>
        <h1>This is a page heading</h1>
        <h2>This is a sub heading</h2>
        <p>This is normal text for a website</p>
        <p>You can have the same tag type multiple times</p>
    </body>
</html>

Let's start with some HTML. This will give us some control over structure, and even a little bit about how things look.

<tag_name> What goes in the tag </tag_name>

Challenges

Goal: We are going to build a shout-out website that you can use to give positive recognition to students. Build a title, a sub title, and a description.

The logical next question, obviously... how do I make it look better!

CSS

CSS is actually a different language, so we are going to write it in a different file.

Make a new file in Sublime, click save as, save it in your new folder and call it style.css

Which element

body

{

}

background-color:

yellow

;

what property?

what should it be set to?


   body{
       background-color: yellow;
   }

   h1{
       font-size: 30px;
   }

   p{
       color: red;
   }

Challenges

Change the colors, background colors, and sizes of your Heading, Name, and Description.

Then, go to color.adobe.com

The HEX value, with a # in front of it, can replace the color words.

background-color: #FFF6C5;

Challenges

Most any style you want, you can accomplish with enough CSS. Instead of memorizing all the different properties, just google search the property you want, and the word CSS.

With CSS:

Make all your text aligned to the center

Make your name underlined

Pictures

A picture is actually a different file. You can't just link to a file on your computer, because it won't be accessible on the Internet.

Go to google
Find a picture you want to put in your website
Right click and select copy image url

Pictures

<img src='http://scienceservinghumanity.us/wp-content/gallery/sidebar01/asimo-walk.jpg'/>

The tag is img

but before you close the opening tag, you are going to add an attribute, which a way to add information to a tag.

src (source) and set it equal to the url you copied. (always put attribute values in quotes)

Fonts

Many developers now get their fonts from google fonts

Click Quick Use

The link goes in your head tag

font-family: goes in your css

Fonts

A Sort-Of Quick Review

Shout Out Board

Start out with a title at the top of your site.
Then add the logo for your school underneath the title.
Then add the grade level as a subtitle under the picture.
Add a paragraph with at least 2 - 3 sentences explaining what the website is for.
Pick a great font.
Make sure your body and text has a nice color scheme.

Where are the shout-outs?

What will it look like to have different shout outs? What are some existing sites we could model after? What constraints / limitations should we be thinking about?

We'll start off the same

Make 4 different shout outs that could have been submitted by someone. You only need to use paragraph tags here.

Classes

A class is an attribute that puts elements in groups.

Classes

Add the class shout_out to the shoutouts and teacher_name for the teachers name

  <p class='shout_out'>
    Shout out to Tamia for her Grit during guided practice, that 1G for pushing through frustration. 
  </p>
  <p class='teacher_name'>
    Ms. Moynihan
  </p>

Classes

Now in CSS we can reference a group.


    .shout_out{
        color: pink;
    }

    .teacher_name{
        background-color: yellow;
    }

Refine

Make your shout outs look better.

Inspiration:

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

http://www.w3schools.com/css/css_border.asp

Margin and Padding

margin: 2px 5px 8px 4px;

Bootstrap

Bootstrap offers a lot of functionality. It's a library of pre-built css styles that allow us to do some impressive stuff. At it's core, it creates a grid.

Responsive Design

http://www.profoundgrid.com/examples/fluidresponsive.html

Grid

getbootstrap.com

Div for Division, a very generic tag that just represents a portion of a website.

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
    <div class='row'>
        <div class='col-sm-4'>Anything you want</div>
        <div class='col-sm-4'>Anything you want</div>
        <div class='col-sm-4'>Anything you want</div>
    </div>
</body>

Rows and Columns

You Try

Several Rows

Rows and Columns

<div class='row'>
    <div class='col-sm-4'>
        <p class='shout_out'>This is the shout out</p>
        <p class='teacher_name'>Teacher Name</p>
    </div>
    <div class='col-sm-4'>
        <p class='shout_out'>This is the shout out</p>
        <p class='teacher_name'>Teacher Name</p>
    </div>
    <div class='col-sm-4'>
        <p class='shout_out'>This is the shout out</p>
        <p class='teacher_name'>Teacher Name</p>
    </div>
</div>

Review - Day 3

You are going to make our new staff band website, take a look at the website here: http://bit.ly/republic-band

http://fonts.googleapis.com/css?family=Bangers

And spend the next 20 minutes recreating it.

Pictures:

http://bit.ly/rockey-image

http://bit.ly/ap-image

http://bit.ly/ma-image

http://bit.ly/mb-image

If you want hints, hit the down arrow.

Your body tag will have 3 custom css properties, background-color, font-family, and text-align

your h1, h2, and p tags should all have 2 custom properties, font-size and color.

To make the space colored around your images, you will want to make all images have a fixed width, a background-color, and padding. (You could use border and get the same result).

To make the space colored around your images, you will want to make all images have a fixed width and padding. (You could use border and get the same result).

Since each picture is a different color, you will need to have a way to call each picture individually with css. Use an id and set the background color (or border) there.

Links

You can make text link to another page. This is actually the most important aspect of the Internet, and what makes it different than just a bunch of folders and files. HTML means text with links.

Links

<body>
<p> Good ol' Fashion Text</p>
<a href="http://www.google.com">Click Me!</a>
</body>

Other things we may or may not use, that you should look up.

Unordered Lists and Ordered Lists

Tables

Forms

iframes

From Learning To Designing

Aside from just keeping up with trends, there is not a lot more pure knowledge acquisition that needs to take place for HTML and CSS. Now, it's all about applying and synthesizing new ideas with the skills you have learned.

Blank Canvas

Pick what you want, it can be anything, but I would encourage you to think about something that matters to you, work or family.

A playlist website where your scholars can go each day to access assignments, links, homework, or make-up work.

A website for a family business.

A vocabulary website that over the year becomes a resource to study all the key vocabulary a scholar should learn in you class.

Time to Interact

Javascript is all about interaction. Javascript is a programming language that allows you to "teach" computers to do specific things under different conditions.

Your First Program

<script>

alert("Hello World!");

</script>

Variables

<script>

var num1 = 5;
var num2 = 8;

alert("num1 + num2");
alert(num1 + num2);

</script>

Variables

<script>

var num1 = 5;
var num2 = 8;

alert(num1 + num2);
alert(num1 - num2);
alert(num1 * num2);
alert(num1 / num2);



</script>

An Extra Operation

<script>

var num1 = 5;
var num2 = 8;
var num3 = 4;
var num4 = 15;

num4 % num3 //3
num4 % num2 //7
num4 % num1 //0

num3 % num4 //4
num3 % num3 //0
num3 % num2 //4
num3 % num1 //4

num2 % num1 //3
num2 % num3 //0
num2 % num4 //8

</script>

An Extra Operation

So answer the following:

3 % 2

5 % 20

20 % 5

5 % 2

7 % 3

Challenge

Create 3 different alerts with the 4 variables above and no constants, one using only addition, one using only multiplication, and one using only division. Each alert should say 16.

num1 = 4

num2 = 12

num3 = 16

num4 = 1

Vari

Variables can change many times in a program, that's actually what makes them valuable.

What are some examples of variables in programs we use daily?

Challenge

var x = 5;
x = x + 3;
var y = x / 2; 
x = x * y;
x = (2*y + x) / y;

//what are the current values of x and y?

jsFiddle

We can combine different types of data

var name = "Ryan";
alert("Hello " + name + " how are you?");

Challenges

var city = "Nashville";
var name = "Matt";
var age = 15;

Using the variables above, alert a sentence that says the city, name and age.

That's Random

var start = Math.random();

Test it out a few times, what's the pattern?

The key to any good game is randomness.

That's Random

Make it so it generates a random number between 1 and 100

The key to any good game is randomness.

That's Random

Figure out how to round it so it is just a whole number. (google search!)

The key to any good game is randomness.

Subjective

var start = Math.round(Math.random()*100);

// or 

var start = Math.random()*100;
start = Math.round(start);

Algorithm

There are 3 major parts to any computer program

1. Sequence, the order in which things occur

2. Selection, conditional statements that are only executed when certain conditions are met.

3. Iteration, doing something many times.

Conditionals

var num = Math.round(Math.random()*100);

if(num > 50){
    alert(num + ", that's huge!");
}

Add another if that says if less than 50 alert the number, that's small.

What's left?

var num = Math.round(Math.random()*100);
if(num > 50){
    alert(num + ", That's huge!");
}else if(num < 50){
    alert(num + ", That's small!");
}

Conditionals

var num = Math.round(Math.random()*100);
if(num > 50){
    alert(num ", That's huge!");
}else if(num < 50){
    alert(num + ", That's small!");
}else{
    alert("Right down the middle");
}

Challenges

Generate a random integer between 0 and 50. If it's even, alert ___ is even. Otherwise alert the number.

Generate a random number between 0 and 30. If it's a multiple of 3 alert ___ is a multiple of 3. If it's a multiple of 2 alert___ is a multiple of 2.

Generate a random number between 0 and 20. If it's a multiple of 2 and 3, alert ____ is a multiple of 2 and 3.

Analyze

var num = Math.round(Math.random()*10);
num = num + 10;
if(num > 20){
    alert("I'm greater than 20");
}else{
    alert(num / 2);
}

User Input

var answer = prompt("Guess a Number");

When a user types their answer, it defaults as a string.

var answer = prompt("Guess a Number");
answer = Number(answer); 


//alternative way

var answer = Number(prompt("Guess a Number");

Challenge

Generate a random integer between 0 and 10. Have the user guess a number between 0 and 10. If they guess correctly, tell them they win. If the don't guess correctly, tell them how far off they were.

Format, indent

var car = prompt("What kind of car do you drive?");
if(car == "Honda"){
    var like = prompt("Nice, do you like it?");
    if(like == "yes"){
        alert("Good, it would be a bummer not to like your car");                
    }else{
        alert("I'm sorry to hear that!");
    }  
}

Challenge

Create your own choose your own adventure game. Structure:

A question with 2 possible answers (i.e. yes/no, a/b, etc.
Based on their answer, another question (i.e. if they said yes ask one question, if they said no ask another).
Based on that answer, create a final statement, it does not need to collect any input.

Example

var answer = prompt("Do you want to go out to eat?");
if(answer == "yes"){
    answer = prompt("Somewhere fancy or somewhere cheap?");
    if(answer == "cheap"){
        alert("Nice, we'll go on a date to KFC");
    }else{
        alert("Okay, sushi it is!");
    }
}else{
    answer = prompt("Would you rather make pizza or pasta?");
    if(answer == 'pizza'){
        alert("Cool, we should make pineapple pizza");
    }else{
        alert("Okay, but we have to make our own pasta");
    }
}

Review

Create a prompt that asks the user what day of the month their birthday is.

If the day of the month is even, alert out to them their birthday is on an even number.

If their day of the month is the same as yours, alert to them their birthday is the same as yours.

If the day of the month is in between 15 and 18, alert their birthday is in between 15 and 18

Loop it

Computers are really good at doing things over and over again.

for(i = 0; i<5; i++){
    alert(i);
}

What will this do?

What if I wanted to start at 2?

What if I wanted to go to 8?

What if I wanted to go up by 2 instead of 1?

Challenges

Make a loop that alerts the numbers between 1 and 10.
Instead of saying the number, say whether it's even or odd.
Loop from 1 - 5, if the number is less that 3, say "That's less than 3", if the number is three, say "3" and if the number is greater than 3, say "That's greater than 3".

When do loops matter?

Science: Very helpful when testing theories. For example, what's the minimum amount of radiation needed to kill certain types of cancer, loop over and over and each time check to see if you've got the desired results.
Social Media: When comments are shown below posts, the website is creating a loop, and then getting the "i"th comment.
Finance: Any program that manages budgets or transactions is using functions like SUM and AVERAGE, which loop through all transactions and then performs operations based on the values of those transactions or values.

Cash Register

Make a program that allows the user to type in the total, then type in the amount they paid. Afterwards it should say the amount of change due.

Then, it should say "You'll get ___ back in bills and ___ back in change.

Alerts Suck

We need to find better ways to print to the screen, because alerts are annoying.

Let's connect to our HTML with jQuery

Printing to a Website

var results = $('#results');
for(i = 0; i < 10; i++){
    results.append(i);
}

So from now on, we'll attached our javascript to our html instead of alerts, because alerts are frustrating and annoying to work with.

Challenge

Print the numbers 1 - 100, if the number is a multiple of 3 you should print "Fizz". If the number is a multiple of 5 you should print "Buzz". If the number is a multiple of 3 and 5 you should print "Fizz Buzz".

Hint - you can check if several things are true by using &&, for example:

would test to see if num is greater than 5 and less than 10.

if(num > 5 && num < 10)

Final Day

Build a website that allows a user to order a pizza.

Stage one is to create a layout that has the name of your pizza shop and some pictures / text to make it look good.

15 minutes

Final Day

They should be able to select small, medium, or large for their pizza size.

To do this you will need to use a new tag called an input tag.

<input type='radio' class='size' value='small'/>

10 minutes

Final Day

The need to submit

(Make it look good)

<button>Submit</button>

5 minutes

Final Day

So far all our javascript has been executed on page load. We are going to make a function which we call instead of just execute.

For now, just make a variable called size and set it equal to one of your sizes, then if size is small, set a price variable to the cost of a small pizza, if medium, set the price variable to to a the cost of a medium etc.

Then include tax, prompt the user for a tip, and then alert out the total cost of the order.

function orderPizza(){
    var size = 'small';
    if(size...
}

10 minutes

Final Day

Instead of making size a static value, let's make it what ever the person clicked.

var size = $('.size').val();

10 minutes

Add an attribute called onclick and set it equal to the name of your function to your submit button.

Final Day

Now have them pick a crust type and make that change the price as well.

15 minutes