How I learned CSS by Using Webflow
It’s a bit ironic that I learned how to code, by using a tool known as a ‘no-code’ builder, but it’s true. For me, Webflow is not just a page builder, but also a powerful learning tool. A tool that blends Photoshop, Figma, HTML, CSS and JavaScript in one awesome interface.
I’m a self taught developer and not having a computer science background, I had problems grasping some HTML/CSS/JavaScript concepts in the beginning. And no matter how many explanations or articles I read about CSS or programming in general, the more confused I became, as many beginners may relate to.
CSS became less daunting and my learning process completely changed, the moment I started using WebFlow.
The UI looks similar to Photoshop, complete with a canvas and toolbar, but it uses CSS terms like Flexbox, Grid, ‘inline-block’, etc. It uses ‘divs’, ‘containers’ and ‘sections’ as if I’m writing HTML. Terms like ‘rem’, ‘em’ and ‘viewport height’ are all CSS terms that I had no clue about, prior to using WebFlow. After researching them and learning why they’re important, (especially in building responsive designs) it helped me grasp the concepts that I had trouble with, in the beginning. Since then, I’ve made a habit of studying the WebFlow toolbar and looking up terms I may not be familiar with. The more I do, the better I understand CSS.
My point is, Webflow is not just the average page builder but can be used as a learning tool as well. I probably would have given up on programming because of how long it was taking for me to learn the concepts. WebFlow certainly helped in easing the learning curve. Now, I can confidently write CSS and troubleshoot any design-related bugs whether it’s in a React App, Shopify Liquid file or any other platform. Having a solid understanding of HTML/CSS is key to becoming a good front-end developer and I’m thankful for WebFlow in helping me get there.
This may be an unorthodox way of learning programming concepts, but just thought I’d share my experience for those who are beginners in programming. For those, who’ve ever thought to themselves, maybe programming is too hard. I urge you to try using WebFlow first and let me know if you still feel the same way.
Currently, I’m working on creating animations using WebFlow and I’m finding that it uses a lot of JavaScript lingo, so maybe it can be a tool for learning JavaScript also? It’s too early to tell and I haven’t worked in with the animation panel for long, but I will write about it in a future blog post.
