Building a Landing Page in 2 minutes.

Scarlett Garza
Icalia Labs
Published in
3 min readMar 20, 2015

--

People create new products everyday, and whether they are mobile applications, hardware devices, or a web platform, they all need a landing page. The fast development and design of this preview of your product can be of great help when you are in a hurry, in a hackathon or just building your portfolio for an application.

With this in mind we thought it would be time-saving to have a landing page template that we could use for any type of product we developed that we wanted to publish quickly.

There are many people out there who are willing to pay for a template to create their own website because they don’t know how to build it themselves, and we thought it would be nice to design and code a basic landing page that people could use and modify, and to make it even simpler we put together the HTML and CSS.
We’ve worked with templates before and from previous experience we wanted to give just code, code you know, code you understand, code that becomes your own.
And we thought snippets where the best way to reuse code. All you have to do is follow this 5 simple steps:

First of all you have to go to https://github.com/IcaliaLabs/snap

  1. Choose between the 2 snippets we have: basic-landing.sublime-snippet, which doesn’t include the “team” section, and landing-team.sublime-snippet, which includes the “team” section.

2. Open Sublime Text and go to Tools > New Snippet, then replace the code with the file you chose, here you can change the tab trigger if you want to.

3. Save the file as my-snippet.sublime-snippet, or whatever name you want to as long as it have the .sublime-snippet file extension.

4. On a new sublime file write “basic-landing” or “landing-team” accordingly and then tab. The cursor will be set on each tab for the information you need to fill, which is:

  • Your name/logo
  • A phrase or logo again
  • Your slogan
  • Your story, or about
  • Your address
  • Your google map

5. Save it as an .html file and you are done.

Here are 2 videos that will show you how to use it if you have any doubt.

We hope this can save you some time when you are building a landing page, or at least given you an idea of what you can put in a Sublime Snippet.
You can always fork it and change it, or give us ideas of what you would like to add to it.
It was built with love by @scarlettgarza and @alicia_catalina.

--

--

Scarlett Garza
Icalia Labs

Graphic Designer at @icalialabs, in love with web design, still in process, always wearing a smile, very spontaneous.