JavaScript is a very powerful language. It is capable of creating complex web applications that work everywhere. But it is just as often used on a smaller scale. JavaScript is the glue that holds even less flashy websites together- it makes drop-downs drop down and image sliders slide.
Fortunately, at this point, you already have all the tools you need to make these items without resorting to using a bloated framework like bootstrap. (Nothing against bootstrap… you just do not need it! Good for you!)
We aren’t presenting any new content in this lesson - just giving you the chance to practice some of the techniques that you’re going to be using on a daily basis as a JavaScript programmer.
Animations are typically handled by CSS which is a little out of the scope of this lesson, but interactive stuff like this is no fun without a little motion! If you want to take a break and learn more about making stuff move go watch this video.
You know what we’re talking about here. Picture a nav-bar or a button and when you click it the menu slides down nicely. As mentioned previously, you already know everything you need to create this element. Here are some things to keep in mind:
visible
or something) or by manually setting the style in JS.Mobile versions of your sites are almost definitely going to need their own menu implementation. Depending on how you decided to implement your drop-down, you could reuse it here, but there are tons of more inventive options out there.
Again, there’s not much instruction needed here - just practice.
Create a simple image carousel. It should contain arrows on each side to advance the image forward or backward. It should automatically move forward every 5 seconds. It should contain the little navigation circles at the bottom that indicate which slide you are on (and they should be click-able to advance to that particular slide).
Don’t spend too much time worrying about getting your images to display at the correct size – it’s more important to get the slider sliding.
div
which will contain the individual “slides” of each image. By appropriately positioning that div
inside a container div
(which acts like a picture frame), you can choose which slide is visible at any given time.This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
5-6 months
Job Guarantee
1-on-1 Mentorship