Last updated on
1. Web Form Validator
Probably not the most exciting of projects but if you’re looking to start a career in web development then validating user input is a good skill to have.
Of course a lot of frameworks have their own in-built validation techniques and tools but there’s nothing like rolling your own.
- You could disable the submit button until the form is valid
- Show invalid messages as the form is being completed (as opposed to once a submit button is completed).
2. Social Share Buttons
If you’ve ever used WordPress before, you’ll know there are a whole host of plugins to add social sharing buttons to your site.
But what if you have a static site (or anything else which isn’t WordPress)?
- Hook in to the provider’s API(s) (where available) to provide like / share counts
Success! Check your email in a couple of minutes for your free PDF!
3. Parse An API
There are so many freely available APIs out there that you can use to build projects.
- jQuery is a really useful tool to request data from an API via AJAX but why not try writing your own XML HTTP Requests for a challenge
- You could try caching requests in localstorage to avoid unnecessary network requests
Check out my article on simple APIs for inspiration on where to get your data.
4. Create Toast Notifactions
I created the above video to show how you can use a library to create Toast notifications on your site (check out the video if you’ve got no idea what a Toast notification is – it’s got nothing to do with cooked bread!).
For this project, the challenge is to create your own Toast notification tool.
- You could use a setTimeout function to simulate the delay of data being loaded or saved
- Enable to notifications to be displayed at different positions on the screen depending on setting used
5. AJAX Style Login
For this project, focus on creating the front-end component of an AJAX style login.
If you don’t know, an AJAX style login is a login page that doesn’t require the page to be reloaded to determine whether or not you have entered the correct login details.
You could if you wanted to go the whole hog and create the back-end too but you could also mock the successful and invalid login situations by hard coding a username and password and comparing that to what the user enters.
- Update the form with the error messages depending on whether the details are not found or incorrect
- Add spinners, messages or something to inform users that their data has been sent and is being validated (you could use a setTimeout function to mock the delay in sending / receiving data)
6. Word Counter
How about a simple application to parse a block of text and determine how many words are contained within it?
You could advance this by being able to parse the number of words from a URL or a file.
- Provide additional information about the text e.g number of passive sentences
7. Progress Bar
Using a setInterval function create a project that updates a progress bar that you have created
- If you have an existing project that has several API requests, add your progress bar and update it each time an API request completes
8. A Countdown Clock
To make the project more challenging, adding a start/stop/pause button would present some other things to think about.
- Try using localstorage to remember a user’s previous countdown value
9. A guessing game
Sometimes you might be working on a project that requires an element of randomness.
To approach this project you can work on your random number generator skills and ask the user to try and guess this.
For a little more challenging project, you could take some preset data e.g. quiz questions and write a shuffle algorithm to randomise the answers.
- To make a more interactive project, you could save results and scores in localstorage
10. Interactive Tab Panels
With screen real-estate being at a premium in a lot of apps, being able to tab content is a really useful skill.
- Add some animations to add some ‘flash’ to the tab transitions
11. Modal Pop Ups
Similar to Social Sharing, you’ll find a number of free and paid for WordPress plugins for adding pop-ups to your site but adding one to your static site requires a jQuery plugin or similar.
For this project, create a script that is triggered on a user event such as a button click or page load. You can use this to provide notifications, promotions or email signups.
Your project should handle clicking the modal to close it.
You can add animations and different modal entrances (e.g. slide in, fade in) to extend this project.
- You can provide an option in your script to appear in different locations and different content
12. A Light Box Gallery
There are many jQuery plugins such as FancyBox which create a light box style gallery to view images.
This project will be a challenge for how you handle creating the light box and the interactive buttons to scroll through the various images.
If you completed the modal pop up project, you could extend this to create your gallery.
- The images could be loaded from an API to provide a dynamic gallery
If you’re looking for images for your projects why not take a look at my article on 14 of the best places to find images.
13. An Address Book
For this project you could either use an API that provides fake or placeholder data or perhaps structure the actual JSON yourself.
Once you have your data in place, load this in to your application via an AJAX request (either jQuery or XML HTTP Request) as in a real world application, the user data would need to be retrieved in this way.
Your application could search for particular entries in your address book by filtering the attributes.
- You could make the address book editable i.e. allow the user to edit the data (you would need to create a full REST API if you wanted to actually save this though)
Scratch your own itch to come up with project ideas.
Don’t forget you can always use NodeJS if you have an idea that doesn’t fit in to a browser. If you’re feeling adventurous, you can always create a Chrome/Firefox plugin for your project.