Building a landing page in half a day

Credit: Clark Van Der Beken

I made the personal commitment to finish a rough-cut of a landing page in less than a day. The reason I put one together was because I was experimenting with the idea of setting up a two-sided marketplace.

It took me a few hours (with some breaks in-between).

How it went

Skeleton

I had a skeleton from another project I had messed around with years ago, so I revived a bunch of the html/css and began stripping out the content.

Metadata

I had to start off with a bunch of the metadata for a few of the pages. Metadata, as in, the tag and fields so that the pages can get indexed properly by search engines. These two elements are quick to add but slow to edit. It's easy to name the page (e.g. "Home", "About"), but thinking about what the 1-2 sentence summary is going to be that appears on the search engines takes a little bit more time.

Favicons

From there I had to spend some time creating favicons that would appear in association with the site. These are the icons that appear in your browser tab or on your handheld/tablet homescreen when you create a shortcut to a web page.

Footer

I jumped back over to the site itself and began working from the bottom up. I had already put an “above-the-fold” call to action graphic at the top of the page when I was prototyping the idea the day before, so I wanted to get back up to that to finish things off and go live. I set up four sections in the footer — About, More Info (other pages), Blog (just a link to my initial aforementioned post for now), and a sign-up to Join Waitlist.

Banner

I then used Font Awesome to put a banner above the footer summarizing how the internet can help us do more in this challenging state of affairs in the world; I was thinking about how the challenges of 2020 has been inhibiting so many people and forcing us to do less.

Waitlist

Since I still would have to build out the entire Rails app that is going to power the site, so I set up a waitlist that’s tied to Mailchimp on the frontend in the interim.

About

From there I put together an About page. This took a bit of time since you really need to think about the content and why the site’s being done. It forces you to articulate things without being too wordy. Hopefully I didn’t fail. 😅

Privacy Policy / Terms and Conditions

This takes a significant amount of time. Thankfully there’s a lot of resources on the internet and solutions to help you generate a basic and initial set of policies for a standard landing page w/ an email subscription and no e-commerce. That said, if things get to the point where they’re going to go fully live (the fully-fleshed product) all of this would be getting redone.

Additional banner above waiting list on home page

After the policy pages I went back to the home page to make the final push to finish setting this up. I added another banner section above the waiting list, to further summarize the vision behind my idea.

Integrating with MailChimp

At this point all of the pages were up and running, but the waiting list sign-up feature didn’t work. I added the JavaScript for MailChimp so that people could easily request to be notified when things go live and it’s possible to try things out. Waiting list done!

Open graph metadata

Starting to think about final touches, I added open graph metadata to all of the landing pages, so that they look decent when shared on the web.

Finishing up with Google Analytics and Google Search Console

I added Google Analytics and Google Search Console as the last thing before going live. Since this is a side project I’m selling my soul here in exchange for the free data firehose from Google. But as things get closer and if this becomes more serious, I’m going to use Simple Analytics instead.

F it, we’ll do it live!

The landing page wasn’t perfect, and it definitely still has some leaks but she works well enough to be sea worthy.

There’s a bunch of things I would need to fix, but that’s another post. If you have any ideas about things I could have done better, please let me know!

It was fun building the landing page.

I called it Scyberia.

Full Stack Developer. Bitcoin, Ethereum, DeFi, Smart Contracts, and Blockchains. Working on https://wrapped.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store