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.

Source Files:
The source files contain the examples presented in the course videos. Use them to double-check your code or work alongside the instructor: https://github.com/tutsplus/javascript-for-web-designers

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

Chapters

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

source

42 Comments

  1. Super useful and great pedagogy as usual 👍👍👍
    You helped me found a new vocational path.
    Thank you so much for all your educational videos!
    So grateful to you Adi 🙏

  6. kindly guide me or post a video about "How to connect my HTML File to Custom Domain" and host it in server…i saw in youtube channel..but one one posted video about it..plz post video rregarding this…i am now creating website by using HTML & CSS and java script a simple website by watching youtube and learning and creating…just now purchased domain and hosting….but i dont know how to connect it…html and css created web file with domain and servber…plz guide me….

  8. First I watched new tutorial of JS which is recent uploaded from this channel, I didn't understand anything, even I have watched many tutorials in youtube, It was looking too difficult to understand things….But I found this old tutorial of yours, now I am understanding clearly….I have learnt Web design, figma, html css from your tutorials…..now it's time to learn JavaScript…..your teaching skill is awesome …..console.log(" Thank you and God Bless You"); ……Love from India ❤

  16. the first JavaScript tutorial that
    1. didn't just jump into stuff so quickly I felt overwhelmed
    2. didn't make me do math right off the bat so i felt like walking away
    3. explained things simply enough that i wanted to continue but also showed me the value in each thing i was learning enough that i wanted to keep going for more advanced items

  32. I am halfway through. I am enjoying the course, but I found that some aspects could be explained further. For example, when explaining the selectors, the teacher didn't explain where "paragraphs" come from or how the "querySelectorAll" works. As a result, I believe some of my code did not work.

    Additionally, in the aspect about selectors the following code could have been explained

    for (var i=0; i<paragraphs.length; i++) {

    paragraphs[i].style.color = "green";

    }

Leave A Reply

Please enter your comment!
Please enter your name here