HTML5

HTML has a lot of tags that many people use every day, like <div>, <p>, and <a>. But there are also some hidden gems that often go unnoticed. These tags can help make websites more engaging, accessible, and meaningful without much extra effort. In this article, we’ll discuss a group of unique HTML elements that can enhance your web pages. They offer specific functions for formatting text, improving readability, and adding interactive features. Table of Contents The <q> Tag: Short…

Have you ever wanted to create your own interactive tools using just HTML, CSS, and JavaScript? In this article, we’ll create a fun and straightforward project: a color picker tool. This handy little tool will let users select any color they like and instantly see its HEX and RGB values. So, grab your favorite code editor, and let’s get started! Step 1: Set Up Your Project Create a New Folder: Start by creating a new folder on your computer for…

Building projects is very important for learning how to code. When you create a project, you expand your portfolio and learn how to apply your skills to new situations. We just published a 2-hour course on the freeCodeCamp.org Spanish YouTube channel that will guide you step by step through building 3 projects with HTML, CSS, and JavaScript. You will practice your skills by building a responsive navigation bar with dropdown menus, a slider, and a landing page with a custom…

HTML5 Canvas and SVG are both standards-based HTML5 technologies that you can use to create amazing graphics and visual experiences. The question I’m asking in this article is the following: Should it matter which one you use in your project? In other words, are there any use cases for preferring HTML5 Canvas over SVG? First, let’s spend a few words introducing HTML5 Canvas and SVG. What Is HTML5 Canvas? Here’s how the WHATWG specification introduces the canvas element: The canvas…

In this tutorial, we’ll take a deep-dive into the little-used HTML5 <datalist> element. It can implement a lightweight, accessible, cross-browser autocomplete form control that doesn’t require JavaScript. What’s Wrong with <select>? HTML5 <select> controls are ideal when you want the user to choose from a small range of options. They’re less practical when: there are lots of options, such as countries or job titles the user wants to enter their own option which is not on the list The obvious…

In this article, we’ll look at some simple ways to style the HTML <details> element, which is a very useful element for revealing and hiding bits of content on a web page. It’s handy to have a simple disclosure element in HTML that doesn’t require JavaScript, but the default styling of the <details> element might be a turn-off for some. Fortunately, it’s quite easy to change the styling of this element. The table of contents below is an example of…

In this article, we look at HTML form fields and the validation options offered by HTML5. We’ll also look at how these can be enhanced through the use of CSS and JavaScript. What is Constraint Validation? Every form field has a purpose. And this purpose is often governed by contraints — or the rules governing what should and shouldn’t be entered into each form field. For example, an email field will require a valid email address; a password field might…

For a while now, I’ve been creating these 3D scenes with CSS for fun — usually on my live stream. 3D CSS Responsive Stunt Plane! 🛩️ It does loops and rolls! 😎 Responds to mouse movement 🐭 👉 https://t.co/A1zNmfEzzi via @CodePen pic.twitter.com/87D7LIXLr2 — Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) March 27, 2021 Each demo is an opportunity to try something different or work out ways to do things with CSS. One thing I often do is take suggestions for what…