In class intro to Hello World with HTML, CSS, and Javascript.
New to HTML/CSS? Or need a refresher?
Build a calculator using HTML.
Beautify the calculator using CSS.
HTML Elements to Know
- Doctype
- Html
- Head
- Body
- h1-h6
- p
- pre
- a
- img
- comments
- ul and ol and li
- hr and br
- Entities or Special Characters
- Block Elements - div and span
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.
JavaScript is a lot like Java:
Statements, Comments, Operators, String Methods, Numbers, Math, Comparisons, Conditions, Switch, Loop For, Loop While, Breaks
JavaScript is quite different from Java:
Variables, Data Types, Type Conversion, Scope, Numbers, Number Methods, Arrays, Array Methods, Loop For/In, Javascript Function Definitions, JS Dates, JS Date Methods.
Statements, Comments, Operators, String Methods, Numbers, Math, Comparisons, Conditions, Switch, Loop For, Loop While, Breaks
JavaScript is quite different from Java:
Variables, Data Types, Type Conversion, Scope, Numbers, Number Methods, Arrays, Array Methods, Loop For/In, Javascript Function Definitions, JS Dates, JS Date Methods.
Make the calculator work using JavaScript.
Do the following:
- Do this tutorial on animation
- 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:
- Hide and Show Div with CSS and JavaScript.
- Display property
- Read about the DOM Style Object to learn how to modify CSS properties with Javascript.
- Light Box Demos. Yours will not be this fancy.
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.
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.