1. Master the navbar
Hamburger menus are handy on smaller screens. They allow the web browser’s navigation tabs to be hidden away but viewable with just a click or tap. To get started on this, you’ll want to use event listeners to trigger certain actions on the webpage.
2. Create inventory
Building and managing an inventory is another great beginner-friendly project. If you don’t know what to keep track of, start small with an imaginary list of items. For example, if you were selling a product line and housing it as inventory, what would your items be, and how would you want to keep track of them?
This is an excellent project to understand arrays. Within an array, you can create product classes to set the properties for your products, such as name and a value stat. Then, to keep track of certain aspects of those products, you can create subclasses.
3. Make a responsive image gallery
Programming a responsive image gallery allows you to practice with looping and event handlers. Whether you want images to enlarge with mouse rollover effects or create a flip image, scripting is the way to do it.
4. Create interactive elements
Projects like these can help you grow quickly, so don’t skip them because they sound simple. Building a foundation of skills is essential in taking on larger, complex application builds.
5. Interact with HTML lists
These are sometimes called CRUD (Create, Read, Update, and Delete) applications. For this project, you’ll assign functions that allow users to add or delete items in lists. It’ll also involve implementing event listeners and grabbing elements by their CSS ID selectors.
6. Create a responsive questionnaire
HTML forms are a commonly used tool on web pages to collect data from site visitors. You can also use forms with booleans and conditionals to interact with a visitor’s answers right in the browser.
You’ll use conditional expressions that respond depending on the answer to specific questions. Another option is to create a quiz or test that displays results after all the questions have been answered.
7. Make a music player
8. Get creative with the canvas API
Note, APIs usually require intermediate coding skills to incorporate, but we think you can handle the Canvas API because it’s more of a creative tool. Have fun layering to create something awesome!
9. Build a 2D/3D game
Making 2D games is more straightforward than making 3D games, so maybe start with 2D. When it comes to game ideas, creativity is encouraged! Maybe try to recreate your favorite Atari game or create something new, like Neptune Cows versus Plutonian Droids (working title).
10. Build a simple front-facing social platform
11. Automate tasks
This one is a bit more advanced, but it’s a good project to take the time to learn because it has various applicable uses. Take it one step at a time. The first part of this project could be simply loading a worksheet.
12. Data science
If you’re a Data Analyst or prospective analyst, you can program an application that’ll calculate the significance of a given data set.
13. Generate things
This one partly falls into the interactive element’s project column, but we included it as a separate project because it’s an enjoyable way to learn about arrays. What you generate is up to you, but here are some ideas: jokes, usernames, or maybe images.
Essentially, you’re scripting an application that will pull an item from a list when a button is pressed in the browser. Some websites are solely dedicated to this, so if you pick a niche enough topic, you could get some decent web traffic from folks who need help deciding on something.
14. Play with algorithms
Once you’ve mastered the fundamentals of variables, arrays, loops, and functions, you’ll be ready to take on algorithms. Programming algorithms is a robust skill set that teaches problem-solving techniques.
15. Create a single page application (SPA)
Finding the right project to devote your time to can be difficult. If this list doesn’t quite do it for you, we have more project ideas in our forums.