50 Tiny Web Development Projects. To get you past that getting started… | by Ashleigh Bonner | Feb, 2022

To get you past that getting started slump

Ashleigh Bonner

“It’s the job that’s never started that takes the longest to finish.” — JRR Tolkien

We’re often told that we should either go big or don’t go, but that’s not always the best advice when you’re just getting started.

Getting started can be terrifying, which is why we put it off until we have no time left. Often, we jump to the negatives, reread manuals, rewatch tutorials, and spend hours learning little and finishing nothing.

So, instead of talking about huge projects that’ll take months or years to finish, let’s talk about 50 tiny projects done in 50 days.

You don’t have to do these in 50 days, by any means, but here’s Brad Traversy and Florin Pop’s Udemy course, where they teach you HTML, CSS, and JavaScript — and most importantly, how to start small.

If you’re interested, here’s the main GitHub page where you can see the code and view a live demo of each project.

This project shows pictures of images side by side. When you click on one, it expands to show the full image. Enjoy beautiful sunsets, islands, and other landscapes.

GitHub page

After pressing the “previous” or “next” button, a progress bar moves to (or back to) another number in a line.

GitHub page

Push the menu button in the top left corner and the entire main image will rotate to show “home,” “about,” and “contact” links. So cool!

GitHub page

From hidden to found. Click the search icon and get a search bar. Fun!

GitHub page

Your website’s visitors will get a blurry image and a loading counter from 0% to 100% as the picture becomes clearer.

GitHub page

Scroll up or down to see more content boxes flying in from the left and right. Looks fantastic!

GitHub page

Unsure if your visitors want the PS5 or Xbox Series X? Offer them this sliding landing page that shows more content as they move their cursor from one side to the other.

Live demo

GitHub page

Don’t let the picture fool you. This regular-looking form has a cool wave feature on its text.

Live demo

GitHub page

Listen to the not-so-soothing sounds of booing with this fun soundboard. You’ve also got applause, gasping, ta-daing, victory, and wrong. Lol!

GitHub page

Have you enjoyed a Dad joke today? If not, you should make some.

For example, the joke above says, “I burned 2,000 calories today; I left my food in the oven for too long.” Ha, ha.

Now, press the button and “get another joke.”

GitHub page

Press any key and get a keycode. Woo-hoo!

GitHub page

When you’re looking for a stylish dropdown to answer questions — or give information.

GitHub page

Ha, ha. This is just fun.

GitHub page

This one you’ve gotta see to believe. The animation is top-notch.

Live demo

GitHub page

Looking to build a counter for your social media followers? This is a fantastic one that starts as soon as you load the page.

GitHub page

Track how much water you drink the fun — and visual! — way.

GitHub page

Love movies? Have friends who love movies? Create this fantastic movie app for them. When they hover over the movie’s cover, they can read its synopsis.

Live demo

GitHub page

Very sleek look.

GitHub page

This minimalistic clock uses your computer’s date and time. And… it has a dark mode.

GitHub page

Live Demo

GitHub page

Cool drag-n-drop feature!

GitHub page

Cool app. I wrote, “Have a lovely day :).”

GitHub page

Rotating triangles.

Live demo

GitHub page

Cool picture and some cooler placeholder text.

GitHub page

Keep that nav bar at the top when scrolling.

Live demo

GitHub page

Slide both sides of your images at the same time, then watch as they lock into place. See the demo below. Cool!

Live demo

GitHub page

Click the button, and see the notifications. Watch out; they disappear quick.

GitHub page

Searched for “Angela He.” Check out her amazing games!

GitHub page

This project lets you click the image to add a heart; it has a lovely animation when you click on the image.

GitHub page

Show some text on the screen. Adjust the speed so it will display faster or slower. Yay!

GitHub page

Set the password length — and include uppercase letters, lowercase letters, numbers, and symbols — if you want. Very stylish.

GitHub page

Nope, ha, ha. You can’t have all three.

Live demo

GitHub page

GitHub page

Cute animation.

GitHub page

Stunning carousel with previous and next buttons.

GitHub page

Use your cursor to create cool colored tiles on the screen! 🙂

GitHub page

When you need a Rolodex for your Pokemon — separated by type.

Red for fire, green for grass. You get the idea.

GitHub page

Click one of the four buttons — home, work, blog, and about us — and see different information.

GitHub page

The more complicated your password, the clearer the background becomes. Very cool. Try it out.

Live demo

GitHub page

Break this image into multiple 3D boxes, and put it back together with the “magic” button.

Live demo

GitHub page

They would verify your account if they had your email. But, since they don’t, enjoy making you’re own.

GitHub page

Find your next soulmate with this live user filter. Search by name and/or location. They’re out there. Honestly.

Note: Kidding. The creators didn’t market this to find your soulmate. A shame.

GitHub page

Lovely design, and it’s easy to read.

GitHub page

From 0 to 100, this slider can help you do tons of things.

GitHub page

Excellent Netflix-inspired navigation.

Live demo

GitHub page

Answer the questions, and see how you did at the end!

Live demo

GitHub page

Add a countdown to your testimonial box, and automatically go to the next review.

Note: for accessibility reasons, this countdown may stress out some of your visitors. Or make it hard for them to read all of the content.

GitHub page

Grab random images and display them. Refresh the demo to get a new set of images.

Live demo

GitHub page

Create a to-do list.

GitHub page

Fun game!

Live demo

GitHub page

Leave a Comment