Jeff's Blog 3 - Responsive design & Javascript

Jeff's Blog 3 - Responsive design & Javascript

Slide 1:
Jeff's blog
Part 3: Responsive design & Javascript

Slide 2:
Our Mission: 
In this lesson, we'll cover three main things:

1. Give the content a responsive design
2. Learn about advance colors
3. Make our own "like" button in Javascript

Slide 3:
Let's get started

Slide 4
1. Responsive Design

Slide 5:
The goal of responsive design is to make your website look great no matter which device you're on

** image of Jeff's blog on a PC, tablet, and phone **

Slide 6:
In order to do this, we'll learn some special CSS tricks that let us make our content adapt gracefully to different screen widths.
Let's start by improving the structure of our content.

Slide 7:
Write an <article> tag around each blog post, like this:

  <article>
    <h2>VHS umami pop-up trust fund</h2>
    <p>Marfa church-key kitsch bicycle rights, 8-bit mixtape cardigan gentrify Echo Park. Street art swag brunch, next level roof party Schlitz hella organic keffiyeh selfies. You probably haven't heard of them polaroid hashtag +1, meggings biodiesel Portland High Life cray tumblr retro.</p>
    <button>Like</button>
  </article>

The article tag let's us group together multiple HTML elements that form a single piece of content.

Slide 8:
Checkpoint #1
Wrap an <article> tag around each of the three blog post's <h2> and <p> tags

Slide 9:
Great! There's just one problem: Jeff's posts stretch the whole width of the page.
Let's make them narrower and centered so they're easier to read.

Slide 10:
Make a new style for the article tags, then set the width and padding

    article {
      width: 500px;
      padding: 20px;
    }

Slide 11:
Checkpoint #2
Make a new style for the article
Set the width to 500px
Set the padding to 20px

Slide 12:
Looks much better, but the posts are still aligned to the left of the screen :(
Let's fix it with a simple trick...

Slide 13:
Add margin: 0 auto; to the article's style

Slide 14:
Wait, what just happened?

We already learned that the margin controls the amount of space between the outside of an element
and the other elements around it. So when we set margin to "0 auto", it has zero margin on the top 
and bottom, and "auto" margin on the left and right.

Since both the left and right's margin stretch all the way to the edge of the page (that's what auto
means), the effect is that the blog post is centered on the page.

Slide 15:
Web designers use the margin: 0 auto; trick all the time. It's a good one to remember!
Now, let's give it a responsive twist...

Slide 16:
Checkpoint #4

Replace "width: 500px;" with "max-width: 500px;" for the article

Slide 17:
Using "max-width" instead of "width" means our article elements can be smaller than 500px, but not any larger.
To test this out, resize your browser and see what happens to the blog post when it get's smaller...

Slide 18:
There's just one problem...

Slide 19:
When the browser is really small, the title and navigation look kinda messed up

Slide 20:
We can fix this using a media query, a technique that allows us to set CSS styles that only activate
when the browser is a certain width.

Slide 21:
The syntax for media queries looks like this

    @media (max-width: 500px) {
      body {
        background: red;
      }
    }

The "@media (max-width: 500px)" part is basically setting a condition - in this case the browser
should be smaller than 500px -- and when that condition is true, the CSS inside it gets activated

Slide 22:
Checkpoint #5
Make the body's background red if the browser width is smaller than 500px.
Look to the last slide if you need a hint.

Slide 23:
Great! Let's test it out: make your browser narrower than 500px and watch the background turn red.

Slide 24:
Now let's add some styles that will make the page look better at narrower widths
(and mobile devices)

Slide 25:
The heading font should be smaller when the browser is small
The navigation links should sit on top of each other rather than inline

    @media (max-width: 500px) {
      h1 {
        font-size: 36px;
      }
      li {
        display: block;
        padding: 5px;
      }
    }

Slide 26:
Checkpoint #6
In the media query, set the h1's font-size to 36px
Also in the media query, set the list items to display: block;
Still in the media query, give the list items 5px of padding

Slide 27:
** two images showing narrow width page with arrow pointing to the new version **
This looks much better!

Slide 28:
2. Advanced COlors

Slide 29:
Until now, we've been working wih color keywords like white, black and red.

Keywords are simple to read and understand but severely limit the palette of colors you can use.
Let's spice up Jeff's Blog with some hex color codes!

Slide 30:
Checkpoint #7
Change the unordered list (ul) element's background from black to #f00

Slide 31:
Anatomy of a Hex Color Code

#F00

Hex colors always start with a hash like this
** arrow pointing to the # in #F00 **

Slide 32:
Anatomy of a Hex Color Code

#F00

The first character controls the amount of redness.
It ranges from 0 (no red at all) to F (100% red).
** arrow pointing to the F in #F00 **

Slide 33:
Anatomy of a Hex Color Code

#F00

The second character controls the amount of green-ness.
It ranges from 0 (no green at all) to F (100% green).
** arrow pointing to the first 0 in #F00 **

Slide 34:
Anatomy of a Hex Color Code

#F00

The third character controls the amount of blueness.
Together they are RGB.
** Arrow pointing to the second 0 in #F00 **

Slide 35:
Hex codes work by virtually "mixing" the three primary colors.
This also happens to match the way LCD screens work!

Slide 36:
For example, #000 is black  because there is no color, and
#FFF is white because all the colors are present. #F00 is red
because red is 100% and the other two colors are at 0%.

Experiment with mixing colors! Try to make purple.

Slide 37:
Hex codes aren't the only way to do color in CSS.
Another popular method is rgba(). This lets you add 
alpha (transparency) to the mix.

Slide 38:
Checkpoint #8
Change the unordered list's background to rgba(0,0,0,0.5);

Slide 39:
RGBA colors are a lot like hex colors with a slightly less 
confusing syntax:

rgba(255, 255, 255, 1)

Instead of a 0-F scale, RGBA colors use a 0-255 scale, and 
the last digit (transparency) uses a 0-1 scale. The example
above would make white.

Slide 40:
** Image of Jeff smiling **
"Looking good! I love the responsive mobile friendly design.
Just one more thing ... can you stick a 'like' button in 
there somewhere?"

Slide 41:
3. Javascript!

Slide 42:
Now that you're starting to get the hang of HTML and
CSS, we're going to throw you a curveball and
introduce you to Javascript so you can make your 
webpages interactive!

Slide 43:
Our goal is to make a "like" button for Jeff's blog, so he
can easily gauge the popularity of each poem.

For now it won't actually save any data -- we'd need to
program a back end server* to do that -- but we will make
a button that reacts when clicked.

* This is where frameworks like Ruby on Rails come in handy

Slide 44:
Before we write any javascript to add interactivity,
let's make the button itself using HTML.

Slide 45:
Checkpoint #9
Inside each article at the bottom, right before the closing </article> 
tag, write this <button>Like</button>

Slide 46:
We can include Javascript in our site similar to the
way we include CSS, by using a special tag.

Instead of style, we use a <script> tag.

Slide 47:
Write <script></script> at the bottom, just above the </body> tag

Slide 48:
To check and make sure Javascript is working, 
let's write a simple script to pop up an alert 
when the page loads

Slide 49:
Checkpoint #11
Write alert("Javascript works!") in your <script> tag, then press 
"Run Javascript"

Slide 50:
Great! Now let's try to make that happen when 
you click one of the buttons.

Slide 51:
Every time you move your mouse, click something, 
mouse over something, press a key or scroll, your
browser fires off an "event".

By default, these events go unnoticed. But we can use
Javascript to "listen" for specific events and take action 
when they happen. In this case, we want to listen for 
the "click" event on the "button" element.

Slide 52:
Here is an example of some Javascript* that
would listen for a click event on a button element:

    $("button").on("click", function() {
      alert("clicked!")
    });

* This code uses jQuery, a popular library of useful javascript code that, 
among other things, makes it easy to select elements and listen for events.

Slide 53:
Before we explain how exactly this code works, write
it out inside your script tag exactly as it appears in 
the previous slide. Remember: if even one character 
is wrong it will mess up the whole thing!

Slide 54:
Checkpoint #12
Write 
    $("button").on("click", function() {
      alert("clicked!")
    });
in your script tag, then click "Run Javascript" and click one of the buttons

Slide 55:
How this Javascript works
First we select the element(s) whose events we want to listen to. This part
is very similar to the way we select elements in CSS, except the selector 
goes inside quotes and parentheses with a $ to the left of it

$("button")

For example, you could select paragraphs with $("p") or headings with $("h1")

Slide 56:
This is how Javascript works
Next we call the on() function, which sets up an event listener for our
button element. Inside it's parentheses are two options -- sometimes
called parameters or arguments.

    $("button").on("click", function() {
      alert("A button was clicked!")
    });

Notice how the basic format is $(element).on(event-type, thing-to-be-done);

Slide 57:
This is how Javacript works
The first parameter is he type of event to listen to. In this case it's "click",
but we could also listen for hover, scroll, etc. It must be in quotes*.

    $("button").on("click", function() {
      alert("A button was clicked!")
    });

*This is because it's a string, which basically means it's text (as opposed to
numbers, or lists, or functions). We'll learn more about these data types later.

Slide 58:
This is how Javacript works
The second parameter is a function* containing the thing to be done when
our event happens. In this case, we'll pop up an alert with the text "A
button was clicked", but you can put any text you like inside there.

    $("button").on("click", function() {
      alert("A button was clicked!")
    });

*Functions group together chunks of code and allow them to be executed at a later time.

Slide 59:
All together now!

Slide 60:
The selector chooses the element to listen to 
The on() function sets up an event listener for the element we selected
The first parameter to the on() function is the type of event we're listening for
The second parameter to the on() function is the action to take when the event happens

Slide 61:
It's ok if you don't feel like you totally understand how that worked.
Many beginners hit a wall when they try to learn javascript -- it's hard!
We'll keep learning more about javascript in future projects.

If you feel like it, try playing around with javascript by selecting
different elements or using different event types

Slide 62:
Recap

Slide 63:
Here's what you learned:
1. How to use max-width and @media queries to create a responsive design.
2. How to use advanced colors with hex and rgba
3. How to listen for events and react with Javascript

Slide 64:
** image of Jeff smiling ** 
"You're a genius! This is great!
Ever since the redesign my poetry has gone viral!"

Slide 65:
You're done -- Great job