BLACK FRIDAY Sale with 50% off Use promo code: DMXBF15 Ends in:
Goodbye, Zen Coding. Hello, Emmet!

Back in 2009, Sergey Chikuyonok wrote an article to present a new way of writing HTML and CSS code. This revolutionary plugin, called Zen Coding, has helped many developers through the years and has now reached a new level. Emmet, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer.

Decoupling HTML from CSS

For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript goes in another; HTML is left by itself, nice and clean. CSS Zen Garden proved that we can alter a design into a myriad of permutations simply by changing the CSS. However, we’ve rarely seen the flip side of this — the side that is more likely to occur in a project: the HTML changes. We modify the HTML and then have to go back and revise any CSS that goes with it.

Web Design Vocabulary Refresh Part 1: HTML

This series will serve as a basic introduction to some terms that every new web designer should be sure to add to his or her vocabulary. This won’t be an exhaustive vocabulary list but rather a primer on a few terms that are difficult for any beginner. We’ll start with HTML today and move on to CSS in the near future.

An Introduction to Grids in Web Design

The grid is an invisible structure that collects all the elements within a web page together. Grids are never properly visible, however traces of the grids’ “discipline” can be seen by the placement of elements within a web page. The grid also dictates the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc. A grid’s main goal is to create a connection of unity within a design, which in turn makes web page content flow better, producing a more readable and enjoyable web page design. 

Common HTML Tag Misuses

View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification. This post rounds up a collection of common HTML tag and element misuses and describes the best practice to correctly and semantically use them in your markup.

Why use Classes or IDs on the HTML element?

The idea of CSS is to abstract design away from markup. One hundred pages on a site may all use the same exact CSS file. This is efficient for many reasons, one of which is that changes to design happen in one place, rather than one hundred. A top-level class can serve to identify which page is currently being viewed and thus apply styling to that a different page may not get.

20 HTML Best Practices You Should Follow

Most of the web pages you encounter is presented to you via HTML, the world wide web’s markup language. In this article, I will share with you 20 best practices that will lead to clean and correct markup.

HTML E-mail Design Techniques Part 1

Today’s free helping from the Think Vitamin Membership video library looks at what to do and what not to do when designing HTML email.

Optimizing HTML

Client-side optimization is getting a lot of attention lately, but some of its basic aspects seem to go unnoticed. If you look carefully at pages on the web (even those that are supposed to be highly optimized), it’s easy to spot a good amount of redundancies, and inefficient or archaic structures in their markup. All this baggage adds extra weight to pages that are supposed to be as light as possible.

The reason to keep documents clean is not so much about faster load times, as it is about having a solid and robust foundation to build upon. Clean markup means better accessibility, easier maintenance, and good search engine visibility. Smaller size is just a property of clean documents, and another reason to keep them this way.
Why is valid HTML important to everyone?

The Web works with valid and invalid HTML. So why is valid HTML important? And how does invalid HTML affect everyone who uses the Web? Technical standards are the bedrock of innovation and it is a recognized fact that smaller companies often lead in the creation of innovative technologies. Standards create a level playing field on which these smaller companies compete with giants.

Older articles