JavaScript and jQuery

Learn how to use JavaScript with HTML and CSS.

StartJavaScript Illustration
JavaScript and the DOM
Lesson 1 of 1
  1. 1

    At the beginning of this course we mentioned that JavaScript is the most widely used language on the web. So how can we use JavaScript on a website? So far, we've only used JavaScript in isolation...

  2. 2

    We can link a JavaScript file to HTML by including it as the [...] of a [...] tag inside of an HTML file, like this: [...] This line of code will link the file located at js/main.js. Yo...

  3. 3

    The Document Object Model, commonly referred to as the DOM', is the term for elements in an HTML file. Elements are any HTML code denoted by HTML tags, like [...] , [...] , or [...] . Let'...

  4. 4

    We've just covered how to select HTML elements using the syntax: [...] . This is verbose and clunky, however. If we were to select a lot of elements this way, our code would get dense and difficul...

  5. 5

    With plain JavaScript we selected an HTML element with this code: [...] With jQuery we can select the same element with: [...] 1. We can wrap any CSS selector, like class, id, or tag, with ...

  6. 6

    Now that we can select an element with jQuery, we can use built-in jQuery functions to modify it. From here on, we will start building features into our skills website. First off, it would be nice...

  7. 7

    In order to fade in the [...] element, we can use a the jQuery function named [...] . True to its name, [...] will fade an element in over a period of time in milliseconds. It looks like this...

  8. 8

    The next feature we'd like to build is making the 'Recent Projects' clickable. When clicked, the button should show the individual projects, and when clicked again, it should hide the projects. In...

  9. 9

    To make our projects visible when the 'Recent Projects' button is clicked, jQuery provides a function named [...] , which is the opposite of [...] . To show an element, the syntax looks as such:...

  10. 10

    When we click on a 'Recent Projects' button, the projects show. Next, let's hide the projects if we click the 'Recent Projects' button again. jQuery provides a function named [...] that is helpf...

  11. 11

    Let's add one more feature: when we click the 'Recent Projects' button the background color and text color should change. We can toggle a CSS class with a jQuery function named [...] . The syntax...

  12. 12

    In the last exercise, we were toggling every 'Recent Projects' button instead of only the one we clicked on. We can select the specific element we clicked on with the jQuery selector [...] . The...

  13. 13

    In order to toggle the projects in each section, we will need to use [...] to select the button we clicked on. The issue is that [...] refers to the [...] in our current code, and not the pro...

  14. 14

    Since we have a few areas to click on, it may be helpful to show users which sections they have viewed by changing the text inside the 'Recent Projects' buttons. When a user clicks on a button, we...

  15. 15

    The last feature we'd like to add is an aesthetic one. Right now when we click the 'Recent Projects' buttons, the projects appear instantly. Let's instead make the projects slide onto the page whe...

  16. 16

    Nice work! jQuery is a complete library, and we've only covered the basics. If you're interested in adding animations to websites and creating more dynamic elements, take our jQuery course here . ...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

JavaScript and jQuery

StartJavaScript Illustration