Published 11 months ago by sktch
12 Tools for Building Websites the No-Code way!The No-Code movement is fast-growing as more and more people want to not only consume technology but also contribute to the development of technology.
While new programming langages have been invented to make it easier and easier to build software, we have reached a state where programming itself is no longer necessary to build innovative software.
The No-code movement aims to push this transition and democratize software development through easier tools. In this post, I am going to outline the tools that I, as a nocode developer, use on a daily basis to build websites.
Photoshop for free and on the web. I’m actually subscribed to Photoshop CC but its super slow and laggy on my computer so I often end up opening a tab and just use photopea instead. A super handy tool especially if you ever want to quickly edit a picture and don’t want to open Photoshop (and wait 1min for it to open).
You may have heard of Webflow and Bubble.io, I’ve been using them in the past, but recently started using Sktch.io as my main website builder. The great thing about it is that in addition to the frontend features I was used to with Webflow/Bubble, it provides much more in terms of backend and frontend interactions. I can’t count how many times, I would start a project with Webflow and end-up hiring a developer to add a simple feature. With Sktch.io, I can develop those features with a modular/visual system directly in the editor.
These fonts are free for commercial use and they are web-ready. Many platforms support them natively, but whenever I am trying to find a font for a specific title or website I’m creating, I head to fonts.google.com, increase the font size and start filtering the fonts to find the perfect one for my use-case.You can also download the fonts in TTF formats (by going to the project’s Github) if you want to use them locally in Photoshop/Illustrator for example.
Versioning and backups are important, I use Github to keep track of the changes I make in a project. The Git system is not ideal for binary files such as images but as long as the project is not too big, it gets the job done.
Flat ui colors
You probably use a different palette tool, but this one is my personal favorite. A few colors available in a few “styles”. Simple and effective. I hate going through color palette tools that overwhelm me with options.
Google PageSpeed Insights
Page load speed is super important for SEO and for user-experience. Google PageSpeed Insights is a great tool for finding bottlenecks in your website, maybe an image you are using is too large and you could save a few KB by choosing a more appropriate size, or maybe your text doesn’t have enough contrast which lowers it accessibility.PageSpeed is a great tool for detecting these common mistakes and thus improving UX.
My mailing list service of choice. It’s very easy to link Mailchimp with Sktch.io and use tags when people subscribe to your website.Mailchimp also has great automation tools allowing you to create a cool onboarding experience for your users/subscribers.
To be honest, I haven’t use Zapier extensively so far, but it is an automation tool that you can use to run tasks. You can use Zapier to detect events happening in an app to trigger actions on a different app for example. Zapier is a great tool for linking different services together and build a “backend” for your website/service.
Dribbble / Behance
When doing creative work, it’s of course important to find inspiration and these tools are great for that. In addition you can showcase your work there and build a portfolio which is great for getting clients!
While Dribbble and Behance are great for getting inspiration in terms of design/ui/ux, ProductHunt is great for finding project ideas. It’s also a great tool to see what ideas end up working (getting traction) and those that don’t.
A popular icon pack distributed as a font. Very handy as you don’t have to juggle with hundreds of svg files (it helps with page loading as well to pack everything in a single file). Of course these icons are not the fanciest, they are single-tone (dual-tone is available for PRO users) so it’s mostly useful for small icons used for ui stuff.
A huge collection of icons (free & premium) of various styles that will meet your needs. Attribution is required unless you subscribe to the premium version. Make sure to read their FAQ for knowing how you can use the icons.
Let me know how that compares to your own stack!