Web Design // Preview

Key Terms

The 3 Languages of the Web

1. HTML (HyperText Markup Language) – Using Tags we create web elements such as Images, Links, Headings, and Lists.
2. CSS (Cascading Style Sheets) – Using Selectors ( Cheatsheet ) and Rules ( Cheatsheet ) we can add style to the elements.
3. JS (JavaScript) – The Programming Language of the web; We can use all the Variables and Control Structures (Ifs, Loops) we’re use to. Using Events ( Cheetsheet) we add interactivity to the elements.

• jQuery popular is a JavaScript library .

Video Tutorial

About the Project

Let’s create a To-Do list.  In the process, We’re going to learn all 3 languages of the web and what they are used for.

Getting Started

1. Create a new Pen on CodePen.

Adding jQuery

On your new Pen’s Settings, add the jQuery JavaScript library.

Objectives

• Create a Heading for our list.
• Create a list with a few list items.
• Style the list items. (Change either font-size, color, background-color, etc.)
• Cross out completed items on the ToDo list by clicking them.
  • Create a class for complete list items. ( .complete) These items should have the rule ” text-decoration: line-through; ” applied.
  • Attach a JavaScript function to the Click event of the List Item (<li>) element(s).
  • The JavaScript function should add the class for complete items to the list item that is clicked.
• Add a Clear All button.