Part Three, Your website

Hey, thanks for sticking around for part three. We’re going to talk about doing some work today! Let me know if you have questions so far.

Before we talk about a little tech, let’s see what you’ll need to have in-hand before starting.

Minimum requirements

Are you looking for a page to represent yourself? These are generally called Landing pages. People land here and then dig deeper into your info, any products and services you may provide, and social media, etc.

These tend to be one-page websites, simple and to the point. They’re used for products and services, but also as a new kind of business card for personal use.

To start building these kinds of sites, you first need to know what you need to share. Write down what things you need. If you did some of the Design activities noted in the last post, you might be able to reference that.

Examples could be:

A bio
Your resume
A way for you to offer something you provide, if you do have something like that. Online classes you may offer, schedule for zoom calls, etc.
A way to contact you, as much as you’re comfortable with of course.

Here’s a pretend website as an example. I’m using a fictional character from my favorite novels for the example here. Locke Lamora is the main character from The Gentlemen Bastard Sequence by the author Scott Lynch. If you like fantasy novels with great adventure and characters, check it out.

Building something like this (and adding advanced features) is easy with Carrd. The first image is on a desktop, the second is from a phone. No extra work needed to make the site look good on multiple devices. Carrd does that for you…

Mobile

The features of that website are:

An image. This is fan art of the fictional character by the artist Keja Blank (such amazing work!)
Bio - I wrote this up based on the character from the book. Some of those words are gibberish if you haven’t read the books of course. Garrista means boss of a group of criminals, The Nameless Thirteenth is a God in the fictional universe (although the other 12 Gods might have something to say about that) and I won’t spoil that last bit. Read the book to find out more :)
Links to social account (these all link to my websites)

I built it in about 10 minutes with Carrd. Let me walk you through how to use Carrd. There’s a video walk through below. But first some front-matter on the service. I don’t work for carrd, I don’t get a cut if you sign up. I just love it.

For the free plan, you can build up to 3 sites. The Pro plan allows you to do more, of course. There’s a free 7 day trial of the Pro plan. That Pro plan starts at $9 USD a year. Not per month, per year. It’s a great deal and the service is run by one indie developer, not a Silicon Valley startup looking to turn it’s users into profit.

So I’d do the free plan, try things out and upgrade to the Pro plan, if you want to.

Pick a template to start from

Each of these templates will look good on computers, tablets, and phones. That hard work has been done for us. Experiment with different templates to see which is closest to what you have imagined in your head. There’s a little demo button on each template that you can use to open the template in a new tab, so you can check it out.

Explore and play. Find the one you like most. Also, if you’re really into it, you could start from a blank template. I don’t recommend this for first time users, but it’s a great way to make something unconventional or super customized.

You can tinker and simply delete sites you make if you want to start over.

The Instructions

Once you create the site, Carrd should show you a layover with all the functionality the system provides.

Take a few minutes to read through this, it’s really concise and to the point. Further help is available as well, if you want to dig deeper.

Structure

Carrd works with these building blocks. At the most fundamental layer is the background, then page, and sections, containers, and elements. Tinker away to get the feel, undo is your friend.

Saving

So, if you tinker and get something you like, you have three options to save your work, under the Publish button, which looks like a typical save icon.

Save as a draft. This allows you to pick up later. The website isn’t visible to anyone but you. It is not ‘published’
Publish as a carrd url. Our example site is at locke-lamora.carrd.com. Anyone who visits the link can see the site. For your site, this may be all you need. However, see #3.
What if you want this site to be at something more personal than something.carrd.com? We’re going to talk about this in the fifth post of the series. There’s some complexity around naming (one of the hardest parts about a project) and technical mumbo jumbo that warrants it’s own focused post. We’ll do that later.

Carrd demo

I’ll walk you through how to do this build out here in the video. I kept very close to the original template. I didn’t manipulate the containers, or add sections. I clicked on the elements, and replaced the text. I did use the color wheel on the “bio” to find a color close to what was in the illustration.

Lastly I added some links to give credit and adjusted the buttons on the bottom to link to my personal sites.

Grab the trial, play and experiment. If it’s not for you, that’s cool too. Remember Bruce’s wise words…

Adapt what is useful, ignore what is not, and make it uniquely your own.

Other (more technical) options

If you are comfortable using HTML, css and JavaScript then there are some other low-cost options for you. If you don’t care to know about technical info like coding in HTML, css, and JavaScript just skip down a bit. No pressure.

GitHub pages

You may be familiar with git and gitHub if you’re a coder of any kind. There’s a neat, but not well known feature of gitHub that allows you to host a personal page. See this tutorial.

You’ll still need to point the GitHub page to another domain, if you want that level of customization. Again, hang in until day 5 for that info.

Some other options

I came across this fun site generator recently. It’s easy to use to generate the content, and could suit your needs if your looking for something “text heavy” or “brutalist” in design terms. But you do have to host the code somewhere like if you own your own server, or use the gitHub technique. It’s called Temper. It’s free and kinda fun.

Here’s a quirky option, that might be fun for those in comedy, or those who just Ike fun: Host your site (and get an email address too) on omg.lol. 5$ a year. You’ll have to code it, but its kinda fun. Find me there at chad.omg.lol.

Another super minimal option is txti. It’s also free, and great for getting simple sites focused on text up and running quickly. Again, like the two options above, you need to point it to a hosted domain if you want to control the website name a bit better. Post 5 will go over that in some detail.

Closing

There are more ways to do this online as well, these were just the ones I’m most familiar with and provide a range from a UI to more technical options, including some quirky stuff too.

No matter which way you go, you’re going to wind up with a website like locke-lamora.carrd.com or something.github.io. Again, we’ll get to addressing that in day five. First, let’s talk about a blog. See you tomorrow!

As always, email me if you have questions.

Continue to Part four …