Advertisement
Complete Websites

Building a "Coming Soon" Page With HTML and LESS

by

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.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


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.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Additional Resources

Related Posts
  • Web Design
    CMS
    Reviewing and Merging Our Tumblr Theme's HTML and CSSTumblr 19 retina
    We've come a long way, having completed massive amounts of theme building; well done! Let's now review our markup and styling, so that we can combine the two and start adding options to our theme.Read More…
  • Web Design
    CMS
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    Tumblr Link Post Types and PaginationTumblr 31 retina
    Let's now take a look at the markup for our Tumblr "link" post type. With that done, we'll also cover pagination.Read More…
  • Web Design
    Applications and Tools
    Building Semantic Grids With GumbyGumby semantic retina
    In this tutorial we're going to build ourselves clean, readable markup with the help of Gumby's semantic grid structure. We'll continue working with the example we started in the previous lesson, getting rid of as much unnecessary mess from our code as possible, plus we'll be using Sass to speed things up.Read More…
  • Web Design
    CMS
    Starting Our Tumblr Theme's Post Markup Tumblr 8 retina
    In this video tutorial we're going to begin the main area of our Tumblr theme's page. In fact, we'll be using the <main> element to do so, but as mentioned in previous videos, you're welcome to use whatever specific markup you feel is most appropriate.Read More…