3 COMMENTs
HTML & CSS
Louis Lazaris, Apr 26

The Ultimate CSS Survey 2017

SitePoint's 2nd annual CSS Survey to give us a better idea of the knowledge, experience, habits, and practices of CSS developers from around the world.
2 COMMENTs
HTML & CSS
Chris Ward, Apr 25

Creating Media Queries for Responsive Web Designs

This article outlines how to create a basic media query, utilizing logical operators and media features to target any type of device
2 COMMENTs
Web
Maria Antonietta Perna, Apr 20

Five Techniques to Lazy Load Images for Website Performance

Maria Antonietta Perna highlights the benefits of lazy loading images on websites and shows five approaches to implement lazy loading for your website.
1 COMMENT
HTML & CSS
Jelena Jovanovic, Apr 19

Quick Tip: How to Build Your Custom Theme for Telescope Nova

In this quick tip, Jelena Jovanovic shows how to customize the Telescope Nova theme, both markup and stylesheet with these easy-to-follow steps.
HTML & CSS
Jon Persson, Apr 05

Quick Tip: How to Build Customizable HTML Widgets in Jekyll

In this quick tip, Jon Persson shows how to build a customizable HTML widget for the static website generator Jekyll in a few simple steps.
Design & UX
Alex Walker, Apr 05

Design Tricks with SVG Filters: A Masked Blur Effect

SVG might be a vector format, but it has some amazingly powerful pixel-based tricks up its sleeve. Follow Alex's journey – if you dare.
1 COMMENT
Design & UX
Ada Ivanoff, Mar 30

6 Free Web-Based SVG Editors Compared

SVG is more important to web design than ever before. Today we no longer need to leave our web browsers to create it. Ada looks at the options.
4 COMMENTs
Web
Maria Antonietta Perna, Mar 27

Is Using SVG Images Good for Your Website's Performance?

Maria Antonietta Perna shows why SVG images can be great for website performance, provided you follow a few simple steps when you design and export them
Web
Maria Antonietta Perna, Mar 24

Cut the File Size with These Three HTML Minification Tools

Maria Antonietta Perna introduces three HTML minification tools to automate optimization of your markup for a faster website and better user experience.
15 COMMENTs
HTML & CSS
Gajendar Singh, Mar 21

How You Can Use HTML5 Custom Data Attributes and Why

Gajendar Singh walks you through HTML5 custom data attributes, why they're useful, how to style them with CSS and manipulate them with JavaScript and jQuery
HTML & CSS
Alexis Goldstein, Mar 17

HTML5 Video and Audio: The Markup

In this excerpt from our book, HTML5 & CSS3 for the Real World, 2nd Edition, we take you through adding Video and Audio in HTML5.
HTML & CSS
Alexis Goldstein, Mar 15

HTML5 Forms: Input Types (Part 2)

We delve deeper into various Input Types for HTML% Forms. This is an excerpt from our book, HTML5 & CSS3 for the Real World, 2nd Edition.
1 COMMENT
HTML & CSS
Alexis Goldstein, Mar 08

HTML5 Forms: Input Types (Part 1)

Learn about the different input types in HTML5 Forms, in this exclusive excerpt published from our book, HTML5 & CSS3 for the Real World, 2nd Edition.
HTML & CSS
Alexis Goldstein, Feb 23

HTML5 Forms: New Controls

There are five new form elements in the HTML5 forms specification: datalist, output, keygen, progress, and meter
1 COMMENT
HTML & CSS
Alexis Goldstein, Feb 21

Open Your Data Up to Bots Using Microdata

Microdata is another technology that’s rapidly gaining adoption and support, but, unlike WAI-ARIA, it’s technically part of HTML5. Although still early in development, it’s worth mentioning the Microdata specification here, because the technology provides a peek into what may be the future of document readability and semantics.

In the spec, Microdata is defined as a mechanism that “allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with an unambiguous parsing model.”

With Microdata, page authors can add specific labels to HTML elements, annotating them so that they can be read by machines or bots. This is done by means of a customized vocabulary. For example, you might want a script or other third-party service to be able to access your pages and interact with specific elements on the page in a certain manner. With Microdata, you can extend existing semantic elements (such as article and figure) to allow those services to have specialized access to the annotated content.

This can appear confusing, so let’s think about a real-world example. Let’s say your site includes reviews of movies. You might have each review in an article element, with a number of stars or a percentage score for your review. But when a machine comes along, such as Google’s search spider, it has no way of knowing which part of your content is the actual review—all it sees is a bunch of text on the page.

Why would a machine want to know what you thought of a movie? It’s worth considering that Google has started displaying richer information in its search results pages, in order to provide searchers with more than just textual matches for their queries. It does this by reading the review information encoded into those sites’ pages using Microdata or other similar technologies. An example of movie review information is shown below.

HTML & CSS
Louis Lazaris, Feb 17

Validating HTML5 Documents

Let’s expand upon the concepts of validations a little more so that you can better understand how validating pages has changed
3 COMMENTs
HTML & CSS
Estelle Weyl, Feb 14

HTML5 Forms: Dependable Tools in Our Toolbox

HTML5 web forms have introduced new form elements, input types, attributes, native validation, and other form features.
Design & UX
Alex Walker, Feb 08

Catching Frontend UI Design Tricks with SnappySnippet

Often the key to understanding complex things is to understand their simpler parts first. SnappySnippet is a tool that can help you with that.
HTML & CSS
Louis Lazaris, Feb 07

More HTML5 Semantics: New Elements and Features

In this section, let's touch on lesser-known elements, attributes, and features that have been added to the HTML5 spec
1 COMMENT
HTML & CSS
Louis Lazaris, Feb 01

More HTML5 Semantics: Changes to Existing Features

While new elements and APIs have been the primary focus of HTML5, this latest iteration of web markup has also brought with it changes to existing elements.
HTML & CSS
Louis Lazaris, Jan 31

20+ Docs and Guides for Front-end Developers (No. 11)

Louis Lazaris is here with installment number 11 of his series on fantastic learning resources, docs and guides for front-end developers 
1 COMMENT
HTML & CSS
Louis Lazaris, Jan 26

More HTML5 Semantics: Content Types & New Elements

In this chapter, we’ll discuss even more new elements, along with changes to content types, available in HTML5
HTML & CSS
Louis Lazaris, Jan 18

Defining the Sample Site's Page Structure

We’ve covered the basics of page structure and the elements in HTML5 that will assist in this area, it’s time to start building the page
4 COMMENTs
HTML & CSS
Louis Lazaris, Jan 13

HTML5 Page Structure Basics