• Subscribe
  • Stack for landing pages for developers without UI skills

    Toli
    0 replies
    I found there are lots of landing page builders out there, but they all charge anywhere between 10$ and 30$ for starter plans, some even higher. I have a background as a developer but I know nothing about design. Here's a stack I came up with to still design good landing pages without knowing anything about design, not pay for the expensive builders, and not get vendor locked by them: 1. Svelte + Skeleton UI (https://www.skeleton.dev/) - for front-end, one command from the Skeleton UI getting started will get you a basic website with Tailwind support. 2. Use https://www.producthunt.com/products/landing-page-checklist to educate yourself about how to build a good landing. I certainly needed this resource. Maybe to experienced makers it's obvious, but I didn't even know that "Hero" is a thing in landings :) 3. Decide which sections you go with in your landing page. E.g.: Hero, Features, Pricing, Social Proof. 4. Use https://github.com/aniftyco/awesome-tailwindcss. Search for "Components", "Blocks" or "Sections". There will be free resources for Tailwind stuff, in those resources, find the sections you want in your landing. 5. Copy-paste HTML into Svelte. You can mix and match different sections from different resources since it's Tailwind and the HTML you copy-paste does not depend on CSS, so it will always look the same. 6. Deployment: I use https://vercel.com/ as it has a generous free plan so you don't have to worry about paying even when you add custom domain etc. Why Skeleton? Mostly because it gives you Tailwind with Svelte in one command :) and in the future, if you want to also back your landing with a web app, you'll need Skeleton UI's premade components, good way to make UI's with! Here's my recent web app with Skeleton: https://wordplay-rho.vercel.app/ Why Tailwind? You need sections for your landing - hero, pricing etc (good resource to know what sections go into a good landing: https://www.producthunt.com/products/landing-page-checklist). And as a non-designer you'll need to copy-paste them from somewhere. Tailwind allows to copy-paste HTML without copy-pasting CSS, so no need to worry how CSS will interact with your existing project. CSS's effect is global, but HTML classes affect only the element you're applying them to. Hope you find it useful :) How do you approach landing page development? Do you have a process you follow? Are you fine with paying the landing page builders, or are you looking for a free solution for a landing?
    🤔
    No comments yet be the first to help