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.
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.
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.
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.
Library Detector
Library Detector is a Google Chrome extension that makes it easy to see what Javascript technology a website is using.
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...
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...
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.
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...
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.
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.
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…
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.
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.
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.
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.
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.
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.
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.
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.
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...
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.
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.
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...
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!
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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...
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.
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.
Squircley
Squircley helps you create beautiful shapes for objects in the web such as backgrounds, icons, logos...
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!
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...
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...
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.
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.
Hat.sh
Hat.sh is a free tool that helps you encrypt files quickly, easily and securely.
screen.guru
screen.guru is an online tool that allows you to take screenshots for your website.
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...
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.
DevLorem
DevLorem is a tool to help you create illustrations during web development.
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.
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...
HTMLReference.io
HTMLReference is a CSSReference-like website whose purpose is to gather instructions on all HTML attributes through specific examples.
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.
Hero Patterns
Hero Patterns is a collection of SVG background patterns for web design.
Boxicons
Boxicons is a simple and free vector icon collection for web designers and developers.
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.
Pretty Snap
Pretty Snap is a tool that helps you create beautiful backgrounds for images to display in web pages.
Link-to-qr
Link-to-qr is a free QR code generator for websites.
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.
Generate SVG Waves
Generate SVG Waves is an online tool to help you create SVG background waves for your website.
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...
Related Articles:
- Websites to Learn Coding for Free
- Place To Learn Website Development
- Website Share Code Snippet Online Free
- 30 Web Development Blog
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!
