DEV Community

loading...

⚑10 JavaScript Projects Every Beginner Should Try

The Nerdy Dev
Building products is my profession, Creating content is my passion. We believe that Education should be freely accessible to everyone and no one should be deprived of it.
Originally published at the-nerdy-dev.com ・Updated on ・3 min read

Hey everyone πŸ‘‹πŸ»,

In this article, let us see 10 JavaScript Projects Every Beginner Should Try.

Introduction

JavaScript is the language that powers the web and a language that you must know if you want to become a web developer. It is also one of the most popular programming languages in the community. In this article, let us see 10 Projects that you can build to get hired and get a place in the industry.

1. Modals

Alt Text

Creating a Modal using Classes in JavaScript. A fun and interesting project to practice DOM, Event Handling and Classes.

What will you learn?

  1. Document Object Model
  2. Event Handling
  3. Classes and Object Oriented Programming

2. Tabs

Alt Text

Implementing a Tabs System in JavaScript.

What will you learn?

  1. Document Object Model
  2. Event Handling
  3. Classes and Object Oriented Programming

3. Range Slider

Alt Text

Implementing a Range Slider in JavaScript especially an RGB slider to change values for the R, G and B components and to reflect the changes in the background.

What will you learn?

  1. Document Object Model
  2. Event Handling
  3. Classes and Object Oriented Programming
  4. Higher Order Methods like forEach

4. Slideshow

Implementing a Slideshow in JavaScript to change slides in the horizontal way.

Alt Text

What will you learn?

  1. Document Object Model
  2. Event Handling
  3. Classes and Object Oriented Programming

5. Salary Calculator

Alt Text

Input a Salary for the user and generate the value for different components/allowances like house rental allowance etc.

What will you learn?

  1. Document Object Model
  2. MVC pattern
  3. Event Handling

6. Scroll Indicator

A basic app to demonstrate the amount of scroll that the user makes.

Alt Text

What will you learn?

  1. Document Object Model
  2. Event Handling

7. Intersection Observer

Implementing Infinite Scroll Feature using Intersection Observer API.

Alt Text

What will you learn?

  1. Document Object Model
  2. Event Handling
  3. Intersection Observer API

8. Playing with Text

Playing with Text like reversing a text, changing font size, changing the font style into bold, italic, underline etc.

Alt Text

What will you learn?

  1. Document Object Model
  2. Event Handling

9. Custom Search Filter

A small application that demonstrates adding items to a list, removing items from a list and filtering an item based on some search term.

Alt Text

What will you learn?

  1. Document Object Model
  2. Event Handling
  3. Higher Order Methods like forEach

10. Sticky Navbar

A simply sticky navbar.

Alt Text

What will you learn?

  1. Document Object Model
  2. Event Handling

So this is it for this article. Thanks for reading.

Here is the video link if you want to create all these projects from scratch :

PS - If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

Looking to learn React.js with one Full Project, check this out :

If you want to support the cause, you can buy me a coffee πŸ˜„

Buy Me A Coffee

πŸ‘‰πŸ» Follow me on Twitter : https://twitter.com/The_Nerdy_Dev
πŸ‘‰πŸ» Join our Discord Server : https://discord.gg/fgbtN2a

Discussion (20)

Collapse
grifano profile image
Serhii

Nice post πŸ‘
It’s should be even more helpful if you get a tutorial for each this project. I think at least a user-stories should be great πŸ˜‰. In this case one by one you can complete this mini project. Something like freeCodeCamp doing.

Collapse
pierrewahlberg profile image
Pierre Vahlberg

I would totally like to see for example the range slider changed to something algorithmic or recursive. Its a really good practice to get to know loops and/or recursion and illustrating it is a good way to visualize what you learned.
Nice ones are for example illustrating sort methods, changing font sizes depending on how common a letter is, or drawing a folder tree from a nested array :) I dont think they are too advanced for a beginber but rather really good to have done once when meeting it professionaly later on

Good combination of exercises otherwise, though i think modals, sliders and tabs are really a lot more CSS than javascript. Its good though to have an understanding but they can also be implemented very very differenly considering device resolutions, content types and responsiveness i suppose.

Collapse
faridsa profile image
faridsa

definitely a very good post. Thumbs up!

Collapse
thenerdydev profile image
The Nerdy Dev Author

Thank you !

Collapse
meo3w profile image
Phil Hasenkamp

Well done! Thank you for sharing your knowledge!

Collapse
thenerdydev profile image
The Nerdy Dev Author

Thank you ! πŸ™πŸ» :)

Collapse
carl0scarras profile image
Aprendiendohtml

Thanks appreciate ❀️

Collapse
thenerdydev profile image
The Nerdy Dev Author

:)

Collapse
emekaorji profile image
EmekaOrji

Nice post!
I gave a 'like' already, but I think you should have used the word 'should' in the heading and not 'must'

Collapse
thenerdydev profile image
The Nerdy Dev Author

Yeah. Right ! Just edited :)

Collapse
maqamylee0 profile image
emmilly immaculate

Definately gona try them thanks

Collapse
thenerdydev profile image
The Nerdy Dev Author

Welcome.

Collapse
ishayab profile image
ishayab

Thanks so much

Collapse
thenerdydev profile image
The Nerdy Dev Author

Welcome.

Collapse
cfarhad profile image
Farhad Bagheri

Cool

Collapse
thenerdydev profile image
The Nerdy Dev Author

Thanks :)

Collapse
webdevwanderer profile image
webdevwanderer

Great!

Collapse
thenerdydev profile image
The Nerdy Dev Author

πŸ™πŸ»

Collapse
miryanakv profile image
miryanaKV

Very generous! Tnx

Collapse
thenerdydev profile image
The Nerdy Dev Author

πŸ™πŸ»