JavaScript for Web Designers

In this course you’re going to learn the basics of JavaScript from a web designer’s perspective. We’ll begin by going over the basics, such as JavaScript variables, data types, and loops, before working toward more complex notions such as functions, selectors, and events. Along the way, we’ll build some examples that are geared towards what you as a web designer might face on a daily basis.

If this course inspires you to learn JavaScript for web development, check out our comprehensive guide: Introduction: JavaScript for Web Designers

0:27 1. Working With JavaScript

If you’re not yet familiar with JavaScript, let’s run through a quick intro.

4:54 2. Variables

If you’ve ever used a CSS preprocessor like LESS or Sass then you’re already familiar with the concept of “variables”. Variables are used to store data in a specific format. They can contain numbers, strings of characters, and so on.

9:07 3. Data Types

In this lesson, you’ll learn about the available “data types” in JavaScript.

13:17 4. Arrays

Let’s learn about the first “composite” data type in JavaScript: arrays.

20:04 5. Objects

Understanding “objects” in JavaScript starts with an understanding of “properties”. Here you’ll learn about both of these concepts.

25:25 6. Operators

Let’s learn about operators and the various types thereof. We’ll begin with “arithmetic” operators.

34:07 7. If Else Statements

Let’s now look at the if/else statement. If you know any other programming language then you’ll already be familiar with the concept of conditional statements. If not, don’t worry—we’ll cover all of that.

38:50 8. Loops

A loop is a piece of code that executes repeatedly, either a set number of times or until a certain condition is met. Let’s see how we can loop in JavaScript.

45:01 9. Functions

You can think of functions as being “subprograms” which can have their own name, can be called anytime, can receive parameters, and can return a value.

51:17 10. Selectors

Selectors are great if you want to manipulate the DOM and gain access to all its elements. To understand selectors, first let’s have a look at the window and document objects.

59:17 11. Events

The term “JavaScript events” is perhaps a bit improper because the events are actually happening on the HTML side. All you can do in JS is listen to these events and react accordingly.

1:06:15 12. Back to Top Button

Having covered a great deal of theory, let’s now practice what we’ve learned with some exercises. To begin with, let’s see how we can create a “back to top” button.

1:17:11 13. Textbox Auto Completion

You’ll learn how to create a textbox that supports auto-completion.

1:31:42 14. Simple Content Slider

In this practical exercise, let’s create a simple content slider. We’re not going to limit ourselves to images either; we’ll create a slider that can display any type of content.

1:39:50 15. Image Lightbox

In this exercise we’ll create a very simple image lightbox. A lightbox is usually an overlay that shows a much bigger version of a thumbnail.

1:44:02 16. Tab Control

The “tab control” is a very common pattern, so let’s see how it’s done in this final exercise lesson.

1:46:43 17. Final Words

Hopefully by now you’ll have a better understanding of what you can do with JavaScript from a web design point of view.