front end web development

Brett Haymaker, JavaScript Consultant & Educator

ATTENDANCE!

Warm-up

15 MINUTES

Review the site below:

http://www.promoflex.com/en

 

  1. Inspect the page and identify 1-2 things you suspect are using JavaScript / jQuery
  2. Discuss with your partner
  3. Investigate how those things are being achieved.
  4. Share one thing that you uncovered.

Learning Objectives:

  • Differentiate between jQuery and JavaScript, describe benefits of using them.

  • Recognize jQuery syntax

  • Use selectors and jQuery functions to effectively manipulate the DOM.

What is JQuery?

  • A JavaScript library
  • Made of ordinary JS
  • Gives us "syntactic sugar" / helper methods that allow us to do a lot with a few lines of code

Where can I find jQuery?

  • Content Delivery Network (CDN)
  • Download / copy library locally
  • Host our own copy of the library

Let's add it to a project together and run through some examples. (selectors...smooth scrolling ...*cough* ... event listeners... *cough**cough*)

jquery docs

15 MINUTES

 

Go to jquery.com and look up the following methods:

 
.slideUp()
.slideDown()
.children()
.attr()
.click
.slideToggle() 
.hide()
.show()

jquery dOM SELECTOR Practice

15 Minutes

 

  1. Download the start files from Slack.
  2. Work your way through the prompts in the exercise.js file, answering questions as you go.
  3. Confirm in the browser that your code is working.

 

 

Code along - Building an FAQ section

What does an FAQ section typically look like?

Let's gather some ideas and build out the HTML together.

Then, we'll build the JS script to make our FAQ page come to life and respond to user interactions.

Navigation with dropdown menus

Remainder of class

  1. Using what we learned from our FAQ example...
  2. Build a navigation bar with three items
    1. About, Services, News
  3. When a user hovers over each button, a dropdown menu with sub-nav items should slide down. Use jQuery to achieve this. (HINT: a combination of mouse events such as mouseenter and mouseleave and .slideup() and .slideDown() could be useful)
  4. We'll review a possible solution at the end of class

Final Project

Week 5 Milestone:

Project proposal / Wireframe of Final Project

 

Final Project Requirements:

:::SEE NOTES:::

Assignment

Starter code with instructions are in the class Slack channel.

 

You'll be taking Relaxr blog page and adding interactivity using JavaScript / jQuery.

EXIT TICKET

Class Survey

Class name: FEWD 14

Made with Slides.com