HTML is short for HyperText Markup Language. It is a computer language used to create websites. A link or hyperlink is a special text that’s “linked” to another page. This allows navigation through the web.
It is called HyperText because as what “hyper” connotes, you can go to any place on the Internet where links lead you in no particular sequence. Markup specifies the code for formatting, both the layout and style, within a document. Using tags, content is formatted into italics or bold, for example.
HTML is constantly evolving to meet the demands and requirements of the ever-growing Internet under the direction of the World Wide Web Consortium(W3C). The current version is now HTML5. Below are some useful HTML resources I’ve collected.
Quick, what’s the code for ©? No need to grab that book or search online, go to HTMLSymbols and Entity Code, haha. It has a complete list of all HTML symbol entities and their equivalent names and numbers. They grouped the entities into tabs, and each entity has a description of what the symbol is used for.
Got an HTML5 website project? No need to start from scratch. HTML5 Boilerplate is a ready-to-use template. The template includes the latest version of jQuery and Normalize CSS to get you ahead of the task.
Use QuackIt’s HTML Table Generator. However if working with more complex tables with computations, its easier to use Excel or Google Sheets and then use the Excel to HTML Converter.
JavaScript, or JS for short, is a high-level and object-based programming language. It enables you to create dynamic content, control multimedia, create animated images, etc. Along with HTML and CSS, JS forms the indispensable core of the World Wide Web(WWW). Below are some of the best free JS-based tools you can use in a web development project.
Svelte is a new front-end, open-source JavaScript framework for making interactive webpages. Several advantages over others are it involves less code, no virtual DOM and truly reactive. I would love to try it one day in one of my projects.
Currently, I use jQuery, but it has become old and needs to be replaced to cater to modern requirements. jQuery Pop Up Window plugin is a responsive all around script. In fact, it is my preferred choice. See demo here.
Sweet Alert 2 is a beautiful replacement for JavaScript’s own “Alert” and a lot more. It can show images and HTML content, but not an iframe. It’s not just limited messages, it can accept input and display confirmation. You can download it for free and have it integrated with just a few lines of code. To create an exit intent popup, use it together with Glio.JS which detects if the mouse exits the page. If not a fan of JS library, here’s an exit intent tutorial with minimal code. Another option is AlertifyJS.
As a home-based web developer, it is common to get a project that will test not just your skills but also your will to solve problems. Recently, I was assigned to rip off a specific site’s audio player built with HTML & CSS. But the code that runs the player is nowhere to be found. That really complicates what is otherwise just a few minutes’ worth of tasks.
As always Google saves the day and I stumbled upon SoundManager 2. It is a cross-platform JavaScript API that plays audio. In layman’s terms, it makes a dumb audio player UI smart. Since I already have the interface, all I need to do is integrate SoundManager 2 into it. Simple right? Yeah, see SitePoint’s example. Plyr not only plays YouTube, Vimeo, and native videos but also provides a beautiful UI. VideoJS and PlayerJS are options.
AreYouSure is a jQuery plugin that detects and alerts users to unsaved changes if they attempt to close the browser or navigate away from the page.
Here are JS based editors: SummerNote, Trumbowyg and MediumEditor.
DataTables is a jQuery plugin, while Tabulator is a standalone JavaScript library. Both render static HTML tables into interactive ones.
jQuery.Payment, is specifically built for credit card and number formatting and validation. It formats the input as it is being typed! The strength of Formance.js is data formatting and validation. It is actually based on jQuery.Payment but the validation is extended to string inputs.
Wouldn’t it be nice if the email input is also checked for typos or misspellings? That’s what MailCheck exactly does and more. It also offers suggestions. See it live in action at KickStarter’s sign up form.
jQuery Validation, Validate.js, Parsely, and Validetta are general-purpose validators. The error notifications are displayed inline. Parsely, on top of the individual field’s errors, it also shows a bulk error message on top of the form. You can configure both Parsely and Validetta to show floating alerts.
jQuery.validationEngine, is a jQuery-dependent library and is my favorite. It doesn’t generate any conflicts and presents eye-pleasing error messages. Its documentation is also comprehensive. However, credit card validation is weak. Luckily, it can be integrated with third-party specialty scripts such as jQuery Credit Card Validator via the funcCall feature.
If you’re a BootStrap fan, Smoke is for you. Check the demo here.
JSFiddle is a very neat tool that allows you to try out JavaScript, HTML, and CSS codes. It has separate inputs for each and a window to view the results. It’s a self-supporting development environment as almost all popular JavaScript frameworks such as jQuery, Prototype, and YUI are supported. You can also save your code, and you’ll be given a link to share and edit afterward.
ESLint, JSLint and JSHint are free JS code debuggers.
Google hosts JS libraries here. Other alternatives are CDNJS and jsDelivr.
Affiliate Disclosure: Post may contain links to affiliate websites, and we may receive a commission for any purchases or actions made by you on the websites using such links. Thank You.