Skip to main content

What is Webflow, and how I dodged its Premium Plan to make my own Website


Let’s start from the beginning. I was a new learner into this world of web development who’d just learned to program in the NodeJS environment. I’d made a couple of projects from scratch which strengthened my WebDev skills, but I knew what I struggled the most in: Front-End. You could enjoy your hours in making the back-end of your site work and feel really rejoiced at some optimised code of yours, but once you start for Front-End, you can end up wasting a day or a two, only to discover that the brilliant object of your creation is just one web page, or just a small section of it.
What I didn’t know
I must clarify for all the ‘JS Experts’ reading this that no, I don’t know any of the React, Angular or Vue frameworks and yes, I still make websites the trivial ‘static’ way: the manual HTML & CSS coding which takes hours and hours to polish out, and your page still doesn’t look great. Well, I used to, actually. I realised eventually that I love back-end and I need to do something which makes me design my web pages faster and more efficiently.
The hunt begins
So I went on looking over the internet for Designing tools. The internet gave me resources which the most brilliant Uplabs, Pinterest, and Dribbble post-makers used to make their masterpieces. Sketch, Figma, a lot of names came up. I decided to go for Figma, but it was exactly what I had googled for, too exact, to be honest. It was just a designing tool, and there was no way I could get the HTML, CSS code from it. At least, I didn’t find any way to.
These applications were design focussed, and I wanted something development focussed. Somewhere between being disappointed and learning how to use Figma, I stumbled upon something known as Webflow.
When you find the Perfect One
So, I open Webflow and they ask me to choose a template. Okay, playful memories of Wordpress come to my mind, until I move on to the next step. A brilliant environment opens up, much like Figma, but, instead of adding shapes or figures, you have the option to add…wait for it… HTML elements!
I might not be good at defining stuff properly, but if ever you ask me the difference between a Design-focussed and Development-focussed environment, I’ll simply push forward links of Figma and Webflow towards you. And if you are a Front-End developer, believe me, Webflow is The Place for you.
Webflow




Just look at that left pane in the picture. That’s exactly what I wanted! Needless to say, I designed all my web pages with the help of this and they were literally my career best designs! Of course, I spent an entire day on designing and learning this, but at the end of the day, seeing my work done, I was content. I had made a web page, but this one looked far better than any I had ever created. No CSS margin, padding, or hex colour nonsense, nothing. You want something, you can directly drag and drop the element, colour it, and resize it. Imagine how much time can be saved by all these features.
You came in, now you’ve to get out
Okay, you designed your page very well, and you’re impressed by your own work. Now you’ve to get back to your base. Get your entire HTML, CSS code into your home project which is waiting inside Node. So you click on the top right button to extract the Code, but…
They won’t give you your code! Yes, the standard blabbering of ‘Oh, you want this? Buy us and live your life in peace!’ Now, I have no problem in buying plans and giving these creative companies the money they deserve, and I will one day. But here’s my philosophy, I’m a student with practically no earning who is complete dependent for resources on my parents. Until and unless I have money under my own belt to spend recklessly, I’ll usually refrain from buying anything unless it’s extremely important. (Yes, I’m cultural and I’m an Indian)
So now it’s time to cheat on Webflow. They don’t give you the source code of your design, but they do allow one thing, they allow you to publish your code. So you get a standard URL as in Github Page which is basically your project-name.weblow.io.
What I did was simply publish my web page. I opened the web page, opened the source code of it, clicked on the included CSS file, copied that, and took away all of that code into my Node project. That’s it. That’s all I did. Tried to make it really filmy and suspensive, but alas, now you see it wasn’t that awesome.
So this is it. I just wanted to share this amazing technology that I found, and which every Front End developer should use if they want to save time in developing their designs.
Thank You for Reading!

Comments

  1. Thank you for sharing your thoughts and knowledge on this topic. This is really helpful and informative, as this gave me more insight to create more ideas and solutions for my plan. I would love to see more updates from you.

    Web Development

    ReplyDelete

Post a Comment

Popular posts from this blog

i3wm essentials - II

Welcome back! Let's continue this guide with other setup essentials for i3. Enabling Mousetap Chances are that if you're using a laptop, then tapping on the mousepad does not equal a click for you. You need to enable tapping in your config. Fortunately, there is one documentation available that works for majority of the setups. I don't need to explain this one in detail. Here you go: Enable tap to click in i3 . Volume Control This one is simple again. Do you remember the i3 config file I talked about in the previous blog ? All you need to do is go to that file and find the line: bindsym XF86AudioRaiseVolume Just below that line you will find lines with XF86AudioLowerVolume and XF86AudioMute too. Anyway, the truth is, there are 2 sets of lines with these keywords. Chances are that the line: bindsym XF86AudioRaiseVolume exec --no-startup-id pactl -- set-sink-volume 0 +5% Will be uncommented and the line: bindsym XF86AudioRaiseVolume exec --no-startup-id pactl -- set-sink vo

Namaste JavaScript Quick Notes

Note:  Akshay Saini's Namaste JavaScript is probably the best course for JavaScript developers out there. These are my personal notes that I made while watching the course; they serve more of as an online quick reference for my understanding and revision, and I hope it benefits anyone reading it too! Everything in JS happens inside an Execution Context. Before a JS code is run, memory is allocated and variables are set as undefined   , and functions are set as their exact code in the scope within the Execution Context. The global execution context hosts all the global variables and function definitions. An Execution Context has 2 components: Memory, that stores variables and functions; and Code, that reads and executes the code. Call Stack maintains the order of execution contexts. Since JS is single threaded and asynchronous, at one point of time, only one function is executed which is at the top of the call stack. For each function, an execution context is created before executi

i3wm essentials - I (Brightness)

So you have started using i3 and somehow managed to open your browser and almost resumed your normal work.  But wait, the brightness is too much isn't it? Or is it too low? The mousepad used to work fine, but now all of a sudden tapping does not equal click?!  Don't worry.  This blog series will tell you all about the essential setup commands and common shortcuts that I use to navigate my work in i3, and how you can too. Changing the brightness So you just started i3 and you just can't take this brightness setting. You go for your function keys, and damn! They aren't working. Quick fix: Run the following command if you need to change the brightness ASAP. xrandr -q | grep ' connected' | head -n 1 | cut -d ' ' -f1 This will give an ouput that's the name of your monitor.  Use that monitor name here and change the values of brightness to suit your needs. xrandr --output <monitor-name> --brightness 0.7 Now that your eyes are comfortable, let me show