Building a “Coming Soon” Page With HTML and LESS
videos

Building a “Coming Soon” Page With HTML and LESS

on Jul 25th 2012 with 29 comments
Tutorial Details
  • Topic: HTML + LESS
  • Difficulty: Intermediate
  • Screencast duration: 49 mins
Download Source Files
Demo View It Online
This entry is part 3 of 4 in the series "Coming Soon" Page

"Coming Soon" Page

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

Series Navigation<< Designing a “Coming Soon” Page in PhotoshopAdding a jQuery Countdown to Our “Coming Soon” Page >>

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.lifeinsharepoint.co.uk Chris Pettigrew

    Great work. Thanks for this :)

  • supprof

    thank you adi
    you’re a perfection in this website
    see you sooner

  • Andreas

    Great Work.

    What shortcut do you use, to save a layer for web so quickly?

    I still duplicate the layer into a new file, trim it, then cmd+alt+shift+s. Way too much keystrokes….

    • http://www.adipurdila.com/ Adi Purdila
      Author

      Andreas, I’m using some Photoshop actions for that, you can check out this quick tip.

      • http://www.facebook.com/jeremy.suleski Jeremy Suleski

        Thank You. That makes sense now. I couldn’t figure out how you were doing it in the video.

  • http://www.mateovanderzwet.com Mateo

    Awesome tutorial thanks man!
    Although I adjusted it a little bit :P, I made it in a normal simple clock here go check it out http://concepts.mateovanderzwet.com/Clock/index.html

    Thanks man for the tut!

  • Robert Smith

    Great tutorial. Thanks!

  • http://www.b-web.ch bastian

    Cool tut :)
    I’m new to Espresso and try to automatize my workflow … in your tutorial, when you start your index.html file you type something like “hhtm” or just “hh” and tadaam, your canvas is filled with a full html template code. how do you do that ? thanks for the tip :) and thanks for all these wonderful tuts.

    • http://www.adipurdila.com AdiPurdila
      Author

      I’m using TextExpander to do that :)

  • Hamid

    adi thank you for that tut but can you use some css3 new feature or any css3 technique?:-)

    • http://www.adipurdila.com AdiPurdila
      Author

      Well, I am using the border-radius, box-shadow, etc :)

  • http://webcampo.com rashidul
  • http://digiartes.net Juan

    Hi Adi,
    Excellent tut. My Q: I noticed that you use a localhost instead of a file system in the browser. How do you set up your localhost?

    • http://www.adipurdila.com AdiPurdila
      Author

      Umm, not doing anything special really, just opening the html files with the browser, that’s it :)

  • Ian

    Wow! GREAT STUFF! I can’t wait for the fourth part!
    I’m building my own coming soon page off a design I made while watching your vids!
    ;)

  • http://www.maomuffy.com Mfawa Alfred Onen

    Thank you Adi, Another 40 Minutes of greatness!

  • Pingback: Weekly Web Developers Kit – vol. 19 (7-27-2012) | CSS Tips

  • Pingback: Weekly Web Developers Kit – vol. 19 (7-27-2012) | t1u

  • Pingback: Introduzione a LESS, capire i CSS dinamici

  • Luca

    When will be released the JS part that powers the countdown? Congratulation for the wonderful tutorial!

    • http://www.snaptin.com Ian Yates

      Currently scheduled for Monday 30th July – hang tight :)

      • Luca

        Really good news! Thanks!

  • http://richardmisencik.com Richard

    Hi Adi, another great tutorial from you :)

    I have one question, what is the function you are using in the less styling video at 6:35 when you pick a color and it copies to clipboard? That seems like very helpful function, thanks :)

    • http://www.adipurdila.com AdiPurdila
      Author

      Using an app called ColorSnapper which allows you to sample and copy any color on your screen.

      http://colorsnapper.com/

  • Nino

    Hi, Adi

    I noticed you have two ways of switching apps. One is the normal way, the other way is to switch from a 2*2 grid. How to do that? Install an app?

    I am new to Mac. Thanks.

    • http://www.adipurdila.com AdiPurdila
      Author

      Hey,

      The grid only shows if I have the apps on different spaces, otherwise it just switches without showing the grid, like it does on Windows for example.

  • Tom

    Does anyone know how to link the notify me to your email so that receive the persons email?

    Thanks!

  • http://LaunchSoon.com Toni

    If you’re not a programmer you ca easily create a launch soon page using http://LaunchSoon.com

    For inspiration check out http://launchsoon.com/gallery.php.

  • krishna

    Hi Adi,
    Really great tutorial! i need a small help, when i use my personal domain mails address the form is working fine, but when i use gmail, hotmail and others with personal domain mails address, i am not getting mails to my mail boxes, i am able to receive other personal domain mails address only, can you help me out please.

    thanks,
    krishna