Skip to content
envato-tuts+
envato-tuts+
  • Design
    Design View all Design
    Start Learning
    • Software
      Software
      • Adobe Photoshop
      • Adobe Illustrator
      • Affinity Designer
      • Affinity Photo
      • Affinity Publisher
      • Adobe InDesign
      • Procreate
      • PaintTool SAI
      • Pixelmator
      • CorelDRAW
      • Inkscape
      • Sketch
      • Design Space
    • Drawing/Illustration
      Drawing/Illustration View all Drawing/Illustration
      Learn Illustration
      • Vectors
      • Digital Painting
      • Character Design
      • Pixel Art
      Learn Drawing
      • Animals
      • Drawing Theory
      • Human Anatomy
      • Cartoons & Comics
      popular software in Drawing/Illustration
      • Adobe Illustrator
      • Procreate
    • Graphic Design
      Graphic Design View all Graphic Design
      • Techniques & Workflow
      • Photo Manipulation
      • Infographics
      • 3D Design
      • Print Design
      • Apparel Design
      • Logo Design
      • Icon Design
      • Packaging Design
      • Book Design
      • Branding
      popular software in Graphic Design
      • Adobe Photoshop
      • Adobe Illustrator
      • Adobe InDesign
      • Affinity Designer
    • Typography
      Typography View all Typography
      • Fonts
      • Hand Lettering
      • Web Typography
    • Add-Ons
      Add-Ons View all Add-Ons
      • Photoshop Actions
      • Photoshop Brushes
      • Illustrator Brushes
      • Layer Styles
      • Procreate Add-Ons
      • Overlays & Textures
      • Photo Effects
      • Patterns
      • Text Effects
    • Graphic Templates
      Graphic Templates View all Graphic Templates
      • Album Cover
      • Book
      • Brochure
      • Card & Invite
      • Business Card
      • Flyer
      • Magazine
      • Menu
      • Newsletter
      • Packaging
      • Poster
      • Resume & CV
      • Social Media
      • Stationery
    • Theory
      Theory View all Theory
      • Art History
      • Global Influences
      • Design Trends
      • Color Theory
    • Mockups
      Mockups View all Mockups
      • Apparel
      • Banners & Ads
      • Book
      • Brochure
      • Flyer
      • Devices
      • Logo
      • Magazine
      • Mug
      • Packaging
      • Poster
    • Digital Crafting
      Digital Crafting View all Digital Crafting
      • Cricut
      • Digital Scrapbooking
    popular software in Design
    • Adobe Photoshop
    • Adobe Illustrator
    • Affinity Designer
  • Business
    Business View all Business
    Start Learning
    • Software
      Software
      • Microsoft PowerPoint
      • Keynote
      • Google Slides
      • Microsoft Word
      • Microsoft Excel
      • Microsoft Outlook
      • Google Docs
      • Google Sheets
      • Gmail
    • Presentations
      Presentations View all Presentations
      • Presentation Techniques
      • Pitch Decks
      • Public Speaking
      popular software in Presentations
      • Microsoft PowerPoint
      • Keynote
      • Google Slides
    • Templates
      Templates View all Templates
      • Proposal
      • Report
      • Invoice
      • Resume & CV
      • Business Card
      • Brochure
      • Flyer
    • Marketing
      Marketing View all Marketing
      • Sales
      • Email Newsletters
      • Creativity
      • eCommerce
      • Social Media
      • Infographic Templates
      • Writing
      • Branding
    • Finance
      Finance View all Finance
      • Funding
      • Financial Statements
      • Invoicing
      popular software in Finance
      • Microsoft Word
      • Microsoft Excel
      • Google Docs
      • Google Sheets
    • Management
      Management View all Management
      • Productivity
      • Strategy
      • Communication
      • Diversity & Ethics
    • Startups
      Startups View all Startups
      • Entrepreneurship
      • Business Plans
      • Microbusiness
    • Careers
      Careers View all Careers
      • Finding a Job
      • Freelancing
      • Time Management
      • Networking
      • Promotion
      • Education
    popular software in Business
    • Microsoft PowerPoint
    • Keynote
    • Google Slides
  • Photo
    Photo View all Photo
    Start Learning
    • Software
      Software
      • Lightroom
      • Adobe Camera Raw
      • Capture One
      • Gemstone
      • Affinity Photo
      • Adobe Photoshop
      • Pixelmator
      • Photo Mechanic
    • Equipment
      Equipment View all Equipment
      • Cameras & Lenses
      • Smartphones
      • Lighting
      • Tripods & Supports
      • Filters & Accessories
    • Photographing
      Photographing View all Photographing
      • Exposure
      • Composition
      • Light
    • Types of Photography
      Types of Photography View all Types of Photography
      • Social Media
      • Studio
      • Portrait
      • Event
      • Landscape & Nature
      • Still Life
      • Street
    • Editing & Post-Processing
      Editing & Post-Processing View all Editing & Post-Processing
      • Photo Editing
      • Workflow
      • Image Correction
      • Colour
      • Black & White
      • Portrait Retouching
      • Compositing
      • Printing
      • Portfolios
    • Theory
      Theory View all Theory
      • History of Photography
      • Running a Photography Business
    • Add Ons
      Add Ons View all Add Ons
      • Lightroom Presets
      • LUTs & Filters
      • Slideshow Templates
      • Photoshop Actions
    popular software in Photo
    • Lightroom
    • Adobe Camera Raw
    • Capture One
  • Video
    Video View all Video
    Start Learning
    • Software
      Software
      • Adobe After Effects
      • Adobe Premiere Pro
      • Davinci Resolve
      • Cinema 4D
      • Blender
      • Final Cut Pro
      • Apple Motion
      • OBS
      • Camtasia
      • Screenflow
      • Kapwing
      • Runway
      • Adobe Rush
    • Equipment
      Equipment View all Equipment
      • Cameras & Lenses
      • Tripods & Supports
      • Drones & Rigs
      • Filters & Accessories
      • Smartphones
      • Lighting
      • Audio Equipment
    • Production & Recording
      Production & Recording View all Production & Recording
      • Lighting
      • Audio
      • Composition
      • Screen Recording
      • Livestreaming
    • Post-Production
      Post-Production View all Post-Production
      • Video Editing
      • Color Grading
      • Motion Graphics
      • Audio
      • Workflow
    • Templates & Presets
      Templates & Presets View all Templates & Presets
      • Intros & Openers
      • Titles
      • Transitions
      • LUTs & Profiles
      • Text Effects
      • Particle Effects
      • Logo Animations
      • Slideshows
      • Presets
      • Scripts & Plug-ins
    • Types of Video
      Types of Video View all Types of Video
      • Instructional
      • Documentary
      • Stock Footage
      • Animation
      • YouTube
      • Social Videos
      • Music Videos
    popular software in Video
    • Adobe After Effects
    • Adobe Premiere Pro
    • Davinci Resolve
  • Web Design
    Web Design View all Web Design
    Start Learning
    • Software
      Software
      • Sketch
      • Figma
      • Adobe XD
      • Sublime Text
      • Visual Studio Code
      • MailChimp
      • Webflow
      • Campaign Monitor
    • WordPress
      WordPress View all WordPress
      • WordPress CMS
      • WordPress Themes
      • WordPress Plugins
      • WordPress Hosting
      • Elementor
    • HTML/CSS
      HTML/CSS View all HTML/CSS
      • HTML
      • CSS
      • JavaScript for Designers
      • Bootstrap
      • Animation
      • HTML Templates
      • Landing Pages
      • SVG
    • Email
      Email View all Email
      • Email Design
      • Email Templates
      • Email Marketing
      popular software in Email
      • Campaign Monitor
      • MailChimp
    • UX/UI
      UX/UI View all UX/UI
      Learn UI Design
      • Forms
      • Icon Design
      • Navigation
      • Prototyping
      • Wireframing
      • Web Typography
      • Material Design
      • Design Theory
      • Design Systems
      Learn UX Design
      • User Research
      • User Testing
      • Responsive Design
      • Usability
      • Accessibility
      popular software in UX/UI
      • Sketch
      • Figma
      • Adobe XD
      • Webflow
    • SEO
      SEO View all SEO
      • Content Strategy
      • Conversion
      • Performance
    • eCommerce
      eCommerce View all eCommerce
      • Shopify
      • WooCommerce
      • BigCommerce
      • Magento
    popular software in Web Design
    • Sketch
    • Figma
    • Adobe XD
  • Code
    Code View all Code
    Start Learning
    • WordPress
      WordPress View all WordPress
      • Plugin Development
      • Theme Development
    • HTML/CSS
      HTML/CSS View all HTML/CSS
      • HTML
      • CSS
      • JavaScript for Designers
      • Bootstrap
      • Animation
      • HTML Templates
      • Landing Pages
      • SVG
    • Mobile Development
      Mobile Development View all Mobile Development
      • iOS Development
      • iOS Templates
      • Android Development
      • Android Templates
      • React Native Development
      • React Native Templates
      • Ionic Development
      • Ionic Templates
      • Corona
      • Firebase
      • Kotlin
    • JavaScript
      JavaScript View all JavaScript
      • React
      • Vue.js
      • Node
      • jQuery
      • Angular
      • Web APIs
    • PHP
      PHP View all PHP
      • Laravel
      • PHP Scripts
      • CodeIgniter
      • Yii
    • Coding Fundamentals
      Coding Fundamentals View all Coding Fundamentals
      • OOP
      • Functional Programming
      • Databases & SQL
      • Security
      • Testing
      • Workflow
      • Design Patterns
      • Rest API
      • Machine Learning
      • Authentication
      • Version Control & Git
      • Performance
      • XML
      • AJAX
      • Regular Expressions
      • Tools
      • Game Development
      • Terminal and CLI
    • Python
      Python View all Python
      • Django
    • Ruby
      Ruby View all Ruby
      • Ruby on Rails
    • Cloud & Hosting
      Cloud & Hosting View all Cloud & Hosting
      • AWS
      • Web Servers
      • Hosting
      • Scaling
      • Databases & SQL
  • Music
    Music View all Music
    Start Learning
    • Software
      Software
      • Audacity
      • Audition
      • Reaper
      • Pro Tools
      • Fairlight
      • Premiere Pro
      • Ableton Live
      • Cubase
      • Garageband
      • Logic Pro
      • Reason
    • Equipment
      Equipment View all Equipment
      • Microphones
    • Audio Recording
      Audio Recording View all Audio Recording
      • Voice Recording
    • Audio Production
      Audio Production View all Audio Production
      • Audio Editing
      • Podcasting
      • Sound Design
      • Music Production
    • Royalty Free Music
    • Sound Effects
    • Music Theory
    • Instruments
      Instruments View all Instruments
      • Guitar
      • Drums
    popular software in Music
    • Audacity
    • Audition
    • Reaper

  • Sign In
  • Tuts+ YouTube
  • Envato Elements
  • Envato Elements
  • |
  • Tuts+ YouTube
  • |
  • Sign In
  • envato-tuts+
  • Design
  • Business
  • Photo
  • Video
  • Web Design
    • Software
        • Start Learning
        • Sketch
        • Figma
        • Adobe XD
        • Sublime Text
        • Visual Studio Code
        • MailChimp
        • Webflow
        • Campaign Monitor
    • WordPress
        • Start Learning
        • WordPress CMS
        • WordPress Themes
        • WordPress Plugins
        • WordPress Hosting
        • Elementor
      All WordPress
    • HTML/CSS
        • Start Learning
        • HTML
        • CSS
        • JavaScript for Designers
        • Bootstrap
        • Animation
        • HTML Templates
        • Landing Pages
        • SVG
      All HTML/CSS
    • Email
        • Start Learning
        • Email Design
        • Email Templates
        • Email Marketing
      All Email
      • popular software
      • Campaign Monitor
      • MailChimp
    • UX/UI
        • Learn UI Design
        • Forms
        • Icon Design
        • Navigation
        • Prototyping
        • Wireframing
        • Web Typography
        • Material Design
        • Design Theory
        • Design Systems
        • All UI Design
        • Learn UX Design
        • User Research
        • User Testing
        • Responsive Design
        • Usability
        • Accessibility
        • All UX Design
      • popular software
      • Sketch
      • Figma
      • Adobe XD
      • Webflow
    • SEO
        • Start Learning
        • Content Strategy
        • Conversion
        • Performance
      All SEO
    • eCommerce
        • Start Learning
        • Shopify
        • WooCommerce
        • BigCommerce
        • Magento
      All eCommerce
  • Code
  • Music
  1. envato-tuts+
  2. Home
  3. Web Design

JavaScript for Web Designers (Free Course)

Adi Purdila
Adi Purdila Jul 13, 2023

Lessons

Play lesson (27 sec)
Read Related Content

Play lesson (4 mins)
Read Related Content

Play lesson (4 mins)
Read Related Content

Play lesson (4 mins)
Read Related Content

Play lesson (7 mins)
Read Related Content

Play lesson (5 mins)
Read Related Content

Play lesson (9 mins)
Read Related Content

Play lesson (5 mins)
Read Related Content

Play lesson (6 mins)
Read Related Content

Play lesson (6 mins)
Read Related Content

Play lesson (8 mins)
Read Related Content

Play lesson (7 mins)
Read Related Content

Play lesson (11 mins)
Read Related Content

Play lesson (15 mins)
Read Related Content

Play lesson (8 mins)
Read Related Content

Play lesson (4 mins)
Read Related Content

Play lesson (3 mins)
Read Related Content

Play lesson (2 mins)
Read Related Content

Are you ready to strengthen your web design skills with JavaScript? This course will show you the basics of this powerful language from a designer’s perspective.

We’ll start off simple by discussing variables, data types, and loops. Then, we’ll move on to more complicated concepts like functions, selectors, and events. You’ll even get a chance to apply the skills you’ve learned by putting together some examples – perfect for any web designer!

What You’ll Learn

  • What JavaScript is and how it works 
  • Variables and data types
  • Arrays and objects
  • Functions and selectors 
  • How to put it all together

You’ll need some assets to follow along with the course properly. You can get them prepped and ready by clicking the button below. 

Download Course Files

1. Introduction: JavaScript for Web Designers

Welcome to the course! Here, you’ll learn all about JavaScript from a web designer’s perspective. Lessons start out with the basics like variables, data types, and loops then delve into more complex subjects like functions, selectors, and events. The course wraps up with 5 common coding patterns that use JavaScript. 

2. Working With JavaScript

JavaScript is a powerful, versatile programming language that can be used to create interactive websites and web applications. You’ll find it being used in browsers and also on servers (using Node.js). It’s one of the three core technologies used to create content for the web alongside HTML and CSS.

JavaScript is great for adding a bit of interactivity to your websites or web applications. You can run JavaScript code in the following three ways:

  • In the browser console
  • By writing it in-line in an HTML document
  • By using a dedicated JS file 
How JavaScript appears in the browser console.How JavaScript appears in the browser console.How JavaScript appears in the browser console.
How JavaScript appears in the browser console.

3. Variables

This next lesson deals with all things variables. Variables are a core concept in JavaScript. They enable developers to store information and data in a specific format. Variables can contain numbers, strings of characters, booleans (true or false) and even objects.

If you’ve ever used a CSS preprocessor like LESS or Sass then you know about the concept of variables – it works in the same way with JavaScript. Variables make it easier for developers to store and manipulate data on the client-side quickly and efficiently.

4. Data Types

There are seven data types available to you in JavaScript: five primary and two composite. Primary data types are: 

  • String
  • Number
  • Boolean
  • Null
  • Undefined
A string in JavaScriptA string in JavaScriptA string in JavaScript
A look at what a string looks like in JavaScript.
The typeof operator identifies the type of a variable.

The composite data types include:  

  • Arrays
  • Objects

And that’s what we’ll be covering next.

5. Arrays

The first composite data type we’ll discuss is the array. Arrays are an ordered list of values that can be stored and manipulated. Arrays can contain any type of value - numbers, strings, booleans and even other arrays. Arrays are used to store multiple pieces of data which can then be accessed and worked with easily. They are often used in loops and other functions to store the results of computations and operations.

6. Objects

To understand objects, you need to understand properties. A property is a associate between a name and a value. For instance color = red. 

Objects in JavaScript are collections of properties. Objects offer a more powerful way to manipulate data than arrays as they can store more complex information in a hierarchical format. They can also be used to create custom objects that have their own unique properties and methods. In the example below, we’ve created an object person and established several associated properties, including, age, height, and married (marital status): 

creating an object in JavaScriptcreating an object in JavaScriptcreating an object in JavaScript
Creating an object in JavaScript

7. Operators

operators are special symbols used to perform operations on data. They usually take two or more values as input and produce a result as output. Commonly used operators include:

  • Assignment operators: like =
  • Comparison operators: like >, <, and ==
  • Logical operators: &&, ||

8. If Else Statements

The If Else Statement is a decision-making statement used in JavaScript that allows you to check the value of an expression and execute a block of code if the expression is true.

can be used to create powerful and custom logic by combining multiple conditions using the logical operators such as &&, ||, ! etc. It also allows for nested statements where one or more set of conditions can be checked within another statement. This allows for greater control over how and when code should be executed.

9. Loops

A Loop is a piece of code that’s executed repeatedly either a set number of times or if a certain condition is met. Loops can be used There are 3 main types of Loops in JavaScript. They include: 

  • for
  • do while
  • while
Loop exampleLoop exampleLoop example
A look at the For loop.

10. Functions

You can think of functions in JavaScript as their own sort of subprogram. They are reusable pieces of code that accept parameters, perform operations on them and return a result. They allow for code to be organized in a modular way by breaking down operations into smaller components which can then be reused throughout the program. Functions are declared using the function keyword followed by the function name, an optional set of parameters, and the code body wrapped in curly brackets.

Functions can also directly return a value or have an implicit return statement which will return undefined if no value is specified.

11. Selectors

Selectors in JavaScript are used to target and access elements from the Document Object Model (DOM). They can be used to get a reference to an element or multiple elements, create a new element and add it to the DOM, remove elements from the DOM or make changes to them.

12. 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. An event can be something triggered by the browser or by the user. 

Events in JavaScriptEvents in JavaScriptEvents in JavaScript

The next lessons put all you’ve learned so far to work with some practical examples.

13. Back to Top Button

This is the first of five demos in this course. The Back to Top button is a popular thing to include on a website as it helps to improve the user experience for site visitors. To create this button, you need to use the ID attached to the header of your website. Use this to tell the script the button’s destination. The button itself is placed in the footer. 

Then in the style.css file, you can make adjustments to how the Back to Top button appears and how it functions, including its positioning on the page, color, size, and so forth.

14. Textbox Auto Completion

In this demo lesson, you’ll create a textbox that supports auto completion. This can help out the user experience considerably when it comes to filling in forms. 

To do this, you’ll need to add a few variables to your script file, including targetInput results for countries, then you can add targetInput.addEventListener set to keyup which makes it so whenever someone begins to type in the form field, the script will start comparing that input with the country list we’ve already established. 

textbox auto completion codetextbox auto completion codetextbox auto completion code

15. Simple Content Slider

In the third demo, you’ll get to create a content slider that contains images, text, HTML, and anything else you’d prefer. In the example, the slider contains quotes:

content slidercontent slidercontent slider

In the script file, you’ll set where the cursor is placed, whether or not the forward and back buttons are active, the slide width and height, and the number of slides included. 

16. Image Lightbox

In the fourth demo, you learn how to create an image lightbox. A lightbox is usually an overlay that shows a much bigger version of a thumbnail and it can have many applications.  In this example, you’re creating an image gallery and setting the lightbox to appear when an image is clicked. This makes an overlay of a larger version of that image appear. When you click anywhere off of that image, the lightbox closes. 

image lightboximage lightboximage lightbox

17. Tab Control

In the last demo of this course, you learn all about how to create a simple tab control that allows visitors to click between tabs to toggle different content. 

tab controltab controltab control

The markup for this is pretty straightforward. The active tab has the class active and the tab-contents contain whatever content is to be display within each tab. 

18. Final Words

By the time you reach the last lesson of the course, you should have a much clearer idea of what you can do with JavaScript as a web designer and how implement it in your own projects. Best of luck!

FREE
7.5 Hours

Learn Modern JavaScript Fundamentals in 7 Hours! FREE COURSE

Ready to tackle JavaScript in greater depth? This course has you covered. Learn everything you need to know in just seven hours! You’ll learn essential concepts and get a thorough understanding of the language from start to finish.

    Learn Modern JavaScript Fundamentals in 7 Hours! FREE COURSE

    More JavaScript Tutorials on Tuts+

    Want to learn more about all the amazing things you can do with JavaScript? We’ve covered the subject in great detail:

    • How to Filter Data on a Webpage (with JavaScript)
      Jemima Abu
      08 Feb 2023
    • How to Code an Accessible JavaScript Accordion Component
      Jemima Abu
      23 Jan 2023
    • How To Scrape Data From a Webpage Using Vanilla JavaScript
      Jemima Abu
      07 Nov 2022
    • Essential Cheat Sheet: Convert jQuery to JavaScript
      Anna Monus
      09 Aug 2022
    • How to Build a Multi Step Form Wizard with JavaScript
      Andy Leverenz
      02 Nov 2022
    • How to Build a TODO App With Vanilla JavaScript (and Local Storage)
      George Martsoukos
      24 Nov 2022
    • How To Build a Simple Carousel With Vanilla JavaScript (14 Lines of Code!)
      Jemima Abu
      02 Jun 2022
    • Building a Horizontal Timeline With CSS and JavaScript
      George Martsoukos
      26 Jun 2023
    Adi Purdila
    Adi Purdila
    Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.
    adipurdila
    Unlimited Downloads
    From $16.50/month
    Get access to over one million creative assets on Envato Elements.
    Over 9 Million Digital Assets
    Everything you need for your next creative project.
    Create Beautiful Logos, Designs
    & Mockups in Seconds
    Design like a professional without Photoshop.
    Join the Community
    Share ideas. Host meetups. Lead discussions. Collaborate.
    Quick LinksExplore popular categories
    • Curated Design Assets
    • Best Cool Fonts
    • InDesign Magazine Templates
    • Photoshop Actions
    • InDesign Newsletter Templates
    • InDesign Templates
    • Curated Web Design Assets
    • Responsive WordPress Themes
    • WordPress Themes for Consultants
    • Wireframe Templates
    • Best Shopify Themes
    • Masonry WordPress Themes
    • Web Themes & Templates
    • WP Themes
    • HTML Templates
    • Shopify Themes
    • Bootstrap Themes
    • Free WordPress Themes
    • Video
    • After Effects Templates
    • Apple Motion Templates
    • Video Effects
    • Lower Thirds
    • Stock Footage
    • Placeit
    • Logo Maker
    • Video Maker
    • Design Templates
    • Free Templates
    • Mockups
    • Curated Video Assets
    • After Effects Slideshow Templates
    • Premiere Pro Video Intro Templates
    • Final Cut Pro Templates
    • Final Cut Pro Title Templates
    • Premiere Pro Video Effects
    • Curated Presentation Assets
    • Keynote Pitch Deck Templates
    • Google Slides Business Templates
    • PowerPoint Pitch Deck Templates
    • Best Shopify Mobile Themes
    • Best Presentation Templates
    • Free Tools
    • Image Resizer
    • Video Cropper
    • Video To Gif Converter
    • Elements
    • WordPress Themes
    • Stock Images
    • Website Templates
    • Logos
    • Fonts
    • Tuts+
    • Learn JavaScript
    • Photoshop Tutorials
    • How to Draw
    • How to Use WordPress
    • How to Use PowerPoint
    Envato Tuts+
    About Envato Tuts+
    Terms of Use
    Advertise
    Help
    FAQ
    Help Center
    envato-tuts+
    30,219
    Tutorials
    553
    Courses
    42,531
    Translations
    B Corp logo
    • Envato
    • Envato Elements
    • Envato Market
    • Placeit by Envato
    • All products
    • Careers
    • Sitemap
    © 2023 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
    • Youtube
    • Instagram
    • Tiktok
    • Facebook
    • Twitter
    • Pinterest