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 CSS animation (the squares) and JS Animation (the text). Includes an embedded audio element with custom controls
Animation effects using CSS only
A variety of simple CSS3 animations
(CSS) Animated Landing Page
(CSS) Curtains Page Transition
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
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
Simulating a password ripper application
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