• Tuesday , 2 June 2020

JavaScript for Web Designers

Code Canyon

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: https://code.tutsplus.com/series/learn-javascript-the-complete-guide–cms-1112?utm_campaign=yt_tutsplus_ResWVWI333o&utm_medium=referral&utm_source=youtube.com&utm_content=description


0:00 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.

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com?utm_campaign=yt_tutsplus_ResWVWI333o&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_ResWVWI333o&utm_medium=referral&utm_source=youtube.com&utm_content=description

Original source

3d Ocean

Related Posts


  1. HHH
    April 16, 2019 at 16:55

    I really wish this would make more sens 🙁

  2. NegiDay27
    April 16, 2019 at 16:55

    Thank you so much for making this video 😍😊no one ever tought like you 👍👍 thank you so much again

  3. Ronaldoo973
    April 16, 2019 at 16:55

    I have a problem in Selectors 51:17 When i use getElementById() it always returns null, What am i doing wrong?

  4. Diverse Programmer
    April 16, 2019 at 16:55

    Need this for my mom's future online shop.

  5. usbest shopping
    April 16, 2019 at 16:55


  6. im fat
    April 16, 2019 at 16:55

    which web developing software do you recommend

  7. Atiq 69
    April 16, 2019 at 16:55

    Superv… concise yet covered all the possible explanation

  8. Aldy Aldy
    April 16, 2019 at 16:55

    Good work man… really helpful tutorial. Thank you for that

  9. Eric Nguyen
    April 16, 2019 at 16:55

    Had to add docElem.scrollTop = 0; to else statement in order for it to work in Chrome.

    Also, any ideas on how to make it smoothly scroll to top w/ vanilla JS?

  10. Tanmay Singal
    April 16, 2019 at 16:55

    Watch at 1.5X

  11. Mariyeen Acheege
    April 16, 2019 at 16:55

    this is very advanced, you use a lot of terminology and codes right away that basic people don't even know where to look at and how to interpret. What the hell is an alert? what's the point of putting in a multiplication equation in the middle of ? and where are you putting it? Woahw!

  12. hijab zehra
    April 16, 2019 at 16:55

    Hi, the back to top button demo works fine when the browser window is smaller but when i maximize it the button is still there and works but i cant see it. Can u guess what i am doing wrong ?

  13. Devashish Sohani
    April 16, 2019 at 16:55

    really so worthful

  14. Letz by
    April 16, 2019 at 16:55

    Hi Thanks for such a great video you together. I additionally have experienced an awesome method for learning and they have made the whole procedure incredibly straightforward and educational.

    LOGON :- https://bit.ly/2vkgVnm

  15. Jonathan Trilles
    April 16, 2019 at 16:55

    at @1:08:34 why use opacity:0 and display:inline-block instead of display:none ?
    great tutorial anyways 🙂

  16. Lohith 4u
    April 16, 2019 at 16:55

    thq sir… its really help full please do a tutorial for basic needs for web designers like notifications frnd rqsts.. blabla

  17. Immanuel Sam
    April 16, 2019 at 16:55

    this actually one of the best js tutorials I've ever watched.. this man really explains the things very well and takes his time too. Thanks. Do you have an udemy course?? #encato tuts+

  18. Learning Simplified
    April 16, 2019 at 16:55

    great resource!! Thanks for the tutorial…

  19. Patiphan Phengpao
    April 16, 2019 at 16:55

    Where I can download the source code ? Please send me a link

  20. Tchabo Paul
    April 16, 2019 at 16:55

    I have a problem the autofield example doesn't seem to work. I checked the console no errors. please I need some help

  21. Tchabo Paul
    April 16, 2019 at 16:55

    Thank you

Leave A Comment

You must be logged in to post a comment.