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.
11 COMMENTs
JavaScript
Simon Codrington, Mar 15

Top 5 jQuery UI Alternatives

Simon Codrington evaluates 5 widget libraries providing high-quality UI components for building websites & apps. Are they jQuery UI alternatives?
3 COMMENTs
HTML & CSS
Tiffany Brown, Mar 14

Golden Guidelines for Writing Clean CSS

In this exclusive excerpt from our book, CSS Master, we give you the ultimate guidelines for writing clean CSS.
HTML & CSS
Nitish Kumar, Mar 14

How to Order and Align Items in Grid Layout

Nitish Kumar shows how you can quickly order and align content using the shiny new CSS Grid Layout module.
3 COMMENTs
HTML & CSS
Tiffany Brown, Mar 09

Learn about CSS Architecture: Atomic CSS

What exactly is Atomic CSS, and how do you use it? We give the lowdown through this exclusive excerpt from our book, CSS Master.
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.
Design & UX
Alex Walker, Mar 08

Introducing Portfolio WordPress Theme – and the Design Decisions Behind it

Good design comes down to 3 or 4 fairly simple decisions at the beginning of a project – and then just carrying them through.
HTML & CSS
Tom Hodgins, Mar 07

How We Built EQCSS & Why You Should Try Building Your Own Polyfills Too

Tom Hodgins recounts how they put together EQCSS and shares why he believes all web developers should try building their own polyfills.
3 COMMENTs
HTML & CSS
Tiffany Brown, Mar 06

CSS Architecture Block-Element-Modifier (BEM)

Learn how to use the Block-Element Modifier (BEM) in CSS. This an exclusive excerpt from our SitePoint book, titled CSS Master, written by Tiffany Brown.
5 COMMENTs
Design & UX
Roemie Hillenaar, Mar 01

How to Choose the Best Fonts for Your Next Project with Fontcloud

Fontcloud is a tool designed to help you browse, choose and manage you fonts – and their licensing – through your browser. Roemie takes you on the tour.
HTML & CSS
Alexis Goldstein, Feb 28

Learning about HTML5 Form Attributes (Part 2)

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition. We teach you about HTML5 Forms Attributes.
10 COMMENTs
Web
Craig Buckler, Feb 28

Front-End Tooling Trends for 2017

Are you using the best development tools? Is your CSS compilation complicated? Have you bungled your JavaScript bundling? Craig discusses what we're using.
13 COMMENTs
HTML & CSS
Craig Buckler, Feb 28

How to Build Your Own Progressive Image Loader

Craig Buckler shares a very handy technique for progressive image loading — loading a smaller blurred version first, followed by the full resolution image.
2 COMMENTs
HTML & CSS
Alexis Goldstein, Feb 24

HTML5 Form Attributes (Part 1)

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

The required Attribute

The Boolean required attribute tells the browser to only submit the form if the field in question is filled out. Obviously, this means that the field can’t be left empty, but it also means that, depending on other attributes or the field’s type, only certain types of values will be accepted. Later in the chapter, we’ll be covering different ways of letting browsers know what kind of data is expected in a form.

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.

10 COMMENTs
HTML & CSS
Andy Kirk, Feb 21

Responsive CSS Patterns without Media Queries

Andy Kirk looks at some neat techniques to achieve responsive CSS patterns while we wait for element and container queries to be available!
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
2 COMMENTs
JavaScript
George Martsoukos, Feb 15

Quick Tip: User Sortable Lists with Flexbox and jQuery

George Martsoukos shows how to build a simple Flexbox and jQuery plugin which sorts elements based on the values of their custom data attributes.
1 COMMENT
HTML & CSS
Tiffany Brown, Feb 15

CSS Pseudo-classes: Styling Elements Based on Their Index

CSS also provides selectors for matching elements based on their position in the document subtree. These are known as child–indexed pseudo-classes.
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.
16 COMMENTs
Mobile
Jose Rosario, Feb 13

Achieve 60 FPS Mobile Animations with CSS3

Animating elements in your mobile application is easy. And doing it the right way is easy, too... if you follow our tips here.
HTML & CSS
Maria Antonietta Perna, Feb 09

Awesome Front-end Resources and CSS Animation Course

Maria Antonietta Perna presents some front-end learning resources and the new SitePoint Premium's CSS Animation course by Donovan Hutchinson