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!).

• Back Home
• Teach Me How To Make This

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!

• Back Home

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: **

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:

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: **

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 shown in the image below) as a starting point - no pro account* needed at this point!(Don't worry, you can choose more templates and create ones with your own style after this tutorial.)

*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:

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.

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.

• Back to Part 2
• Home

Are you sure you finished all the steps?

• Nope, I was getting ahead of myself
• I DID! AND I'M SO PROUD!

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.