Topics Search

HTML

Home » HTML (1519)
  • Page 1 of 76
  • »
 

GIF, PNG, JPG or SVG. Which One To Use?

GIF, PNG, JPG or SVG. Which One To Use? Icon
The GIF format is a type of bitmap, but unlike JPEG or PNG, GIF files are limited to a maximum palette of 256 colors. Essentially each GIF image contains a preset ‘box of crayons’ and there is no way to truly mix those colors to make new colors. While 256 might sound like a lot of crayons, complex photographs typically have thousands of tones. This color range is lost during the GIF conversion process and this is the key reason not to use GIF for color photos.
 
Advertisement:
 

HTML5 Notification Example

HTML5 Notification Example Icon
HTML5 notification API provides a way to notify or alert users outside the context of a webpage. HTML5 notification API is displayed at the system level. This means the way notification are displayed depends on the computer or device OS(operating system), just imagine the way desktop computers or mobile devices display notification. An HTML5 notification may appear in any of the following places:
 

HTML5 History API Example

HTML5 History API Example Icon
Pre HTML5 we could only perform few basic operations on the browser history stack, simple operations like re-visiting a previously visited URL. Today (with HTML5) we can perform more complex operations on the browser history stack. In this example we are going to develop simple modules that work with the new features added to HTML5 history API.
 

Semantics: Content Types & New Elements

Semantics: Content Types & New Elements Icon
In this chapter, we’ll discuss even more new elements, along with some changes and improvements to familiar elements. We’ll also add some headings and basic text to our project, and we’ll discuss the potential impact of HTML5 on accessibility. Before we dive into that, though, let’s take a step back and examine a few new—and a little tricky—concepts that HTML5 brings to the table.
 

Visual Studio Code: My New Favorite Code Editor

Visual Studio Code: My New Favorite Code Editor Icon
In this video I’m going to introduce you to my new favorite code editor: Visual Studio Code. Visual Studio is a Microsoft product, which may come as a surprise to many of you, but put your preconceptions aside for a moment and join me as I show you around.
 

Html5 Semantic Element Example

Html5 Semantic Element Example Icon
A semantic HTML element is an element which has its meaning clearly defined to both the browser and the developer. By merely looking at a semantic element or tag you can tell its function. In this example we will learn about HTML5 semantic elements.
 

What’s New in HTML 5.1

What’s New in HTML 5.1 Icon
While HTML 5.1 was still in development, the W3C has already started working on a draft of HTML 5.2 which is expected to be released in late 2017. In the meantime, here’s an overview of some of the interesting new features and improvements introduced in 5.1. Browser support is still lacking for these features but we’ll refer you to at least some browsers which can be used to test each example.
 

Speed up your sites with HTTP/2

Speed up your sites with HTTP/2 Icon
HTTP/2 is a new way of making your website load much faster by eliminating many inefficiencies associated with the current version of HTTP. The greatest thing about it? You don’t have to go to much effort to get it up and running.
 

How to Create and Publish a Jekyll Theme Gem

How to Create and Publish a Jekyll Theme Gem Icon
One of Jekyll’s noteworthy new features is the ability create official themes in the form of Ruby gems. These themes can be installed by a Jekyll user to style their static blog or website with ease, leaving them to manage their content. In this tutorial, we’re going to extend upon Kezz’s post by converting our template into an official Jekyll theme gem.
 

Learning How to Capture and Record Audio in HTML5

Learning How to Capture and Record Audio in HTML5 Icon
It is known that getUserMedia, the API defined by WebRTC, is the main method for accessing media capture devices such as webcam and microphone in web pages. The compatible desktop web browsers include Chrome, Firefox, Opera, and Edge. This article will share the resources for learning how to capture and record audio in HTML5.
 

How to make HTML disappear completely

How to make HTML disappear completely Icon
We all want to disappear sometimes. HTML elements are no different. Sometimes they want to hide out for a while. Not cease to exist completely — just keep things on the down-low. Thankfully, when it comes to making HTML elements disappear, CSS offers a variety of options.
 

A Whistle-Stop Tour of the UIkit Framework

A Whistle-Stop Tour of the UIkit Framework Icon
Whilst Bootstrap and Foundation might be the two most popular front-end frameworks amongst web designers, in this article I’m going to introduce you to the features of UIkit, a lightweight and modular front-end framework which I use in almost all of my projects.
 

The State of HTML5 Input Elements

The State of HTML5 Input Elements Icon
Recently I was working on a project where we required date and numeric fields. Being a purist, my preference is and always will be native elements over some bloated JavaScript library. “Polyfills can cover outdated browsers,” I thought, “that way we keep the best experience on modern browsers.” That particular project would ship in several countries in Europe. Pretty much each country has their own way of formatting dates and numbers. This made me curious about the following:
 

Want to Learn Web Design Basics? Start Here

Want to Learn Web Design Basics? Start Here Icon
If you want to get started in the world of web design, there are a few key skills you'll need to master. First, you'll need a working knowledge of how to code a page in HTML. Then, you'll need to be able to use CSS to create the visual effects you want, whether that's a particular layout, typography, or colors and backgrounds.
 

Controlling URLs and Links in Jekyll

Controlling URLs and Links in Jekyll Icon
In this tutorial, we'll focus on how Jekyll handles URLs and linking since changing URLs will break other people's link to our pages, as well as links in the content of our own site. URLs are critical to how people find and use websites and warrant consideration before publishing a site for the first time.
 

Improving Website Performance Through Image Optimization

Improving Website Performance Through Image Optimization Icon
Today, images account for more than 60% of downloaded content on a web page, so optimizing images can yield significant performance improvements. However, image optimization is both an art and a science, requiring careful evaluation of various parameters and a delicate balance between content, format, quality, and dimensions.
 

System Fonts in SVG

System Fonts in SVG Icon
There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.
 

Exploring Jekyll's Default Content

Exploring Jekyll's Default Content Icon
Jekyll is a static-site generator that provides some of the benefits of a Content Management System (CMS) while avoiding the performance and security issues introduced by such database-driven sites. It is "blog-aware" with special features to handle date-organized content. Jekyll is well-suited for people who need to work off-line, who prefer to use a lightweight editor instead of web forms for maintaining content, and who wish to use version control to track changes to their website.
 

Intro Into HTML5 Constraint Validation

Intro Into HTML5 Constraint Validation Icon
We do need valid user input, however we need to acquire it in a way that doesn’t frustrate our users too much. While we can improve the usability of our forms with smartly chosen UX design patterns, HTML5 also has a native mechanism for constraint validation that allow us to catch input errors right in the front-end.
 

Ghost In The Shell Radial Progress UI

Ghost In The Shell Radial Progress UI Icon
I’ve long enjoyed the user interface designs shown in anime like Ghost In The Shell, and realized this weekend I could recreate the visual design in SVG. You can see the finished example above, and the complete code in the associated CodePen demo; this article breaks down my approach to the UI piece by piece.
Home » HTML (1519)
  • Page 1 of 76
  • »