Carrd Tutorial
Learn how to build landing pages in Carrd. Become a pro in 16 videos.
We have packed everything we know about making websites on carrd.co into our Carrd Video Tutorial. You will get 16 video lessons full of tips and tricks around building navbars, sticky menus, CTAs, responsive design in Carrd. Get the ocurse now!
5.0
(75 Ratings on Gumroad)
About the Carrd Tutorial
I will show you everything I learned from designing in Carrd myself. Carrd websites and the Carrd editor are fun and easy to use. But when you are just beginning out it can be hard to know where and how to start. You can either learn from trying and fiddling – or from the experience of others like me. Watch me build a complete site from scratch. And you'll be able to do the same after the tutorial.
We distribute our tutorial via Gumroad. When you download our tutorial, you'll get access to all the parts of the course. The free version will give you access for 72h. If you are new to building websites in Carrd we recommend you do the lessons in the original order. If you already have some Carrd experience, you can of course skip ahead to whatever topic you want to learn about.
Our video Carrd tutorial in a nutshell
Learn how to make a website in Carrd
- Build a Carrd.co website from scratch
- Each lesson dedicated to one part of the website
- Learn at your own pace
- Learn from a pro
- 5-star rating from customers
Tutorial Lessons
Here's an overview of all the video lessons in the Carrd tutorial. During the tutorial we will be building this Carrd.co website from scratch: https://freedrraccourse.carrd.co/
Intro
An introduction to the course by your host, Martin.
Lesson 1 – Set Up
Tutorial lesson 2 is about setting up the Carrd project. You'll set the initial defaults for designing.
Lesson 2 – Navbar
Learn about how to implement a navigation bar or navbar for short. It covers the site logo, placement, navigational links and their target URLs, font selection, hover color, positioning, button design and more.
Lesson 3 – Hero Section
This part creates a hero section in Carrd. 'Hero' is what people call that section on the top of a page that has a large font headline and typically a background or image. Carrd offers a great gradient tool that will be covered too. We'll use it to dim the background. A scroll icon will be added to indicate people should scroll down to see more
Lesson 4 - Column Layout
Thi stutorial lesson teaches you how to layout elements in columns in the Carrd editor. You'll also leran abput using font styles. Plus we're cropping images, aligning and spacing things, use headlines, dividers and bulleted lists. You'll love how easy all these things are in Carrd.
Lesson 5 - Testimonials
He're we'll cover the Testimonial section of our landing page. It shows images in a circle. We are again using column here that you should be familiar with from tutorial lesson 4.
Lesson 6 - Our Services
This lesson is about designing the services section of the website. It covers layouting with margins, page width and container width, adding images. You'll learn how to add links into text blocks. Spoiler: Carrd allows you to use markdown.
Lesson 7 - CTA, Sign Up
No Carrd website and therefore no Carrd tutorial can be complete without a CTA - a Call To Action that invites your visitors take an action like signing up to a newsletter, sending you a or buying some product from you. Learn how to build a CTA in Carrd using the submit form element. We'll also talk about form layout, form field placeholder, proper button sizing, rounded corners, headline styles.
Lesson 8 - Footer
Building a classical footer is the goal in this lesson. Again created using Carrd's column element. Other topics we touch on: Carrd links element, icons element, borders, border styles, gutters, row vs. column layout, color schemes for icons, vertical alignment of items.
Lesson 9 - Controls for header and footer
A typical Carrd website is a one pager site, this is what Carrd was originally built for. However it is possible to create the impression of multiple pages using sections. This lesson adds the needed control elements for the header and footer to our tutorial website. We'll talk about header marker, footer marker, section break, scroll point. These Carrd specific things sound daunting at first but are easy to understand with this tutorial lesson.
Lesson 10 - Mobile Responsive
Of course your Carrd landing page needs to look great on mobile devices. This is where you'll likely have the most visitors these days. So this lesson tells you all you need to know about making mobile responsive settings in your Carrd site. There are settings on elements. Other topics: mobile preview, reverse stack layout, container margins and element sizing.
Lesson 11 - Multi page setup: Hero
At this point we have the content for the home page of our Carrd site mostly in place. We will now start to add the other pages of the site. We will be using the control element again for this, we started to hear about it in lesson 9. Now we'll actually be using section breaks. Having multiple pages creates another question: how to keep maintenance effort low when reusing the same hero on multiple pages. You'll see that Carrd.co's ability to work with container styles is the answer.
Lesson 12 – About Page (Image, Text, CTA)
We already saw how to create a reusable hero. To finish building the About page we need to reuse another element we already have. The newsletter signup CTA. This can also be done by using container and element styles. We'll also talk about container text width for legibilty briefly and build out the About page.
Lesson 13 – Services Page
Again we're using section break control to add the Services page. Also we're reusing the hero from lesson 11. And that's basically already it for this video.
Lesson 14 – Building forms in Carrd
We already have the newsletter signup form, but here we will build a more complex form. The one we need for the Get Quote page. Carrd's editor gives you a lot of control over forms. This lesson will enable you to understand what the Carrd editor offers. You'll be able to build forms to your liking on your own. Our form will have a dropdown (multiselect), email field, website field and a field for a multiline text message (called text area). If you want to know even more, check out Carrd.co documentation.
Lesson 15 – Mobile Responsive (Part 2)
We added more pages and will now do some optimisation for viewing these pages on small mobile screens. Wesaw earlier in the tutorial that Carrd allows us to override layout setting specifically for mobile. This is what we'll use to clean up about, services and get quote pages.
Lesson 16 – Finetuning
We're getting to the finish line building our our demo landing page in Carrd. This tutorial lesson is mostly design tips and tricks and more about aestethics than building. It also shows how important testing is and that it helps to giving everything a second look. We'll be switching between Carrd editor and preview a lot to find and iron out some little kinks.
Bonus – Free template
You'll get access to one of our templates for free if you help spread the word about the course.
- Tweet about the course, link to the Carrd Tutorial page and tag @designzite
- Pick one of our Carrd templates that you would like to have.
- Let us now which template by sending a DM @designzite or email to designzite@gmail.com
There you go!
After finishing lesson 16 you are now officially a Carrd pro.
Get the tutorial now on Gumroad *
* We have put a lot of time into this. So we'd appreciate if you buy the tutorial. If you are on a tight budget, no worries, go with the free version of the tutorial. Either way, we'll be super happy if you leave a rating and help spread the word.
Templates for Carrd
The tutorial covers all the parts that go into making a full website. So you can go and either build your own Carrd site or make changes to a Carrd template that someone else made.
As you will see building a whole design from a blank starting point is a long way. So sometimes you’ll want a project to launch rather today than tomorrow. This is when we recommend to use a Carrd template.
Zite has athe largest selection of Carrd templates around. We offer templates for various scenarios:
- Are you building a SaaS startup? Try one of our SaaS Product Website Templates to save time building your landing page and invest that time into building your product.
- Your are looking to promote a book or E-book? We have templates for e-book sale landing pages, too.
- You are growing your audience and want to get people to sign up to your waitlist? Launch your site today with one of our waitlist and signup templates!
- ... and there are much more