JavaScript from Beginner to Expert: Learn JS - JavaScript from A to Z | Arkadiusz Włodarczyk | Skillshare

JavaScript from Beginner to Expert: Learn JS - JavaScript from A to Z

Arkadiusz Włodarczyk, Professional teacher

JavaScript from Beginner to Expert: Learn JS - JavaScript from A to Z

Arkadiusz Włodarczyk, Professional teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
83 Lessons (12h 21m)
    • 1. What is Javascript?

    • 2. What you will know after this course?

    • 3. Downloading and installing editor

    • 4. Creating project

    • 5. Useful shortcuts for Web Developers

    • 6. Embedding script on site

    • 7. Basics of JavaScript


    • 9. Variables

    • 10. Arithmetic operators

    • 11. Relational Operators

    • 12. Logical Operators

    • 13. Bitwise Operators

    • 14. Conditional Statement

    • 15. Shortened conditional statement

    • 16. Switch

    • 17. Functions

    • 18. Scope of variables

    • 19. Anonymous functions

    • 20. Objects

    • 21. Object constructor function

    • 22. Prototype

    • 23. Arrays

    • 24. Useful array methods

    • 25. While and do while

    • 26. For loop

    • 27. Break and continue

    • 28. For in

    • 29. arguments object

    • 30. DOM

    • 31. querySelector

    • 32. Changing dynamically styles using js

    • 33. adding or removing elements

    • 34. Loop inside another loop

    • 35. Events basics

    • 36. this keyword

    • 37. onload event

    • 38. addEventListener

    • 39. Event object

    • 40. Propagation of events

    • 41. preventDefault

    • 42. Onscroll Event

    • 43. MouseEvent

    • 44. Time events

    • 45. Time events - upgraded version

    • 46. Validating forms

    • 47. Stopping submit button

    • 48. Checkbox

    • 49. Radio form

    • 50. Select in form

    • 51. String manipulation

    • 52. Divding string in code

    • 53. RegEx

    • 54. exec method

    • 55. check password

    • 56. date

    • 57. clock using date object

    • 58. What are cookies?

    • 59. Creating a cookie function

    • 60. Removing a cookie function

    • 61. Cookie - retrieve function

    • 62. Escaping

    • 63. Popup windows

    • 64. Math methods - rounding values

    • 65. Generating random numbers

    • 66. Random quotes

    • 67. Window Location

    • 68. Preloading images

    • 69. Preloading images

    • 70. Slideshows

    • 71. Animation in JavaScript

    • 72. Animation using setInterval

    • 73. Gallery with thumbnails'

    • 74. Tooltips

    • 75. Firebug

    • 76. Console Debugging

    • 77. Sharing code websites

    • 78. Strict mode

    • 79. Code Performance

    • 80. Keeping one js file

    • 81. Compressing js files

    • 82. Most common mistakes

    • 83. Keeping eyes healthy

12 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Save your precious time by buying this JavaScript course. You will learn how to program in JavaScript in a fast and easy way!

The total length of the JavaScript course is over 12 hours! You will learn theory and you will also gain lots of practice. During the course, I will explain to you how to write real-life applications, like galleries with thumbnails, image sliders, etc.

I will do everything so that you understand JavaScript. After this course, you will always understand the code you are writing. You will understand all concepts and create your own applications!

After my course, you can become a front-end developer. JavaScript is a very demanded language by employers.

The course is designed for people who don't have any knowledge about programming or want to truly understand JavaScript. It doesn't matter if you have never written any programs or you have no idea about programming... After my course, all this will change. You will bust the myth that programming is a difficult thing only for the few!

JavaScript will bring life to your website.

By life, I mean inter-active, animated elements like:

  • tooltips
  • image sliders
  • forms with pre-validation
  • slided panels
  • galleries with thumbnails
  • menus
  • and many more

Learn JavaScript in order to improve the user experience on your website, which will result in more visitors and sales, because happy visitors = a better reputation for your website.

JavaScript gives your website additional functionalities that can be executed on the user's computer without re-connecting to the server. This allows you to do things that you cannot do with only HTML. Because of this, the user interface becomes more friendly and more inter-active

Javascript is a programming language used for creating dynamic action on your website. If you want to remove/change/add content to your website dynamically, you must know JavaScript.

After this course, you will know JavaScript perfectly. This is the most organised course about JavaScript from Beginner to Expert on the whole Internet. I will take you step by step from theory to practical examples, like image sliders and animation.

Understanding JavaScript syntax well will allow you to also understand jQuery framework better. jQuery framework is a large library of useful JavaScript functions that allows you to write less code while at the same time accomplishing much more.

What's more, JavaScript is required to understand AJAX which allows you to load content on your website without reloading the whole website.

As a front-end developer you have to know HTML, CSS and JavaScript perfectly.

In addition to this, I'm adding two BONUS sections about Debugging and Best practices for developing clean, easy to maintain and well-performing code in JavaScript.

JavaScript is necessary for becoming a front-end developer. Imagine a situation where you have a clock on your website. You would need to request a new value from the server every second in order to update this clock. With JavaScript, everything runs on the user's end without re-connecting to the server. Just imagine what a mess it would be if the clock needed to reset every second. Your webpage would have to constantly reload to update the content, destroying the user experience. With JavaScript you can update the content without reloading the webpage. What's more is that there are advanced libraries for JavaScript, like AJAX, that allow you to connect to the database and retrieve information without reloading the website. To sum up JavaScript 'runs' on the web-browser of the visitor of your website.

Become JavaScript Expert today!

Meet Your Teacher

Teacher Profile Image

Arkadiusz Włodarczyk

Professional teacher


I am the author of 27 very popular video courses about programming, web-development and math in Poland. I've also created 7 video courses in English. Over 250,000 people enrolled in my courses. I put all my heart into creation of courses. I always try to explain everything the easiest possible way. I'm sure that my courses will help you in the programming and web development adventure :)

I believe that everyone has the ability to develop software if they are taught properly. Including you. I'm going to give you the context of each new concept I teach you. After my course you will finally understand everything that you code.

I've been developing websites for over 15 years and i've been programming for over 10 years. I have enormous experience in that matter and I want to sh... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. What is Javascript?: Hello, my friend. When you're learning something new, do you ask yourself many questions like why do we need events? Why do we need loops with our day? How do we use them and so on and so on? If yes, then you are in the right place because I will answer all your questions. Looking like that. I will explain you in discourse everything from the basics toe advance compliments off the JavaScript so we can become the expert. Discourse is divided into 23 sections and it consists off 85 lessons. It is over 12 hours off. Great content. You also gonna find here loads of quizzes and exercises. I will explain your syntax off the JavaScript and well trained the syntax. During practical examples, JavaScript is giving your website additional functionalities that can be executed on the user computer without reconnecting toe the server. This allows you to do things that you cannot do with on HTML. Because of it, the user interface becomes more friendly and more interactive by interactive elements. I mean things like two deeps animated insiders force with privilege, validation slided partners, galleries with companies and many men, and more and well you might be asking yourself what you will know after discourse. After this cozy will be ableto right coding. JavaScript on any level of difficulty creates creeps like Dynamic gallery with family slide shows at cetera de Bagger Kotick and keep your coat performing well and much, much more. You understand things like variables, all operators, conditional statements, functions, areas, objects, loops, document object model events, regular expressions, cookies and minimal. You have got more information about this below the video, okay? And what you should know before discourse, you should understand the basics off HTML and CSS. If you know that you can easily work these cars and you might be asking yourself, Hey, but why should you choose my course? Because you have my help regarding cover topics if needed. My courses are updated. I have thousands off satisfied customers, and these cars is led by me. And I am very experienced person, and I'm not gonna talk like they're about as you can see, and I want to make your time spend well in a good mood. You can download a lessons on your computer disk. I do not assume that you are a pilot, a Lightman other teachers. I'm adding source coat free, Preval essence and well, who am I? My name is our Kardashian Ladakh trick. I don't like to talk about myself, but well, as you can see, I have got an experience in this matter. I've been programming for over 10 years time and I have been developing a website for over 14 years and I am altered off 27 video courses in Poland. I have created also six video courses in English. I am teacher off thousands off satisfied customers. There are many comments about my courses and here is one of them. If you have any questions regarding cover topics, please just ask me. I really love helping other people create a discussion. I will be glad to help you. That's all. Thank you very much. 2. What you will know after this course?: Hello today I would tell you about his JavaScript and why it's worth to learn. JavaScript is a programming language for Web browsers. So, for example, for Firefox, Google, chrome, Internet spur and so on, you can create in Eat a coat, which is called a script that can be executed on the visitor off your website computer, which means that when you finish loading the website, so let's refresh it is you can still access elements on the website and you can change them , right? So, for example, when we have got here a gallery with calmness with these miniatures here, as you can see when I am using my mouth over one of the aim it the image here, the main image is being changed, and it's very useful because now you don't need to take so much space on your website, and you can show the product in the bigger version very easily. Right. As you can see, this is improving the user experience on your website and in addition to these, as you can see, we have got a tool tip here, right that is giving additional information about each off this image that is very very cool and it's improving, um, their user experience. So HTML is responsible for the content of the website. CSS is responsible for the layout and JavaScript. It is responsible for reacting to the user actions and doing things with HTML and CSS on the user side after finishing the download of your website because normally without JavaScript, you wouldn't be able to do anything on the user computer, right, because after connecting to the server your and down holding the website, the user is not connected to the server anymore. It's just look his computer. That's all you could. You could close the connection. You have got still access to this website, right? So javascript can be used for also many other things. Not only galleries with combines, you can create something with this called slided panels. You can create things like transitions between images, well, images that are changing each seconds. We just could slide show panel. You can use it, for example, on shop webpages, where you can show many products in one small place, right. You can create promotions and many other things which makes your user experience better, and JavaScript is necessary for becoming front and developer who is responsible for the things that are done on the user side. Right. Imagine a situation like that where you have a clock on your website. You would need toe every second request to the server from the server and you value in orderto update this clock. We've javascript. Everything is a rounding on the user side. We were reconnecting constantly to the server So the javascript can be used toe ab the content off your website and placed a dif. You can, for example, change the size right and can show something. You can create a tool tip next we that if you can, for example, change their source attribute of the image here you can do some kind of animation. All that things are done in Java keeps changing dynamic. Anything's layout on your website is something that is down in javascript. But once more there are advanced libraries for javascript like Ajax that advise you to connect to the database and retrieve in for without reloading the website, for example, when we go here, as you can see now, when I click here, I am not reloading my website. I'm just changing. Displace you and all that content is taken from the database from the peach being my school . If you don't know it yet, don't worry. Just remember that you can even use it for in with advanced libraries to create literary website that do not reload refresh, Don't do something like that, right? Refreshing. That takes loads of time. Right? So this is very, very awesome. And you can also use javascript toe pre value date. The input informs like, for example, with the password was strong enough for the email use, right and so on. Before sending these values to the server, you can show special box informing user what is wrong in the form we've other resetting resetting his values in four. It makes user experience on your website. Loads of better understanding, double skip syntax. Well, we allow you to also understand better something would just called Jake. We're a framework. And Jake wear for framework. Visibly beak, library off useful JavaScript, blue jeans functions. Thinks that allows you to write less coat doing much more. Okay, there are already many things done that you can just use, but in order to understand Jake Query, you have toe also I understand. JavaScript. So you so you know what's going on there Right after my cause? You will understand all JavaScript, advanced compliments. So you will be able to use any libraries. As you wish. So you know javascript perfect. This is the most organized cars about JavaScript, from beginner to expert on the whole Internet. I would take you step by step from the theory to practical examples like Amy sliders and animation. If you have any questions, feel free to ask and diesel in the lesson. Thank you very much. 3. Downloading and installing editor : Hello everybody. Today it's time to download an editor that we're gonna use to learn java script. As you can see, we can now use then the beans that you can download from this side here. As you can also see, it can be used to programming in Java to create websites using HTML5, PHP and much, much more. That's why this editor is pretty cool. I really like it. And it's also free. But you might be asking yourself, hey, you know Iraq, I know other programming languages and I've already programmed in other editors. Do I need to use NetBeans? And if I want to follow, you know, you don't, you can use an IDE, you want, you can use an integrated development environment, right? Because this is what IDE stands for. So you can use Visual Studio cope, you can use Aptana, you can use brackets, you can use Sublime Text. You can use Notepad Plus, Plus. Yeah, you can even write websites using the upgraded version of Notepad. That's up to you. The most important thing for you is when you are choosing the editor, is that it should suit you. Okay, so what is required in order to install NetBeans? Well, we need something what is called JDK. However, it's good idea to use the open version so you don't need to worry about some licenses and other things like that. Okay, so let's typed into Google, adopt Open JDK, and let's open this website here. And as you can see, you can download here version eight, version 113040, maybe even higher. But to be honest, it doesn't matter regarding JavaScript, what version you're gonna use. Okay, so let's download the latest release. When you click on the button here, you're going to download the version for Windows, okay, but Eve, you want for other platforms version. Then you click on other platforms and here you can choose a, you can see Mac, Linux, and so on. Are we going to focus on the windows? So let's click here and let's save it. Okay, it's time to install it. Let's click OK. Next. We'll read the license, of course, except next. And here is very important. We should choose it here to install it. Okay, so remember about choosing this option here, okay? Because otherwise there may be some problem in finding the JDK by other programs. So next, install. As you can see, the installation process is pretty fast in this case, let's click finish, and we can now download net. So let's click on Download button. And here we have got diversion 12. These can be higher. For example, ten to 1415. It's really see is the versions are coming pretty fast as they do not change March, especially regarding to JavaScript. So don't worry, there is a higher version you okay, let's think now download and here we can choose one of the installers. We go not choose the one that has windows here you want to, if you are using the nanoscale conducive, usually Marquee click on death, let's click on Windows. And here you need, you can choose one of the mirrors. So one of the HTTP links that has got that NetBeans that you can install now. And for example, let's choose the first one. As you can see, it's working so now it's being downloaded. I have already done all the data as you can see, so we can start installing NetBeans. So let's click on NetBeans. The installer is configuring the installer. And now here is a button that is called customer mice, which allows you to customize the installation. Ok. You can, for example, click on this and this because we don't need it, right? We can uncheck Java because we're not programming in Java in this course, we are programming in JavaScript. It's good to idea to left the PHP checked because PHP is connected to web development, so you might need it in future, right? Let's click OK. Next. And of course now it's time to read the license agreement and excited. And as you can see here with a Java environment that we installed previously, that was required to install NetBeans. Without the JDK, we just wouldn't be able to install NetBeans. That's why we had installed it. Okay. That's just the requirement. So don't worry about the versions of JDK. And here is the place where we're going to install our NetBeans, right? So let's click Next. It's good idea to check for updates. So we have got our NetBeans always up-to-date install and it's time to wait. Okay, the NetBeans has been installed properly. Let's click on Finish. And in order to open it, we need to type in the search engine in the bottom left corner, NetBeans, as you can see, I found it. And here we have got our NetBeans where we can create new projects, where we can write our JavaScript scripts. By the way, you will have to do that in future lectures. If you have any questions, as always, feel free to ask. Thanks for watching. 4. Creating project: Hello, my friend. Today you are going to create your first project in the Net Beans and in the same time you will know how to structure your projects so it's gonna be easier to maintain, Okay, so how to do it? In the left corner, as you can see, you have got something like file. You're clicking going in, then you go to the new project. Or you can use the shortcut Control plus Shift plus n. And as you can see, now, I have got these menu here that we can use. All the shortcuts are presented to the right side of the menu item. Okay, so let's keep New Project. And as you can see on the left side, we have good something like categories. And well, here you have got free folders, HTML5, PHP, unsampled samples. As you can see, I have some kind of sample projects created by other people. There must some demos, demonstration of some kind of libraries for JavaScript and other things like that. You can play with them. You can see how people create projects, bigger projects, how they use some kind of libraries. But we will focus on HTML5. Note PHP, because it's not a course about PHP, HTML5, but it's not curse about HTML5, you might think also that's true, but HTML was created for forbear, all browsers only for browsers. And JavaScript is also created only for browsers. In order to run the JavaScript code, you have to connect it with the HTML5. So you have to create an HTML5 application, okay? And in addition to these, HTML5 brought to life well many new tools which are called functions and that are also very useful. So we are going to create HTML5 application. You can choose the HTML5 application with existing sources. If you have existing sources, use desorption. If not, use the first here. And now we click next, as you can see here, now we have to type the project name. You can also choose another look, look location if you want to change it. But Well, in my situation, we're just naming, for example, JavaScript Angular project name. You can type you whatever you want. Okay? So I will click now only finish. And this is, you can see it created for us one HTML5, which has goods here, some kind of comment and title and meta tags bolder. And well, we have to now come on up here our JavaScript file, which will do in next lesson. But in this lesson, I will also create a structure for our JavaScript file. So how to do it? I will get here, me, click right click here, and then mu. And as you can see here, we have got many type of files that we can use. We can create folders. So for example, OKC folder. And here I can type the name of folder, and now we call it JavaScript js, right? These are shortcut. And well, why am I doing? I want to keep all the files in one folder that are connected to JavaScript files. Why? Because, well, maybe at the beginning you will have only 1-5. But the truth is that in the bigger projects you might have many JavaScript files. And while you might have also many HTML5, PHP 5S, some template phi, some configuration files, some CSS files and other things like that. And then it will be hard to spot them, right? It will be hard to maintain all this code. So it's good idea to keep JavaScript files in one special folder, and that's how we do it. The same like you do when you have CSS, right? You have got the special CSS folder where you keep your CSS file. So here we are going to keep JavaScript files. And in order to create a JavaScript file, you click here and right-click New, and then use the JavaScript file. When you do it, you can now just type the name of your JavaScript file. You don't need to add the extension ab.js, which is for JavaScript. So now we can type, for example, screed, whatever you want here, right? This is a filename, but well, it should start from the lower letter will, all should be low, low, lowercase. Okay, that's how you should, you should call your a script. Now let's just click finish and you have good. Now the Javascript file, as you can see, is empty. You can, you have got some kind of change this distance had analyses like that. This is called a comment. I will talk about it in the next lesson. Lessons. So this our first JavaScript file, and you have to now just connect to it from the HTML. And we'll do it also in the next lessons. But what I want to say also in this lesson, well, you know, you could create this, all these things manually. Look when you go here to the properties, as you can see, we can go to the project folder. I would copy it, and now I will paste it here. And as you can see when you go here to the public HTML, we have got here the CSS, JavaScript and indexes index file. We could create them by just creating textFile and saving jazzy as an HTML or as the Javascript file. This is just typical. Nothing else, nothing special files, right? You can create whatever you want plies and it will just run. You can now open this. Think pretty easy. In order to do it. It's just double-click it. And as you can see, it opened inside the web browser as you can see. And it's working because he's an HTML5 and JavaScript fear is gonna be connected by us in next lesson. And it's going to also run in our browser, right? You don't need to add a special server for it. It's just going to run inside your browser. And you don't need to use the net means you can use whatever you want. These the sample structure, this is how you create a project. And well, I invite you to the next lesson. Thank you very much. 5. Useful shortcuts for Web Developers: Hello, everybody Today are we show you the most useful shortcuts used by Web developers and programmers. Well, all these short cars are gonna save you lots off tones off time. So it's like must to know things. Okay, you have to know them in order to save loads of your time. Why developing websites or programming? You know the plant of situations where you have to move your course or so Iran and instead of it you can use the shortcut because you have good keyboard you're typing in Cuba, and then, you know it's hard to move your hands to the mouth. It's taking time and always maybe 12 seconds. But but imagine that you are going to spend lots of time writing the coat. It's gonna save you each day. For example. I know 10 minutes and when you multiply it that 10 minutes by the wall year, then you have got loads of time, right? Lots of time saved by knowing these shortcuts. So Okay, let's begin our adventure. How to save the fire instantly. You know, I have got even a habit right now like that when I do something, I will just counter plus safe use the short cut cut like that. And I just say instantly, you will not ease when you, for example, watch next videos that I been saving instantly after changing anything. Why? Because we're you know no, every editor. Ah has got something like, for example, saving automatic Kelly. When you lose your for example power and you can lose your work Eso it's good idea tohave habit to doing something like that. And in addition to these, you have to save the final to see what change right, for example, in the brother. So I'm just saving instantly after every change, that's just ahead. So it's very good. A good shot next to us. Got our country plus C and counter plots. V well, you can copy and paste things. For example. I want to take this thing and I want to click enter and counter plots V and well, as you can see, I just cooperated. So it's going to save your time when you want to copy something and change, for example, or something like that. Here and then again, huh? I want to just cup it on bomb here. As you can see, I called by a company that beat faster because I didn't want did something like that counter plus e. And then I didn't use my mouth. I used the end shortcut whether a king on the keyboard and then I could enter encounter plus V So again I didn t smiles. I did it a bit faster. And now look, I would do it even faster. I'll use the shift plus home country plus C and enter counter plus V right, And now faster Bom bom bom bom. As you can see, it is taking very small amount of time, right? Instead of doing something like Mm ah Mm. Right. You're saving laws of time by doing things like that. Okay, now is a cap. The card is used, for example, when you want toe cut something out. I don't want this titled here. I want to cut it, and I want it to be here. Right. Um, it's like a copy bodied scouting get from the place. We are complying, but well, you know, this is not a good idea to have the title here. Oh, my God. I made a mistake. So how to do it? Well, I have to again cut it. Now I can use the counter plot, z, and it's gonna undo the things that I did that's critical and useful. Sharks got also and you can read it the action. So, for example, well, I was wrong and again so I can go back to this situation again, right? Using these counter plas y next very cool contra plus f You confined things as you can see . For example, I want Tosi where I type something like that. Or where is Dave? Instantly I can find things right. So country plus f country plus a is gonna sell like all your fights of, for example, who I want to just counter plus a this thing control policies occupying it. And I want to create a new Faisal new html five shortcuts HTM. And I'm going to cooperate here. Right? Okay, let's practice. Ah, the shortcut that we have. Just So for example, I want to create an hour orderly, so I'm gonna create something like that. Well, I wanted at the end. So how to do it? I could Selig it like that, but I could We could also use the shortcut that is presented later like, for example, shaved plus And so how when I do something that she plus and I'm gonna select from the carats from the blinking thing till the end off line And now I'm just cutting it because I don't want it to be here Contra plus X and I won't need it The end of fire. So here and I'm just combining. And as you can see, it's now not in good place. So I'm using the top, right? You can also use you. Can you stop to invent something you can use? Sheep will stop If you did Did, for example, something like that all the time. It's not good, right? So bam bam! And I'm the rights built. So we just ah, used to new shortcuts, right? Like that, for example. Okay, so let's now for use the at least item. So I'm going out the stuff like least I 10 and stuff like that and you can see it's not working good. I'm using the counter plus Z. I want all of these things indent indented a bit more, so I'm gonna just select all these things and I'm using top. As you can see now they are indented a bit more and I want at least item a bit farther. So like that. And now I want what I want at the end. Least item like that. I want this to all these lines. Apply it to all these line how to do it pretty fast. I can select it and I can copper it as you can see. Like that, for example, so I can do something like bomb balm. The problem is that, as you can see, we have got the top here. So it's probably good idea that to take it down to something like that, So we don't need to every time. Ah, do the inventing stuff and deleting. So let's something that and then just go down. Bomb home bomb home, home, home, home, Home, Home. I'm using the key home. Right. So I'm going to the begging off the mm line like that. And well, I did a bit faster, right? Because of it. And now I wanted the answer. I'm just taking this on dress, typing that And so I'm at the end. Bomb, bomb, bomb bomb. Um, and we did it a bit faster, right? Instead, of doing so. Effect these just slow. Okay? And now we just want to Internet bom bom. And we've done our work pretty fast. Of course it's gonna be so, so injured Job escaped later, but that's how it works. You can, of course, sometimes want to copy the line and well, you can do it two ways. You can do stuff like home shiftless and counter plus e and enter and enter as you can see what a country plus fee as you can see. The problem is that sometimes you have got the Indians because, well, I just did a home and but I type two times home. Then I went to the end and place and then to the beginning, and because of it I compiled the end. And also But it's taking some time also, right? You can do it a bit faster by using control plus Chief and Roky down. It's getting now in combining all these things done Pretty awesome, right? So that's how we do it. You want to copy things down? Unlikely. You will not have this shortcut in every possible editor. OK, this is not available everywhere and next thing is Well, I want to, For example, do something in the next line. I'm drunk. I just click shift plus enter. As you can see now, I don't need to use the mouse to go to this place. I can just shift was enter and I am here and I can just type in the next line. I do not need Teoh, you know, do anything else later. There's a SoCal shortcut to jumping from the beginning and to the end to the end of fight control. Plus come and control Plus and you can off course also, for example, select things from the beginning to the end. So, for example, I I'm here, for example, right. And I want to delete this comment You how to do it. Well, I could do it by shift and doing something like that using the arrow keys. Or I could do something like shift plus control plus home. And now I am at the beginning of the fire on I could use the shift to de select one line with the Roki down and then did it pretty awesome. Isn't it on? Well, as you can see now, we just needed this thing could go control plus chief. Uh, and and as you can see now, Arkansas, like all these things to the end, I could just copay did another file, something that right When you go to the script, you you can also notice that there are things like cold snippets and you can do something like, for example, type a L and then use the tab lighter. And this can see now it instantly generated for us some cold. There are lots off stuff like that that's going to see is generating for us some cold. We talk about this cold later, and But if you want to find out more about snippets, you can go to tools options to the CO 10 places you can see Now, here you can fight things about HTML. You can find things about JavaScript, and you can well create on your also some snippets. And it's gonna also save you time. Not all the leader said snoopers, but as you can see, if one of them has something like that is gonna save you some time. Sometimes you want to, for example, also select Nope, only one let later letter by using the ship and Roky you want to select? For example, Full David, once I'm gonna use the counter plus shift and the arrow que left right, as you can see, then I'm selecting world one by one. So you can, for example, how I want justice content. Okay, Sign doing something like that. Bam, bam, bam, bam! Counter plastics. And I don't know if every day any more right, you can bomb and it's gone And his bag Because I use the kind of blood See right. You can use shortcuts to increase well to decrease the time needed for the web development . I really recommend you to well, practice all these things to, for example, print all these things. Ah, on your company on your printer so you can, you know, check them out, learn them. And after a while you will notice that you're saving lots of time because of them. I really recommend them. This was a bonus lesson and have a good day 6. Embedding script on site: Hello, my friends. Today I will show you how to embed Java. Skip scripts on your website and in the same time I will show you how to do it the way that we mega website load really, really faster. It can even save about 1 to 5 seconds. It depends on how big your website is unloading spit. So it's very important to do it properly. Okay, so how to do it? You can insert your coat in bat to the HTML internally or externally. I will show you now the internet way How to do it? You're gonna use the script, talk like that. And then between the opening and closing talk, you just type the script. So, for instance, every type alert and then I will just type that This is the most simple script. It doesn't matter. What is it? What is that function? What is this parent? Is is what is that Aled Things around here that semicolon other things like that. We will talk about all these things later. Just think about this is a script that's gonna alert the person on the website and say test . All right. Hello. And now when we're on this lookout. When we use this feel, we want to choose the browser. I'm treating Firefox and night Greek play. As you can see, we have got here now. Hello? The window. Think hello? OK, and doesn't concede. Then I can see the content off our webs. Okay, so that's how it works. We have good script that is doing something like that, and that's doing it internally, right? You can also put this creep lighter. So, for example, here and there are some differences between because off it. But first, let's think about even thinking about putting something internally These very rare situations. When you want to do something like that, you want to do things like that very rarely when you want to put something into the screening that exactly place and the only in that situation. Why? Because when you do something like that, that couch is not gonna be cost. This is the world cashed. Okay, It's not gonna go into the cash, which is a temporary memory off your browser. And because of it, this gold is gonna be loaded each time the user go to another side of your website, so it's gonna slow your website that All right, so it's good idea to have it in one place. So, for example, like here on, Well, we do it like that. So we want to the coat to be here. We don't want it to be like that. And we want to import it how to do it that well, we can do something like type something script, and then we can use the attributes as are seen from which stands for source. And here we tied the source. So, for example, like that. And now we just imported this fight here. And when we refresh it, as you can see, we can still see Hello here. Brady's right. So it's there external way of doing this thing in old HTML. We had to type your also something like type and say that it is that JavaScript script by but by default fold. Now the script is javascript from scenes the html five. Ok, you don't need to, um, think about things like that animal. But there is a swell still one small problem. What is it? Well, look at this. When I really love this website against hello And then when I click. OK, our website content is loaded When I put this here. As you can see, our content is already loaded And while I can see then Hello? Why? Something like that happens because, well, I would tell you know how exactly your weapon is loaded. Firstly, you as a user would connect to your website and then you would download your HTML files. So for example, index dot h dot html And then something What is called a part, sir, we just processing and interpreting everything inside. So, for example, talks when it meets something like script, it stops totally executing while parsing other things. So if the script is here, it will go toe html. Also, it is an html document. The head also, I have got here additional information of our of our website off these websites. Oh, a title. Okay, so I have two dead. The titled for our use. Their okay. Oh, he's using the car Sit like that. Vieux port. Also, this is for Web responsive Web design and oh, script. Okay, So before going here, I should go and execute everything inside it and then go to the ball. This section and now you might be like Hey, but these just one line it's not gonna slow. It doesn't matter in that situation if the website was like that. Okay. But now imagine that your website is really big. Okay? Really? Really Be There is, like 500 of coats and you don't have only one script. The dark joyous you have got here like 50 off them. What happens? Wow. Imagine now something like that that it would go to all these scripts and then after executing all the things inside, it would load the happened. What would happen? What? Your user would just not see almost anything, right? And after loading everything, then he would see the content of the website which is very bad, right bread for our users. He would just leave probably our website. We cannot allow something like that. That's why most people just pulled the scripts here. But there is a small problem because when it put scripts here, we do not download them instantly. Right? So when the content of the website is low that it's gonna be loaded down, right? It's not so bad most situations, but well, imagine that their manuscripts also so then they are. Don't know that a bit later. So that that's not good, right? And sometimes the scripts are doing something with the layout of your website. So they are changing something, the calorie stakes, other things like that. They're moving something to other place. And now imagine that the user with the script here would just see the content of your website. And this content is gonna change. And his eye eyes, right. He would just look at this website and it's gonna change when each of that genius kid fight is gonna be loaded. That's also bad. So Well, what to do, How to how to change it. Some people would put something scare some things here. Yeah, but because off html five, we have got something. What is called a new attribute with this, which is called, I think, which stands for S and cronies. I would type this world here as Syncronys, right? And well, it means that the script is gonna be loaded in the same time when or other things are gonna be loaded, right? It's not gonna wait for the script to be executed, which is by default how browsers are loading your site, and it's just that all right, you're just putting this thing and everything works fine. But because if you have more than one screen, so you have something like that. Skipped one skipped straight to script free. And for example, um, your user will download this one first it's gonna be executed first. It is not gonna be executed then, like days. Then days. Then these, then bomb, bomb, bomb, bomb. Right. Because of it, it's good idea to use the world like differ, which is the same as S N Koreans, but it's gonna make it run one by one. Okay, it's gonna wait for the scripts to execute in that order. So when I do it like that now, you can see when I reload these website, we can see that the content is loaded and we can see the Hello, Right. It's working like that Now, if I remove these world as you can see, we don't get content. We have got content after peaking. Okay, so this is the best solution. You can have to do something like that and I suggest you to have all fight well. All screams in external source, right at because, well, it's easier to maintain your code than right. You have got the Java scraping, another fired steam. Another fights of is easier to maintain. You know, where is your scripts? It's gonna be cashed. So it means that your website is going a lot faster on Dwell. Ah, you have to also remember that do not toe create too many javascript files because if you have many javascript five well, it's easier to maintain your project. But the website he will also load slower because if you have many JavaScript, if eyes and h the http protocol is allowing you to only download about to fight at once, it means that they are gonna be many requests to your server when the user is visiting your website on because of it. Well, that because the requests are the slowest things because you have, you know the user have toe connect to the server, where is the website and then go back. This is something put is taking the longest time. And when you have manage of us, keep files, for example eight. You have, like, four times, something like that, which is maybe sometimes when the Severus very far. One second just for, you know, not downloading, but just for connecting. So it's taking loads of time and because the video website is gonna load faster, so the best website will be just one javascript far. So it will be great if you had manage of, ask it fights and then to maintain your Cody's here and then at the end, when you want to put them at the Web Web server, you want to connect them. But, you know, connecting something like that every time when you change something, What we do takes much time so much time. Most people do not do it. But you can use something what is called grand jury s, which is a task manager that would do it automatic California. I have got the course about this thing also. But if you want well, you can do it. Also, some manual, right? Okay, so the best think too smart is to put the script here in the head because it will be the first test. But you have to remember to put this key these attributes otherwise and will not be the house and well, you can check. How is it supported because no, it's from html five. You can goto it cannot use dot com and type your Essen Cronje's. And here you can type your country and, as you can see when we go to, for example, Internet Explorer. Um, well, Internet experts six and seven is not supported eight and nine. As you can see, Firefox's all five foxes are not supported. But when you add all these numbers, it depends. Where will you leave? Right? It's probably like 23 people on 100 coming to your website that be not supported. But you need to remember that you are helping all other users to load your website faster. Right? Well, they will see your website and the way did you put it here, Right. But you will make enjoy your website more for users with than you with the new brothers. I think that user that Devil Brothers knows that I don't know the enjoy as a hot Ah, the Internet as the guys with the new brother. These you make them change it faster. Your website. We'll load anyway. Okay, that's going that lesson. Thank you very much. 7. Basics of JavaScript: Hello. Today I will show you the basics off JavaScript. In order to understand JavaScript, you need to know how everything is execute. Well, this thing here is a script. It is a program. When what is a program? Well, a program is a set off instructions that must be run by a computer. Okay, so and that's it. In our situation, we have got here some instructions, some white spaces, white spaces are enters and top ally, it's yours and spaces and other things like that. And to use that Coleman. So all these things must be interpreted by something. The's program is called the parcel that is interpreting these things and they must be executed. And all these instructions are executed by the browser. And, well, the browser executives occluded by the PC. But I overcome personal computers, right? So everything que is gonna be executed from it's very important from top to the bottom. So you interim every bird that you need toe read everything line by line, and you need to remember the devi um hey, chametz like it's your fold. Okay, because, well, everything here, the syntax. So the way you write, he's gonna be interpreted by the parcel. We need toe right? Exactly. In Hiss language, right? Otherwise, you will have problems. Okay, so let's try to explain how this got here is gonna be interpreted by parcel. Let's imagine that I'm a part sir. Okay, so I am at the top. I just loaded the script Dog Js and I'm gonna execute this fight. Okay, so wow, here is a backslash. Okay. What is next? Oh, here's an asterisk, son. Oh, so everything after this is not gonna be executed to me until I met Until I meet the next asterisk and the backslash, this thing is a cold. This thing is called common. And this thing is not gonna be executed. It is needed if you want to, as it say's Coleman something right? You want to add something today? Fire that is not gonna be executed. I'm talking about the late later more and they're like, have some way spaces I do not care about. This is and whoa! Here is something. Here is a key work. It's a que water. It's important word that means something to me in my language. I'm javascript parcel, and this world stands for variable here are die bit. So this is a place that can Very. And it's label its name is X and I food there by using this Hein five. So I put five into memory and this is an instruction. This instruction because I ended it with Sam ical every instruction, every you know, I think that you have to do I think that you will think that you tell your parcel to do It's called an instruction, right? And it must be ended with the Sani column. Ah, and then you have good next variable and then you give white space and then you say, Hey, I want toe alert people on our website that it is 11 right eggs, plus why five plus six is 11. So this is gonna be interpreted by me and then executed by the bras. Um, because everything is reading proper body. I could make me sticks right Like that. Well, look here instantly. I I have good message that it's wrong. Something here and that you can see now it's not working here. Know them. The more so you can't you ride anything going on, right? You have to ride in the language we just could JavaScript and we learned the syntax of Java skipping. Next lesson. I would talk about vory booze function, other things, much more. So don't worry. Right now, I'm just telling you how everything is executed. And look, now we have got here as Sammy column, and I would type you the Enter and Hugh Andrew and here and here and feel with this thing. Grand, as you can see, is running instantly like nothing has changed. If I was a person, I would have problems. How is it working right? But for the parson, doesn't matter. Even make white spaces. You could have everything in one line, so we can. You can even mean if I this JavaScript later and we no matter at all, you will have smaller, fine, right, but for you in order to a mating pretty easy to cook, Clear coughed usual make spaces in some places. So, for example, do not do something like that because it's harder to read later. It's better if it's like that. You can omit most time in Java street. Nothing, never programming language. The semi column. So the information that this was an instruction as you can see it's still working. But it's good idea to place this semi colon here because, well, it's easier to maintain your coat. It's like, you know what you are doing right? And it can sometimes verily make some programs some errors. So it's good idea toe. Exactly right. Programs like I do. You will see next lessons how I make the tape tabulator. So the Indians, right? You will see how how I typed for things like, for example, spaces because space here is important. But space here is not. That's some kind of conventions. And try to just write things like I do and you will have a nice clear called that everybody will just love. Okay? And this is very important because you as a programmer, we work with people later, right? And they will want to read your coat. And you know, even you if you read nice called after, for example, going back to your coat after like I know one month, even last, you would not understand everything there that's got programmers work. He just do something and then you forget most time and well, it's good idea to just write things properly. Nice beautiful. When they are like that. You just come back to your car and you instantly recognize you. Remind yourself what Waas all the things about, right? You just come to your cul De Luca did it and Wow. Okay, this world like that. Okay, so that's how things are executed. Remember? One line by lot by one from top to bottom. Most times there are some extra expect X exceptions that I would talk about in next lessons . But most time is like that. So remember that well, it did something like, for example, that you will have problems like not a number, because it's not one by one. So every time you make a music, something isn't working. It's only your fault, Remember, Because you have to write in the job Oscar language like where it was expected. Okay, the zone. Good lesson. Thank you very much. 8. Comments: Hello Today I will tell you what are comments and why are they so much need it? Look, comments are used because sometimes you do not want to execute some part of your coat. And as I said in the last lesson, when you do something like that, it's not gonna be executed. It's not gonna part right. It's not gonna be right when your parcels see something like that and he will then just wait for something like that. So this is a multi line comment you don't need Asterix between. This is just something that is added by editor. You can just type your things and all of them doesn't matter. But if they don't not matter, why do we even add them? Why? Because well, look, even here In the last lesson, I created also single line comment that was not interpreted, Why I edited because I wanted to tell you that you know that variable stands for variable. So what is the purpose of this common? Well, I wanted to explain something, So if you want to explain something, you should use the comment. If you want to make your coat easier to maintain, you want to use a comma. If you want to test something, you want to use comment. Look, you want to also use comments when you want to set listens for your, for example, JavaScript. Find as you can see, to change this license gather you don't need to go to somewhere, and you couldn't change it to add to average of us. Could fall your name at that, Sarah. So you can make it to inform about something. But you might be still wondering why it will be easier to maintain cold like that because, well, this month's move off this very small. Now imagine. Imagine the situation where you have got, like, you know, 500 lines of code and you wrote, You've just written them and you're proud of yourself. Everything is working fine, great. You understand everything. But then you just go away from this project and you go to another project, another project, and then imagine that you are going to back to this project after like six months. One year, two were Stein. And then when you go back, I guarantee you that you will have emptiness in her mind. You will not understand anything. Almost Well, you, of course. After some time, you will understand the code, but it will be after sometime, right? You have to teii time to understand it. And then things like X variable is used to blah, blah, blah, blah. Blah will be very helpful. These these function that something like that. This mom, that's something like that. Things like that are gonna be helpful to you and in the same time, remember that you're not writing on Lee. Always called for yourself. If you are going toe work with other people, comments are gonna help. Also, the people who are working with right with the comments they can adjust. Read some Redick comment and they will understand your coat, Foster. Right. So it's something Teoh. Remember? Remember that you shoot, create comments in order to major coat. Easier to maintain and make it clear to everyone. Note on Lee, others, but also for yourself. Because of it. In the future, when you go to back to your project, you're gonna be happy instead of seeing a disaster. You said off not being able to understand things there you were just instantly. I understand everything, and you're gonna just change the thing that you had to change. Okay, so that's only the lesson. Thank you very much. 9. Variables: Hello Today I will tell you what is variable how to use it and why to use it. Okay, that's very important. Topic one should be used something. What is good? Okay, let's start from how to create it. In order to do it, you type a word var and which stands for a variable. Right? So this thing informs our part, sir, that we gonna create some variable. It means that we go