My

No-code
journal

The step-by-step tutorial to build your own digital journal in less than 29 minutes without writing a line of code! โฒ๏ธ

Hi I'm Ash!

I'm joining the 100 Days of No-Code Challenge to meet a great community of makers and also help others express themselves creatively on the web. My favourite tools are Carrd and Airtable. I'm looking forward to learning more about website design and finding new ways to automate tasks.

Ash's 100 Days of No-Code Journal

Here's a sample of a daily journal you can make for free with no-code! I've tracked my progress in the 100 Days of No Code challenge learning and building across four categories: study (reading articles, books and tutorials), community (interacting and meeting up with members of the challenge), building (applying the knowledge to create new features) and shipping (launching something new, ready to share!).

My

No-code
journal

Tutorials

1. Create your journal with Airtable
2. Create your website with Carrd
3. Set up a daily reminder
4. Post directly to Twitter
5. Personalize your website

Welcome to the five step tutorial to making your own digital journal online!

This is the perfect guide for no-code beginners looking to make their first thing online using two highly recommended tools, Airtable and Carrd.

Track your own daily challenge, product progress or thoughts to share with others!

The first two parts are available now!

Get your free access by entering your email below.

Okay, let's get started!

Bookmark this page as a reference and use the buttons on the upper right to create your very own digital journal!

Part 1: Setting up Your Journal Using airtable

๐Ÿ› ๏ธ What you'll make:
An Airtable spreadsheet to record your progress through the #100DaysOfNoCode challenge. We'll also learn how to use the different views to share later.

๐Ÿ“ What you'll need:

  • Desktop/laptop access

  • Distraction free workspace

  • A strong password

  • An open mind towards spreadsheets

1. Set up your Airtable account (if you already have an account skip to step 2)

Let's first get you set up with an account that will give you a great foundation for this project and plenty of NoCode projects in the future.

Head on over to www.airtable.com and create an account.

2. Create a base for your journal

When you first come to the homepage Airtable will suggest a few templates to get started. Feel free to browse these in a bit but I'll show you how to customise your own.

Instead hop down and create your own base. This is the same of creating a new Excel file or workbook but with a few extra features ๐Ÿ˜‰

3. Creating columns - setting up your daily inputs

Every time you create a base from scratch you'll be set up with 3 columns: Name, Notes, and Attachments.

Take note, that one of the really cool Airtable features is that you can customise the types of data you put in that column from a URL, long form text or even a rating. This will come in handy for future projects but for now set up your columns so you have:

  • Day of the challenge

  • Date

  • What you did or learned

  • Attachment (can be a photo, screenshot or any other visual)

4. Set up a few test entries

If you are already a few days into your challenge feel free to populate the rows with your progress so far.

If this is day one for you add in an introduction about yourself and what you're looking forward to.

Play around with adding images to really customise the look of your journal and document your milestones. For example I've added a simple colour coding system to each of my days and assign them by the type of progress. We'll see how we can use them in the next step.

5. "I Like The View" - Choose how you want your calendar to look

Here's another great feature of Airtable - using different views.

One of my favourite is the gallery view which transforms your spreadsheet into a window of tiles to browse through.

With a few customised settings you can toggle a cover image so people can easily see what your highlight of the day was.

For the 100 Days of No Code Challenge I've added an image showing the category for the day. This can be anything you want - a daily dish, illustration or high score - up to you!

6. Make your journal shareable!

Finally let's set up a link where you can share your journal.

Airtable gives you a couple options which we'll explore in Part 2.

For now, navigate to the export button (not the 'share' button - I mix these up all the time too). Copy the link and paste in your browser. This is how your journal will look when you share it.

Pretty cool what you can do with spreadsheets, eh?

When you've got your journal set up the way you like it, it's time to add it to your very own website in Part 2.

Part 2: Creating your own website with carrd

๐Ÿ› ๏ธ What you'll make:
Your very own space on the Internet to share your profile, progress and learning journey!

๐Ÿ“ What you'll need:

  • Desktop/laptop access

  • Distraction free workspace

  • A strong password

  • A photo of your amazing self

  • Credit card for Pro account (optional)

1. Pick a template to start with

Open a new tab and head to Carrd.co (yes, you spell it with an extra 'r' - pronouncing it like a pirate is optional).

We can get started without creating an account just yet. Click on 'Choose a Starting Point'.

You see a variety of pre-made templates ready for you to drop in your content. If you're comfortable with website builders feel free to pick a template of your choice however I'll select a mobile friendly template for this tutorial. Select the Cayce Pollard template (#51) as a starting point - no pro account* needed at this point!

*A note on pro features: Carrd offers multiple plans with a variety of features and also gives you a 14 day trial of Pro features. For a no-code maker this is a really great deal for the 100 Days of No-Code challenge but I'll show you how use both the free and premium features.

2. Get familiar with the editor

Carrd has a minimal editor providing you with drag and drop building blocks you can customise without any code!

If you ever want an overview of the builder space, click on the menu icon and select 'Instructions'. You'll see an overlay like the image below.

If you ever need some more tips on creating elements or using Carrd then you can click on the menu icon and selecting 'Documentation'.

3. Add your story!

Remember this is YOUR journal so we'll start by adding a bit of personality. Start out by uploading an image that describes you and your challenge best.

Click on each of the text fields to add your name, a title you want to add and a bit about the challenge you're taking.

Finally if you have some social accounts you can link them at the bottom there by adding in the icon and pasting in the URL.

Lookin' good!

4. Link your Airtable journal

Alright, are you ready for some magic?

Here's where we take things to the next level and start integrating different digital tools โœจ

Let's link our Airtable journal we made in Part 1 to our website so we can showcase our progress. We'll add it just under our bio and can do this in three ways:

  • Using a link

  • Using a button

  • Embedding the table on our site

Don't worry, I'll show you how to do each.

4a. Using a link
Links are essentially clickable text that will take the user to a determined URL. To link your website visitor to your Airtable journal click on the + in the editor and select 'Links'.
You'll create a new element that will default with the text 'Link'.

Open up the side bar editor to rename your link and add your Airtable journal URL you want your visitors to see.

You can also add a link in the middle of a text block a bit more discretely by following the Markdown formatting tips below the text input box.

โญ Pro Tip: To have your links open up into a new tab instead of changing the page add '/@blank' to the end of any URL

4b. Using a button
A button is very similar in behaviour to a link where your linked Airtable journal will display in a separate tab.
Use a button when you really want your call to action to stand out on the page.

4c. Using an embed
Using this element is a Pro feature that allows you to display your Airtable journal directly on your website. This is one less click for your visitor to view the great progress you're making. Keep in mind the more data in your journal the longer it may take for the page to load so it's also good to note not to go overboard. See all the steps here.

5. Get ready to publish!

We're in the home stretch now!

All we have to do is save our work and publish our site to the world ๐ŸŒ

When you are happy with your photo, bio and have added your link let's publish the site to a carrd.co domain. (Don't worry - you can made as many updates as you want after the site is published.)

Click on the save icon in the menu bar and save your site.

When you're ready hit 'Publish'.
If this is your first Carrd site you'll just need to verify your email. With great power comes great responsibility.

Once your email is verified your site should be up within a few minutes. Congrats on building your own new home on the web!

In the next section we'll learn how to make your journal a daily habit through the 100 Days.

Part 3: Setting up daily reminders

๐Ÿ› ๏ธ What you'll make:
Automatic reminders that work with your smartphone to remind you to save your daily progress. You'll learn how to create a form in Airtable that can be accessed anywhere with the link. This is a great skill that will allow you collect data for all sorts of no-code projects in the future.

๐Ÿ“ What you'll need:

  • Your preferred mobile device

  • Access to your journal's Airtable base

  • Atomic Habits by James Clear (optional)

1. Make it a habit

Good news, after the first two parts the third section is very simple, however no less important.

One of the keys to success on any challenge is making it a daily habit, which is why it deserves its own step in the tutorial.

There's multiple studies pointing to the drop-off rate for resolutions or goals so let's set you up with some advice from the master of habits James Clear himself.

In his book he notes 4 key ways to make a habit stick:

  • Cue - Make it obvious

  • Craving - Make it attractive

  • Response - Make it easy

  • Reward - Make it satisfying

This part of the tutorial is to make it easy to log your progress each day without having to log into your Airtable account multiple times.

Instead we'll create a link you can access anywhere to upload your progress as you go.

2. Create your conversation

Let's hop back into your Airtable base from Part 1 and go to the views section.
Here we'll select 'Form'.

As you can see from the images you can create as many forms as you want for different purposes.

What we are creating here is a form for you that you'll fill in each day - kind of like a journal with pre determined questions to answer.

The form view automatically defaults to the names of your spreadsheet columns but this is where you can get creative! Essentially each field links back to your form as a new entry, but you can change the prompt to whatever style suits you.

Want to stick with a simple title field? Fine.

Or you can ask yourself questions. This might spark some ideas for new fields you never thought of before and that's totally cool! No-code is all about learning and iterating on ideas. Here's one of mine as an example:

If you upgrade to a pro version you'll notice some extra features and customisations you can add but this will do to get started.

3. Set a reminder

To make the form you just created accessible from anywhere let's first generate a link.

We can use this link wherever is easiest to fill in the form - a bookmark on your desktop, a daily to-do app or even just on your home screen.

To grab your form's share link click on the 'share form' button and copy the link.

Remember this link is accessible to anyone with the URL so best to keep this link your own little secret for now ๐Ÿคซ ๐Ÿ˜‰

Now it's time to drop this link somewhere that helps you set a reminder to fill it in every day.

The easiest for me was my reminders app on my phone.

Here's a simple way to set it up in iOS as an example (but any operating system with text based reminders will do).

  • Head to your reminder app of choice (using iPhone Reminders below)

  • Enter your reminder along with the URL to your form you just created

  • Set to get a notification to your phone at a preferred time each day.

And that's it!

Simply fill in your form at the end of the day with your 30 minutes of whatever you got up to and it will automatically be logged for you!

Bonus - Use the Airtable app

If you've been using Airtable for more than just this project and find yourself using it on the go then as an alternative to the steps above you can download the free official Airtable app as an alternative.

Below is a screen shot of how the app looks and also how it appears in iOS.

And there you go!

You've just applied some of the key principles of habit formation - making it easy and making it satisfying.

For more on building habits I recommend checking out the maker community's favourite Atomic Habits. You can read a small summary here.

Part 4: automating your tweets

๐Ÿ› ๏ธ What you'll make:
Automatic reminders that work with your smartphone to remind you to save your daily progress. You'll learn how to create a form in Airtable that can be accessed anywhere with the link.

๐Ÿ“ What you'll need:

  • Your Twitter account + password at hand

  • A Zapier account

Bonus - Use the Airtable app

If you've been using Airtable for more than just this project and find yourself using it on the go then as an alternative to the steps above you can

Part 5: designing with canva

Before I discovered Canva my

While there are a growing number of fantastic design tools out there, Canva is a great start to anyone to get to know the fundamentals of design.

Coming soon

Wow! You must be really excited to get making!

This part of the tutorial is still in development and on its way. If you want to know as soon as it is launched I'll send you a notification for free. Simply enter your deets below:

Thank you!

Your email is making its way through the Internet to land safely in my inbox where I'm looking forward to reading it.

Thanks for stopping by to visit My No-Code Journal!

Bonus: embedding with Carrd

*Note this is for Carrd Pro users

1. Get your Airtable embed code

Embedding content allows visitors to see your journal live on your site instead of navigating to an external link.

You can embed all kinds of content once you've had practice with this block but let's start by getting introduced to this feature.

For simplicity we'll add the table below your profile to start but you can always change the placement later.
To start with you need an embed code from your journal. This is like a URL but with extra information to re-create the page directly in your website with details like width, height, background colours and filter features.
Hop over to your journal in Airtable and find the share button.
To use this feature click on the + icon in the menu and select 'Embed'.
A new element will appear so let's go to the editor and add our Airtable code.

Are you sure you finished all the steps?

Congrats! You're now officially a no-code maker!

Not only that but you've set yourself up for success by creating a space to log and share your progress.

What's next for your no-code journey?

Feel free to message me with what you want to see in the future or what you want help with.

Have any feedback about how I can improve the tutorial? Drop it here.