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!
Labels:

Comments

Post a Comment

Popular posts from this blog

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
1 comment
Read more

An introduction to APIs

API is an acronym for Application Programming Interface. Let's start with first defining some basic terms: Browser: These are browsers. To visit any website on the internet, you need a browser. Server: Hmm, this is tough. In simple words, server is a computer. Yes, just like the laptop, or PC at your home. The only difference is that it does not have a screen. Of course, there are other differences in technical specifications, but at its core, the server is just, simply, a computer. That's it. So why is it called a server? Because it serves . When you go to a website like google.com , your computer connects to the internet and gets you your search result. But your computer's internet connection has to get that result from somewhere, right? If the google search result is giving you some answers, the answers have to come from somewhere. What is that place? The answer to that some place is: a server. When you click on the search button on google, or hit enter after typing, &q
Post a Comment
Read more

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
Post a Comment
Read more