Blog posts tagged 'HTML'

Toggling a form with AJAX and PHP

18 October 2016

I recently had to add a toggling widget to a web page. I didn't want to reload the whole page, but I did want the page to update after the data had been processed. How is this done? Why, AJAX, of course. Read more >

Tags: HTML JavaScript PHP

Skip to navigation

Anchors, buttons and inputs

10 May 2016

CSS frameworks, like Bootstrap, often allow you to style anchors, buttons and inputs in the same way. But what's the difference between them, and when should you choose one over the others? Read more >

Tags: Bootstrap HTML PHP

Skip to navigation

Bootstrap mega menu

29 March 2016

The main navigation on Rotten Tomatoes is a highly tweaked implementation of Bootstrap's dropdown menu. Instead of a simple list of links, its dropdowns contain several columns of links, headings and images. I investigate how this is achieved, as well as what problems it might cause for users. Read more >

Tags: Bootstrap HTML JavaScript

Skip to navigation

The carousel of praise

07 March 2016

Carousels are an easy way to add non-essential content to a website. In the case of CSS Wizardry, it is used for displaying positive feedback from clients. In this post, I look at the HTML, CSS—and the secondary school arithmetic—involved in coding a carousel. Read more >

Tags: HTML CSS Animation

Skip to navigation

Article and section elements

02 February 2016

Article and section are both semantic elements that give structure to a HTML document, but what is the difference between them, and when should they be nested? Read more >

Tags: HTML

Skip to navigation

DNS prefetching

19 January 2016

The domain name system (DNS) is central to how computers reach each other across the web. As I learn from CSS Wizardry, a little bit of applied witchcraft in the <head> section can exploit this feature of the Internet to reduce the time it takes for a page to load. Read more >

Tags: HTML

Skip to navigation

The BEMIT naming convention

05 January 2016

Trying to keep CSS tidy and transparent is never easy, especially on large projects. Fortunately, Harry Roberts' CSS Wizardry is there to help us. In advance of my site redesign, I take a look at his BEMIT approach to naming elements and keeping CSS organised. Read more >

Tags: CSS HTML

Skip to navigation

Improving keyboard accessibility

22 December 2015

Without the help of a decent web designer, accessing a site via keyboard can be a frustrating experience. In this post, I look at how Responsive Web Design adds concealed 'skip to content' and 'skip to navigation' links to improve accessibility for keyboard users. Read more >

Tags: CSS HTML

Skip to navigation

Description lists

24 November 2015

What are HTML description lists? What are they for? Who even uses them? Ask these questions, and you too will uncover the sad truth about these underused, but handy little semantic elements. Read more >

Tags: HTML

Skip to navigation

Mobile-friendly toggling menu

10 November 2015

With a dash of CSS and JavaScript, it's easy to create a mobile-friendly menu whose visibility is controlled by a toggle button. Read more >

Tags: CSS HTML JavaScript

Skip to navigation

Apostrophe angst

27 October 2015

Should web content creators use hard quotation marks and apostrophes or should we use HTML entities? A glance at Responsive Web Design's markup just leaves me more confused. Read more >

Tags: HTML Typography

Skip to navigation

On the proper use of h1 headings

06 October 2015

The markup on Ethan Marcotte and Karen McGrane's Responsive Web Design validates perfectly, except for one thing. It turns out that the correct use for h1 elements is for content, not for your site logo. Read more >

Tags: HTML

Skip to navigation

Internet Explorer fallbacks

29 September 2015

This week I examine how Ethan Marcotte and Karen McGrane's Responsive Web Design sets up conditional CSS rules for handling Internet Explorer's, um, specialness! Read more >

Tags: CSS HTML

Skip to navigation

Twitter cards

22 September 2015

Back from hiatus with a look at Ethan Marcotte and Karen McGrane's Responsive Web Design. I take a look at something I've probably seen before but I've never really stopped to think how they got there—Twitter cards. Read more >

Tags: HTML

Skip to navigation

Supercool search bars, part 1

09 December 2014

So far, I've focussed by attention on HTML and CSS, but I've been neglecting the third of the web design trio, JavaScript. In this and the next couple of posts, I intend to change that by looking at A List Apart's funky search bar. Read more >

Tags: CSS HTML

Skip to navigation

Sticky menus

27 November 2014

Rather than being an examination of a dodgy burger bar's printed material, this a quick post on A List Apart's main menu, looking at its CSS and HTML. Read more >

Tags: CSS HTML

Skip to navigation

Responsive images, Part 2—Body Images

20 October 2014

Images in the main content area of The Great Discontent seem to come in two flavours—large and small. I deal with each of these in turn in this post. Also, I have a quick look at the nifty loader image that you see for a few seconds when an image appears on screen. Read more >

Tags: CSS HTML

Skip to navigation

Responsive images, Part 1—Masthead

24 August 2014

One of the things that makes The Great Discontent beautiful is the photography. Each interview kicks off with an oversized picture of someone looking particularly dandy in their designer glasses and hairdo. My question for this post is, how are images handled in TGD? Read more >

Tags: CSS HTML

Skip to navigation

What's in your <head>? Part 4—<script>

27 July 2014

In my final examination of The Great Discontent's <head>, things get serious with <script> tags. Read more >

Tags: HTML

Skip to navigation

What's in your <head>? Part 3—<link>

20 July 2014

In this post, I look at another of TGD's cheeky little <head> tags, <link>, and its many and varied uses. Read more >

Tags: HTML

Skip to navigation

What's in your <head>? Part 2—<title>

16 July 2014

I look at the all-important <title> tag in TGD, and reflect on its importance to search engine optimisation (SEO). Huzzah! Read more >

Tags: HTML

Skip to navigation

What's in your <head>? Part 1—<meta>

15 July 2014

I'm not sure how <meta> tags contribute to the beauty of TGD, but they're quick and easy, so let's see what they do. Read more >

Tags: HTML

Skip to navigation