This class is all about how to use JavaScript and the powerful JS libarary, jQuery to make interactive websites. JavaScript is well known for its ability to take static HTML and make it move and do things that we could not do with plain HTML and CSS. We can make animations and lightboxes, show content and hide content dynamically.
What you should know:
In this course, I expect that you know some HTML and you know some CSS, because JavaScript is a language that works with and manipulates web pages. As such, I expect you know how to make web pages.
With CSS – I expect you’re good with creating and applying styles to html elements, working with IDs and classes and understanding CSS selectors.
I don’t expect you to be a programmer, yet — that is what I am going to teach you. We’re going to cover the basics of JavaScript. We’ll learn all about variables, arrays, loops, conditional statements, functions and all the basic programming concepts. While we start with ‘Vanilla (read: plain) JavaScript’ we will move quickly into the use of the jQuery Library
What is jQuery?
It is one of the most popular, widely-used, open-source JavaScript libraries on the web today. Using jQuery brings a whole host of benefits. First, it simplifies the tasks commonly involved with creating web pages and applications that are highly interactive and responsive. Things like AJAX, dynamic content, and complex animations are all made easier by using jQuery. Second, jQuery works across all the current modern browsers, and it takes the worry out of a lot of browser-specific features.
This allows you to concentrate on the design and finished result, instead of spending all your time trying to figure out how to build for the variety of browsers out there. jQuery has you covered! Third, jQuery’s code syntax is nice and compact. It allows you to write code that is a lot less verbose than using plain JavaScript. This results in code that is easier to read, understand and maintain.
In this class the final project will be one of two projects:
1. Make a heavily interactive website which will include at minimum 4 JavaScript items. These can be any of the following and more: calculators (think mortgage calculator, distance/time/rate traveled), image carousels, sticky nav, hover states, accordions, tabs, etc.
If there’s a functionality on a website that is interactive it is in all likelihood driven by JavaScript.
2. Make a complete in browser JavaScript game
So Why Make a Game and not a Website?
For one, who doesn’t like games? Games are fun, allow us to exercise our creativity and learn problem solving.
Designing a game allows you to think about our web pages in a different way at the outset — but in a way that is still is essential to anything you want to do on the web. This is the same kind of process if you are making an interactive slider as you would be in making a simple game. Figure out what you need, then figure out how to make it by breaking it down into simple steps. Rome wasn’t built in a day. Your game won’t be either.
Games also make you use logic, comparison statements and other constructs that you will use in all your other web programming languages. We’ll still make some sliders, and other UI elements. Games do need UI after all — so don’t worry you won’t be able to apply what you learned to accordions, or other standard UI elements. Sit back, relax, have fun and enjoy the ride.
You can read the Syllabus for this course by clicking on its link: WS300 Syllabus