Project 1 - WEB 124

  1. Read Chapter 1 The ABC of Programming
  2. Download the data files and key the JavaScript from page 46 and the HTML from page 47.
  3. Watch applicable youtubes.
  4. Complete the following exercises by building a single semantic, validated, spell-checked web page with both the questions and the answers. Apply a linked, validated, flexible, and visually pleasing style sheet. Post your files to the student web server and put the corresponding URL in the Project 1 drop box.
  5. Note color coding: keyword, blue: HTML, pink: CSS, green: JavaScript, black: general instructions)

As always, spell check all content and identify your name and the current date in all files using comments. In html files you may use the html meta tag, e.g. <meta name="author" content="John Doe">.

Chapter Debrief

HTML - CSS - JavaScript Essential Concepts: Create and complete the following table...

Some answers are provided as a guide.

Language ==> HTML CSS JavaScript
Acronym HyperText Markup Language Cascading Style Sheet JavaScript is not an acronym
Definition
Purpose
Comment Syntax
Code editor you will be using in this class
Validator or primary debugging tool you will be using in this class
Discuss case sensitivity in this language HTML 5 is not case sensitive but current best practice is to write all HTML in lowercase characters with the exception of the <!DOCTYPE html> statement which is equally acceptable in either upper or lowercase <!doctype html>. CSS 3 is not case sensitive but current best practice is to write all CSS in lowercase characters except for proper font names such as Arial, Georgia, or Times New Roman.
Another best practice is to match case sensitivity in CSS selectors to their id or class attribute values in the html for readability.

HTML - CSS - JavaScript Essential Terminology: Create and complete the following table...

Some answers are provided as a guide.

Terminology Language Purpose Example
element HTML to semantically describe and structure content on a web page <p>These tags and text constitute a p (paragraph) element.</p>
attribute
selector
property
declaration
object
method
event
property

How do HTML id and class attributes connect to CSS selectors?

  1. <p id="xyz">Item number xyz.</p> connects to what selector in the css? ____________
  2. How many html elements may have the same id="xyz" attribute value on a given page? ________
  3. <p class="holidayItem">Seasonal item for sale.</p> connects to what selector in the css? ____________
  4. How many html elements may have the same class="holidayItem" attribute value on a given page? ________

Essential JavaScript best practices: Explain the pros and cons of...

Use as many paragraphs as necessary to answer each of the following areas. Code your answers using semantic html. Use the <code> tag to markup code examples.

  1. inline vs. embedded vs. external JavaScript using examples.

    Pro:

    Con:

    Code Example:

  2. indenting your code.

    Pro:

    Con:

    Code Example:

  3. inserting code comments.

    Pro:

    Con:

    Code Example:

Java vs. JavaScript: Explain...