DEV Community: Ramakrishna Anand

Easiest way to edit, customize & deploy static Landing Pages on Netlify for free without Github

Ramakrishna Anand — Mon, 29 Aug 2022 16:02:00 +0000

If you're a developer and a startup founder at the same time, then you've got so many things to do because your role is not restricted to product development; you need to be a marketer, sales person, designer, and so on and so forth.

If you want to validate your startup idea or need to promote your multiple Micro-SaaS products, then you may need to create, host, and manage multiple landing pages.

Most likely, your typical workflow will be like this: you will create a simple static landing page using HTML,CSS, and JavaScript, push the code to GitHub or Gitlab, then connect the repository with your Netlify account to publish the site, and whenever you push any changes, it will be automatically published to Netlify from your repo.

The thing is, every time you may need to modify the content and images then you may need to edit the code, commit and then push them to the repo.

Of course, you can try traditional website builders to save your time. However, they're either too pricey or will not allow you to edit or export HTML/CSS or publish to Netlify (since we're looking for simple static landing solution)

This is the problem I've personally faced as a startup founder and indie maker. I personally host my websites and landing pages on Netlify so that I can save a lot of money by avoiding traditional website builders because Netlify is really free to get started and it allows me to host my custom HTML/CSS websites.

So I've decided to solve this problem by creating an alternative way to publish HTML websites to Netlify without Github and I am pretty sure it would be super useful, especially if you're on a very thin budget and, as such, can’t afford a domain and hosting.

Here is a simple alternative way of hosting your static landing page(Html, CSS, and Javascript) on Netlify without using Git.

What if you could

Drag and Drop pre-built landing page blocks without code & edit content, background colors, font, images visually
Use Code Editor for further customization or export
Publish your site or content changes to Netlify for free with custom domain
Additionally, use pre-built responsive templates to get started even faster.

(You don't need Git or VS Code to edit your HTML, CSS, or JS)

It would be super cool, right? That's why I've decided to launch Gridbox and I've been running this product for almost 5 years with many pivots and iterations.

Initially, I created this tool as a simple Bootstrap UI Builder as a hobby project along with my friend, and based on feedback from various users, we finally shaped this tool as a simple one-page no-code HTML builder.

If you’re looking for a pared-down, single static landing page builder based on HTML/CSS, then it is definitely worth your consideration.

Recently, we've launched a newer version of Gridbox and published on ProductHunt too.

Give it a spin—it's completely free to get started.

Best Black Friday Deals for Developers

Ramakrishna Anand — Tue, 23 Nov 2021 16:09:07 +0000

Creative Tim

Best premium templates and UI kits to save plenty of your development time.With over 39000+ Github stars, Review - 4.5/5 over 20,000 developers

Get 80% off for 100 UI Kits and Dashboards based on various tech stacks including Angular, Vue, React, etc…

Discount: 80% OFF
Availability: 22nd Nov - 3rd Dec 2021
Coupon Code: not needed

Website

VueSchool

At Vue School, you’ll learn Vue.js and modern, cutting-edge front-end technologies from core-team members and industry experts with premium tutorials and video courses.

You will get

On top of over 33 courses, you get full access to the Vue 3 Masterclass.
A comprehensive guide to developing modern Vue Single Page Applications.
140+ lessons and 15 hours of content all wrapped up into one course.
Real-World Knowledge of Vue.js by practically building a complete forum from scratch.

Discount: 40% OFF
Availability: available now
Coupon Code: not needed

Website

Wrap Pixel

Get 25 Admin Dashboard Templates & Website Template in price of One Template

Includes

11 Bootstrap Themes
8 Angular Templates
4 React Templates
Vuejs Templates

Discount: 95% OFF
Availability: 16th Nov - 5th Dec 2021
Coupon Code: BF2021

If you don’t want to buy a bundle, you can buy single product with 50% OFF

Website

Gridbox

If you’re a developer working on multiple side projects or startup ideas then you should try Gridbox. A powerful low-code website builder made for web developers like you that allows you drag and drop and write custom HTML, CSS and JS code.

40% Off - Yearly

You will get

Unlimited Projects / Websites
Private Projects
Deploy to Netlify
Access to PRO Bootstrap & Bulma components
Access to PRO Templates

Discount - 40% OFF
Availability - Now - Nov 30, 2021
Coupon Code - FRIDAY40

Website

BlueHost

Planning to set up a Wordpress site, then you can make use of Bluehost.

Powering over 2 million websites, Bluehost offers the ultimate WordPress platform. Tuned for WordPress, we offer WordPress-centric dashboards and tools along with 1-click installation, a
FREE domain name, email, FTP, and more. Easily scalable and backed by legendary 24/7 support by in-house WordPress experts.

Discount - Up to 75% OFF Websites & Hosting
Availability - Now

Website

DivJoy

If you’re planning to build a MVP or some cool project using React without writing much code then you need to try Divjoy - Powerful React codebase generator

Discount - Up to 60% Off
Coupon Code - None
Availability - 22 of 50 claimed (Price returns to $249 after all are claimed)

You will get

Lifetime access
Unlimited Project
Export High Quality React Code

Website

Alternative Lightweight JavaScript libraries that could replace jQuery

Ramakrishna Anand — Tue, 23 Nov 2021 14:28:34 +0000

Sometimes we need to move on, learn new things and tools to improve our workflow and productivity. You may ask, frameworks like React, Vue is too much for simple use cases like small websites or landing pages. We found two simple, lightweight JavaScript alternatives to jQuery you might find helpful

Alphine JS

Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript.

The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript.
It’s like a replacement for jQuery and JavaScript, but with declarative rendering

Sample Code:

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{name:''}">
  <label for="name">Name:</label>
  <input id="name" type="text" x-model="name" />
  <p x-text="name">
</div>

Link

Petty-Vue

petite-vue is indeed addressing a similar scope to Alpine, but aims to be small and more vue compatible. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amounts of interactions on an existing HTML page rendered by a server framework.
petite-vue is around half the size of Alpine.

petite-vue has no transition system (maybe this can be an opt-in plugin). It can also be used without a build step. Simply load it from a CDN:

Sample Code:


<script src="https://unpkg.com/petite-vue" defer init></script>

  <div v-scope="{ likes: 0, disLikes: 0 }">
    <p>
     <button @click="likes++" style="color:green;">&#128077;  {{ likes }} </button>
     <button @click="disLikes++" style="color:red;">&#128078;   {{ disLikes }} </button>
    </p>

  </div>

Link

It’s 2020 — Create Faster Web Apps UI

Ramakrishna Anand — Sat, 11 Jan 2020 09:46:53 +0000

Developers are hyper-productive people. They are constantly upgrading their tools to improve their productivity for producing faster & better results.

I have been into full-stack web development for almost a decade. One of the critical challenges I am facing right now is that I need to focus on a variety of things from Designing UI to Deploying Web Application in a very limited amount of time.

I am using a variety of tools and frameworks to speed up my production. Among them for UI — I am mostly using Bootstrap 4 and Bulma for most of my projects for creating responsive web app projects.
As I am repeatedly focusing on the building variety of Web Applications I found that there are some common patterns while building them:

For eg:

1) Login/Signup/Forget Password UI
2) Dashboard kind of layouts
3) User Profile Layouts
4) Settings Form
5) and the list goes on and on.

I feel that most of the full-stack developers out there might have noticed the same UI pattern while building their Web Apps UI.
So, We’ve decided to speed up the above process by building a simple tool using which you can drag and drop — pre-built Bootstrap 4 components like Signup Form with Cover Image, Login Form, Dashboard Layout, etc…
But wait- there are a lot of similar Bootstrap builders out there why I need to build another Bootstrap builder

Introducing Gridbox 8

YouTube:

Most Bootstrap Builders focus on generating Websites but we’ve decided to build this especially for Creating Faster Web Apps UI.

We’ve also considered other factors

Sometimes, Drag and drop is a very limited option for developers to refine the layout, that’s why we built in-built full packed Code Editor using which you can create multiple HTML, CSS & JS files to extend your Web Apps UI.

In Summary — You can enjoy the following features

Drag & Drop — Pre-Made Bootstrap Blocks — Like Dashboard Layouts, Signup Forms, *Login Forms, E-Commerce Order Layout
Drag & Drop — Default Bootstrap Components to improve the layout further like Buttons, Cards, etc…
Create/Edit — HTML, CSS & JS — for further UI improvements.
Download the Entire Project & use it for production or further development
Deploy to Netlify — to showcase your project to your clients.

I hope, you enjoy using this tool for creating responsive Web Apps UI faster.

Give it a shot!