Building a “Coming Soon” Page With HTML and LESS

Having designed our Coming Soon page in Photoshop, let’s now kick off the build process with some markup and styling. We’ll speed up the whole process by using LESS – if you haven’t yet used dynamic stylesheets I promise you’ll want to after watching this!

HTML Markup

We’ll begin by firing up Espresso (though you can obviously use whichever code editor you prefer) and setting out some markup.

LESS Styling

Now let’s see about slicing up our PSD and styling the markup we’ve laid out. As already mentioned, we’ll speed up the whole process by using LESS with LiveReload.

Additional Resources

• 20 Repeatable Patterns on Premium Pixels
• Rounded Corners Done Right on Webdesigntuts+
• Reset CSS by Erik Meyer
• LESS: The dynamic stylesheet language
• LiveReload