FAIR ADVISE: Be sure to follow the steps provided in the video, This will help internalize your knowledge on a deeper level.
Comment Below
Video Transcript, Enjoy :-)
Hello and welcome to another lesson of iLoveCoding.
In this lesson, we are going to shatter your fear of code.
If you are afraid that coding is very complex, it's very difficult, it's for people smarter than you, and you have a mentality that I'll never be able to write gibberish words on a computer and instruct it to make something practical and useful in the world.
If you think you have to learn so much stuff before you're ready to be any productive and build real applications, I'm going to shatter all those thoughts that you have.
So in this demonstration, the only thing you need is a browser named Google Chrome, most likely you already have it and that is it.
In the process, we are going to actually do a mini hack YouTube, and we're going to write one piece of line of code and you're going to easily be able to tell how simple coding can be, if you know what you're doing. That's pretty much it.
So let's get started.
Head over to YouTube and open any video, for the sake of this demonstration, I have Steve Jobs Stanford Commencement speech open. You can open any video it doesn't matter.
When you're on the video page, right click and go to inspect as shown below
It will open a tool that Google Chrome has built in, it's called web developer tools as you can see below
An alternate way to open the developer tools is you go to the menu on top in chrome and select more tools and then open developer tools like such
The next step is to go to the console tab in web developer tools, simply click on the console tab
The console is a window into the Javascript world. Now I'm going to write one piece of code like such $(‘video’) the $ and the brackets in the code are to grab the video element on the web page.
Hit enter and it's going to grab the entire video and if I hover over the code, it hovers the video like such
Now I'm going to write the same code once again and this time I'm going to add .playbackRate like such $(‘video’).playbackRate make sure the 'R' in playbackRate is capital. Hit enter and it's going to give the value of 1 playbackRate is the rate at which the video is running, So 1 means the play back rate is normal.
$(‘video’).playbackRate = 2 hit enter and the video will start playing faster. You can actually change the speed to 3 as well by writing $(‘video’).playbackRate = 3 and the video will start playing faster.
If you change the playback rate to normal you can simply write $(‘video’).playbackRate = 1 and the video will go back at normal speed. See it yourself in the video above and then do it yourself and see how cool it actually is.
Now this is the extreme simplification of course you have to write tremendous amount of code, you have to know far many concepts but this is a very simple demonstration where you have certain elements and elements have certain properties, you set and get certain states that it has, and you can manipulate those states which in return produces a web page or produces a feature or produces the application that you're trying to create.
Make sure you copy these steps on your computer so you internalize the knowledge you just have got.
If you are serious about web development, if you want to become a Front-End developer, let it be known that this tool that I just showed you is used by all web developers, all Front-End developers on a daily basis.
So get yourself a gift of a head start into the world of development and play around with the techniques that I just showed you.
If you have a question, leave your comments below and I'm going to talk to you in the comments.
Get Started
Already have an account? Please Login