No Code vs. Hand Coding - Is it really 80% faster?
HTML-код
- Опубликовано: 4 мар 2024
- bit.ly/4bTD5zu 👈 Design & code like me. Use "UI2024" for 25% Off!
-- Today, I'm going to put my no code skills to the test vs. my hand coding skills. I recorded myself creating the same layout in Framer, as well as hand coding. The difference is pretty crazy.
Let's get started!
#nocode #framer
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi! 
Хобби
Who's utilizing no/low code tools these days? If so, which one(s)?
Hey man, you cheated by not using Tailwind 🤙!
I'll be looking at building a project with Framer some time soon. Seems quite optimal for the vast majority of static websites.
Their CMS needs a bit more work I think. Relations between Collections for starters, perhaps an API some day.
But this time-saving aspect is hard to argue with. Especially since I would have designed this in Figma anyway, I think the Figma step could be skipped altogether and you can just use Framer as if you're in Figma..? I think?
That's true until you eventually hit an issue or limitation with the no-code tool and then all the time saved goes out the window. I've been experimenting with Framer, Webflow and Wix Studio and they seem great (especially Framer IMO) and then there is a bug and there is nothing you can do about it. It's very frustrating. I really want these tools to work and speed up my process but I have gone back to code as it ensures it will work the way I expect it to and any issue I hit can be worked around.
It's a matter of understanding their limitations. And mind you, there are certain projects that should *not* be made with no/low code. Landing pages and straight forward websites are more the use-case.
This is how I'm approaching projects at the moment but applying it to hand coding vs Kadence (WordPress). Btw, your UI/UX and CSS courses have been absolute lifesavers.@@DesignCourse
Yep, I had same experience. Sooner or later you getting stuck with the feature you can't solve and going back to good old code
Big caveat is that you can't export the code from framer. You have to host with them. So you saved 5min for 1 component, but you lost your whole site to a proprietary and closed platform.
You have such a knack for explaining things clearly. Awesome job!
Is it possible to export the design in Framer into HTML CSS ?
How much faster with the Vercel UI AI?
Fair but you could have gone way faster by using Tailwind.
Another awesone tool in our toolbox.
Okay design sure But What about logic and functions etc?
Ex creating an app That Use the Open AI API to Use GPT?
Creating a login system for an app
Creating an online booking system
Creating an online food order app
I feel like Thats Where they fall short, perhaps Im wrong tho?
I got no coding skills
Nice one.
How can I convert Framer into HTML CSS JS code?
You can't.
very impressive, I wonder if for a more complex website, how faster can a front end developer with framer skill compare to those who code pure html cass js
By adding skills like React or it's counterparts frameworks which usually get newer features and updates very frequently.
I mean great promo for your next course
Need to show this to some outdated managers who are afraid of change lol. Thanks Gary! Great vid.
As I',m always telling to my client's choosing the no-code it's based on the product needs. But in most cases even if we have to build a web app or saas application it's still less cost to use tool like Webflow. Anyway as a react dev I'm surprised that you're using Framer :)
Sponsorship I guess.
Webflow is no.1 :)
i have the same feeling that Webflow doesn't need this type of advertising right now. The connection with Devlink and Wized is overkill for other solutions for me, I'm writing this as a dev who is working with this platform each day, and as a previous next js developer. Btw best regards Simon! I love your content :)
Should post a link to both markups
You couldn't. Framer doesn't export code. You have to host it with them.
@@kjellandrew wow, that’s wild. But couldn’t you still inspect the rendered site? I guess you mean they don’t offer an easy way to export the markup.
Using tailwind it would take around 2-3 minutes.
Low code tools have come and gone for 20 years
I used FrontPage 98, Dreamweaver, etc.. Those sucked. These tools are on a whole new level.
Oh no dude, you started straight from a template in Framer. 💀
I also can make that card in 1~3 minutes with HTML and Vanillla CSS with unlimited potential to scale.
That wasn't a template from Framer. I designed the layout in Figma, then imported it into Framer. That way is 100x better than designing solely in Framer. Way faster/easier to iterate.
And dude, no way you're writing all of that HTML/CSS for that card in 1 to 3 minutes. I'm one of the faster typers out there and it took me nearly 11 minutes.
@@DesignCourse Aren't there also plugins in Figma that exports to html and css - or jsx? Wouldn't it be fair to use these tools too?
I think, comparing no/low code with raw code is not a good idea, because no/low code are developed through raw/handmade code.Please, don't promote this kind of topic.
You're missing the point and getting a bit too philosophical about it. We all know no/low code is faster, but I wanted to find out just how much faster. These topics matter when you have a project that needs done *fast*, like 1/10th the time. This is a practical demonstration.
Low/No code tools have their use cases.
But in case you don't want just another typical boring site or you have custom needs, you'll have to use code.
No/low code tools are very flexible and you can definitely create an awesome custom website with them.
Imagine not using tailwind.
Gotta type faster Gary!
I wonder if making complete instgram clone in framer possible?
looks like Dreamweaver..
What about a comparison using sometthing like Tailwind?
I feel like if you used Tailwind or Bootstrap it really wouldn't be much difference in build time. My concern with low/no code tools is that rapid builds miss uniform classes and styling on a large scale project.
Me..
After that 1:30 minute of no coding, plus convert the frame to HTML5, CSS, js...
Huh? Within that 1:30, it was already converted to HTML/CSS/JS.
@@DesignCourse what??. That,s insane!!
i think you mixed up the math with the title and created by mistake an Anti-Click-bait one: It's not 80% but closer to 800% or 8X faster. Or maybe you just forgot a zero?
Low code is the future!
I do not disagree with you completely, but did you honestly spend 10mins to build that using html, css and js?
Yes, I spent 10 minutes writing the HTML/CSS from scratch within the context of a brand new project. I also type pretty fast and thought I did it fast, especially for not coding it before hand. Are you saying I'm slow? lol.
@@DesignCourse HAHHHAHAHA