Examples

These are some 'examples' I've worked up over the years. It occurred to me that some of the examples, what I think of as 'doodling,' might be of use to students. Some of the files are HTML format; others PHP, but it shouldn't make a difference. If it turns out that it does, I'll convert everything to PHP

This is another work in progress. I have some other example pages and plan to make more as time goes on. A lot of the examples use JavaScript and jQuery. Feel free to look at the code. Over the years, I've learned that examining code is an excellent way to learn it. Don't just look at it, though, ask yourself what each line, each block of code is doing. It will help. I know from experience

Here's an interactive demo I made that shows how FlexBox arranges content on a page. It doesn't demonstrate all of the FB options, but should provide a good idea of how FB works

Bootstrap Spinner demo with a little jQuery

Using JavaScript to calculate the difference between two dates

Using CSS animation (the squares) and JS Animation (the text). Includes an embedded audio element with custom controls

Animation effects using CSS only

Animation effects using CSS only

An interactive demonstration of the CSS float property

A look at the Document Object Model

Flexbox is another styling technology that's worth getting to know. This example illustrates using Flexbox in conjunction with JavaScript to create a panel display. Click each panel to see what it does. Double-click on the display to reset it

Using the free Font Awesome icons with your web pages

Some JavaScript components that can be integrated into a site

JavaScript object and JSON examples

Outputs ASCII key codes when user types keys. Useful for JavaScript development and coding keyboard events

A simple meme maker with interactive JS. You can use your own picture or select one from the gallery. Completed memes can be downloaded and saved

Creating and using modals for user interaction

Simulating a password ripper application

A (very brief) exploration of the Scalable Vector Graphics format

Simulation of a web-hosted terminal window. Includes command prompt, blinking cursor, backspace, newline, and clear screen. Uses jQuery and CSS animation

Filtering user input with a suggested list of matching words

A jQuery implementation of the Vigenere Cipher

Using CSS to change image display when hovered over