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!
Every front-end developer has to learn specific skills, and starting with HTML and CSS is pretty obvious, as it’s essential. After this step behind you, and you got familiar with coding the layouts, using CSS frameworks like Bootstrap and creating animations in CSS, then it’s time for you to go to the next stage.
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.
2. Simple Image Slider
3. Form with Validation
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.
4. Progress Bar
The next idea for the project is to build a progress bar. It can be a simple bar with the animation every few ms and changing the color on loading.
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.
5. Simple Tax Calculator
For the purpose of the training project, you can use a simple tax rebate from your country.
Here’s the example of the calculator.
6. Joke of the Day
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.
8. Voting System
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.
9. Hangman Game
The other application is a great idea for beginners, but a bit more advanced is a Hangman Game.
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