Web Design // Preview

Key Terms

The 3 Languages of the Web

html5-jquery-logo

  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.

Screen Shot 2015-09-02 at 3.21.36 PM

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.