With the rise in Artificial Intelligence (AI) and no-code tools, it is possible to create functional websites without writing any code. This is because, most No-code tools are equipped with a drag-and-drop feature, that allows users to drag blocks (components) into the workspace. Some of these tools already have templates that the user can start from, and choose the templates (websites), that suit them. In this guide, we will create a website and publish it online, without writing any code.

Table of Contents ​

1. Choose a platform
2. Choose a template
3. Edit website visually
4. Publish website
5. Conclusion

Choose a platform ​

The first step for creating our website without writing any code is to choose a no-code platform. They're a lot of options in the market currently. Therefore, it is important to choose a platform with features that suit your needs. For instance, with some platforms, it may be difficult to scale your website or web application due to vendor lock-in. Let us compare some of the popular no-code tools; and their pros and cons.

Wix ​

Wix is a website builder, that offers tools for creating HTML5 websites for desktop and mobile platforms. This platform is equipped with drag-and-drop editing capabilities so that users can edit websites to suit their needs. The Wix interface is user-friendly and responsive across different platforms.

Pros

• Wix is user-friendly, you don't need to be a developer or expert to create and publish your website with Wix.
• Wix handles domain purchase and setup.

Cons

• Wix is expensive when compared to other platforms.
• It is impossible to get your code artifacts from Wix, you also can't view your code. This contributes to vendor lock-in.

Webflow ​

Webflow takes visual web development a step further, it allows you to create dynamic websites (display different content, likely from real-time data or database). Unlike other no-code platforms where you get a static website (individual HTML files that are pre-built and stored in a web server), you can create websites that get content from a database, using Webflow's CMS (Content Management System).

Pros

• CMS for easy data management and dynamic website creation.
• Scale and track performance with SEO (Search Engine Optimization)

Cons

• Limited design options and functionality, resulting in vendor lock-in.
• The pricing structure can be confusing, with the availability of different add-ons and plans.
• Webflow isn't optimized for non-developers as CSS class management can be challenging.

Carrd ​

While other platforms are optimized for users to create multi-paged websites, Carrd focuses on landing pages. If you want to create a landing page for your SaaS or product, Carrd is easy to set up.

Pros

• Easy to set up, free plans, and free templates.
• Add a custom domain name for pro plans that are relatively cheaper than other platforms.

Cons

• Vendor lock-in, can't scale landing page to corporate website with multiple pages.

Peppubuild ​

Peppubuild is a no-code platform that gives you full access to your code artifacts, eliminating vendor lock-in. It comes with pre-built templates and blocks so that you can build your websites faster. You can download your artifacts, view your code, or publish in one click.

Pros

• Free plans and templates are available, upgrade when you need to.
• Analytics and optimization with SEO.
• Manage your code artifacts yourself, and scale without vendor lock-in.

Cons

• Still under development

With this comparison, we'll be using Peppubuild as our platform, since we want full autonomy for our code and the ability to scale later.

Choose a template ​

After signing up with Peppubuild, we can create a new website or application by clicking on the New Project button. Next, choose the Build with Template button, and select the template you like best. In this tutorial, we'll use the Collaborate template since it captures the themes we need for our corporate website.

Finally, click on the template, give your project a name and you'll be redirected to the editor workspace.

Edit website visually ​

Now that you have the template of your choice open in the editor, you can edit pictures, texts, buttons, forms, and links. You can add external links (https://www.google.com), internal links (#about), or links to different pages of the website (/about).

The style manager contains options to style your page. Here you can change font size, and background color, or add decorations in border radius and box shadow. Once you have edited the website to suit your needs, you can publish it in one click.

Publish website ​

Click on the pages button and choose the Publish Project button. Here, you can either choose to publish on Netlify or download code artifacts.

You can get the full guide of how we built a demo website using Peppubuild on YouTube. Here's a link to the final website here. In the next article, we will add more pages and links.

Conclusion ​

Peppubuild is free for use, as it is still under development. You can give us a star on GitHub if you love what we're doing. Join our community on Discord and let us know the features you'd like to see in Peppubuild.