mdinfotech.net  



In class intro to Hello World with HTML, CSS, and Javascript.
Build a calculator using HTML.
Beautify the calculator using CSS.
HTML Elements to Know

Use the CSS Reference to look up the following:

  • color,
  • background (-image, -color, -attachment, -position, -repeat),
  • border (-top, -left, -right, -bottom),
  • margin (-top, -left, -right, -bottom),
  • padding (-top, -left, -right, -bottom),
  • position (and top, left, bottom, right),
  • width,
  • height,
  • text-align,
  • text-decoration,
  • font (-family, -size, -weight, -variant),
  • list-style (-image, -type)

Make the calculator work using JavaScript.
Make the calculator work using JavaScript.
Do the following:
  1. Do this tutorial on animation
  2. Create your own HTML document from the final animation in the previous tutorial. Due tba.
    • Modify it so that IF the user clicks the cube, it stops moving.
    • Modify it so that IF the cube hits the bottom right corner of the yellow box, it reverses direction.
    • Modify it so that IF the cube hits the top left corner of the yellow box, it reverses direction.

Light Box Exercise

Create a webpage with 6 thumbnails of images. When a thumbnail is clicked, a lightbox should appear showing the larger version of the image.
Use these resources, and the lesson taught in class, to complete this exercise:
Following best programming practices can be difficult to do with a flexible language like JS. It can also make debugging very difficult. Run your Javascript through this website to ensure you are using best practices:
  • JS Hint
  • Read the following pages and use the advice in your JS coding.
    1. JS Style Guide
    2. JS Best Practices
    3. JS Mistakes
    4. JS Closures

    Write Even and Odd using a web interface.

    30 Multiple Choice Questions (open everything, NCWAHBWICA)

    Please take the time to complete this course evaluation. I take into consideration all suggestions to improve this course in the future.

    Course Evaluation.