top of page arrow
The Code Room!

Small projects to advance front-end web development skills, from beginner to advanced.

Wherever possible, the javascript and/or css is included
within the main code of each project page for easy download, instead of separate files.

Click on the title or the description to view each project.

Accordion Gallery

A gallery of expanding images. Not really quite suitable for prime time, but very pretty nonetheless.

Download Code

Accordion Menu

Present a lot of content in an easily digestible, compact drop-down without using large amounts of screen real estate. Adding movement and a color change to the transition adds interest and a positive indicator to grab the user's attention. Sub-menus can be added for even more versatility.

Download Code

AI-Generated Art Gallery

Art is artistry. Whether it is using paint, music, words, or code, the artist is the motivating force that makes creation possible. This project uses the Scroll Reveal javascript library to add some sophisticated movement to elements on the page, and a handcrafted lightbox to display a gallery of individual images.

Download Code

Animated Card Gallery

No javascript involved because I freaking hate writing javascript. The "Visit" button takes the user to a full-size view.

Download Code

Animated Gradient Border

Using gradients "behind" the container's content to create an animated border.

Download Code

Animated Gradient Text

Using gradients "behind" the text to give the illusion of animation. 4 colors become 16 with the use of hue filters.

Download Code

Animated Scroller

An animated scrolling gallery using CSS transform transitions and just a teeny bit of javascript.

Download Code

Animated Text

Colorful typewriter text animation from your input. Almost all dreadful javascript.

Download Code

Anxiety

How do you convey a feeling through a ststic web page? Do you know? Do you? Answer me now! Do you know or not? Is there something wrong with you?

Download Code

Background Gradients 4 Ways

There's more than one way to skin a div.

Download Code

Background Image Animation

Loading a background image with animated special effects.

Download Code

Background Selector

Use javascript with an HTML select statement to change backgrounds on the fly.

Download Code

Background Slider Gallery

Another Pretty But Ultimately Useless Exercise!

Download Code

Bad Dad Jokes

Randomly generated really truly awful bad terrible no-good one-liner dad jokes.

Download Code

Blurred Background Animation

Add some interest to the page with a colorful blurred background animation.

Download Code

Blurry Loading Animation

Loading a large background image with a progress indicator by using a simple javascript function.

Download Code

BMI Calculator

Because what's the point of having a recipe website without making you feel short and fat?

Download Code

Bouncy Loader

Follow the bouncing balls ... at least until the page finishes loading, that is.

Download Code

Breaker Box

Mapping out the household breaker box for easy reference. In the dark.

Download Code

Breaking News!

Old-timey spinning newspaper front page with vital information.

Download Code

Bubble Popper

Seems like no one sends packages padded with bubblewrap any more, so we'll have to get our endorphin fix popping virtual bubbles instead...

Download Code

Burgers & Sliders Menu

Use the hamburger to open the slider menu. Especially helpful for narrow screens.

Download Code

Click NOT Hover

Too many developers rely on hovering the mouse cursor over an element to change its state. Touchscreens on phones and tablets do not support hovering, so a large percentage of users will not be able to access that important functionality.

Download Code

Code Editor

Not everyone has access to a development environment to test their code when writing html/css/javascript. This simple editor uses a codepen-like interface to allow coders to view live results.
(Not Responsive)

Download Code

Coffee O'clock

It's time for a cuppa joe!

Download Code

Collapsible FAQ List

Frequently Asked Questions in expanding sections. Just the FAQs, Ma'am. (If you get that reference, your back hurts every day for no reason.)

Download Code

Collapsing Sidebar Menu

When screen real estate is at a premium, a collapsible menu bar can save room for critical content.

Download Code

Color Filter Slider

A slider that shows an image in two aspects using a sliding color filter.

Download Code

Color Palette

A spectrum of color swatches with hex and rgb codes, and a light/dark background switch for comparisons.

Download Code

Coolors Palettes

That's not a typo! Color palettes made with the widget from coolors.co. Click on any color and the hex code is copied to your clipboard.

Download Code

Coolors Palettes Gradients

Background gradients created by using the palette colors from the Coolors Palette project page.

Download Code

Coolors Watercolor Gradients

Background gradients created by using the palette colors from the Coolors Palette project page, and adding texture.

Download Code

Copy Code to Clipboard

The javascript clipboard API allows code (formatted in the source as text) to be copied for pasting in other applications. This is particularly useful for sharing code snippets with other developers.

Download Code

CSS Animation Timing Function

When creating an animation in CSS, the timing function determines how an animation progresses through the duration of each cycle. This gives the page author great control over the behavior of the animated element.

Download Code

CSS Features Since 2008

Every new function added to CSS since 2008. All 1,240 of them. That will update automatically when new functions are added. With links to the MDN database for complete reference for every one. And the ability to hone the list by date.

Who says I think too much? Just because I've memorized almost all of them? Yeah. I see your point.

My head hurts.

Download Code

CSS Media Breakpoints

Common responsive media query breakpoints for the most common screen sizes.

Download Code

Cuber? Cubist? Cubism?

A 3-D rotating box, or cube, or whatever. I dunno. You decide...

Download Code

Curved Perspective Gallery

Perspective and animation combine to present the illusion of a curved gallery that moves when scrolled.

Download Code

Digital-Analog Clock

A digital clock made from analog clocks.

Download Code

Directional Indicators

A digital clock made from analog clocks.

Download Code

Double Slide Gallery

This gallery shows an animated sliding preview of the images, with title links to view them full-sized.

Download Code

Fading Hover Cards

Hover over a card to activate that item's metadata and dim the rest of the cards.

Download Code

Feature Braggadocio

Boast about the services you provide by using a little javascript to highlight the important characteristics users can't avoid...no matter how hard they try. Maybe concentrate on some positive traits though.

Download Code

Flex Hover Slider

CSS and jquery combine to add some movement to this landing page menu design.

Download Code

Flex Image Gallery

Using flexbox to display the images with titles and icons. A variation on the Accordion Gallery.

Download Code

Fun With Gradients!

Several colorful gradient backgrounds all smushed into one handy action-packed page!

Download Code

Gradient Border Animation

Although it still takes quite a bit of doing, animated gradient borders can be applied using the css @property element and some background color effects. Maybe someday it will even be possible to do it without jumping through so many hoops. One can only hope.

Download Code

Horizontal Scroller

Simple scroller using CSS only. Not as functional as a javascript slider, but still attractive. Neat trick using an unordered list.

Download Code

How Much Time to the New Year?

Just in case you haven't recovered from your New Year hangover, here's a little reminder of how much time you have to recover before the next one. Updated constantly. How is your headache?

Download Code

How To: Animated Text

Create text effects with an animated background.

Download Code

How To: CSS :empty Pseudo-Class

Maximizing the use of styles on otherwise empty sections of a web page.

Download Code

How To: Top of Page

An easy way for users to return to the top of the page while scrolling.

Download Code

HTML Details Tag

Provide additional information or other informative text in a drop-down format on fields that your new users might need help with.

Download Code

Image Shapes

Using CSS clip-path and border-radius to create image shapes. A handy reference page.

Download Code

Infinite Borders

This cheesy effect from a 1970's detective show is achieved by using linear gradients as the border image and extending it to the full size of the container, no matter the size of the user's viewport.

Download Code

Inspirational Quotes

Sometimes you just need a random quote to help you get through the day.nSometimes you need more than one. Sometimes you need a synthesized voice to read it to you. Sometimes you need to copy it for pasting elsewhere. This little app does all of that.

Download Code

Interactive Background

The central card uses a semi-transparent glassmorphism effect, while the animated background flows through. There is an interactive element that has one of the background color blobs follow the cursor movements.

Download Code

Interactive Color Picker

An interactive color picker designed with HTML, CSS, and JavaScript. Based on a modern art poster created by Danish artist Poul Gernes in 1966.

Download Code

I've Got a Crush on You!

MOJS is an open-source (that means free!) javascript animation engine developed at MIT. This is just the stupidest thing that can be done with it.

(Not Responsive)

Download Code

Length Converter

For most Americans, the metric system might as well be a software terms & conditions agreement written in Sanskrit. They don't read that, either. Having the ability to translate imperial measurements into the metric system is essential.
I did not include the measurement conversion from hamsters to centimeters, but since Americans will measure with anything but the metric system, I probably should have.

Download Code

Let It Snow

This is the only way I want to experience snow from now on. WebGL, javascript and css.

Download Code

Liquid Transition Effect

The rgbKineticSlider is a different kind of image slider developed by Hadrien Mongouachon that allows you to swipe or use the navigation buttons.

Download Code

Loading Text Animation

Using the css animation-delay property and some color changes on each individual letter yields the illusion of movement in otherwise static text.

Download Code

Login Form Illusion

When the user clicks on any of the colors, the "framed" login form appears. Clever and colorful, but usability is low with this trick unless you also provide some indication that the page needs to be activated by clicking!

Download Code

Magic Particles

The magical particle trail follows your cursor around the screen. Useless but pretty!

Download Code

Magic Text Reveal

A text reveal illusion using css masking and animation.

Download Code

Making Waves

Create a flowing headlime to capture users' interest. Uses the css font-variation-settings property and a clever (tiny) javascript library that can be hosted locally or loaded from a remote host. The wave runs once then halts, but can be easily configured to keep waving for any number of cycles...to infinity!.

Download Code

Mandala Canvas

German artist/coder Matthias Hurrle has elevated javascript to an art form.

Download Code

Marquee Clock

Pretend you're in Times Square in 1965. The marquee clock is the pinnacle of modern technology. Why, someday maybe they'll even put a man on the moon!

Download Code

Matthais Hurrle Sliders

German artist/coder Matthias Hurrle has elevated javascript to an art form.

Download Code

Menu Carousel

Rotating menu slider carousel with links in the captions.

Download Code

Menu Transitions

Instead of a flat drop-down menu, we've added some hover toggles to give the user some feedback. Add some menu items to complete the illusion.

Download Code

Mini Music Player

Plays a small selection of pre-selected tunes.

Download Code

Mirror Image

A pause to reflect. Oh god, I can't believe I just said that.

Download Code

Mosaic Grid Template

A not-very-exciting demo of a very crucial tool for modern responsive design. CSS grid can do so much more than a static html table. With proper responsive development, it is possible to create different displays depending on the screen size, without having to modify the content to fit.

Download Code

Motion Headlines

Visual elements that incorporate motion are perceived 60,000 times faster than plain text. Motion design is a mix of graphic design, illustration, and 3D technology that allows elements to slide, bounce and respond to touch. Like colour and font choices, motion is visual communication and allows designers to communicate complex ideas more simply.

Download Code

The Movie Database

The current top 20 popular movie searches, and the ability to search the database for any other movie.

Download Code

Music Slider

Swiper.js is the most versatile (free!) slideshow generator available today. In this project, we have converted the usual static image slideshow into a music player with animated album covers and links to music videos.

Download Code

Neumorphic Calculator

Neumorphism is a form of minimalism characterized by a soft and light look. There are light and dark themes for the user's comfort.

Download Code

New Year Wishes

Making the transition from one year to the next. Congratulations to Gaia for another rotation around the sun! Let's not mention how many billions of times she's done it though.

Download Code

Parallax Gallery

Using a little javascript, we can add a parallax effect to a scrolling series of images, providing the illusion of perspective. And maybe making motion-sensitive viewers a little queasy in the process.

Download Code

Parametric Pieces

A poem written in code.

Download Code

Penguin

A happy penguin who loves Carol, and just happens to be an exercise in CSS coding.

Download Code

The Popover Tag

Modal (a.k.a. popover) boxes have been an important element of user web design from the beginning. Whether including special instructions, images, or annoying popup ads, it used to take a complex bit of coding to include a simple box that appears on demand.

Download Code

Profile Flip Cards

Profile cards using rotation transition on hover in a responsive setting.

Download Code

Profile Page

A modern redesign of an antique-style profile landing page. Fully responsive and accessible. I still hate it.

Download Code

Product Showcase

Product showcase user interface demo using swiper.js for pagination.

(Not Responsive)

Download Code

Progressive Pagination

The GreenSock GSAP javascript framework allows for sophisticated effects, but less control over your hand-crafted code. Still...fancy!

(Not Responsive)

Download Code

Scrolling Marquee Rows

Horizontal scrolling gallery with three rows, all timed to move at differing rates. All done in css without the need for any additional javascript.

Download Code

Scrolling News Ticker

An infinitely scrolling news ticker. News, highlighted messages of importance, or links, just to name a few potential uses. A simple variable ("data-time" in seconds) controls the timing.

Download Code

Shadow Text Effect

A simple but dramatic chiseled text effect achieved by matching the text color to the background color and adding a text shadow of a different color. Changing the text shadow on hover adds another level.

Download Code

Simple Slider Component

Product flyer to sell a massage chair with a super simple slider to display images.

Download Code

Skyline

A cityscape exercise in CSS responsive design with screen-size break points. Resize your browser window, or turn your device sideways.

Download Code

Slide-in Hamburger Menu

A simple mobile-positive navigation menu with a cute slide-in effect, and some clever hover effects done with some well-placed pseudo elements.

Download Code

Slide-in Icon Menu

A tiny "slide-in on hover" menu when space is at a premium. The links are inactive for the purposes of the demo.

Download Code

Slider Gallery

A simple javascript function is used to advance to the next (or return to the previous) image in the gallery. Metadata and descriptive text are added, along with a link to a full view.

Download Code

Sliding Sign-In/Sign-Up

Creating a sliding login form that works for both new users and existing users is simple mechanics. Making it appealing to the eye and responsive to all screen sizes -- well, that's the art.

Download Code

Sliding Tab Navbar

Very simple method using css and radio inputs to provide animation to the navigation. Optional notification element is also included.

Download Code

Smooth Navigator

React is a javascript library that allows developers to perform common tasks without having to code them from scratch. Using react for our navigation, we can provide a smooth transition from one image to the next. Users can navigate using the menu bar, or by double-clicking/double-tapping on the image or title.

Download Code

Sound Effects

Silly sound effects player to demonstrate the HTML audio tag. Of course there's a fart sound, why would you even ask?

Download Code

Sound Wave Loader

A simple, colorful loader to let the user know to be patient because something good is on its way...

Download Code

Spinner Gallery

Randomly displays a spinning image from a pre-defined list...with a twist.

Download Code

Spinning Color Wheels

The simple apearance of rotating colorful shapes belies a complex set of advanced css tricks used to create the shapes and colors. Clip path, border radius, hsl conic gradients, a little javascript and keyframe animations combine in this project. Clicking on the individual shapes turns on/off a dizzying spin.

Download Code

Split Bar Gallery

The (all css) code for this one is insanely complicated, but the effect is pretty cool.

Download Code

Split Image Slider

This slideshow uses a combination of the Imageonline image splitter, swiper.js and vanta.js to create a different sort of display.

Download Code

Spoilers!

Sometimes you just can't keep a secret, but you don't want to ruin it for everybody else. Unless they can't resist...SPOILERS!

Download Code

Star Sphere

Typically, developers use javascript to add complex movement to a web page, but with modern CSS, many actions can be performed without the use of javascript or other programming languages. This is one example using some very sophisticated styles and animation to create the illusion of stars rotating around an invisible sphere.

Download Code

Sticky Category Headers

A sorted html list with css sticky scrolling category headers.

Download Code

Sticky On-Scroll Animation

An outstanding exploration into using advanced on-scroll animations (with 15 example variations) to add excitement to any page presentation. Developed and presented by Manoela Ilic, the founder and owner of Codrops.com.

Download Code

Stillwater Cove

I'm not saying I stole the idea from an old Monty Python animation, but I totally stole the idea from an old Monty Python animation.

Download Code

Submit Button Animation

A little animation goes a long way when adding interest to an otherwise static page.

Download Code

SVG Clock

Attractive neumorphic style clock. Colors set with CSS variables.

Download Code

SVG Loader

Using scalable vector graphics (SVG) and some stylesheet tricks to give a page loading animation some liquid life. Compatibility with older brwosers is included.

Download Code

Task List App

Create a to-do list and cross off items as they get done.

Download Code

Text Image Background

A simple way to add a background image to your text using the css background-clip attribute.

Download Code

Theme-Switching Digital Clock

Light or dark theme. You decide. Personally I prefer the dark theme.

Download Code

Theme Switcher

Changing themes (CSS stylesheets) with the click of a button.

Download Code

Thinking Hand

It's creepy and it's kooky, mysterious and spooky. It's altogether ooky...

Download Code

Thumbnail Gallery

Simple but effective responsive gallery with a vertical thumbnail selector on the left.

Download Code

Tilt-Shift Blur Effect

Photographers know that using tilt shift allows them to create the illusion of depth in their images. Wakana Y.K. has developed a method of adding tilt shift to images online to add perspective.

Download Code

Toaster Popup Notification

It's called TOASTER because it pops up and has a timer. An unobtrusive method of displaying an important message when the viewer performs an action, without chewing up a lot of screen real estate.

Download Code

Transform Gallery

A deceptively simple (and decidedly limited) gallery display using css transformations and absolute positioning to provide an interactive component.

Download Code

Trees

A photo of two trees locked into an eternal embrace inspired me to create this page as a tribute to my wife of almost 50 years.

Download Code

Trippy Hued Canvas

Trippy Hue Canvas (a.k.a. THC, get it?) is a fun exercise in javascript, but there's way too much math for my preferences. The end result is a colorful kaleidoscope of ever changing colors. Bring your own hallucinogenics.

Download Code

Twinkly Stars

Randomly generated colorful star field using javascript and css (no additional html).

Download Code

Typographical Animation

Do's and don't's of user-oriented typographical animation.

Download Code

Unauthorized Access

When someone tries to access an area of a website that requires authentication, an HTTP error 401 message is issued by the server. When it is important to make the error abundantly clear, designing a 401 error page that has a fiery skull with police caution tape helps get the message across. Not in a subtle manner.

Download Code

Underglow

One of my favorite techniques to add motion to a page is to combine animation with gradients. With a little clever placement, you can achieve some very interesting effects...like this...

Download Code

Vanta Background

Vanta.js is a very lightweight (and free!) javascript library for adding interactive animated backgrounds to a web page or element.

Download Code

Variable Font Animation

Because of all the various platforms and screens in use today, responsive typography is a critical component of good web design. Variable fonts (formerly known as Open Type) can change width, height, and/or slant. Instead of being limited to only certain weights, or using cumbersome width measurements that are not responsive, developers can apply the font-optical-sizing property to variable fonts to ensure a smooth experience no matter the size of the viewport. With a little extra css trickery, they can be animated into an impressive display.

Download Code

Venn Triangulation

The purpose of this demo is to illustrate how to make three circles converge on a common center.

Oh who are we kidding? The purpose of this demo is to illustrate a bad joke.

Download Code

Vertical Gallery

An animated vertical (duh) home page for Carol's gallery.

Download Code

Venetian Blinds

A fictional company landing page with a responsive mobile-first info bar. You knew it was fictional, right?

Download Code

Vibrant Gradients

Adding background gradients adds interest to an otherwise static page. Upgraded gradients with smoother transitions and vibrant colors is achieved with a simple css property supported by most modern browsers.

Download Code

Video Flip Cards

Flip-card hover animation using some tricky css transformations. Very much NOT responsive. Gimme a break.

Download Code

Video Title Overlay

Fading titles and text overlaid on video with css. Using dynamic viewport width and height can provide a full-screen experience no matter the screen size.

Download Code

Viewport Resolutiion

There are plenty of charts available to determine the viewport size of almost every device, but what is the size of YOUR current viewport? Instantly detect the screen resolution in pixels.

Download Code

Weather Widgets

A colllection of dynamic weather widgets from tomorrow.io to add to any website.

Download Code

Whack-A-Loser Game

How many indictments can you hit him with in 30 seconds? So far, it's up to 91.

Download Code

Where's Whassisname?

When you've reached a certaain age you might need a magnifying glass to help you spot him in the crowd. Good thing your cursor becomes one, eh?

Download Code

Winter Papercut Scene

A simple winter scene adaptation inspired by the hand-made diecut greeting cards crafted by the lovely and talented Jackie McKnight.

Download Code

Word Clock

Cee ell oh cee kay. Charlie Lima Oscar Charlie ... and ... um ... Karen? ... er ...Kevin? ... uh ... Ken? Yeah, that's it ... KEN!

Download Code

Wormy Loader

Psychedelic squirmy loader.

Download Code

3D Auto Gallery

Automatic product showcase with a 3D fade.

Download Code

3D Gallery

A rotating 3D carousel for Carol's galleries.

Download Code

3D Rotating Slideshow

Images wildly flipping and spinning. Maybe take some dramamine before viewing if you're prone to motion sickness?

Download Code

404 Page Animation

Display a timed series of images using a flexbox with just a smidgen of javascript

Download Code

45 Years of Happiness

A little sentimental acknowledgement of Carol's importance in my life.

Download Code

90th Birthday Invitation

My dad turned 90 in 2024, so my sister and I collaborated on this quick, simple html invitation to his party so we would have a link suitable for posting on social media.

Download Code