code icon

CSCI 1720

Intermediate Web


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

Countup

Using JavaScript to calculate the difference between two dates

CSS and JS Animation

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

CSS Animation

Animation effects using CSS only

CSS3 Animations

Animation effects using CSS only

CSS Float

An interactive demonstration of the CSS float property

Document Object Model

A look at the Document Object Model

Flex Panels

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

Font Awesome

Using the free Font Awesome icons with your web pages

JS Snippets

Some JavaScript components that can be integrated into a site

JSON

JavaScript object and JSON examples

Key Codes

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

Meme Maker

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

Modals

Creating and using modals for user interaction

SVGs

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

Type Ahead

Filtering user input with a suggested list of matching words

Vigenere Cipher

A jQuery implementation of the Vigenere Cipher

Hover&Zoom

Using CSS to change image display when hovered over