Comparison between Webflow and coding

hey guys welcome back to my channel it's Steph and in today's video I'm gonna compare creating a website using web flow verse coding it if you don't know what web flow is it's a visual editor where you essentially design your website and it converts it into code for you it's really easy to use and it's a cool way to create websites without having to know how to code I made a previous video where I cloned the Spotify homepage using web flow I'll tag it in one of these corners and that was the first time I ever used it I thought it was super cool so I bought a subscription and since then my opinion has kind of changed I find myself going back and forth on whether or not I think web flow is worth it so I thought I would sit down and create two identical websites once using web flow and once coding it now when I code it I will be using two frameworks tailwind and view and I will also be using tailwind UI which is this library full of sections that are pre coded and you just copy and paste them into your project and then you customize it however you want so it speeds the process up a lot I'll tag a previous video I made on tailwind UI if you want to learn a little more about it but anyways I will compare the final product of these two and just see which one I was able to create quicker which one looks better and just the pros and cons of each so I hope you guys enjoy this video if you do make sure you like and subscribe down below and let's get started okay so I recently incorporated my design studio as an LLC and I need a landing page so in this video I'll be creating the landing page for that it's called colorblind design studio so are you sketched to put together this design it's really your basic landing page nothing too tricky to it I included an animation here so it's going to be a fade-in fade-out animation just because I really want to compare webflow animations verse coding them other than that it's your basic landing page so let's get started with web flow alright so here I am in the web flow editor and it ended up taking me about an hour and 40 minutes to complete this project so I sped it up a ton for y'all so you don't have to watch all of that but overall it was a really good experience they have a great UX and I don't have a whole lot of complaints when it comes to actually building the website using web flow they use all CSS properties so it was really easy for me to pick up on this because I have history in development if you don't have any background in development it might be a little harder for you you're gonna have to learn some terminology but I can't imagine it taking you more than a few hours of messing around with it before you kind of get the hang of it there's definitely a bit more of a learning curve compared to something like Wix but it makes sense because web flow is completely customizable whereas Wix is not so like I said I don't have a ton of complaints but one that I do have is that to my knowledge there's no way to create a dictionary so if you want to repeat a certain chunk of code over and over you have to copy and paste it and then if you want to change a background image or a color but only in one section you have to add a class otherwise is going to make that change to all the sections which is really annoying so I found myself just adding a ton of classes and it felt really messy and kind of chunky to me but it's a relatively minor complaint compared to what it offers I will say that my favorite thing about web flow is how easy it is to make animations you can make literally any type of animation and web flow and it's extremely simple and it looks really great so that's probably my favorite about web flow so here is our completed project if we click this eyeball up in the upper left hand corner it'll show us what its gonna look like once we publish it so it looks really good let's go ahead and get it published to do that all we have to do is click this button that says publish to select a domain so we click it and web flow does the hosting and everything for you so there's nothing on your end you have to do here which is really convenient let's take a look at it so the image takes longer to load than I would like which is probably one of the bigger issues I have with web flow is just how long it takes for images to load and it's kind of choppy when you scroll through it but other than that it looks really really nice so the maps isn't working and the reason for that is because I have to upgrade my plan here are the plans they offer I bought this 16 dollars a month one but I actually paid for a year upfront so it was about $200 when I bought this I thought that I would be able to publish all of my projects to custom domains but it turns out that's only for one project so I can publish up to three projects with this plan but only one of them will have a custom domain if I want all of them to have custom domains I have to upgrade my plan so they do get you on the upgrades but if you don't know how to code I think it's definitely worth the money especially because if you're building this for a client they're probably gonna be paying for it so it is I think a really good option I'm not gonna lie I came into this video thinking that I was gonna on web flow but after really evaluating it I actually think web flows pretty awesome I'm back on the web flow boat so here's a website it done you can see it's a little choppy for some reason things like reload when you go back to them so they don't stay pre-loaded but I mean considering that we didn't write a single line of code for this it's pretty amazing it looks great it's 100% customized here's the animation it looks really good or the transition I should say so all in all like I am surprised at how good web flow is this flag in the lower right hand corner if I were to upgrade my plan it wouldn't be there so like I said they're gonna make you upgrade probably a few times but I do think it's probably worth the money if you want to get into web development without actually doing the coding it's a pretty decent option but let's go ahead and code this website and compare the two so before I get started coding I want to show y'all exactly what tailwind UI is because I'm gonna be using it in this project essentially it's this library full of pre coded components so for instance if I click on this FAQ section it's got a few different layouts that I can use for the FAQ section so I can preview what its gonna look like I can look at the code and just see what's going on and then if I click this clipboard it copies it and I just paste it in my project and I will have this FAQ section on my web page and it's completely responsive so it just really speeds up the process alright so here I am coding the project I once again sped it up a ton for you but it ended up taking around 53 minutes to code this landing page which is very quick keep in mind it took about an hour and 40 minutes to build it using web flow now the reason I was able to do this so quickly is because I was using tailwind UI that speeds the process up a ton I think had I been coding it completely from scratch it probably would have taken closer to two hours but thanks to tailwind that was not the case now on top of tailwind I also used view which the two frameworks work really well together if you haven't already checked them out I recommend it they're my favorite as far as the transition goes we have that fade in/fade out transition tailwind makes that really easy to make they have a way for you to set the duration the type of transition and it's really simple had I done a more complicated animation webflow definitely would have made that simpler than tailwind but such a basic transition was no issue other than that there's not a whole lot of commenting to be done on this section it's really just building your typical website so let's take a look at the final product and compare it to what we created using web flow all right so I've gone ahead and published my website so if we go to the domain color blind dot design here it is right off the bat you can see the image loaded way quicker than it did when we built this using web flow looks wise it's very similar they do look pretty identical the animation or the transition looks really good here as well and the map works so I would say the main difference is just how smooth you can scroll in this version compared to the web flow so here I am scrolling really fast very smooth here image takes a second to load and then a super choppy when you scroll so that's the main difference which is why I prefer coding also when I use tail and UI I can knock this project out way quicker coding it verse using web flow so if you are a developer who's looking for a quick way to get landing pages and simple websites done I don't think web flow is the key I think tailwind UI is and I definitely recommend checking that out however if you're someone who is looking to get into web design or just creating websites without learning how to code I think web flow is a perfect option for you it's really easy to learn it produces customized good looking websites and literally the only complaint I have really is how choppy it is when you scroll now I know a ton of professionals do use web flow so it makes me think there's got to be a way to optimize these images I just haven't looked into it I think in conclusion I would say if you're a developer there's no need for you to go and learn web flow I think you're better off sticking coding your websites and looking into things like tailwind UI that can just help speed up the process however if you are new to web design and you want to start creating your own websites from start to finish or if you just want to get into building websites without having to learn how to code I think web flow is an amazing option I hope you guys enjoy this video if you did make sure you like and subscribe down below I'll be posting more content similar to this and I will see you guys next time

Channel: this.stephie

Views: 11,877

Rating: 4.9310346 out of 5

Keywords: tailwind, tailwindUI, webflow, wix, development, web development, developer, web developer, javascript, css, html, frontedn, frontend development, front end, full stack, tailwind.css, vue, vue.js, code, coding, website, shopify, landing page, ui, ux, ui/ux, uiux, web design, css3, html5, python, c++, swift, framework

Id: i9dT4odmX8A

Length: 10min 48sec (648 seconds)

Published: Mon May 18 2020