Javascript for Designers

SuperHi FM

Javascript is one of the most-used web languages in the world but its learning curve is relatively steep. Aimed at people who design, this short course will teach you how to work with Javascript in a fun, creative way.

This course, perfect for beginners, is designed to get you up to speed with how Javascript works, how to think about event-driven code (e.g. on click, on scroll, on movement) and generally how to make design effects you'll want to use in your own projects.

You don't need to be a designer to join the course – all we require is a little knowledge of HTML and CSS.

What you’ll learn

Learn how modern Javascript (ES6+) works, from variables and strings to arrays and objects
How to work with browser interactions such as clicks, hovers, mouse movements and scroll events
Work with smooth animations, transitions and delays to make your design work next-level good
Add in subtle (or not-so-subtle, it's up to you!) parallax effects to your design work
Context is everything – make design changes, on the fly, as you scroll up and down the page
Best of all... you'll learn how to be a better, more confident digital designer

Requirements

A computer with Mac OS X 10.9 or above, Windows XP or above, or a recent Linux version installed and a broadband internet connection. Nothing else!

Target Audience

Anyone who is looking to learn Javascript from scratch in a creative, practical way.

You do not need any Javascript knowledge for this course. We would recommend a little knowledge of HTML and CSS before this course starts – if you don't have HTML and CSS knowledge, try our book or join our Foundation HTML, CSS + Javascript course.

You don't need to be a designer to join this course – you can work in any industry to join – but we will be teaching in a more creative style than most other Javascript courses you may see online.

Chapter 01

Rose Culver

In the first chapter, we'll discuss to work with data and events in Javascript and how to apply them to a website that lets us change both HTML content and CSS styling. We'll use this to build a designer's portfolio website.

Lesson 01

Welcome to Javascript for Designers!

Lesson 02

How do we hold data in Javascript

Lesson 03

What are let and const

Go to chapter

Chapter 02

Plant Life

In this chapter, we create a plant shop website that features a slideshow and a sliding menu. We also go further with Javascript events by adding in click, mouseover and mouseout events, and talk about how to add randomness into our design work.

Lesson 01

Introduct to Plant Life

Lesson 02

How to structure our site in HTML

Lesson 03

Adding in our CSS

Go to chapter

Chapter 03

Type Checker

In this chapter, we make an interactive website that lets you play with text and typography live in the browser. We discuss how to work with form tags such as text inputs, sliders, checkboxes and select boxes in order to make different type settings customizable, such as the font, size, and colors.

Lesson 01

Introduction to Type Checker

Lesson 02

Setting up our project

Lesson 03

Adding project layout

Go to chapter

Chapter 04

Jenna Buchholz

In this chapter, we go in depth into scroll events and parallax by adding progress bars, waypoints and thresholds.

Lesson 01

Introduction to Jenna Buchholz

Lesson 02

Adding our header

Lesson 03

How to structure our sections

Go to chapter

Chapter 05

Brux

We extend our Javascript events knowledge by talking more about scroll and mouse movement events to add design elements such as fade on scroll and eyes that follow your cursor.