Today we will go into learning about good open source web development tools for web development and design.
Web Development Tools for Beginners
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 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.
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 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...
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...
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.
Công Cụ Tabulator
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.
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 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
Image Compare Viewer
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.
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 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!
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 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.
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 helps you create beautiful shapes for objects in the web such as backgrounds, icons, logos...
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 is a place that combines many different types of icons for your web projects such as e-commerce, travel, social networking, app design...
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 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.
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 is a free tool that helps you encrypt files quickly, easily and securely.
screen.guru is an online tool that allows you to take screenshots for your website.
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 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 is a tool to help you create illustrations during web development.
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 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 is a CSSReference-like website whose purpose is to gather instructions on all HTML attributes through specific examples.
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 is a collection of SVG background patterns for web design.
Boxicons is a simple and free vector icon collection for web designers and developers.
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 is a tool that helps you create beautiful backgrounds for images to display in web pages.
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 makes it easy for you to apply your website's photos on many of today's popular devices screens such as computers, phones, tablets...
- Websites to Learn Coding for Free
- Place To Learn Website Development
- Website Share Code Snippet Online Free
- 30 Web Development Blog
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!