As a beginner web developer, finishing projects is hard:
- Sometimes you reach the limits of your current skill before you can complete your vision
- Other times, something else you need to learn catches your attention
Both these scenarios are OK! But it can be frustrating never having anything concrete to show for your efforts. Especially if you need to showcase your work to an employer.
Here is some advice that changed the game for me:
To finish projects and build a flourishing portfolio start small but dream big. You can always add more features later.
In this post I am sharing 20 small and achievable projects you can start today and finish this week.
If you're not good at design yet, don't worry. We've made some UI designs in Figma (🔗 link included!) for you to recreate.
20 mini projects
For each mini project, look out for the following:
- 🎯 Project Goals: These will include specifications meant to push you to learn something new.
- 📝 What will you learn?: Here are some functions, properties, or ideas you will likely encounter and learn (if you don't know them already)
- 🏋🏻 Stretch Goals: Occasionally, I will include goals for more intermediate developers (or beginners if you want to push yourself and expand on the project further.)
ℹ️ Good to know
These projects aim to teach you something new about web development. You might not know how to build them at first but do not worry. Even the most experienced developers "Google it" all the time.With that said, it would be good if you had the basics of HTML, CSS and JavaScript down otherwise you might have difficulty following along.
1. Google Homepage
One of the best projects you can do as a developer (both early and later) is to clone existing websites and web pages.
Just by visiting the web page, you have a perfect guide on how every element should behave and look. You can inspect the source code for more details or try your hand at building their layout from the ground up, emulating the process other web developers took to create that design.
Additionally, website clones (mixed with other projects that show your creative eye) can be great portfolio pieces that show employers you're able to build a website that can do everything the big brand's websites can.
- 🎯 Project Goals: Create a replica of the google homepage. No need to add functionality yet. Just try to emulate the layout as best as possible. You can check out this Scrimba lesson for a walkthrough for a bit more of a guide.
- 📝 What will you learn? Basic CSS, cloning a layout
- 🏋🏻 Stretch Goals: Try creating a mockup of the search results page or cloning a more complicated homepage (I suggest Yelp).
2. Nested Horizontal Nav Bar
Almost every web page has a nav bar in some form.
Learning how to build one early on is relatively straightforward and will benefit you when building any other web page in the future.
- 🎯 Project Goals: Create a horizontal nav bar that lets users hover over or click on categories to expand them into dropdown menus. In those dropdown menus, include more categories that users can hover on or click to expand another submenu.
- 📝 What will you learn? Toggle classes, toggling multiple active classes at once, positioning
3. Scrolling Dropdown Sidebar
Nearly the same as the last project, but you'll be making a vertical nav bar this time.
Instead of being static, this one expands from a dropdown button and is scrollable. This is also a very common website feature (YouTube has one!), and learning to build one is just as important.
- 🎯 Project Goals: Create a dropdown sidebar that expands when users click a button at the top of a web page. Include enough items so they don't all fit one one screen and allow users to scroll through them.
- 📝 What will you learn? Toggle classes, handling overflow
- 🏋🏻 Stretch Goals: Add nested divs like in the previous project
4. Language Selector Dropdown
While not easily executable for every web page, allowing users to view
As a side note: Don't just hard code the switch. Use the lang tag, as it tells screen readers what pronunciation to use.
- 🎯 Project Goals: Create a web page with some text and a drop down menu which allows users to select from a couple of languages. When chosen, the button should change the text content of the page into the selected language.
- 📝 What will you learn? Lang tag
5. Functional sign-up form
Another super common, straightforward web page component should allow for much customization and creativity in design.
The main thing to look out for here is to verify the user's input. This is a vital skill for web developers, and learning to think of and test all possible edge cases helps ensure that your elements behave the way you want them to.
- 🎯 Project Goals: Make a sign up form that allows users to type in their name and email. Save that information somewhere when the sign up button is pressed only if a valid email is given. If not, ask the user to reenter their info. Also, make sure to mask their password.
- 📝 What will you learn? Validating user input, masking information, basic regex(optional)
- 🏋🏻 Stretch Goals: Add requirements for the complexity of the user's password (ie. only allow ones that have one capital letter, or contain at least one special character, etc.)
6. Login page
Any website that has a sign-up form is going to have a login page, thus this project carries all the same benefits as the previous one.
This time, instead of checking if the user's input follows a specific pattern you're making sure that it matches a specific set of information.
Make sure that each input field doesn't only accept one answer but that they're checking if the username and password match a registered user (Hint: try using key-value pairs).
- 🎯 Project Goals: Make a login page that displays a message when the user types in the correct combination of username and password and hits the "login" button. It should prompt them to try again when inputting an incorrect combination.
- 📝 What will you learn? Validating user input, masking information, objects(optional)
- 🏋🏻 Stretch Goals: Make your login page work in tandem with a sign-up page. Save the details when a user registers and make them valid inputs on the login page.
7. Newsletter pop up
These things plague every news site and food blog in existence. They might be annoying, but they are popular, so we better learn how to build them.
Take what you learned about toggling active elements from the nav bar projects and apply it here in a slightly different format. The only difference is this window should be manually dismissable, and the rest of the web page should be inaccessible while it is present.
- 🎯 Project Goals: Make a newsletter subscription window that overlaps a portion of the main web page, making the background inaccessible when the user hits a button. Include an exit button on the pop-up that dismisses it.
- 📝 What will you learn? Modal pop-ups, overlaying elements
- 🏋🏻 Stretch Goals: Make the pop-up appear after the user is on the page for a set amount of time instead of when they hit a button.
8. Share Button
Isn't it crazy how you have the power to build so many of the elements you see and interact with daily on big websites? Share buttons can be handy when interfacing with social media is so important.
Your main hurdle is learning to pull the user's current URL and access their clipboard.
Again, this is a relatively simple project whose details you can probably conceptualize in your head, but having the hands-on experience of doing it will build muscle memory that will make it much easier to build the next time you require one.
- 🎯 Project Goals: Create a share button that, when clicked, creates a pop-up with the link to the current web page, various links to social media websites, and a button that allows users to copy the link to their clipboard
- 📝 What will you learn? Modal pop-ups, accessing user clipboard, using icons (optional)
- 🏋🏻 Stretch Goals: When users click on each social media website, there is a prepared body of text with the link to the web page, so all they have to do is hit "post."
9. Word Counter
Now we're moving into less common web page features, but ones that are still handy to know about and will teach you good skills to have in the future.
This project can be implemented into a larger text or code editor project in the future and will teach some basic javascript skills alongside a realistic way to use them.
Validate that your app is only counting whole words. Again, it's essential to think about corner cases here, such as symbols or words with dashes.
- 🎯 Project Goals: Create an app that allows users to type in text and has a counter which displays how many whole words the text contains.
- 📝 What will you learn? Basic iterators and arrays, regex(optional)
- 🏋🏻 Stretch Goals: Make it count characters as well. Make sure it's excluding white space. You can include symbols with letters or even choose to calculate them separately.
10. Comment section
Websites have many areas where users can type in some information, hit post, and appear on the web page.
You see this on social media, chat windows, and comment sections!
In this mini-project, you will be generating HTML elements with user input. Check that everything formats correctly and that you're validating user input.
- 🎯 Project Goals: Create a comments section where users can input their comments and a name. When they hit the post button, their comment should be appended below alongside their name. Make sure there's a maximum word limit.
- 📝 What will you learn? Generating HTML elements in Javascript, utilizing user input
- 🏋🏻 Stretch Goals: Instead of having a max word limit, cut off comments that are too long but include a "read more" button next to them to expand the entire comment. Allow users to reply to other comments.
11. Rock Paper Scissors
This project deals with user input but in a very different way. Instead of reiterating that input to the user, or checking it against a requirement, in this project, you'll run the user input through a basic logic system.
Have fun with this one, it's pretty simple, and games are meant to be enjoyed. Add some additional feedback to the user, focus on visuals, and give it some flare.
- 🎯 Project Goals: Create a rock paper scissors game that lets the user pick a hand that goes against a randomly generated hand for the computer. Display who won each hand and keep track of the scores.
- 📝 What will you learn? Basic logic systems
12. Google Chrome Extension
The specifics of what extension you create aren't as important as the experience of building and shipping an application that you can use.
You can find out pretty quickly how to make a chrome extension, even this specific one, but if you want a guide, Scrimba has an excellent tutorial that will walk you through the process.
Once you go through it, JSON files and developer tools all seem a bit less scary to work with, in my opinion. It's also really cool to be able to use your own creation, which can be a rare occurrence early on in the path to being a developer.
- 🎯 Project Goals: Create a Google Chrome extension that allows users to save and delete web pages
- 📝 What will you learn? Very basic JSON, saving data on the user's local storage
- 🏋🏻 Stretch Goals: Improve the Scrimba tutorial's design, allowing users to edit and name links as well.
13. Profile Picture Uploader
This is a simple way to learn how to manage images and user-uploaded files. Besides profile photos, plenty of websites let you upload pictures to be resized, stored, or shared online.
Look out for very large and very small picture sizes. Also, consider how the uploaded picture will line up in the preview frame.
- 🎯 Project Goals: Create a page where users can upload pictures alongside a preview of what their uploaded image would look like in the profile picture frame. Include buttons to remove or replace the image with a new one.
- 📝 What will you learn? Utilizing user uploaded files, file uploads, sizing images
- 🏋🏻 Stretch Goals: Make a whole profile editor where users can also change their name, bio, and status
14. Preview Image + Image Expander
This one is a lot more niche but is a feature on many websites (think Reddit). The main goal of this one is to learn how to resize images.
Pictures displayed on a web page are rarely shown in their full size, and when setting a standard size, you need to think about how different picture shapes and proportions will appear. You also get to work a little with toggling HTML elements again
- 🎯 Project Goals: Create a button next to an image fixed to a smaller size that expands that image to full size when clicked. Include multiple images down the page, ensuring that everything formats correctly when the image is expanded
- 📝 What will you learn? Managing proportions, image sizing
- 🏋🏻 Stretch Goals: When the button is pressed, bring the image to the forefront of the web page in full size, blurring out the rest of the web page in the background
15. Image Carousel
Now here is a landing page classic. Images carousels come in all shapes and sizes and can be very flashy if a developer chooses to build them that way. This is one of the most straightforward ways to create one, but like all of these projects, it has a lot of room for customization if you wish.
- 🎯 Project Goals: Create an image carousel that displays a single image at a time alongside two buttons that allow users to navigate through a set of pictures. Make it so that each picture fades into the next when a button is pressed.
- 📝 What will you learn? CSS transitions, animation(optional)
- 🏋🏻 Stretch Goals: Instead of fading to the next image, make the first image slide out of frame as the next image slides into the frame.
16. Responsive project page
This is a great project because you can use it to display all your other projects! This is a perfect opportunity to build a page for your online portfolio or website, which is necessary for a web developer.
I'm not specifying almost anything about what to include because this is your time to show your own creativity. Make it aesthetically pleasing and readable, but don't focus on what you've seen in the past. Conceptualize what you want people to know about your design, learn what you need, and put it to work.
- 🎯 Project Goals: Create a project page with links to several projects with overlaying words, filters, and graphics. Add responsive animations or transformations on hover and click for each.
- 📝 What will you learn? Animation, developing a personal style
- 🏋🏻 Stretch Goals: Add animations as users scroll through the page
17. Sound Board
Sound is often an underutilized aspect of web design. They can be distracting or even annoying to a user, but when used correctly, sound can add a great touch of personality to many projects.
This is a straightforward way to start using audio files; you can do whatever you want with them. The goal here is to learn how audio files behave and how to connect them to your HTML elements, which should be a familiar enough process.
- 🎯 Project Goals: Make an app with at least 8 buttons that each play a sound when pressed. When a new button is pressed, the previous sound should stop.
- 📝 What will you learn? How to use audio files
18. Music player
This is a much more realistic way to use audio files on a web page or website. These can be pretty popular, especially on any company's website that has a podcast. Instead of having separate sounds for each button, you will build an interface that lets users browse through a few songs.
Try not to hard code each song shift. Using something like objects or arrays, not only will make the project easier but also will make your code more flexible.
When possible, it's a good idea to make sure your code is as reusable and extensible as possible.
- 🎯 Project Goals: Make a music player that can play at least three songs and display the song's name, artist, and unique picture. Add pause, play, next song, and last song features.
- 📝 What will you learn? Audio functions, objects(optional)
- 🏋🏻 Stretch Goals: Let the user jump to different timestamps in the song
19. Friends list with filtering
This is a feature that won't be used for a ton of projects. However, filtering visible elements based on certain criteria can be done with posts, users, articles, etc.
There are many ways to complete this project, but try not to hard code a group of friends to show up when a specific button is pressed. Your code should check each friend for their status and display them if the user is currently filtering for them.
- 🎯 Project Goals: Create a navigable friends list with several "Friends" who each have pictures, usernames, and either an online or offline status. Include three buttons allowing users to view all friends, just online friends or offline friends.
- 📝 What will you learn? Active classes, filtering by classes
- 🏋🏻 Stretch Goals: Instead of giving each friend a set status, include a button on each friend that allows users to change their status, making sure that the buttons still filter them accordingly.
20. Landing page
Here we are at the landing page: the ultimate HTML 101 finale, the short term goal for many beginner developers, and the perfect opportunity to use everything you've learned up until now.
Set up the basic layout, ensure everything is aligned properly, and then do whatever you want.
The previous mini projects and skills learned from them can be put directly onto this page. The real difficulty will be making sure that everything works together.
Coding is tricky. Sometimes your pop-up makes the audio player stop working forever, but to learn how to fix those cases, you have to get rid of your fear of encountering them.
- 🎯 Project Goals: Create a landing page for your hometown following the given layout in this Scrimba module.
- 📝 What will you learn? Layout, flexbox, color palettes
- 🏋🏻 Stretch Goals: Utilize what you've learned! Add a share button and a newsletter pop-up. Instead of the three images in the middle, create an image carousel. Create a functional sign-up button and validate the user's email before accepting it. Include a nested nav bar, horizontal or vertical.\ The Verdict -------------
Whether you got to work through some of these projects or just took the time to look through them, I hope you were able to pick up a few new ideas or skills from this article.
Completing solo projects is not only a great way to build experience but is also a great way to build self-confidence 💪
Take your results from these projects as proof that you can become a developer. No matter monumental and complex the software and systems we interact with seem to be, they are all ultimately made up of a million mini projects, and you just completed some today!
Each new line of code is progress, and progress is always worth celebrating.
Top comments (0)