Overview

The third Debriefing will cover the following topics related to Client-side Programming:

• HTML

• CSS

• Bootstrap

• JavaScript

• AJAX

The Debriefing will consist of definitions, short answers, debugging, and programming questions related to the Project 03.

For the programming section, you will be able to use your computer (but only after you have completed all the other sections).

Below are examples of the type of questions that may be asked on the Debriefing. It is mean to be representative, rather than exhaustive (ie. there may be questions that show up on that are not show below).

Definitions

Briefly define the following terms:

1. HTML

2. CSS

3. Bootstrap

4. JavaScript

5. AJAX

6. Selector

7. CDN

8. DOM

9. JSON

10. Callback

Short Answers

1. Why do we have both HTML and CSS? What role does each language play in a web page?

2. Explain how CSS styles are applied to HTML tags. When multiple rules apply to an element, how does the web browser determine which rules apply?

3. What is the difference between the following CSS styles:

   p  { color: blue; }
   .p { color: blue; }
   #p { color: blue; }
   

   Order them in terms of precedence (highest to lowest).

4. What is the idea behind responsive design? How does Bootstrap help us build applications that fit this model?

5. Describe two ways in which HTML elements can be considered objects?

6. In regards to Project 03, answer the following questions:

   • How did you access objects that correspond to HTML elements?

   • How did you register callback functions for onclick events?

   • How did you build the HTML for the search results?

   • How did you display the HTML for the search results?

7. Describe two ways in which JavaScript is similar to Python; two ways in which they differ.

8. Describe how the AJAX programming technique works and how it differs from the traditional web application model.

Debugging

These will be variations of the programming problems below.

Programming

1. Create a web page that contains an instance of the following:

   • The use of headers and paragraphs.

   • The use of images.

   • The use of links.

   • The use of a table.

   • The use of a list.

   • The use of divisions and spans.

2. Create a CSS file that applies styles to elements by using an instance of the following:

   • Tag rule

   • Class rule

   • Identifier rule

3. Use Bootstrap and JavaScript to create an interactive set of Notebook Tabs that change contents when you click on the tab.

4. Use Bootstrap and JavaScript to create an interactive search form that searches a dictionary on each key press and displays the results in real-time.

5. Use Bootstrap and JavaScript to change the contents of an alert based on the button press of a user.

6. Use Bootstrap and JavaScript to toggle a button that uses Font Awesome icons.

7. Using AJAX and a URL, request a remote JSON object and display the data in the form of a table or list.