Interactive Web Pages with JS

Advanced Challenges

Learning Outcomes

  1. Using Javascript

  2. Data Sanitation

  3. Interact with page elements with mouse

  4. Working with HTML Document Object Model

  5. Online Content Research Skills


Web pages created using HTML and CSS are static. Meaning when a such a web page is loaded in to the browser and the content is rendered, it remains unchanged until a new page is loaded.

However, in order to give users a better user experience and functionality we need to make pages interactive. This may include...

  • Validating information entered in to a form before submitting to server.

  • Giving messages and information on the web page without having to load a new page.

  • Changing content of the web page or adding new content on demand, such as infinitely scrolling pages or image galleries.

  • Interact with element in the page using mouse or touch such as drag and drop or drawing.

JavaScript is a language that will allow you to do above and much more. It was originally included in browsers to support developing interactive web pages. Today, JavaScript has expanded in to many other spaces (Ex: Server-Side Development, Mobile, IOT etc.).

In this challenge you will learn how to use JavaScript to develop interactive web pages using "HTML/JS: Making webpages interactive" lessons available on Khan Academy.

Advanced Challenge 1: Learn more about JavaScript (JS)
Advanced Challenge 2: Making Web Pages with HTML/CSS

The Challenge:
1. Follow the entire "HTML/JS: Making webpages interactive" tutorial in Khan Academy
2. Complete all the challenges and projects included in this tutorial and submit them in a zip file. Each exercise must be placed in a separate folder inside the zip file.

You are free to search the Internet to answer the MCQs. For further studies you can also use tutorials in and other online resources.

Learning Resources

To Complete, follow these steps :

Go through the learning resources given above, 

Step 1 :

Upload the files below

Click Here

Step 2 :

Answer the questions 

Click Here

Step 3 :