html

Build Responsive Sites Quickly with Foundation

31 July 2012 / 3 Comments

Responsive design is a big topic these days. A website with a responsive layout adapts to different devices — from widescreen desktops down to mobile phones — by resizing and rearranging the content in the page, as well as showing or hiding content.

While a basic responsive layout isn’t too hard to create, things can get fiddly once your layout starts getting more complex. On top of that, there are cross-browser issues to deal with, as well as setting up nice defaults for typography, colours, buttons, forms, menus, and so on.

This is where frameworks like Foundation come in. Foundation takes care of a lot of the “grunt work” involved in setting up a new site, with a responsive grid, cross-browser CSS, and good-looking default settings for all sorts of page elements.

In this introduction to Foundation, you’ll get an overview of Foundation’s features, and see how you can use the framework to rapidly prototype and build your next website. Enjoy!

Easy HTML Templates with Mustache

27 April 2012 / 12 Comments

Templates are a great way to separate your website’s code from its design. There are many great web template systems available for different languages and platforms, including Smarty for PHP and the Django template language for Python.

In this tutorial you’ll explore Mustache, a relatively new and very simple template system that you can easily use to create HTML templates. You’ll look at various topics, including:

The advantages of using Mustache
How to install and use the Mustache processor
How Mustache tags, variables, and data objects work
Using sections to create conditions and loops
Including one Mustache template inside another
…and lots more!

Along the way, you’ll see plenty of code examples that show you how Mustache works. At the end of the tutorial, there’s a complete example that uses Mustache, along with jQuery, to create a simple Ajax-based product list page.

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.

HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.

In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:

Doctypes
data- attributes
Some new and improved elements and attributes
More flexible linking
Simpler markup, and
Enhancements to web forms.

Ready to upgrade your markup? Let’s go!

The Top 30 Websites, Viewed in IE6

12 November 2010 / 10 Comments

Internet Explorer 6. Nine years on, it’s still a headache for web designers and developers across the globe!

Most of us would like to forget about this horrid old browser — first launched in 2001, for crying out loud — but there’s always that client or user who insists on using it (or is forced to by their employer). Even among the audience of W3Schools — a web-savvy crowd if ever there was one — there are still around 5% of visitors using IE6 at the time of writing.

The result of all this is that we are forced to spend hours of extra coding time, just to make our sites work in this outdated browser.

How many big sites these days actually bother supporting IE6?

But how many big sites these days actually bother supporting IE6? One might think that they all would, considering their huge user bases. But is this the case?

Your First 10 HTML Tags

13 July 2010 / 7 Comments

Just starting out with HTML? Here are 10 essential HTML tags that you’ll need to know when building your web pages. If you learn how these 10 tags work then you’ll have enough knowledge to put together a basic page.

At the end of the tutorial you’ll find code for an example web page that includes all 10 tags, so that you can see how to use them.

Accessing Element Content with jQuery

26 March 2010 / Leave a Comment

Now that you know how to select HTML page elements in jQuery, you can start to do useful things with those elements. In this tutorial you’ll look at how to work with the contents of an element.

jQuery lets you work with HTML elements and element content in many different ways. For example, you can add new elements inside, around, before, or after existing elements; you can replace an element with another element (or elements); and you can read or change an element’s contents. Often the line between working with elements and element content is blurred — for example, when you add new elements inside an existing element, you’re effectively adding to that element’s contents.

You’ll look at adding, removing and replacing elements in a later tutorial. In this tutorial you’ll learn about 3 jQuery methods designed for working directly with the contents of an element:

html() for reading and changing the HTML contents of an element
text() for reading and changing the text contents of an element
val() for reading and changing form field values

As you’ll see, these methods make it very easy to read or change the raw contents or value of any HTML element.

How to Make a Website

7 July 2009 / Leave a Comment

So you want to know how to make a website. Where do you begin? This article walks you through the basic steps:

Making your Web pages
Designing your website, and
Getting your website online.

Getting Started with Your Web Hosting Service

14 January 2008 / Leave a Comment

You’ve done your research, you’ve picked a good hosting plan, and you’ve signed up. What’s the next step? You’ll need to orient yourself to the contents of your Web space, and learn how to upload Web pages. This tutorial shows you how.

Creating Accessible Forms

22 November 2006 / Leave a Comment

In HTML forms we looked at the basics of creating HTML forms: GET vs POST, text fields, checkboxes, radio buttons and so on. In this tutorial we’re going to go a step further and look at some of the ways you can make forms more accessible and usable for your visitors.

Web accessibility is important because it makes it easier for users to visit and use your site. This means happier visitors and more traffic!

We’ll cover the following topics:

Using the fieldset and legend elements to group form fields in a logical way
Adding labels to form fields with the label element
Controlling the tabbing order of the elements in a form
Speeding up form access and improving accessibility through the use of access keys

By the end of this tutorial you’ll be well on your way to designing wonderfully accessible forms. Read on…

HTML Text and Textarea Form Fields

6 November 2001 / 2 Comments

In this tutorial you explore two HTML form fields that allow visitors to enter text: text fields, suitable for short, single-line text, and textarea fields, which are suited to longer paragraphs of text.

html

Footer

Contact Matt

Follow Matt