63 Open Source Projects for Beginners Javascript

63 Open Source Projects for Beginners Javascript


December, 14 2021

Today we will go into learning about good open source web development tools for web development and design.


Web Development Tools for Beginners

Day.js

Day.js is a minimalist Javascript library with only about 2Kb in size. It can work on both browsers and NodeJs (server side). It is quite similar to moment js, so you can rest assured when switching to this library. In addition, it can also run on most popular browsers today such as Chrome on Windows XP, IE 8, 9, and 10 on Windows 7, IE 11 on Windows 10, the latest Firefox on Linux, and the new Safari.

 Day.js

Link

Mono Icon

Mono Icon Is an open source icon that you can easily apply to your website quickly and completely for free. You can embed it directly in the HTML page via CDN or install it via npm for your web project.

Mono Icon

Link

Visual Extension Code Cho Microsoft Edge

With the development of the Edge browser, VS Code has also released a new extension for testing and running edge web projects right in VS Code without having to install this browser on the computer.

 Visual Extension Code Cho Microsoft Edge

Link

Blob generator

Blob generator is an online tool that makes it possible to create complex shapes for web pages through SVG editing. You just need to change the properties provided and the code will be automatically generated.

Blob generator

Link

Library Detector

Library Detector is a Google Chrome extension that makes it easy to see what Javascript technology a website is using.

Library Detector

Link

tsParticles - TypeScript Particles

tsParticles - TypeScript Particles is a library rewritten on the basis of particles.js with the purpose of making it easier for you to create more background animations and provide more utilities and support functions. What I like about this library is that it can be used for many different frameworks such as reactjs, vuejs, angularjs, Jquery...

tsParticles

Link

CSS Value

CSS Value is a website with a function that makes it easy to determine the value of a certain CSS property. For example, if you choose the text-decoration attribute, it will automatically display the related attributes: text-decoration, text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-style, text-decoration-thickness...

CSS Value

Link

RunJS

RunJS is a desktop application that helps you to code specialized in Javascript and Typescript. Some of its strengths are that you can test code quickly, import and test code with libraries easily, and be able to modify the interface, theme, and font to suit your preferences.

RunJS

Link

Duet Date Picker

Duet Date Picker is an open source code developed by Duet Design System's. It allows you to easily build a date picker component for your website without using any additional libraries. Some of the features that I feel like in this library are having a dark and light theme, being able to set the time interval that the user is allowed to choose, setting the date by region...

Duet Date Picker

Link

urlcat

urlcat is a compact Javascript library with a size of only about 0.8kb, without using any additional libraries. It makes it possible to quickly and easily build queries on URLs, and also avoids common mistakes when we build urls for websites.

urlcat

Link

ztext.js

ztext.js is a javascript library that makes it easy to build 3D text for web pages and can be used with all types of fonts. In addition, you can also create 3D effects for other elements such as SVG, Image, emoji.

ztext.js

Link

GitHub Profile README Generator

GitHub Profile README Generator is an online web tool that helps you build your profile page on github in the most complete and detailed way including title, job, programming language skills, (front-end) , backend, framework…), social network links…

GitHub Profile README Generator

Link

Wrap SVG Online

Wrap SVG Online is an application that makes it easy to edit SVG images for web pages by dragging and dropping images uploaded from your computer.

Wrap SVG Online

Link

3D Book Image CSS Generator

3D Book Image CSS Generator is an online tool that allows you to quickly and easily create 3D book covers and apply them to your website. You just need to provide an image of the book and edit the provided CSS properties such as Width (book width), Height (book height), Thickness (book thickness) ... as you like, the code snippet HTML, CSS will be automatically generated respectively.

3D Book Image CSS Generator

Link

Print.js

Print.js is a compact Javascript library that allows you to print files directly on a web page without having to redirect or use embeds. It supports printing in many formats such as PDF, HTML (eg form...), images, JSON... In addition, it also runs on most popular browsers such as Chrome, Firefox, Safari, Edge and Opera.

Print.js

Link

Công Cụ Tabulator

Tabulator allows you to create interactive tables with data as easily as sort, add, edit or delete HTML tables. We can get the data for the table from Javascript Array, data source from AJAX, or JSON format. In addition, it also supports most popular browsers today such as Google Chrome, Firefox, Safari, Opera and Edege. It is also applicable to today's popular javascript front-end frameworks such as ReactJS, VueJS and AngularJS.

Tabulator

Link

Textures JS

Textures JS is a library that helps you quickly and easily create SVG patterns for web pages. It is built on top of D3.js for the purpose of visualizing your data. In my opinion, it is used quite a lot in dividing areas in the map using corresponding patterns.

Textures JS

Link

DOCX

DOCX is a library that allows you to create .docx files from web page elements using Javascript or Typescript. It works well in both browser and server side (with Nodejs). As far as I can see, it has a lot of detailed examples for each component of the website as well as specific tutorials when you apply it to React, Vue or angularJS.

DOCX

Link

Keen-Slider

Keen-Slider is a free Javascript library that makes it quick and easy to create a touch slider component (usually on mobile phones) and many other useful adjustment features such as vertical slider, multiple slides, lazy load mode for slides... As far as I can see, this library also has a very nice feature of creating a timepicker (selecting time) according to IOS design and background transition effects for the website.

Keen-Slider

Link

Math JS

Math JS is an open source math library with over 10.5k stars on Github for Javascript and NodeJS (server-side). It gives you flexibility in calculating and dealing with many different data types such as numbers, big numbers, complex numbers, fractions, units and matrices.

Math JS

Link

Rough Notation

Rough Notation is a compact Javascript library that helps you to create annotations for elements in web pages with many beautiful effects such as underline, box, circle, highlight, brackets...

Rough Notation

Link

Flip

Flip is a plugin that allows you to quickly and easily create counters with flip effects for your website. If you need to create event timers, promotions, or fundraising campaigns, I think this is the best library for you.

Flip

Link

Quotebacks

Quotebacks is an online tool that allows you to quickly embed beautifully designed quotes on your website. We only need to provide the program with 4 basic parameters: the cited paragraph, the author's name, the title and the url of the source of the citation. Then the code will be automatically generated, you just copy it to the website you want to display and it can be used.

Quotebacks

Link

SVG Path Visualizer

SVG Path Visualizer is a tool that helps you to quickly and intuitively see SVG images by entering SVG path data. In addition, the tool also provides detailed instructions so that you can understand how to create basic SVG shapes such as lines, curves, triangles...

SVG Path Visualizer

Link

Toast UI Editor

Toast UI Editor is a text editor that allows you to edit Markdown documents for text or WYSIWYG in web pages. By dividing the library into many different plugins, it will make it easier for us to optimize in only adding the necessary functionality to our website. Examples are the plugin editor-plugin-chart : displays charts for the editor, editor-plugin-code-syntax-highlight highlights code snippets, editor-plugin-color-syntax edits the color of text. .. But now it only supports pure javascript, ReactJs, VueJs and Jquery only!

Toast UI Editor

Link

Jexcel

Jexcel is a compact Javascript library that helps you create highly interactive tables for your website with data that can be pulled from JS Array, JSON, CSV or XSLX files. As I see it, it has some very useful features such as a user-friendly interface, easy to customize and combine with other plugins and libraries, handle complex data with simple operations.

Jexcel

Link

Chocolat.js

Chocolat.js is a Javascript library that makes it easy to display responsive lightboxes on web pages. In addition, you also have the right to set one or more images on the same page, display the image in full screen or limit it to any div tag you want.

Chocolat.js

Link

Image Compare Viewer

Image Compare Viewer is an open source library built with Javascript that makes it possible to create a component that compares two images directly on the web page. In my opinion, it is often used to compare images before and after editing to help users have a more intuitive and distinguishing view.

Image Compare Viewer

Link

Trianglify

Trianglify is a library that allows you to create beautiful background patterns for your website by combining and building on triangles. You just need to choose the parameters provided by the library such as width, height, palette, cell spacing... that you want to set for the background pattern.

Trianglify

Link

Notyf

Notyf is a Javascript library that helps you create toast messages for websites with a size of only about 3Kb. It is displayed responsively on many different device screens and is easy to use with today's popular JS frameworks such as React, Angular, Aurelia, Vue, and Svelte.

Notyf

Link

Dinero.js

Dinero.js is a javascript library that provides many features to help you work and deal with currency related problems in the web.

Dinero.js

Link

BEM CHEAT SHEET

BEM CHEAT SHEET is a website that gives you a more optimized and consistent way of naming classes with your website components. Naming according to this rule will help developers in the team easily understand the function of each class as well as work together more effectively.

BEM CHEAT SHEET

Link

Rough.js

Rough.js is a graphics library for quickly and easily drawing draw lines, curves, arcs, polygons, circles, and ellipses in web pages. In addition, it also supports SVG Path too!

Rough.js

Link

simpleParallax.js

simpleParallax.js is an open source javascript library with compact size, it will help you to create parallax animation effects for website images simply and easily.

simpleParallax.js

Link

Free Favicon Maker

A favicon is a small logo that is displayed on a browser tab when a user visits your website. Also you can use another format like svg... I would like to introduce to you a tool to help create favicon easily, beautifully designed and completely free, Free Favicon Maker.

Free Favicon Maker

Link

The good line-height

The good line-height gives you a more intuitive view of attribute usage line-height for text in web pages. It provides 3 main properties for you to customize edit as

  • Font size: Font size.
  • Multiplier: Spacing between lines.
  • Grid row height: Defines the lines in the grid.

The good line-height

Link

CSS 3D Transform

This is a collection of ways to use the perspective property to create 3D objects for web pages. The part I like best here is that each code snippet has a specific example next to it. This will make it easier for you to visualize your audience and see which ones are suitable for your website.

 CSS 3D Transform

Link

Good Web Design

Good Web Design is a website that collects many beautiful designs for landing pages and is divided into many sections such as CTA (Call to action), navbar, footer, case study...

 Good Web Design

Link

BGJar

BGJar is an online tool that makes it easy and fast to create SVG backgrounds for your website. You just need to edit the necessary information, the web app will automatically export the image or code for you to apply to the website.

BGJar

Link

Bootstrap Icons

Previously, Bootstrap Icons was born to serve the needs of building Bootstrap components, documentation.. However, today it can also be used for many other projects through the icons being formatted in SVG style. It will help you to easily style icons through CSS and not be afraid of broken images.

Bootstrap Icons

Link

Squircley

Squircley helps you create beautiful shapes for objects in the web such as backgrounds, icons, logos...

Squircley

Link

mailgo

Normally when you open a mail link, the browser will use the default application to open the email editor. As for mailgo, you can set up options to help users open other email editors such as Gmail, Outlook... or open by default. In addition to using the a href="mailto:" tag, it can also be used with href="tel:" too!

mailgo

Link

Forge Icon

Forge Icon is a place that combines many different types of icons for your web projects such as e-commerce, travel, social networking, app design...

Forge Icon

Link

GooFonts

For Fonts, I use Google Font the most. It's both free and has a lot of beautiful fonts. However, with such a huge number of Fonts, it will be really difficult for you to find a suitable font for your website. Therefore, I would like to introduce to you a tool called GooFonts. It will have the task of dividing the font types of Google Font into many small arrays such as fonts for newspapers, schools, cartoons, logos...

GooFonts

Link

CSS Spider

CSS Spider is an extension for Google Chrome, Firefox with the main task of helping you to view the properties and get the CSS code of any object in the web page.

CSS Spider

Link

Bit

In programming, we will usually store good and useful code after using it to solve problems. The main purpose is that if you encounter a similar situation in the future, you can use it reuse without having to waste time searching and thinking.

Bit was born to make it easier for you to work on the above. It will store the code right away on the cloud and you can access it anywhere without worrying about security. There are two ways to save code snippet is private(only you can see) and public(everyone can see).

So the Bit tool is also the place where a lot of useful code from other programmers (like public) that you can refer to. For the free version:

  • 1 private project.
  • Unlimited number of public projects.
  • Unlimited number of private and public Components.
  • There is a supportive community.

Bit

Link

Hat.sh

Hat.sh is a free tool that helps you encrypt files quickly, easily and securely.

Hat.sh

Link

screen.guru

screen.guru is an online tool that allows you to take screenshots for your website.

screen.guru

Link

FontBase

FontBase helps you manage fonts quickly and easily with a friendly interface for web designers. It has a number of conveniences such as one-click Google Font library, always updated with new versions, easy font search, font activation without having to install...

FontBase

Link

uiLogos

uiLogos is a website that aggregates more than 25 professional design files for websites. However, it only allows to export PNG files, and if you want to use SVG files, you have to pay about $ 37.

uiLogos

Link

DevLorem

DevLorem is a tool to help you create illustrations during web development.

DevLorem

Link

CSSReference.io

CSSReference is a collection of CSS property guides. What I like most about it is the ability to visualize information through illustrative examples. This will also make it easier for you to absorb and enjoy learning to code.

CSSReference

Link

Codeimg

Codeimg is a tool to help you display your code through images with many supporting features such as choosing a theme for the background, specifying the color, font size, language for the code...

Codeimg

Link

HTMLReference.io

HTMLReference is a CSSReference-like website whose purpose is to gather instructions on all HTML attributes through specific examples.

HTMLReference

Link

Wavesnippets

Wavesnippets is a tool that allows you to animate parts of code that you want to share with others as a video or GIF. A strong example of this form is that it makes it easier for others to understand and better understand the sequence of the code you write.

Link

Hero Patterns

Hero Patterns is a collection of SVG background patterns for web design.

Hero Patterns

Link

Boxicons

Boxicons is a simple and free vector icon collection for web designers and developers.

Boxicons

Link

Coaster

Coaster is software that makes it easy to find and download images on Unsplash. In addition, it also supports both Windows and Mac operating system versions.

Coaster

Link

Pretty Snap

Pretty Snap is a tool that helps you create beautiful backgrounds for images to display in web pages.

Pretty Snap

Link

Link-to-qr

Link-to-qr is a free QR code generator for websites.

Link-to-qr

Link

CSS Background Patterns

CSS Background Patterns is a collection of beautiful background patterns for websites. What I like about this website is that we can immediately apply the background that you want in the website of the tool.

CSS Background Patterns

Link

Generate SVG Waves

Generate SVG Waves is an online tool to help you create SVG background waves for your website.

Generate SVG Waves

Link

DEVICE SHOTS

DEVICE SHOTS makes it easy for you to apply your website's photos on many of today's popular devices screens such as computers, phones, tablets...

DEVICE SHOTS

Link

Related Articles:

Summary

I hope the article will provide web development tools free and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!