Front-End Dev tries Webflow for the first time

hi there my name is Kevin and if you don't already know if you're new here to this channel I primarily teach people HTML and CSS with a really big focus on CSS this week's video is going to be a little bit different though because the team at web flow got in touch with me and they asked if I'd be willing to take a look at their platform and do a video on their platform on how it works and my experience with it so we talked a little bit and I asked them could I do a video that's just my honest first impression of using web flow and they said yes just go ahead use it and let people know what you think about it so they are sponsoring this video but there's literally no strings attached so a really big thank you to web flow for sponsoring this and helping support this channel and of course to be brave enough to let me just dive in there and get my honest opinion of what I think of the platform now maybe you've never heard of web flow and if that's the case it's one of those visual editors and visual editors usually get a bit of a bad rap and I think with good reason to be honest they often there's issues with them whether it's limitations or just creating some they're usually really limited on what you can do with them and I've used a few of them for people that are complete beginners they need a really simple website they're probably good enough but I've heard a lot of good things web flow I even know a few designers who have made some really good things on web flow so I was going in with an open mind on this one the main idea with this is I have a design here it is here is the design that I want to create I want to see if I can create that design without too much trouble not having any experience with the platform but I also want to explore animation through web flow because I've heard a lot of nice things about the animation possibilities or feature I guess is a better thing so apparently it's really easy to make animation so I want to add in a simple animation somewhere in there I'm just gonna play around and add something simple in for now just to see how the animation side of things works in web flow cuz again I've heard good things and another cool thing I've heard about is the code export and I've heard really good things about the code export so I definitely want to check it out and see how good of a job it actually does so we're gonna build out the site we're gonna add a little bit of animation and the very end we'll do a code export and look at the code that it gives us and explore it a little bit to see how good it actually is so this really is my first time using web flow I've never used it before or used it for about a minute and a half where I made a project that I just looked at how the structure of it was and then I started one where I put you're gonna see it I did like one little test just to make sure I could figure out how things worked in it a little bit before starting this video but it literally was about 30 seconds I haven't watched any tutorials and watched any videos on how it works I it's literally my first time going in let's see how I did with it alright so here we are on web flows of homepage and let's go into my dashboard we're gonna see in here I don't have very much all right so let's get logged in and you can see I have done two things I have my wondrous project here which was just a template that I opened up to take a look at I really have nothing at all going on in here whatsoever it's just the default template because I was poking around to see just a little bit of how things looked and then the next thing I did was I made the Kevins coffee house and come in and take a look there's not very much here at all so I literally have not touched webflow at all except for making this uh what we can do so let's see what we're gonna be doing you might recognize this from another video and this is what I'm going to try and make literally no idea how to do it at all so it should be interesting so I do know we can add stuff here so let's click on that and see a section container grid columns there are the basic air so that's my layout stuff that's there or we also have dibs lists alright all the stuff we might need typography CMS that's kind of cool media so that's my images my videos my forms that's good cuz we do want to build a form and then just components drop down a background video oh cool into a background video now bar aha that's what I want so let's grab my now bar and drop it up there oh look at that it gives me everything I need so I have brand this is that show more it's my nav bar it's in a container and the link is my brand brand link I'm not sure what that means that's alright in there I do want to insert an image so do I need to come to here and let's just try image and this I actually want to see if I'm going to be able to oh I have to drop files I didn't know that I want to be able to see if I can bring in SVG in or not I'm assuming you can amazing you can bring SVG's in I do want to push off the top a little bit so let's grab my navbar layout Google grew spacing that's margin that'd be kind of cool if it was a little bit bigger and I want to click how do I it's not moving oh you drag up and down I guess that makes sense because I'm increasing my okay what about these numbers that's left and right okay that's sort of what I'm used to all the Adobe software usually it's just no matter what if I'm increasing a number it's to the right if I'm decreasing a number it's to the left but in this case it's up and down that way so we'll do that and we'll increase some space a whoops probably want some space I'll leave that at zero for now oh cool if you click you get a little thing pop up these guys I'm wondering I know they have stuff here I don't want display what's this mean flex what's this block block I want to display flex but I want direction oh they do horizontal vertical high you don't even need why is that not oh wait here we go I want do I have any margins hmm we've run into our first problem but oh you know what maybe it's because I'm gonna undo can I do undo go back they seem to have broken banks oh there we go maybe it's already my container I was doing it on my navbar I don't want to do that on my net bark is we're inside a container right and my container how are these getting separated I feel like I'm missing something because I wanted to do a display flex for this whole area and I'm wondering I don't want to have to add a new selector or tag on that but how can I select these yeah we're gonna come back to that once I I don't want to be stuck too long on certain things what's this display:inline-block that's fine inline oh we knew grid flex or what if I did it as a display flex instead oh it's only doing that one though on do okay so let's select a class of we'll make a new class then my nav link so this will also be in a blink and this one can also be a nav link okay I have that I'm just thinking I can add space on top of those but I don't want to do okay I'm going to come back to here I also forgot I brought my fonts into webflow but I haven't done it yet but let's get rid of this background color I'm just gonna make it transparent that's nice and easy so I brought the fonts I want I don't know how to use those fonts yet so I want to do that on my body so body I'm on my body now let's go and typography my font size my defaults gonna be 18 family so let's go to add fonts and see if it's here oh so I brought in my Adobe font API but I hadn't told it which one I wanted to be set up on so it was going to be web flow test there we go so we just save that and I guess we can go back oh that was in its own little thing there so I wonder it said sometimes I could take a while okay I'm gonna give it a bit of time I might have to refresh this after to get the D fonts in so we can keep going so the next thing I want to do is I want to add a new section so let's bring in a section I'm just gonna drop it right there so when you do that you can see actually let's just undo that that's kind of interesting when i when i do that i get my section it's telling me that it's going into the body o nav menu how do i get to there that thing I just saw pop up there I want that style manager okay that's cool there was like a nav that I can't select hmm we're gonna we're gonna dive deeper into that but let's keep going for now so here I have my section let's go see what may want my section to look like I have this text so I might as well copy that right away and then I need to have a big picture in the background of it and that actually just over overlap with some their content so I guess the first thing I'm going to put in here is some text text blocks heading drop that the heading will be should I put a container in I don't really think I need a container so we'll paste that and serving soft break did the drew so this one I want it to be bold this one I want it to be not bold why did it do that okay so I have that the color of it let's go get the color I actually have to change my body's color to the body text I have it as this one which I didn't even add to my colors there so we have that from my body so let's go I'm a little bit all over the place but it's a little bit how I design things anyway styles were on my body color oh it's pretty close okay and then my heading this heading is gonna be different so actually that let's give this select your heading let's give it a class new class new combo class type to create a new combo class oh that's fancy sounding combo class the combo class will be main title do I need to put a dot what if I don't put a dot rename class main title let's see if that works I don't think I need to put dots which is weird to me so I want it to be normal let's do or my fonts come in I'm just gonna save no I'm not let's let's stick to there that's my combo can I just style this rename class duplicate class because I made that a combo but I just realized I don't really want it too bad it's okay the font size that's the size typography ah that's cool you can go into Emma's and oh they don't have REMS that's interesting very interesting M is that the line height I just put that to one you can't okay and the font size actually I'm trying for now I'm gonna sleep with pixels because I know how big I want it to be and actually I need a span can I put a span on that clear formatting wrap with span well that was easy text span what's my selector though is my text lets us try making that one bold now no see I don't want to do that I only want to select my span ah there we go let's call this title span this why I've not too focused on making it perfect we'll just make it bold for now and actually I think this font size is supposed to be bigger let's do like 60 and then this one we can do at a 72 cool that was actually pretty easy to do this section I'm gonna give spacing spacings always margin what's under size that's under position how do I add padding on something centering oh cool there's a quick centering yeah that's okay oh that's act Oh doesn't don't we wish we had that in CSS centering doesn't affect elements without a fixed width they need that warning in the dev tools of stuff that's that's neat okay let's just put that back to zero though I was looking for padding it's right in front of me I don't really know if I needed to be padding but I am going to bring increase the padding and this is sort of the opposite of this if I want more margin I have to click and drag up because I'm increasing the space on top I guess and if I want more margin sort of more padding I drag down I find that a little bit unintuitive but I could see you getting used to it and so I want to increase that one so I'm dragging it up interesting okay and how do I add a background to this backgrounds color image how do I bring a choose image okay that's not what we want that to look like at all the whiff can I set this to cover Auto cover that's what we want position we'll just do a center Center that's nice I like the little visual thing I could even use this like teach the SS and how stuff works to be honest that's kind of cool that it shows the arrows and the way it's growing and that means over here actually I want it to be more like that and let's go back up into my spacing and I just need like a ton not why are they linking I only want this one can I not go bigger than 200 500 I'm wondering even if I'm doing this as like a Jake I don't like doing things like this it doesn't anyway we're gonna make it work and then we're gonna try and do it in a better way but we're gonna start with this and that's just there we go that's too much okay so we got that there um I don't know if I'm saving I'm swimming it's saving as I'm going oh wait I just saw nav nav menu there we go I hope you can see these things but that is okay so I don't want my nav menu that I want to be display flex right because then oh but that's not gonna work oh that will it will no it won't work okay you know what I'm gonna do I'm gonna do this is going to be my header container the reason I want to do that with my header container here is because I do want this to be display flex it's gonna break it but the advantage there like if I undo that you'll see it's a line to the top by doing display flex now it's lining that up centered this way and then I should be able to do this this this this this what's this one called space between should put why am I getting space on the ends hmm okay I'm gonna leave it like that for now because I don't want to go all the way that way all the way that way that one should this should be putting all the space in the middle as far as I'm concerned hmm okay we're gonna stick with that for now we're gonna keep going I want to add a new section down here at the bottom a section elements cannot be nested inside each other I'm not trying to I want to nest it there we go in the body does that work oh I can do it here cool this is the thing I wanted to bring up before so I have my section after that section I want a new section it didn't let me do it I don't want to nest it I want to nest it after No let's just select my body and then go plus instead of clicking and dragging I'm just gonna click on it aha there we go okay cool and so let's go look back at XD for a second for that oh now I want to bring in this stuff here so I'm gonna need two divs display flex I guess um yeah we'll try something like that so I have my section I need to add in container yeah I'm gonna put it in a container oh wait do I need what's the columns let's just not put in the container for a second if I do columns now okay they are full width okay so I'm gonna go inside of that and then I want a container and then inside that container columns what are they column I want two columns six and six let's do like a eight and four I guess eight and four looks that sounds good so Oh can I not show all settings high I can drag it eight and four seven and five ah cool I don't even know what happened there but okay oh so you can do ID for in page linking I like that and you can add it's only a div tag right now and I'm guessing I can add other stuff you can see a new custom attributes interesting and then I can choose where so on a tablet so it's gonna be like this on a tablet and on desktop but on the phone and everything else they're just gonna stack we're just fine I'm gonna come back and add worry about that stuff after so this one here column one I did want to go back to my design it should have a border typography borders a pretty thick border I can tell it's border radius whoops border-style:solid and it'll start over ten i have no content in there so in that column let's add in my text right away so I need heading it's an h2 and choose heading type h2 and then after my heading I need to have a text block can I copy and paste things from here I don't think so I oh I can cool because I need two of you there we go and let's go get my text from XD cool so now we can take that I guess I can change the color of that I can can I create a color palette I can accept I don't cancel let's get my color first so we're gonna go with this one so if I bring that color here and then I add it there we go darks light gray that sounds good to me great and so there's my color I want some padding on this padding on you call them padding let's go like 35 can I do all of them at once or can I not link them no way maybe there's a way to link it that I'm missing right now okie dokie and then here I want my image so what I actually want to do now is I want these columns what's the display on my columns I want display flex was it using floats automatically or something my default I'm curious I want to display flex because I want these to be lined up this way so that one ends up in the middle then in here I will place my image there we go and my image let's choose my image cool you can get little previews I want to upload a new image though I want this one now this is where I'm curious because this isn't going to be the wrong format for my image and this is I wanted to see here we go oh I can do all my alt pouring a coffee I should come up with a better one my image it's giving me a warning that the file is too big so I could consider replacing it with a smaller image that's cool let's go to all settings on this because I'm really curious how what happens if I change the width here to like 70% no not the width I'm gonna leave that at auto height 70 percent what happens did I just break something oh I hit tab in it 70 oh I can only do pixels and if I do like 500 yeah it stretches it that's what I was a little bit worried about so I will have to edit this image I think I was just trying to see if there was like a background fit option there doesn't I wasn't expecting to be but I said you never know okay so I'm actually gonna leave that like that for the moment and I'm actually gonna select that whole column and see can i oh the column I can't move why aha because they wanted to remain responsive that's smart of them that is smart of them so I'm gonna export this image after but in the meantime let me just think here for a second this is a box shut they both have shadows this is a bit thicker of a shadow I do want to pull them on top but I can't do negative padding which is why they don't want me to do it I get that can I do a position I can do that okay so I could overlap this way make this actually on this then I need a bit more padding I click-and-drag there we go let's do something like that for my image box shadow let's add a new shadow the angles okay the distance well that's blur can be a little blurry er and the size can I go back to zero on that and the color there we can just really tone that down a little bit one thing I'm curious about can I add I want to sort of make that a bit blurrier it's you can probably barely see it what I want to know is can I add you can't cool you can actually have multiple shadows that is great I love that it's a nice way to create extra depth or create more realistic shadows when you have multiple shadows going on one that's smaller than the last one type of thing that shadows way too much though now if I have a shadow I want to get rid of what happens trash and as you can see I so I just brought in and replaced it with an image the other image basically so okay that's cool so that's working now I want to move this whole section up and can I do that easily with some negative margins that's sort of the first thing I would think of doing well let me do it negatively how we can cool oh and that means this needs a white background but that's cool that was easy and so this is one of those things with these types of editors that sort of drives me nuts at first is just like I'm looking for stuff when if I was doing the CSS I've actually know what it is but it's I'm getting there I'm getting there I'm starting to get used to how things are now let's just see for fun it's still working a little not looking so good and now it's terrible okay we'll have to fix that we're not quite responsive yet but I'm really I'm not stressing too much about that at the moment the next part okay we need a little forum you never miss out on our special offers we need a blue background let's see if we can do that now so I need a select my body I need to go up and choose another section this section will have a background that is a new color because it will be this really dark color here cancel let's put the color in first and then hit plus and it dark slate gray this but really dark blue I guess the other one wasn't slate gray either but we'll create that really dark blue we're going to bring in our container first so we need our container then we need to have our heading and then we need to have our text and this seems really repetitive we have to think when you're doing CSS of course it is as well I don't like that I can't scroll past the bottom of my page even though I know that's super realistic so I want to come on here and I want to change the color here to white just for now cool so it's all inherited just like you'd expect it to be so I should be working here too I can Center I do want to add a bit of spacing on the top that's cool I'm gonna add some spacing on the bottom right away just so I can oops wrong way we want the spacing do that way just so I can scroll down I don't like it being stuck on the bottom like I said of course on this we're gonna want some padding as well so the padding we'll just do it like that 57 I'm doing this really rough I'm not trying to make a perfect layout right now there's also a margins on the top there and there's no margin apparently on the bottom of this text blocks where's that ha they have no margin on their paragraphs that's really interesting I had multiple paragraphs in here too but that's okay I had the next thing after you I want to have a form field I think didn't I do that right away all right so this is where I'm getting a bit more curious about how this is gonna work so for this I want an input oh I need a form first aha smart I do need a form first so I need a form block which I don't want a name no I just want email address so I can delete you and I can delete you I want to select my form I want to give you a width now actually on this is something I'm really curious about does it have position size width height min-width math works out ha that's what I was looking for so I want a max width of like 600 pixels I want it to spacing I want my margins to be Auto on the left in the row I should just hit that guy there we go so that's centered that way we can add a little bit of margin on the top something like that in my design oh I didn't even put email address I didn't put a label anywhere we're gonna keep email address there then I also wanted to see if I could add a placeholder on this which would probably end this settings placeholder enter your email address oh that's super easy okay cool now what I think might be a little bit trickier I want to wrap this in this so I'm gonna go in my form I'm gonna add a div let's see if this works because this is how I probably do it and I want to bring that in my div and I also want my text field here to be in that same div okay so that worked now this div block will be my CTA now I don't want an ID on there I want a class on this how do I add a class form from block how to write a class design ha okay CTA now am i adding classes or am i adding tags if it works it works I guess something I'll have to look into CTA I am really not on top of it CTA columns I'm fighting a cold my brain is not working so CTA columns I want to display flex cool and hmm submit button has no spacing on it this has no spacing on it what could it be oh that's I was centering it when I should have probably been just doing an align top and look at that now at the same time they are lined up but I want to like if we go and look at my actual design I want to add a bit more padding to obviously the fonts need to change and stuff but I'm less worried about that but let's just see spacing had a bit more padding on that so actually for this one I'm going to do like 35 35 and I want my typography now to be well I just saw that it says flex child here so then it gives you like certain shrink if needed grow if possible that's kind of cool alignment in order huh really neat you get the Flex property show up when it's a flex child I like that flex item I would it makes their using language here that's a lot more friendly to people who don't know CSS so I think that is a good thing so that's okay where's my typography though typography style more type options all caps boom that was easy letter spacing could always play with that text indent columns oh cool you can do columns in here the right to left left to right breaking is normal you can do a no rap and wow that's really they have a lot of options in here and tech shadows cool cool cool can I change anything in here and why it's probably okay I'm gonna leave it just like that we're going to come back through and do some typography stuff in a bit actually let's just check now body typography I mean it's so cool to see the whole thing changed by scrolling over stuff feels like illustrator a bit for that I have a Roboto coming in where's the other font that I brought in oh look at that I have it okay so Roboto I used for most my headings all want I wanted to choose all my headings can I choose all my headings really easily like this is my heading whoa what did I do that to my hole heading I thought I was working on my section I've made my heading gigantic whoops that's okay though so that heading I want just my heading though can I choose just heading or what if I choose you oh I get it I get it each one I'm not actually I don't get it all each two headings do I have another oh we have hover stuff in there too cool okay so we it doesn't seem to be that I can just choose all headings okay so let's just choose you then I'm gonna set that to a trap mcwebb I'm gonna choose you and then I'm going to say all h2 heading z' should be size 48 the font should be a trap mint and the color should be an orange color that I haven't brought in yet actually should all of them be that color yeah they should be and then we'll have some that change that out hmm I don't want them to be bold so drew heading they should all be my normal it's only changing that one I want to change all of them all each two headings should be normal AHA the color of them all should be that which I can also add chocolate let's just call it orange great I do want a little bit more line height on this 36 I don't want that I'm gonna put it to you and make it like 1.1 cool and we're gonna add I had a lot of space on that but I think I'm gonna like this I know a bit of what I need to do I'm starting to get the hang of this okay here even the color of my heading I really muck that up by putting the background color the background image and everything on my h1 it's a one way to do a site okay so that looks okay here with lots of heading one whoops I want that to be a heading two but this one will be my CTA heading so my CTA heading will be white this oh actually no this should actually be like I really I'm gonna just it should be like a really light blue like that let's add that color sky blue that's fine this button here should actually be that's my submit button the color white is good where's my background color that should be my orange things start coming together pretty quick once that orange doesn't look right I need to edit that orange color we'll see if I can do that after let's just give you size max width and I guess that means we need to Center you supa dupa I'm gonna make that a little bigger seven hundred all right so now we're gonna do one thing that I was sort of looking forward to do and I don't here it is I want to bring in a Twitter feed not a Twitter feed and Instagram and your Twitter and Facebook but I can't do Instagram I'm sure I saw something on that alright so it turns out you can't just do instagrams through here I didn't didn't look into it but I did find a free plugin I didn't even know there was things like plugins that's not really a plug-in in this case it's an embed code that I have to put so the embed code will come all the way down to here in my body it's gonna let me do it come on come on come on there we go and I got this code right here so let's save and close and see what happens we can't see it yet so when all is said and done it should look something like this I Heaton see I haven't been on Instagram in a while I didn't make a coffee one just for this either so anyway we'll see if it what it looks like once it's all said and done so except I don't want that to be here I want that to be here can I click and drag there can I click and drag here drop there we go that's where I wanted it so then this one is going to have a margin bottom of zero now okay so we have this I I wanted I'm gonna skip over the blog post thing I might be something I look at in the future I do off off camera and come back to afterward I'm just because I want to try building out that more complex part of my site that I had next so for that next thing once again we're gonna have a section inside that section I'm going to put in a container and inside my container I am going to put columns the columns we can do it right here are going to be like a two in ten foolery I think there we go I think that'd be good this column can I just style this that's kind of cool if I'm going to straight-up style it color I want a background border opacity effects see this is this is the background there it is one of those things once again that once I get used to it it's not so bad but it sometimes takes me a while to you know when you're scrolling up and down trying to find what you're looking for I want to add no I don't want to do that there I want to go to up my whole section we can add some margin top so again I'm going to add some margin bottom that I might get rid of later on just so I can scroll down and keep it off the bottom of my screen for the moment so inside this section I do have all that text to bring in so I think I'm gonna speed this part up I just saw I was adding text blocks and I also have paragraphs and I have a little tool tip a program oh my goodness I should have been using paragraphs this whole time oh well so that would probably make more sense and probably come with some default spacing on it and work a little bit better and then just doing this a generic text block thing yeah oh well I guess I did that wrong in a way this could sort of be a list but anyway that's just I don't probably I'm curious actually if I could style the list I'm sure I could but for now let's just do paragraph and I guess I could do each one of these as their own paragraph and we're actually gonna see if I can copy/paste something here so Monday so if I do something like that I'm gonna give this a class of opening hours just realize there's a problem there opening hours because opening hours is going to need some margin top on it just spread it out a little bit and then this bold and I want to actually wrap that in a span because I want that to be of that light blue color that I had I only want my span to be that color bold text opening and do a bit of been here a day and then on my day then I could switch this to be that light color now what I want to know like can opening hours can I take coffee paste aha one two three four five six seven cool and then actually that I want to reduce now so it should do all of them at once ha neat let's play with this now a little bit the one thing I do wish maybe there's a way to do it that I don't know but I'd be nice if we get to make just all of these automatically the same size because I do want to increase the padding a little bit on the two sides and these columns that whole column thing that's once again do a flex so I can Center this in the middle and then this one will be my form so actually before my form I want to bring in my heading and then inside my heading after my heading I want two lines one will be a link and then I have my form so would be an h2 get in touch and I just realized something so let's come in here and this is oh that's my h2 so I want to make sure I'm on all h2s because I do want to do a bit more in my typography show more options I want it to be all caps I want there to be a little bit of letter spacing and I do have to play with the line height a little bit 36 let's just do 48 or again this is where I wish this would default there and then make that a 1 there we go so get in touch after my get in touch I want to add a paragraph and add a paragraph and if I want to make that whole thing a link it's a link I don't need any special URL I can do a URL I can do a page page section so yeah that's like anchoring through the page oh you have phone numbers cool files or in this case an email so I could do email is hello at Kevin's coffee house calm and subject is Kevin's coffee house cool and then after that we want to bring in a form so I'm getting used to this a little bit now so bring in my content form block first name email address I do I purposely wanted to do a subject here so after this one I want to bring in where's my forms forms label input form block checkbox select because I'm very curious how we can style that up and after my select I also want to bring in a dude your drew text area okay I'm probably nothing this format all of this I do want to see here how much I can do to my select because selects are always a pain to style up so my background color should be pure white that looks good enough actually I guess we have to go to this setting settings on this one required a lot multiple multiple it's interesting select one first choice second choice I'm going to leave those alone let's just say for fun actually let's come back to my design the font is actually Roboto is it cool that's working okay I'm going to switch it to a trap meant just cuz I want to test a few things on this for styling forms let's make it my orange color or blue let's change the color here to white of my text cool just because I want to test a little bit here let's say can I make it bigger I guess that would just be under size layout size can I give this just a bigger height 300 px that didn't seem to do anything height that is the height right 500px doesn't seem to be doing anything our texture is a little bit limited in that sense hmm curious right and this one can get my C there I wonder if there's a way there's probably something I'm missing that you can give me like some generic coloring and stuff like that and I guess for this column I guess I could have actually made that like three columns but we want to just Oh see look these are linked how do I do that where they're linked they weren't always linked on other things that's interesting okay say we do something like that cool and actually that went pretty fast these again should probably be switched to paragraphs just so they work a little better that's gonna come in there's a little bit more I want to do here but I'm this was my first chance at just playing with this let's hit publish I don't publish to selected domains let's see what happens here I'm really curious let's open this up at all loads that looks pretty good I'll look at that means edit social feed is that cuz I'm logged in that's kind of annoying okay that's okay I was just experimenting to see so that's looking good how is this look wow look at that the whole thing is styled okay so I just discovered something really cool before I even did the thing I wanted to do but the way the media queries work in this I thought I was really limited at first when because what I was doing is I was shrinking to this size and then this size and it was making those weird columns and when it happened is the columns were trying to do this but because I'd set the whole thing to display flex it was busting it so you might remember I did a flex to Center this way so I'm like I guess I have to go back to a display block but what happened was that is saving it only at the screen size that I'm clicking here and you can even adjust like the this thing to like get different views and stuff which is cool but you can use this to build in your media queries so basically if you design something and then you change it when you're on one of these tabs it's only changing it and it's really doing like a mobile-first thing because I here it's affecting any VAT and anything smaller so that was kind of cool a nice little discovery I made so I think I've fixed up my site a little bit at smaller screen sizes so the other thing I wanted to check out was the interactions and stuff like that so element triggers and all of that I want to see I'm I was also looking here at I didn't you know I didn't explore at all I just start building stuff but this is what I was looking for before I have the Navigator that was showing up on this side at one point so just I should have explored things a little better before jumping in but that's how we like to work right we learn by doing so I can easily find stuff here and move stuff around which is kind of cool that would have been useful earlier on on pin collapse all cool that's the Navigator if you need new pages if you need their CMS you can get their CMS stuff which is something I might look at at another time ecommerce which is cool assets and settings I've seen some sort of I've heard about something that I can't really find right now so I'm gonna keep exploring to see if I can find there's one thing that I want to see if I can figure out but we're gonna get there in a little bit let's see if we can add in a trigger here of Scrolls well scrolled into view on scroll action play squirrel no action trigger on let's do it on all of them on action play scroll animation 0% or when it starts and when it finishes and then the scroll animation smoothing let's add a new animation in scroll animation select an element on the canvas and then click the plus above to animate the element on scroll I did that didn't I do that plus aha ok we want it to I wanted to slide in can I do that I have asked you rotate scale size no move I was looking for translate move so I want it to move okay just whoa that's not what I wanted oh no I do not at all what I move oh here we go how do I do it the move action does not have a value applied can figure the action with at least one value ah there we go so I want this to be like super far off can I do that as a percentage a hundred percent so let's say 150 should move or might be off screen right okay whatever - hmm 100 V W I know it's off screen you're now only affecting the trigger element I got it so it moves to there that's other movements that I don't want to do easing oh wow they have a lot of easing options here so let's do an in/out quad see what that is and then that's my zero then I want to go to here and it should just be at my zero point zero live preview is on so there we go okay cool so as I scroll now it's hopefully okay we're gonna have to play with this a little bit so here live preview back on cool and can I also at the same time that's a move but can I add other things too I also want to add an opacity and here we'll do the same one add opacity except maybe this opacity could come in a little bit earlier that one's gonna be okay and here we'll just drag the opacity down to zero let's see a live preview so it should fade in and even let's drag this we're gonna start that a little later a live preview cool okay so let's see I mean it's a little tacky whoo it's a little too much I think but you know it could be kind of cool I just wanted to test because I heard the animations and stuff in here we're really easy to do and it looks like it is right so let's publish that again publish let's go check it out and let's start scrolling down oh there's a bit of a problem okay my move maybe a bad idea but it still worked really well there so there might be a better option then moved there but you can see it is working really smoothly and really cool I like them the easing well it's a little fast if you scroll fast okay I'd have to play around with that a little bit okay so I did a little bit more work and I made a few extra discoveries off screen just now so I was playing around with it I finished everything up I added the social media links down here and one thing I discovered while doing this just by chance is if you hold shift you can do the margin and padding on all sides at the same time and if you hold alt down you can do it this way just like that so it's only doing the top the left and the right or of course if you do it here it's only gonna do the top and the bottom altogether so that makes life so much easier I accident I don't know why I did it was shift down I did and then I was pleasantly surprised and started experimenting a little bit so a nice little thing there I also changed this I got rid of that broken thing what was flying off the side I just made it so it's starting here since the opacity was already zero anyway I thought that just made more sense so it's also a lot less drastic it was going a little too fast before so I don't think I'd actually used that on the site but it's nice to know how easy it is to do that and I want to explore this a little bit I've already got an idea for something I want to try but we can see that it is working pretty good I think for something I'd never used this platform before and I did this in about an hour and a half ish and you know it's my background image is shrinking down we're getting all the different stuff if I come down to here I'd want to play with this a little bit more ideally and like you know maybe I'd make give myself more space overlap the image on top at that screen size or something but we have that maybe I'd increase my padding a little bit and fix up some spacing but overall I also didn't make these links but whatever overall I think it's looking pretty good I'm gonna share the link to this in the description below if you do want to check it out but the thing I'm most most most excited about is this which is the export code I've heard that it does an amazing job so let's go look exports don't include native form functionality that's fine so you can see here it's giving us it looks really clean oh look at that even my opening hours are on paragraph I want to check something really fast here I'm I was gonna export this into vs code and take a look there but I can read it pretty simple can I make this bigger no but overall I can see pretty good it's giving all the classes that I gave things and you might remember I put dots on some of them and I've linked I put my dots on nav links and it's not doing it itself I can't scroll side I can't okay so yeah it looks like and I have a W nav link and my nav link so this must be there anything I'm guessing prefixed with a W is the web flow so a web flow container web flow Rho they ever call them but yeah small web flow column small small stack that makes sense and all of that cool so what I'm curious about is in some places I had to change I switch things out for paragraphs I also have a div close div here because that's where I brought in a text block instead of a paragraph and then I deleted my text but obviously I didn't delete that text block so that a little left over there but this actually looks like HTML that might be written by a human which is pretty impressive overall so I'm super happy with that everything it's really clean actually there's no weird gibberish classes and strange stuff let's go look at the CSS actually I mean overall I'm sorry I'm sort of surprised they're not using them background the shorthand for some of the things here like obviously margin you know we could do we even need that I'm not sure I might have explicitly said it so it was doing that some display flexes coming on stuff I did that for all my columns whoops okay column and then call him too this is one thing I was curious about was how if I didn't give something a class like I'm guessing to be near the bottom I didn't give everything a class opening hour that's okay so if I gave it a class it just did it explicitly but if I didn't select field oh yeah that's where I played around with that a little bit I fixed it to make it go back to normal it seems to just prepend bottom like text blocks - and I had a text block one at another part or heading for because I had this is my h2 this was my h2 I'm pretty sure that's all the way down at the bottom of my page and I didn't I changed the color of it but I never gave it a class and I was curious how it would treat that so I was like is it just gonna inline the style which is usually what you'd expect from a website builder like that so the fact that it didn't inline the style that it's actually just adding its own class that's sort of behind the scenes is kind of cool I like that and then when here we have media query and all the stuff for the media query and then my other media query right there cool oh I thought they were doing mobile first but they're doing max with Sun stuff that's alright though it's still it's working really really well so actually in a way that makes sense to use the max width the way they're doing it cool so then I could just prepare zip and download all of that the JSI probably don't want to look at it's just their own stuff going on there the assets I'm guessing is my images yep there's the images that I used cool actually that's it I'm gonna download this let's just take a look at what it actually gives us so that looks pretty clean j/s has that images will have all my images including a favicon oh my goodness look at that oh no way remember it warned us that it was bringing in an image that was really big can I get that it's compressed I don't know if I can open them but it looks like it's it's come up with different it's I have to go check that out in a second in the HTML then actually so I'm gonna come back in a second we're going to open up this in vs code alright so what I wanted to see here the reason I want to open it up is where those images were - where's my image for my hero why that's curious though oh here it is aha it does that's awesome let's just turn wordwrap off for a second or on I should say so on my image it's actually coming in with a source set so I'm really nice I just downloaded from unsplash obviously so it's coming up with a different resolution of images and it's automatically doing a source set on that too have higher or bigger versions of my image for the bigger screen sizes that is nice the that's automated that's really really awesome cool and what did it do for my logo because I just drag that in as an SVG logo SVG cool cool cool that's really nice but it didn't do it for the little PNG icons at the bottom which you wouldn't expect it to you hmm I wonder how it decides what points to put in there so that's that's a nice little bonus that I really wasn't expecting in there cool so you can see it looks really clean I mean there's the forum that's a little bit messy right now just because there was no spacing in there but everything looks super clean in here there are a few parts actually I did it on purpose I'm curious I don't remember where it was where I hit enter a few times to create extra spacing oh there we go it did do br br so you do have to be careful when you're bringing in text if you want separate paragraphs you actually have to bring in separate paragraph elements I wasn't sure if it would be smart and break those apart but no it's just adding in some BR so good to know but overall like the how clean this code is I'm really really really impressed by we saw the CSS already but we can go take another quick look but yeah really I think that's pretty awesome and there you go that is what I could do with web flow I must say in the short amount of time I spent on that with a platform I've never used before pleasantly surprised with how it turned out I'm not ready to give my full opinion on the platform yet I do think there are some limitations to it but I also as I said never looked at a tutorial or never looked into things so I think a few of the problems I ran into I want to see if there's actually solutions to them there's a few other things that I haven't tried yet that I'd like to give it a try so I'm going to off-screen over the next week dive in give it a little bit more see what I can actually do with it and then I'll come up with a more thorough just this is really what I think about web flow but as my first time using it I was it was better than I expected it at be to be honest and that code export honestly I that is writing better HTML and CSS than a lot of people I know and usually these computers just make a mess of things they get it to work but it's it's almost it's just so much stuff you can't it's not code you can go in as a human and modify it's coming in with readable class names really cool really I like the idea of how it works and the fact that it makes exportable code that you could use is really really cool and handy it's gonna be something that I'm going to explore a bit more cuz I have a few ideas that I want to look at and I'll go over those in the next video and next time I take a look at it so I'd like to know would you have you ever used web flow what are your experiences with it you have if you've never used it would you consider using it now or do you still think you know it's not exactly what you need or what you'd be interested in and code is the only way to go I'd love to know your opinion on it leave it down in the comments below a huge thank you to web flow for supporting this channel through this video and being brave enough to just let me try it out and see what I thought of it big thank you to my patrons for helping support this channel as well you guys are amazing and of course until next time don't forget to make your corner of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 17,085

Rating: 4.9100204 out of 5

Keywords: Kevin Powell, tutorial, html, css, webflow, responsive web design, trying webflow for the first time

Id: iOol3OxZPpE

Length: 58min 10sec (3490 seconds)

Published: Wed Dec 11 2019