The video tutorial was originally published on newCo — Learn how to build and internet business, without code. Each week I release at least one video showing how I build startups and validate product ideas without code.
It’s not about if you can code or not, it’s whether you can actually build and validate an idea. Nothing should be stopping any aspiring maker to do that. I’m really trying to build something to give people zero excuse. The way people learn to code is through learning exercises and doing the coding. There is nothing out there that actually teaches “making side projects” through actionable lessons. You can read blog post after blog post about how people get inspired and make things, but unless you’re actually making, it’s worthless daydreaming fuel. newCo is built to solve this issue, and I’m building while showing you how too!
Setting up a landing page on Carrd.co
Go ahead and ‘choose a blank canvas’. From the link in the text under ‘Choose a Starting Point’.
For the Header
Remove the placeholder text.
Set Main to Style: Default — Position:Top — Maximum Width — Content:Align Centre. Add a container. Width: Full Screen — Height: 40. Set Background to Image. Scroll to ‘Content’s and make the width 75. (this stops any text going fully across the page). Choose an image from somewhere like Unsplash. Add your header text. Style it how you like. We will make it bigger, bolder and white.
These are two images (the right image is the settings for adding the image)
Call to action button
Add a button that says “Sign me up”. Style it how you like. We will be using my favourite pink, cornering the borders. We’ll make this button take us to a scroll point to take us to pricing on the page. That will come later.
How it works section
Now lets add another container. Make the Background ‘None’ and set the width at 70 and reduce height. Add another column so you have 3, align them all the same. Inside each, add an image, text for a heading and text for description. Use something like Streamline/Illustrio to get some icons to add as the image. Play with padding, margins, and gutters to your preference.
Pricing section
Add a new container and make the width 50, background none. Add text and align it. Insert your various text items and style them. Select the container, add a border or box shadows to make it pop from the screen. (Do one or the other).
Now we need to configure our Header Call to action. Add a control, and select ‘Scroll Point’ — name it ‘pricing’. Click on our call to action button and in the URL field add ‘#pricing’
Publish your work to save and preview!
Testimonials Section
Add another container, style it similarly to the How it Works section, we will use 2 columns for this. Add an image, and two text fields. One for the authors name, the other for the testimonial content.
You can add a text field above the container to name the section, something like “What people say”. Play around with margins, padding etc.
Adding a Footer
Add another container, but just use one column and add links for Twitter (you can use the icon field instead of link here), and a contact us field.
There is your landing page! You can tweak it with colours, fonts, styles and whatever you want to get it looking 🔥
Adding required payments for subscribing.
In the pricing container, add a form and choose ‘signup’ via Revue (you can use Mailchimp or the other options but Revue is super simple for setting up!). Scroll to ‘On Completion’ and write a little message for your subs to thank them 🤗. Go to the fields and play around with the options available. We will just have an email field, alter the button text if you’d like.
You’ll see the field ‘On Click’, here you need to select ‘Require Payment (via Stripe)’. This will expand a bunch of fields below it that you need to fill in, including amount, currency etc. You need to add your API keys from your Stripe account (Dashboard > Developers tab).
You can change the layout and styling to your preferences. Publish your site and test it out!
Connecting Revue to your website.
Select your email form, and you’ll see you need to connect your Revue API key (obviously sign up for an account). Navigate to the Revue Integrations page and scroll to the bottom, copy and paste the API Key into your Carrd site.
That’s it! Publish your changes and test it out.
(It’s double opt in so make sure you confirm the email in your inbox before checking your subscribers 🙃)
A Scott’s Cheap Flight clone with no coding, built in less than an hour ✅
Now all that is left is finding your niche, launch, grow your list, make it awesome and you’ll be like Scott in no time 👀.
If you found this useful, 👏appreciated for others to discover too
If you know a friend who could use this, please share with them!
You can follow me on Twitter and ping me your creations 🤗