Click logo to view BlueOwlRock main page.

Start Coding in HTML, CSS and JavaScript

Bouncing on a Web Page

Key framing and bouncing for video, web and game design.

We Learn the Basics For

  • HTML Elements
  • CSS Styles and Rules
  • JavaScript Variables and Objects
  • JavaScript Interaction
  • JavaScript Animation

To Bounce Project Outline



Step 1: Hello World

  • Start with a code editor.
  • Save an HTML file.
  • View with a browser.
  • Add a ball.
  • View with a browser.

Recommended Viewing

key words and key concepts:
xhtml, css, text editor, browser, Chrome, download notepad++, desktop icon, new file, tags, doctype, start and end tags, head, body, nesting, index, home page, title, text, header, h1 to h6, paragraph, p, white space, line break, br, br/, horizontal rule, hr/, bold, italic, strong, em, comment, link, anchor, a, attribute, href, link to page, directory, address, folder, navigation, directory, name attribute, #, img, image, file name, extension, src, height, table, tr, td, th, row, data, header, border, cell spacing, ol, ul, ordered list, un-ordered list, css, style sheet, cascading, type, element name, css rule, selector, curly braces, color, property name, colon, value, semi colon, font, font-family, text-align, indent, pixels, background-color, margin, padding, border, box model, link styles, table styling, check box, div, class, id, parenting, parent styling, css file, overlapping, position, absolute, relative, form, input, text box, radio buttons, option, text area, password, submit, action, method, hosting, uploading





Step 2: Add CSS

  • Give each element a unique ID.
  • Create a style rule for each element.
  • Set values for size and placement.
  • View with a browser.

Recommended Viewing

key words and key concepts:
Javascript, animation, transitions, sans third party tools, css, coding, div, id, background-color, hover, on mouse over, on mouse out, transition-property, transition-duration, transition-timing-function, transition-delay, animatable properties, multiple transitions, shorthand transition, coding, html input, type attribute, event call, onchange, inline code, this, script tag, camelCasing, linear, cubic-bezier( ), steps( ), browser support, transition end, addEventListener( ), alert( ), window.location



Step 3: JavaScript Action

  • Add JS and test.
  • Add a variable and test.
  • Add a function and test.


Step 4: JavaScript Control

  • Add an Interval and test.
  • Add brakes and test.
  • Change direction and test.


Step 5: Image Upgrades

  • Bouncing.gif
  • Buttons.png
  • Forward and Back


Step 6: Best Bounce

  • PingPong
  • or Not

PingPong:

To Bounce Project Outline