Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Top JavaScript Projects for beginners
Web_Codr
Web_Codr

Posted on • Edited on

     

Top JavaScript Projects for beginners

Credits for these projects goes toCode With Bishal.
All the source code and the demo will be availablehere

Here are a few beginners friendly JavaScript projects which you can start right away.
1)Animated hamburger menu [Responsive]
Animated Hamburger

Preview / Download

  • What you will build:Using this code you can build a navbar menu with animation. the navbar is responsive and very easy to make. You can download the source code or preview it to get started. Languages used in this code are HTML, CSS, and JavaScript.

2)Generate Random password using JavaScript [Responsive]
Random password generator

Preview / Download

  • What you will build:Using this code you can build a random password generator. The password generated here is 8 digits long. You can download the source code or preview it to get started. Languages used in this project are HTML, CSS, and JavaScript.

3)Create responsive accordion using JavaScript [Responsive]
Responsive accordion

Preview / Download

  • What you will build:Using this code you can build an accordion. The accordion that you can create using this code is very useful. You can easily hide content inside the accordion and the content will be revealed if someone clicks on it. You can download the source code or preview it to get started. Languages used in this project are HTML, CSS, and JavaScript.

4)Image gallery with filter option [Responsive]
Filter gallery
Filter gallery

Preview / Download

  • What you will build:Using this code you can build a gallery with a filter effect. The gallery created with this code will create a gallery with a filter effect. You can filter the images using the buttons. You can download the source code or preview it to get started. Languages used in this project are HTML, CSS, and JavaScript.

5)List with drag effect [Responsive]
list
list

Preview / Download

  • What you will build:Using this code you can build a list with drag effect. The list created with this code builds a list that you can drag. You can use this as your task manager where you can prioritize your tasks. Languages used in this project are HTML, CSS, and JavaScript.

Note: Some posts may not have a download option but all the posts have the option to copy the source code.
Thumbnail credits:Pexels - pixabay

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Hey there, I am Bishal from North-east India, hope you will like my coding posts.
  • Location
    India
  • Work
    Student / Software developer / freelancer
  • Joined

More fromWeb_Codr

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp