- 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:
- 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),
- font (-family, -size, -weight, -variant),
- list-style (-image, -type)
Statements, Comments, Operators, String Methods, Numbers, Math, Comparisons, Conditions, Switch, Loop For, Loop While, Breaks
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:
- KeyEvent task: As the user types, the equivalent dancing letters from the Dancing Cartoon Alphabet appear on the screen. Blue!
- MouseEvent task: when the user "drags and drops" the soccer ball, print the location (x,y) of the drop in a div tag.
- 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.
Instructions: Watch the following videos and answer the questions below in a Google docs document. There are headphones you can borrow in the bottom left drawer of the teaching desk.
Videos to Watch
- How the Internet is Connected
- How the Internet Works
- How Browsers Work
- How a browser builds a webpage
Questions to Answer
- What is the purpose of an IP address? What does IP stand for?
- What does ISP stand for? What is the purpose of an ISP?
- What is the purpose of a router?
- What is the name of the protocol stack for the internet? Describe how this protocol works.
- What does DNS stand for? What does it do?
- What are the 7 components of a browser?
- In what order are the different parts of a web page processed and displayed by the browser?
- What is the DOM? What organization defines specifications for the DOM?
- What does "client side" mean?
- What is a URL? What are the parts of a URL? Give an example of a URL and identify the protocol, domain name, path, query, and fragment (or anchor).
This will be quizzed in class on Friday.
When you are done:
- Work on all missing assignments and the Animation Exercise.
There are two options for this project. You will be assigned one of the following projects:
Integer Poker (Difficulty 1)
Read the assignment description. Requires knowledge of DOM, light boxes, calculator.
Game for Coolhorsestuff.com (Difficulty 2)
Read the assignment description. Requires extreme creativity and possible knowledgeof canvas.
- 30 Multiple Choice Questions (open everything, NCWAHBWICA)
Stuff you should know:
- All the JS Assignments ,
- How to create a basic html document and add css and js to it as external files,
- new features of css3,
- host-client relationship,
- how to do html links and images,
- copyright issues,
- basic color codes,
- css positioning,
- comments in all 3 languages,
- css box model,
- all js programming exercises