In-class presentations

For the next few weeks of the term we are going to dedicate the last 20 minutes of each class to short student presentations. The subject of these presentations will be assorted topics in HTML, CSS, and JavaScript. I will select the topics, and you will be required to research the topic, prepare some examples, and then give a twenty minute presentation on the topic.

To give you practice using HTML and CSS I will be asking you to prepare your presentation materials as web pages instead of PowerPoint or Google Docs presentations.

These presentations will all be partner projects - you will be working on the presentation with one partner of your choice.

The topics

Here is a list of presentation topics.

1) Using the iframe - Friday, April 11

• What is an iframe?
• Demonstrate how to use an iframe to embed a YouTube video.
• Demonstrate how to use an iframe to embed a map from, say, Google Maps.

2) Semantic Elements - Monday, April 14

• Give an overview of the new semantic elements in HTML 5, such as aside, section, article, and nav.
• Explain why using these elements as an alternative to the generic div is useful.
• Show some examples of these elements in use in a page.

3) CSS Pseudoclasses - Wednesday, April 16

• Explain what CSS pseudoclasses are.
• Show some examples of the more commonly used pseudoclasses, such as hover, active, and visited.

4) CSS Media Queries - Friday, April 18

• Explain what responsive design is.
• Show how CSS media queries can make a page responsive.
• Tell us more about how Bootstrap supports responsive design.

5) Background images in CSS - Monday, April 21

• Show how to use background images in CSS to make a page more attractive.
• Demonstrate how to use background images to create decorative borders on a page.

6) HTML Canvas - Wednesday, April 23

• Explain what the canvas element is.
• Write a demonstration program that shows how to use JavaScript to draw in a canvas element.

7) Modules in JavaScript - Friday, April 25

• Read chapter 10 in the JavaScript book
• Give a summary of how to set up and use a module in JavaScript.
• Write a demonstration program that consists of multiple files in which some of the files are modules loaded by other files.

8) Local storage - Monday, April 28

• Research the local storage facility in JavaScript online.
• Show an example to demonstrate how you can use local storage to pass information from one page to another.
• Show an example to demonstrate how you can use local storage to save data in a page that gets restored when the user reopens the page later.

9) Additional React components - Friday, May 2

• Find a source online for React components.
• Write a demonstration program that uses some of these components.