Course Progress

Project 1: Lightbox Photo Gallery 27 minutes

Project 2: FAQ Page about 1 hour

    1. Let's Get Started!

    Welcome back! In this section, we're going to actually start writing JQUERY code, and in this lesson, we'll go over the project we're going to build.

    2. A Couple Things You Should Know...

    Don't comment out this video, because it's time to dive into the code and begin adjusting our starter code to include JQUERY interactivity.

    3. Ready, Set, Code!

    It's time for the main event! Or, at least the click event. We start writing our JQUERY by looking at the interactivity triggered by a mouse click.

    4. Natural Selection

    Think you can handle the handlers? In this video, we go over the JQUERY documentation for different events and how to input selectors into our code.

    5. Slide Show

    As we continue writing our code, we cover the importance of logging our functions so that our jQUERY is wonderfully bug-free. We also start incorporating the effects that will reveal the answers in our FAQ project.

    6. Now We're in Full Effect

    Don't stop now! In this video, we go through some of the additional effects you can employ with jQUERY.

    7. Get Your Toggle On!

    Stiff upper lip! In this lesson, we cover how jQUERY classes interact with CSS and allow us to toggle between elements.

    8. Meet the DOM

    We step back from coding and get a little Element-ary. This video holds everything you need to know about DOMs - the magical interface that allows all of our Javascript and jQUERY functions to interact with HTML.

    9. THIS, not that

    Are you ready for THIS? In this video, we cover This, the keyword that allows us to quickly reference the original jQUERY object while engaging with different functions of it. Basically, we learn how to cheat so we only have to code a function once.

    10. Travel Through the Depths of the DOM

    Our journey continues, by learning about traversing! In this video, we cover how to move through the Dom tree and distinguish the parents, siblings, and children of all our jQUERY elements.

    11. Challenge: Project 2

    Now that we have a grasp on all the (special) effects we can do with jQUERY, it's time for you to get animated and combine multiple effects into our FAQ project. Don't forget to submit your project to OneMonth for personalized feedback.

Project 3: Todo List about 1 hour

    1. Just a Quick Look at Our Roadmap

    Now that we're half-way through the course (!), we review what we've learned so far and cover the project we're about to build. Put it on your to-do list.

    2. This Document Was Born Ready

    Before we get started coding, we review the project files and sample code. The last thing you want is to get lost in the jQUERY library.

    3. Default? No Thanks!

    Hi! This lesson is all about the proper form. We cover how to make our own actions actually happen, and avoid the browser's defaults.

    4. Our Very First Variable

    We actually start creating items in our to-do list in this video, by intercepting inputs and retrieving them with jQUERY variables. They may not be as cute as a golden retriever but they're way more efficient.

    5. Insert Here

    In this lesson, we cover how to capture inputs and insert them into the HTML's unordered list. Don't worry, though. We go through it in the right order.

    6. Under One Condition

    If/else you watch this video, you'll learn all about the conditional statements that will keep the to-do page ordered and how to account for all eventualities in our code.

    7. You're Just Too Dynamic

    Time for some target practice! We discuss how to code for dynamically created events within our to do list.

    8. My Life is Complete

    In this lesson, we check all the boxes and cross all the lines. Or we code animations for dynamic interaction with items on our to-do list, at least.

    9. Remove With Care

    If you're a fan of the Brothers Grimm, you'll love what we're about to do to all of the parents in this list. In this video, we learn how to remove items from the Dom, and from the to-do list.

    10. Live On With Local Storage!

    Now that we have a functional to-do list, we cover how to save and update the local storage so that we can hold onto all our changes.

    11. Local Storage Continued...

    One step forward, two steps updated. We continue discussing how to save changes in local stores so that it reflects removals and well as additions, and every scenario in between.

    12. Challenge: Project 3

    Your third challenge, should you choose to accept it, and we hope you do, is to liven up the to-do with a more lively transition or effect. You can finally cross this project off your own list when you share the results with OneMonth.

Project 4: Launch Pads about 1 hour

    1. So, What Are We Building?

    Welcome to our final project! We're going to build our most complex and realistic application yet, so check out this video for a roadmap of where we're going.

    2. JSON, It's a Thing

    Meet JSON, an easy language in which we can transfer data. In this video, we familiarize ourselves with the objects and arrays which JSON can return to our site - he's super sweet that way.

    3. But Wait, There's More – Arrays and Objects

    In this lesson, we get into the console and play with objects and arrays in order to build a solid understanding of them. There's (Javascript) method to the madness, we promise.

    4. Bootstrap All Day

    In this lesson, we cover bootstrap and how to take advantage of the types of front-end frameworks and streamlined html and css. Don't be late to the third party(s).

    5. Just Add AJAX

    No need to reload the page. In this lesson we cover how AJAX allows us to use the most current version of libraries and server information.

    6. How Do You Respond?

    The sky doesn't have to fall if the server goes down. In this video, we format AJAX to debug unsuccessful data requests.

    7. Each and Every One

    In this lesson, we discuss how to iterate code for each object in our various arrays. No need to check the index.

    8. Building More With Bootstrap

    Join the list group! Now that we're ready to append HTML to the Dom, we cover the pre-built bootstrap components that will make our lives easier.

    9. Display That Data

    We continue adding bootstrap styling in order to neatly display the data of each of our apartment objects. It's definitely easier than finding a new apartment.

    10. Plan of Attack

    Before we move forward, we cover best practices for handling failure from the server and how to create filters to make our arrays more searchable.

    11. Filter Your Hear Out

    Which of these elements is not like the specified criteria? In this lesson, we start implementing our plan to create filters which will remove results.

    12. Filtering Continued...

    In this lesson, we finish up filtering and lay the groundwork for our apartments to not only be searchable but selectable.

    13. You're So Clickable

    Do you have your IDs on you? In this video, we go through how to make each listing clickable.

    14. That's a Wrap!

    We're at the end of jQUERY. Well done! This door has closed, but now many others are now open to you.

    15. Challenge: Project 4

    You up for one more challenge? We can make our application more interesting and unique with Javascript from bootstrap. And then you can submit your ideas to OneMonth/brag about your modal jQUERY mastery.

    16. Claim Your Prize!

    Well done, you!