Launching a website from scratch, for free and using Ycode, a no-code tool

An overview of the process with some links

This year, my partner Cali and I decided to start a consulting project together. Building the website was actually the last part we worried about. There were a few steps we took before, so I'll share a quick overview of this whole process until I get to the part of launching the website.

Before jumping into design

We had this main part of the project to be done:

• Define what services we would offer
• What would be our positioning
• What/how we would communicate it for which audience
• Create a sitemap of the site

We have been using Fibery to organize those topics, such as writing documents with our ideas, gathering feedback, creating tasks, etc.

Once we figured this out, which took us quite some time, we started to think about the structure and the actual content of the page. We wrote it all with our main audience in mind, trying to address objections that could come.

A structure I like to follow for creating content for websites is based on the book Making Websites Win. In one column, we add objections or concerns we already heard from our audience. On the right side, we add a counter-objection column, adding responses we find to be the most effective for each of those objections.

Example of the columns for objections and counter-objections

This way, I can have an overview of important topics to address on the page.

For writing the hero section of the page, I used Julian's Shapiro guide on Landing Pages as a reference. He shares straightforward tips and examples.

To keep the experimentation mindset and release the page as soon as possible, we used Notion. Notion has a free plan. It is easy to iterate and maintain. And it does the job of communicating with our audience.

We then published our Notion page with a custom domain and shared it on our LinkedIn. We collected feedback and after a few iterations, we thought it was in the direction we wanted.

Screenshot of the Notion page written in Brazilian Portuguese

This first part using Notion, without thinking about the design of the page was crucial to saving us time. If we started directly on Figma or on any actual page in production, it would have been a waste of time, considering all the structural and content changes at this phase.

Now let's jump to design.

Well, actually, not yet. It could have been. But how were we going to develop this page? How much freedom would I have with the design? For me, those questions needed an answer before I jump to design.

My partner used to be a developer — way back in time — and with some effort, he could develop it, but we knew how efficient it could be to just use the right no-code tool. It could save us time, and I'd have all the freedom I wanted to update the page when needed.

Here we started our journey to find the right no-code tool for us.

So which no-code tool to use to develop it?

Webflow and Semplice are the tools that light up my eyes for creating websites. Their UI/UX and documentation seem to be great. But both tools have a big problem for us: they do not have localized pricing. This makes it really expensive for Brazilians that are just starting a project with no fixed revenue. 🥲️

I've already tried some no-code tools for building websites, such as:

• Bubble for a plant-based landing page — with a section to download a document and collect data from the user
• Elementor with sheet2site for a job board website called Vagas UX
• *Mmm.page to test a simple landing page — quirky and fun tool!
• *Carrd also to test a simple landing page
• *Softr to test creating a (fake) marketplace, a resource directory of fairs in Brazil, and another directory of illustrations from visual thinkers.*

These projects I did while taking a no-code challenge this year. The goal was to learn more about no-code tools and understand their potential for different projects — not to make a final polished UI.

Overview of some websites I've built with the no-code tools mentioned above

Even so, none of those tools seemed a good fit for us, either because of the pricing, feature limitation, not-so-good UI/UX, or performance of the tool.

After searches and discussions, my partner suggested Ycode. He had tried it in the past and after exploring more about it, I got excited to try it too.

Here were the reasons why we choose Ycode:

• The plans: their Free plan enables 10 pages and up to 100 items in the CMS, and a custom domain. 😯 They do keep their logo in the bottom right of the page, but the URL is still ours.
• The UI: it is so similar to Webflow that in some cases I used Webflow's videos to find answers to some questions I had.
• The advanced features: it can enable the creation of a dynamic and database-driven website. I wanted to learn more about it long-term thinking — as our website does not require it, so far.
• The way of building: just like Webflow, Ycode also uses the fundamentals of HTML and CSS. So I do not need to know how to write code, but I still use the same mental model while building. I found it useful and worth learning.
• The potential of the tool: Ycode is a new tool, launched publicly just a year ago, but already has a good UI and advanced features. It is also from the same creator of Mailerlite, a digital marketing tool that we also used in our VagasUX project. It made us believe in the potential of Ycode long-term thinking. Some say it is a viable Webflow alternative.

Now let's jump into the design

Now I thought this was the moment to design it, as we already had the tool, the content, the sitemap, and the structure of the page.

I started exploring some visual references. Then I did sketches of the page and started defining a visual guide.

Style guide of the website

After some iterations, the page was ready to be built.

Overview of the homepage done in Figma

Finally, time to build the page

I was excited, with that feeling of empowerment that developers might feel when getting a project to build.

As it was my first time with this tool, and we wanted to ship fast, we decided to simplify the website and start only with the homepage.

I wanted to configure and visualize the classes for the text components, so I started with a style guide page within Ycode. An article from Webflow on How to build a living style guide was my reference.

I later saw that Ycode has already a color system that I can use and add my own colors, so my style guide ended up being only for the font styles. I did not add any other components, because I was eager to start building the page and see how it would work.

The font styles I added in Ycode

As the tool uses the HTML structure and has some components ready, I got myself wondering if I should start with div blocks, containers, or sections. Thankfully, they have documentation about it.

Creating an accordion

I did not know how to create an accordion component, so I reverse-engineered one of their landing page templates. Checking their FAQ component helped me to do it. But, I noticed the arrow was still not changing its states. It remained in a close state.

Opening and closing the accordion component on the page template

To make the arrow change direction it was a simple tweak: add another icon, hide it, and then create a workflow that included it there.

Workflow of the accordion component

And that's what it looks like:

Opening and closing the accordion component

Creating a simple contact form

They had a great video explaining how to create a simple contact form. The overall implementation worked well, and it was easy to do it. In Ycode, you can store the data in your own database and also configure it to receive an email once getting a contact.

Database section created for the Contact form

Although, while testing it on my page, I noticed that there was no confirmation message. As the user sends their contact, the page loads all the way up to the top of the page removing the user from that section, and without feedback if their contact was successfully sent. I found it confusing and could not find an alternative for it.

Also, the phone number field was accepting letters, so we added a custom regular expression to allow only numbers. But, we noticed the validation of the regular expression is done by the backend, not the front end, which makes the feedback error under the field appear only after submitting the data, not instantly while typing the information.

Then we decided to change the contact form from Ycode to the one from Tally, another great tool that has a free version.

We embedded it there and it worked great. That's how it shows the confirmation message:

Feedback message of Tally form embedded in the page

Revising the breakpoints for a responsive page

Once the desktop version was done, I started revising the breakpoints for the small and medium screens. I updated the font size, margins, and paddings.

I had to redo two sections of the page that were using a grid because I created the div blocks in a way that looked great on desktop, but on mobile, became a mess. After some fixes, that's how it looks like:

Showing the breakpoints of the page: small, middle and large size

Here is the released page with our custom domain: skutalab.com 🎉

Challenges along the way

As I'm new to the tool and the tool is new to the public, we had some challenges together. Nothing major, but I think it is worth mentioning.

While updating the styles for the smaller versions, I faced some slow performance and a few bugs. It happened that some styles were not saved, or were saved but not reflected on the preview page. I had to redo things more than once.

There were other moments in the desktop version when I was not sure if there was a bug in the tool or if the bug was me. This was frustrating sometimes as a beginner learning the tool.

When I thought about making some changes, such as enabling the user to close the mobile menu once clicking outside of it, not only when clicking on the X button, I could not find a way to do it yet.

And when I wanted to add a smooth scroll once the user clicks on the menu and is redirected to a section of the page, I could not find a straightforward way of doing it. So my partner tried adding a custom CSS code — Ycode uses Tailwind — but it did not work after a few tests.

Then I posted about it in their community, and they promptly helped me. It worked after two trials! This was the solution:

Custom code section for the smooth scrool

And that's what it looks like:

Smooth scroll effect when clicking on any menu option

Like I said before, their tool has just started with a small team (I say small compared to tools like Webflow ) even so, they already have many advanced features.

Conclusion

Even with those challenges, I'm excited to keep using the tool and building web projects by myself. It helped a lot to have their welcoming community quick to answer.

As this was only the first version of our website, we might iterate it soon to add more information or pages as needed. And that's it for now.

Thanks for reading!

Feel free to connect with me on Linkedin.