This article was originally posted at https://www.blog.duomly.com/9-javascript-project-ideas-for-beginners-that-help-you-to-build-an-amazing-coding-portfolio
One week ago, I wrote an article about HTML & CSS projects, which you can do to practice your skills and start building your coding portfolio. Then I also promised you the second part of this list, javascript project ideas for beginners.
I know how hard it may be to find some nice ideas to build projects when you would like to practice the skills you’ve just got but don’t create another boring todo list. When I was learning Javascript, every time I wanted to build something for practice, I wanted to build something that I can grow, add new features, and make it more advanced. But it wasn’t easy to get the right idea.
That’s why I decided to create this three-particle article to share some nice project ideas for beginners with others who are learning new front-end skills and would like to build something awesome.
When you start creating projects and building your new portfolio, it’s very important to create a Github account, so you can keep your projects in the repository and be able to show it to your future employers.
As always, I’ve got a video version for you, because a lot of us prefer watching content and then reading it, so here it is!
Are you ready to discover my 9 Javascript project ideas for beginners?Usually, it’s learning Javascript, and besides the theoretical knowledge you need to get, you have to practice. And that’s the point where this listing becomes useful for you.
So, let’s start with the list of project ideas you can do while you are a Javascript beginner.
If you’d like to grow this small project, you can build a timer, where the user could set a time for the countdown or stopper.
If you don’t have an idea for the design, feel free to check the example I’ve prepared for you.
Focus on the Regex to validate the values like email or phone number, which are a little bit more complicated than just a simple string or number.
You can show the tooltips with the information on what is wrong and what should be changed on every validation error.
Feel free to get even more creative and try to build an eye-catching form that you can show in your portfolio.
You may try to code a nice effect after the progress bar reaches 100%.
Take into consideration that you will be able to reuse the script like this in other projects or convert it to a reusable framework component.
For the purpose of the training project, you can use a simple tax rebate from your country.
Here’s the example of the calculator.
This is kind of an entertainment application, and you can do different variations of it. You can display the photo of the day, the gif of the day, or the news of the day.
The main idea is to focus on selecting a random item and display it.
You should also take care of resetting the state of the quiz at the end and display the result of the quiz for a particular user.
The first one is to add one voting object and add two possibilities like YES and NO. Then users are voting by those two options, and after voting, you can display the result.
The other option is to display a few voting objects and make them the option to vote at once. So, let’s say you have three images, and when users click on any of them, then the voting is done. And here as well you can show the result after voting.
The game should have an input where the user can guess the word or the letter. Users should be limited to some amount of guesses, for example, 10.
When it’s the last guess and user is not able to pass the correct word, the game is lost; otherwise, it’s won, and the user gets the point.
If you missed part one, HTML & CSS project ideas, feel free to jump here.
Besides that, remember to create a GitHub repository for each of those projects, to be able to show your code to your future employers.
If you don’t feel confident enough and need some guidance to feel free to check out Duomly’s Courses, our YouTube Channel or Duomly’s blog to build some projects with us.
I hope you’ll find this listing useful at the beginning of your front-end career.
Also, remember that part 3 is coming in the following day, with the other project ideas for front-end frameworks.
Thank you for reading,
Anna from Duomly
#javascript #web-development #html #css