Have the greatest toolset at your disposal with this super-size curated list of the very best resources and tools available to date. I’ve lost count how many times I have been shown a certain resource or fell-upon one and one, it’s amazing and two, it’s been around for ages! Some resources and tools slip under your radar easily, so this article is to help prevent that happening. As a developer you should always know what the best resources are around, enabling you to make epic web-applications every-single-time. I’ll do my best to list mostly free to use resources throughout.
HTML Tools & Resources
HTML is the foundation of web applications, it may seem that it’s too simple to need any extra enhancements but don’t be fooled. HTML5 should be done right and efficiently to really reap the rewards in the long run.
- Boilerplates are always useful, enabling super-quick construction of a project with modern and correct syntax.
- W3C Validation – This tool is considerably missed out when it comes to correct HTML5 syntax. A vast majority of websites are guilty of non-W3C-Validated HTML on their site. It’s always better to do it the right way though, so check this tool out to give you the go ahead with your code.
- Literally Canvas – Create custom HTML-canvas with this elite tool. Literally offers the capability to construct drawings and then export or embed them in your web page.
- HTML5 Please – Modern technology is changing fast, use this tool to make sure the elements you want to use in your project are used correctly and efficiently.
- Draw SVG – This creative tool is very similar to Literally Canvas; the difference is the format is SVG. Create/Draw a beautiful SVG and embed the drawing on your web-page with base64 encoding technology.
- HTML Minifier – Enable enhanced web-page load time with this minifying tool. Configure exactly how it’s minified with a vast array of options too.
CSS Frameworks
Over the past five years, many frameworks specifically made to aid rapid web-development have emerged. Some have set the bar for others to meet, for example, Bootstrap. Not only do CSS Frameworks speed up development, but they also bring beautiful design to your page with minimal effort. Here are some of the best available –
- Bulma – This framework is particularly good due to its e-learning video resources to help you make the most of the components available.
- Bootstrap – Originally created by a great dev at Twitter, now has a huge community and is considered the king of CSS frameworks. Bootstrap comes pre-loaded with Microsoft’s ASP.NET MVC projects, so that must mean something!
- Propeller – This relatively new framework takes modern-day Bootstrap and mashes it together with Google’s material design. The outcome is flawless and is well worth a go.
- Material Design CSS – A great resource released by Google, add a very recognizable design to your own website with this jam-packed framework. Check out the showcase to get a feel for what is possible.
- Semantic UI – Another ultra-modern framework that offers a range of clean elements with beautiful transition effects, models and more. Semantic has just released version which integrates Font-Awesome 5.0.
- Mini.css – Gets its name from the size of the styling-packed framework file that is only 54kb. It provides three different themes to play with; default, dark and Nord. Getting started is super-easy with the provided documentation explaining each style that can be used.
- MUI – MUI follows the guidelines of Google’s material design and does it very well at that. MUI comes prepared to be used with React or Angular based projects meaning even further rapid-development.
- Material Design Lite is yet another material design framework, but the benefit is, it comes with no bloat.
- PaperCSS is an interesting framework that uses a paper-like handwriting-style font. It may only be useful for a small handful of projects but it’s worth checking out.
CSS Tools & Resources
Although not full-throttle frameworks, these nifty little tools & resources are great to know about. Some as simple as a gradient-generator to color a single element on your web-page.
- Ultimate Gradient Generator comes with a lot of pre-sets to work with, or similarly start with these pre-sets and customize to please. If not, make a gradient from scratch and the tool will provide the correct CSS ready to copy and paste directly into your style sheets.
- Animate.css – Animations & transitions are pretty awesome in modern design, using these pre-defined animation libraries in your own project couldn’t be any easier. The creators have even made an instant play showcase to view each and every animation.
- Hover.css. Not sure what effect to style your buttons with? Look no further, this great library provides an array of hover-effects that can be instantly added to your buttons. See the immense showcase of button effects on their homepage.
- Balloon.css. This library may not be for everyone but, tool-tips are another informative element to one’s web-page. Balloon even comes prepared for integration with Font Awesome and Emojis.
- Smart CSS Grid is perfect if you don’t want to use a full CSS framework. It’s super tiny size of 0.5kb will allow your web-page to still be ultra-fast with access to a genius grid system.
- Epic Spinners . You will find it hard to believe that this library uses pure CSS. These epic spinners are great for loading gestures on HTML form submissions or even initial page loading. Epic Spinners comes prepared with source code to use directly in VueJS too.
- PurgeCSS is not a CSS library as such, but it’s a tool to clean-up huge CSS files with old-tat. Big projects, over time, can have a build-up of styles that are simply not needed anymore. This tool removes that problem.
- Image Hover Effects – 8 great resources for enhancing your web-page with slick effects when hovering over images.
JQuery Plugins & Frameworks
- JQuery UI Framework – JQuery UI brings a brilliant set of components all-packed in either a single library or as singular-component packs. Things like accordion menus & input auto-complete that can take time to construct manually are already ready for your disposal.
- JQuery Mobile Framework – Another framework that provides a set of feature-rich elements with an addition of mobile-design. JQuery Mobile enables rapid-development of mobile application, be it web-based or mobile app-based.
- JQuery Easy-UI Framework – With deep-documentation to help you get going, JQuery EasyUI provides components for both JQuery & Angular projects. It’s live-demos are great to visualize and immediately download source-code.
- Lettering JS – Add phenomenal textual-design to your web page with Lettering JS. The library provides a really fun way to display text and subsequently still really catches the eye.
- NanoGallery2 – Most websites these days have an image gallery of some sort. If your using JQuery, then this plugin is ideal. It even provides an online-builder to rapidly develop and design your gallery before using it.
- Dragula is a cheesy name, but it does allow dragging elements around the screen, which is awesome. This bolt on to JQuery can come in handy for a variety of web-based tasks.
- JQueryHouse is the one-stop-website for the latest plugins for JQuery, check its vast selection of articles.
- Tabslet – Meaningful, space saving and beautiful, these tabs enable users to click on separate tabs to reveal different content. These are especially great for online-shops.
JavaScript Data Visualizations
JavaScript visualizations are amazing for many things, including business applications, public informational boards, data analysis, trend analysis, and the list goes on. I wrote an article about the very best JavaScript Charting Libraries. This extensive article offers sixteen libraries that can be used throughout data-rich web-applications.
Icon Fonts
Icon Fonts are one of the greatest resources for pixel perfect web-design. These icons are super-sharp and do not ‘pixelate’ when zoomed upon, unlike images like .jpg or .png. Icons like these are great for logo design or general informative visuals across your web-page.
- Font Awesome is exactly that; Awesome. With over 3500 icons to use, be sure you will find the perfect one for your project. Font Awesome even curates’ icons into sub-groups like Accessibility, Audio/Video, Emoji, and Design, enabling fast location of the perfect visual.
- Material Design Icons can be used in any web application, don’t be fooled and think that you can only use it with a material design framework. Material.io offers a huge range of icons in a range of pre-set-themes. Additionally, there are a handful of animated icons that are absolutely glorious.
Database Engines & Tools
For data-rich projects, these free-to-use database engines are highly-used throughout the development industry. Meaning two things, one they are very easy to get set-up with and secondly, come with extensive documentation and faqs.
- MySQL Community is a free version of the MySQL technology. It comes with quite a few great features. MySQL can be used with virtually every leading programming language too. In addition to this, its syntax is extremely intuitive which is always a bonus!
- MySQL Workbench allows the visual design of database’s and tables and also the ability to run commands on the database to yield results into the application too. Workbench ships with a beneficial database performance monitor enabling a range of key performance indicator analysis.
- SQL Server Express – Microsoft’s solution to data-basing; SQL Server. The express version is a high-performance engine that is capable of working all the major programming languages. In 2016, SQL Express shipped with a new exceptional feature for encrypting data named Always Encrypted, which is especially useful with the roll-out of GDPR in May 2018.
- SQL Server Management Studio (SSMS) provides a hassle-free solution to managing your databases and tables. Design, edit, visualize, backup are a few features, to say the least. SSMS is a database administrator’s dream-tool, and to top it off, it is free!
- Mongo DB is somewhat different from SQL-engines like SQL Server. MongoDB is a file-based No-SQL data-storage technology, it enables simplicity when working with huge data sets. Mongo is heavily JSON oriented so knowing how JSON is structured will be a benefit when getting started. This data-storage is currently very popular with NodeJS.
Programming Frameworks
Using a framework is one of the best things you can do with the right programming language, especially PHP. I recently tried out Laravel for PHP and I can honestly say it’s one of the best decisions I ever made. If you’re wondering what the best frameworks around these days are, I’ve curated some articles from around the web listing the very best available.
PHP
The following article Best PHP Frameworks for Expert PHP Web Developers in 2018 lists 10 epic frameworks that work in tandem with PHP. Each one in the list has a nice description giving you an instant feel for the technology before you think about using it.
Python
Develop fluently with one of these Top 10 Python Web Frameworks. This great list includes popular Django and Flask. Hackernoon goes into informative chunks of their features helping you pick out the pros and cons quickly.
C# Asp.NET
Build beautiful dynamic web-applications with non-other than the .NET child ASP.NET framework. ASP allows complete development with the C# programming language and is a dream to work with too.
JavaScript
JavaScript is blazing at the moment, being able to work in full stacks like MEAN, essentially meaning you program only with JavaScript. It’s pretty crazy how fast it’s moving now. Here are the Top 5 JavaScript Frameworks available today.
Web Development Stacks
In most cases, if you are developing a dynamic web application, a software stack is needed, I wrote an article on how to be a Full Stack Developer with a range of development stacks that are available to use for free. It lists four different stacks that use .NET, PHP, Python, and JavaScript.
IDE’S (Integrated Development Environments)
Gone are the days of having to flesh out code in text-editors without any auto-complete and other clever features. I take my hat off to those guys who had to code in those painful environments, I certainly couldn’t have done it!
- Visual Studio Code – Microsoft really has pulled it out of the bag with this epic IDE. It runs cross-platform on Mac, Linux, and Windows flawlessly. In addition to this, it’s free and can interpret all popular languages.
- Atom IDE – This free-to-use IDE was made possible by GitHub & Facebook. It’s rapidly quick, has auto-complete features and is completely open-source too.
- Netbeans – Is a great piece of software, understanding PHP, HTML, CSS, JavaScript, Java C, and C++. Netbeans can also be bulked up with a range of community plugins too.
Online Web Tools
The following list is an article I wrote earlier, it has a massive mix of technologies that these tools benefit. From HTML all the way through to SQL databases and programming languages. The list contains 33 tools currently and is guaranteed to be helpful in one way or another. See these 33 Tools for Programmers and Web Developers Here.
Cheat Sheets
Having cheat-sheet reference sheets are great when learning new technologies and languages. Whether it’s syntax, commands or conditional statements, tailored cheat sheets from the following links will help you indefinitely.
- Cheatography offers plenty of programming cheat sheets ready to download and print.
- IdiotInside Cheatsheet Article provides a curated collection of programming language sheets, database sheets, and even WordPress cheat sheets.
Learning Resources
Always eager to further your knowledge with development? Then these following sites will help you do just that.
- Code Academy. Learn to code for free in a range of technologies including HTML & CSS.
- Free Code Camp. Learn HTML to CSS and more advanced technologies like Databases, NodeJS, React and even D3.js.
- Coursera offers a huge variety of industry training and has a great development section too.
Interview Resources
Landing your first job or the next one will always be a new challenge, here are a few resources to help you become fully equipped to burn your next job interview.
- Tech interview handbook provides a huge array of curated content including algorithms, how-to-prepare guides, and questions to fire back at your interviewer!
- Front End Interview Handbook is exactly what it says, a vast-bible to landing a front-end job.
- 30 Seconds of Interview offers questions, answers, and hands-on learning with HTML, CSS and JavaScript. These commonly known aspects of each language are invaluable to back up your knowledge with.
Free Crash Course Learning
- JavaScript 30 created by Wes Bos. This course cleverly puts together 30 challenges in vanilla JavaScript for hands-on and fun learning.
- 30 Seconds of Code. Learn in bite-size chunks with general coding principles explained in 30 seconds.
- 30 Seconds of CSS. A curated collection of commonly used CSS snippets to master under 30 seconds.
- 30 Seconds of PHP. PHP snippets that you can learn in under 30 seconds.
- 30 Seconds of Python. Python code curated into chunks of 30-second learning tutorials.
Summary
Not all of these tools will be helpful to one single person, but if you think some could be suitable for your friends or colleagues too, please, give it a share! Also, if you can think of some additional great resources or tools, feel free to drop them in the comments or tweet me on Twitter (@DanEnglishby).
