JavaScript for Web Designers

In this course, you're going to discover the basics of JavaScript from a designer's perspective. We'll start by going over the fundamentals, such as JavaScript variables, data types, and loops, prior to pursuing more complex notions such as functions, selectors, and occasions. Along the way, we'll build some examples that are tailored towards what you as a designer may face every day.

Source Files:
The source files consist of the examples provided in the course videos. Use them to verify your code or work along with the instructor:

If this course influences you to find out JavaScript for web development, check out our thorough guide:

Chapters

0:00 Introduction:

0:27 1. Working With JavaScript
If you're not yet acquainted with JavaScript, let's gone through a quick introduction.

4:54 2. Variables
If you've ever used a CSS preprocessor like LESS or Sass then you're currently acquainted with the concept of "variables". Variables are used to save data in a particular format. They can include numbers, strings of characters, and so on.

9:07 3. Information Types
In this lesson, you'll find out about the readily available "information types" in JavaScript.

13:17 4. Ranges
Let's discover the very first "composite" data enter JavaScript: arrays.

20:04 5. Things
Understanding "things" in JavaScript starts with an understanding of "residential or commercial properties". Here you'll discover both of these ideas.

25:25 6. Operators
Let's learn about operators and the different types thereof. We'll begin with "math" operators.

34:07 7. If Else Declarations
Let's now take a look at the if/else statement. If you understand any other shows language then you'll currently be familiar with the principle of conditional statements. If not, do not worry– we'll cover all of that.

38:50 8. Loops
A loop is a piece of code that performs consistently, either a set number of times or till a particular condition is fulfilled. Let's see how we can loop in JavaScript.

45:01 9. Functions
You can think about functions as being "subprograms" which can have their own name, can be called anytime, can receive criteria, and can return a worth.

51:17 10. Selectors
Selectors are excellent if you wish to control the DOM and get to all its components. To understand selectors, first let's take a look at the window and document things.

59:17 11. Events
The term "JavaScript occasions" is perhaps a bit incorrect due to the fact that the events are really occurring on the side. All you can do in JS is listen to these occasions and react accordingly.

1:06:15 12. Back to Top Button
Having actually covered a great deal of theory, let's now practice what we've discovered with some exercises. To start with, let's see how we can develop a "back to top" button.

1:17:11 13. Textbox Auto Conclusion
You'll learn how to produce a textbox that supports auto-completion.

1:31:42 14. Simple Content Slider
In this practical workout, let's develop an easy material slider. We're not going to limit ourselves to images either; we'll create a slider that can display any kind of material.

1:39:50 15. Image Lightbox
In this workout we'll create a very easy image lightbox. A lightbox is generally an overlay that reveals a much larger version of a thumbnail.

1:44:02 16. Tab Control
The "tab control" is a really common pattern, so let's see how it's carried out in this last workout lesson.

1:46:43 17. Last Words
Hopefully by now you'll have a better understanding of what you can do with JavaScript from a design point of view.

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+.
Discover totally free how-to tutorials and online courses. Style a logo design, produce a , develop an app, or learn a new skill:.

► Subscribe to Envato Tuts+ on YouTube:.
► Follow Envato Tuts+ on Twitter:.
► Follow Envato Tuts+ on Facebook:.

Envato Components.
All the imaginative possessions you require under one subscription. Customize your task by adding special photos, fonts, graphics, and styles.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements:.

CSS Best Sellers


You May Also Like

About the Author: csstutorial

24 Comments

  1. Your tutorial is really awesome bro… hats offf…. i learned lot from this.. can you please put another video for advanced javascript concepts….

  2. This is actually the easiest tutorial if you already know Java and need to learn Javascript. Thanks man.

  3. Wow! This is exactly what I was looking for! Wonderful tutorial. Learned javascript, but wanted to know how js ties into web designing without all the fancy libraries. Thank you!

  4. This is one of the best tutorials I’ve seen. I could easily absorb everything you say. Your teaching method is great for people who are not easy learners.

  5. This is straightforward and easy to learn JavaScript tutorial for all learning levels. Kudos.

  6. Quick question: On the content slider, can you make it loop back to the first slide once it reaches the end?

  7. One of the best JS tutorials available. The tutor is very systematic, explains everything in a simple way by which anybody can understand.

  8. this tutorial is number 1! really! you covered sooo many important topics in a single tutorial i can’t believe it! thanks for this! +1 sub

  9. For vanilla autocomplete, how does the value of resultsCursor change as it’s initialized to 0 and isn’t manipulated anywhere in the code (checked the github code as well) ?

  10. This is one of the few JavaScript “tutorials” which actually bother to show how it is applied in the real world. Unlike many others which completely pay zero attention to DOM Methods. So, thank you. 🙂

  11. Best video on YouTube for people who already know basic or little or even know programming, some html and css — This will kick start you with Javascript in no time!
    Thnx for the vid!

Leave a Reply

Your email address will not be published. Required fields are marked *