First Thoughts on Pinegrow from a Webflow User (Stream)

hello and welcome to another episode of webflow and code where i teach you the underlying code you're writing a webflow today i took a look at a new tool called pinegrow which acts behaves and does essentially the same thing as webflow but it's slightly more advanced i would say and i just i streamed it for the first time i just took a look at my initial reactions and kind of compared its general feature set to to that webflow so i look forward to using this tool a little bit more in the future and understanding it a bit better as you as you'll see i just took a brief overlook at uh overlook uh of the tool and kind of just gave my initial reactions coming from a webflow user so if you're inside excited about that then stick around and you can you can see the stream or you can watch me stream live at twitch.tv fake sam gregory [Music] all right rather than waste any more time i thought i would do a video a stream because recently i was recommended pinegrow which i had no idea existed um and obviously people know me being sort of a web flow person no code person i am a developer if you knew i'm a developer a web developer i know how to write code um and i've recently i make videos on webflow and various things like that because i i just think it's a powerful platform but um i think webflow has its limitations for sure uh so my friend came to me with saying he was interested in trying to get pine grow to work for him and it seemed like a really interesting tool i kind of did a little sort of brief look on the website kind of looked at what it could do and it seemed very very simple to web flow really really similar to webflow actually so i i thought i might as well check it out and and i've got like an hour to sit down and just look at it and i've opened it up i've opened a project up but i thought i'm going to stop because i kind of want to go into it with fresh eyes as a sort of you know semi-long-term web flow user look at it fresh eyes and just just assess the interface see what i could do and also make comparisons on like what webflow does versus what pine grow does and and so see if we can draw some comparisons so i've just started like a free trial of it and i'll click through to it here um and i guess here we're just greeted um i've been through this but i'm gonna try and recreate kind of what was going through my mind about 10 minutes ago greeted with a with a screen kind of creating a new project i i don't really know what open url does but essentially i just i went straight through and created a new project and what you can see here is we've got a bunch of css libraries right out the gate right out of the box we can start using sort of css libraries and i thought that was quite cool i'm not a massive css library person like i like writing css but sometimes there are situations where you need to get a project up and running quickly um you just you're prototyping something so this is where these css frameworks can actually become quite handy so it's got bootstraps got tailwind foundation and i guess it's got these pre-configured projects where you can already start to um build a website with these i guess right now again what i'm not seeing is what webflow has is like a template library and and loads of you know people can contribute to that i don't know if this has that but it's i mean maybe it's got it somewhere i'm not too sure but i mean i'd be interested to know as well i'm seeing angularjs i'll be interested to know how that works considering you've got things like state and various things like that if you're web developer you know what that is you know how that's something that can really only make sense in code but i guess you can all start a plain html project or one with a with a library sort of built in so i'm just going to just jump into a bootstrap uh template um actually what did i do just a few minutes ago i just went there and then index but yeah it looks like there's some pre-configured things but i just jumped in and just to see what it's all about so i guess in the middle here this is where your page is which is where your editor is um what i quite liked is that you can have your mobile and another view kind of side by side which is quite cool and then if you make live updates here you can then see it how it looks on mobile as well and all the rest of it so that's that was quite cool um and now i'm trying to look at it as like what how different is it from webflow so i can drag in a container here and this is a native application by the way it's not online so i was you know fairly impressed with the speed of dragging things in i want to add a container i want to add a row and then a column as you start to build these in because of the pre-configured bootstrap these all start to take shape um i haven't tried that mobile view thing yet but i'm guessing if i add some text here you can see it kind of update there which is quite nice um that was quite cool but then i started to look at this and think how can i sort of start to recreate webflows interface with with what we have here because it looks like here to me this looks like bootstrap sort of components that you have access to um it seems quite contextual you can add then plain html then below there which is quite cool and again it's just dragging those in seems seems pretty nifty um i guess just flick through here what do we got here okay so these are these the sort of visual components that we can let's try and drag that in yeah so these are the kind of visual components that you'd expect to find i can't do it right now do i have the ability to share my screen um i have no it's um i would like to share my screen i'd show you the bootstrap kind of library but this looks like the documentation for bootstrap so it looks like a much more visual way to start dragging things in and sort of playing with them which is quite cool uh looking over here i guess he's a pre-configured components things like that i mean right off the bat it doesn't look as nice as webflow um it doesn't look kind of it looks a bit more clunky a bit more boring i guess but i guess the other thing that's quite interesting is here we can start to add our own html or pug so um if i have something i'd actually know pugs so i'm just going to write html um oh cool so you can just edit those things that's cool is that how i just it's quite cool um so that's that for that side let's try and look at the css because you can edit your own css in this as well which is quite cool uh but you normally kind of go to these editors because of the pre-conf well what you're seeing here is like changing text changing colors padding this is kind of all like you'd expect to find in webflow doesn't look as nice in my opinion um and what i did notice as well you've got kind of flex stuff here um oh maybe maybe it is contextual i sort of found that i was seeing uh grid stuff as well as flex stuff as well so it didn't seem contextual but i'm not seeing that grid stuff anymore but anyway there we go so if i select that some spacing i guess this is my so okay this is using um this is using probably bootstrap classes yeah see how you can break point things there as well i don't know how to delete that how do i delete that whatever um but this kind of oh yeah pt4 so that added pt4 at the top which is a boot class i wonder if i can add my own i guess it encourages you to use bootstrap which is quite nice because if you jump on a project that's using bootstrap already and then you start to add your own css um it can get a bit messy it can get a bit messy when you've got like css floating around everywhere i recently was on a project where we kind of had to do that and i i resented having to write my own css so i guess it encourages you to do that um can't seem to add my own css but once again text color that's quite cool nothing else on there this is where you add your own classes i guess which is cool um popovers there's another bootstrap thing let's go on to the next one see what's no class styles defined okay oh this is tailwind thing um okay so this is again similar to webflow we can add certain styles for different interactions this is where you add your class or you can add classes or ids or okay so that's all h1 so it's very similar to webflow in that respect visual editor i mentioned oh so this is kind of broken so there again i wonder what the difference is between this and this it looks to me like these are maybe bootstrap yeah these look like bootstrap things that are kind of tied to the project whereas this is a kind of do what you want like a free-for-all so uh yeah padding top it's quite cool i like how you've got this quick jump thing here um cool um i did do it how do i publish this to the browser maybe it's this let me try and get a window up so we can share my window uh blank template so okay just a bit rough and ready here just resize that real quick stretch the screen cool um i did have a look at the code and it seemed pretty clean pretty straightforward which is what you'd want and expect from this kind of uh editor um so that was quite cool so you can see me uh so that was quite cool um another thing i noticed as well is that i've forgotten how i got it up but you can edit the html or see the html somewhere um maybe that yeah so we can see the html that's been added and then you can actually write html in line if you just you know if you're not finding your way with the editor somewhere you can just quickly just jump in there which is again which i thought quite cool but um i guess what i'm i guess this would be sim this is a similar setup to webflow you've got your kind of html side on the left you've got your style stuff on the right here um and and you and your kind of content area in the in the middle there a font kind of basic stuff like that i know there's a plug-in for interactions which is probably something i don't have on this trial i don't think so anyway please say first let's just save i'll do text editing modes on closing actual windows when you say the fire pine goes back up croco okay fine i can't seem to close that window now is that a bug i can't even select i'm going to select the tab there let's close it and reopen it i honestly cannot close that window so this is another window somewhere ah here we go leave sight kind of right interactions so that was this so let's play interactions jesus that's right add interactions so how'd it start shows oh some pre-configured things you can do smooth scroll so let's just click on that right name interaction what did i select selected okay um move on scroll let's just try something there trigger oh so i'm selected the h1 so when i click on that so page window mouse only timer current element i want to scroll behavior but i don't page in window maybe it's here scrolling the page smoothing that's fine animation parallax oh that's cool i'm more of a person who likes to do stuff myself rather than click on pre pre-configured this but custom animation right and here we go so here let's say copy select the element to show interaction so we've got it selected here oh okay so edit properties so you select there um position oh that's the position okay so transform x and i want to say x 50 pixels i guess right pixels 100 pixels i have no idea delete is that gonna oh i don't know i'll have to probably draw a little a little uh tutorial for that but has interactions which is quite cool um click to select yeah we'll disregard that for a minute but it has it uh h1 interesting oh yeah these are the values for the animation which added so if you want to remove the animation just do that cool um i'm wondering what this is versus yes we haven't i think you can close or move yeah so you can close or move stuff wherever you want so if i want to just remove this this thing pop it out see this but it's just popped out into a new window let me just move the code the code um what's this one okay so that's a tree so i guess this would be something like you'd expect on webflow to be over here there you can kind of move up and down and i wonder if i can add yeah so you can add things like that or you can drag it onto the window as you probably would expect delete that now it's cool plugins i guess actions so that was the other thing i noticed about this as well is it out of the box you can just have a web a wordpress project kind of pre-configured and all the relevant pages i guess and things like that which is which is pretty cool because you know it's just it's just nice knowing that someone's taking care of making sure that you have all the files that you need rather than relying on your ability to kind of go find all the files and all the different different files you need for a wordpress website so that's quite nice i wonder if we can add more like they have a spotify shopify thing um but it looks cool i'm i probably won't go much further than that because i don't know what i'll do i don't have a project or anything like that ready but i i you know with regards to the channel i think i'm going to try and do a series on kind of making a website with pinegrow with obviously webflow users in mind and try and see if you know put it to the test and see if we can challenge some things so um all in all i think it looks pretty cool um i think webflow users will find this quite interesting i think webflow users who aren't quite getting enough out of webflow will find this interesting i think there's even back end code support as well i think my my mate mentioned so it would be interesting to see what the back end can can do um and yeah i think i'll i'll probably wrap it up there so so thanks for tuning in sorry it's a bit boring i literally just put this together like five minutes ago i have no idea if this is even streaming properly or whatever but i'll put this on youtube and people will watch it at a later date but pine grove looks pretty interesting [Music] you

Channel: Samuel Gregory

Views: 1,670

Keywords: Webflow, HTML, CSS, JavaScript, Web, development, web, fundamentals, website, code, learn, coding, webflow, build, websites, nocode, no, codenocode, accessibility, seo, search, engine, optimisation, Basics, Learn, learning, html, web fundamentals, webflow masterclass

Id: YfHYGC59LKY

Length: 20min 21sec (1221 seconds)

Published: Mon Mar 15 2021