HTML, CSS, and JavaScript

Though JavaScript is more than two decades old, for much of its history it was primarily used as a scripting language for webpages. Along with HTML, a markup language, and CSS, a style sheet language, it formed the holy trinity of frontend development. HTML provided the scaffolding for webpages, CSS styled those elements, and JavaScript made them dynamic. If a webpage is a building, HTML forms the bones, CSS the paint and drywall, and JavaScript the electricity and plumbing. (Eghbal 2020, p. 35)

JavaScript is a dynamically-typed scripting language. Though JavaScript’s syntax is based on Java (and thus resembles C), the similarities are largely superficial. All major web browsers support JavaScript to enable interactive web pages.

Learning Objectives

• Describe the structure of HTML documents
• Distinguish between the different roles of HTML and CSS
• Create a simple website using HTML and CSS
• Describe the uses and limitations of JavaScript
• Implement simple functions using JavaScript
• Perform client-side validation of user input

How to Complete this Lesson

Complete the following learning activities: (2–2.25 hours total)

1. Read the following sections from Getting started with the Web:
   • HTML basics (15 minutes)
   • CSS basics (15 minutes)
2. Read JavaScript basics (15–30 minutes)
3. Attend the class meeting (60 minutes)
   • Review the JavaScript examples (15 minutes)
   • Complete the exercises using regular expressions (15 minutes)
4. Review the web design principles (5 minutes)
5. Optional: Watch “Wat” (5 minutes)
6. Work on the web development programming exercise (PEX) (90–120 minutes)
   • Create the required web pages (introduction, service partners, and volunteer information) with the specified static content

Resources

• HTML/JS: Making webpages interactive
  1. Get ready to make your webpages interactive (10 minutes)
  2. JS and the DOM (20 minutes)
  3. DOM access methods (30 minutes)
  4. DOM modification (30 minutes)
  5. DOM events (35 minutes)
  6. Using JS libraries in your webpage (10 minutes)
• Client-side form validation (15–30 minutes)

---

« XML Space Camp and Supra Coders »