Live! - Everything Webflow - Layouts, Interactions, Support - 11/30/2021

hello hello hi everyone john here with web dev for you here to help you build awesome websites without code in webflow if you're new to the live stream i do these live streams every monday through thursday from 12 pm to 1 pm central and we go over everything web flow from building layouts and websites in webflow to creating animations and interactions and discussing anything related to web design and web development so today i'm not going to be showing my face i'm going to try something new you know what i look like you've seen me in other videos i don't think it's necessary to take up more screen real estate with my face and i don't see it serving that great of a purpose other than just seeing who i am on video so we're going to try without my face today hi nazir welcome yes first one great so today i don't have anything too specific planned um you know some of these live streams will just be trying to get inspiration from the web and um it's going to be a more kind of loose live stream today so if you have any questions if you want if you want to discuss anything regarding webflow feel free to leave it in the chat and we will discuss so because today is going to be more of a loose type of live stream we're just going to work on i don't know creating some creative hero section in webflow so there's a few things i found so if you haven't seen this website yet it's called codedrops.com and i love browsing it just on a regular basis if you go to the collective and you check out the different collectives they have they just have a bunch of really great resources that you can use for your website some of it is code but webflow does allow for code within your site so you can use some of these effects so yeah and it's just great for inspiration so one thing i found i found this font here called uh kik uh display it's a free font and sometimes you can find these fonts on behance right like they're just really cool fonts you can check them out it has like a lot of quentin tarantino-esque uh references here um but yeah it's a cool font so we can play with it i'm gonna go ahead and download it hopefully i don't have to sign in i might have to sign in let me see if i can download it free font um yeah i might have to sign in so one second uh so let's see uh hey literally uh or shane uh john quick question what is the name of the app to test screen sizes you use please uh yes that is sizzy.co so let me just open it up real quick i use it quite often it's a really great uh tool and hold on let me i need to update it actually so i'm just gonna open up a website so my template um yeah it's called sizzy.com i'll type it in here in the chat sizzy.com and uh yeah it is paid um so yeah it's like seven dollars a month or something but to me is this this is such a worthwhile tool uh because it's super quick super responsive as far as like the speed and you can check out your site across multiple devices so highly highly recommend it i think it's a great service and a great piece of software so zero john question number one why when we design on webflow it looks great on the builder after seeing like it was in the browser but when you open the same site on the same screen size it looks bad um [Music] well there's a few thing a few reasons for that uh one what the the site in web flow so here i'll demonstrate and you shouldn't have too many issues with this but i'll go ahead and create a new project here and let me bring it in um yeah so within webflow the actual designer is taking up some some real estate within the viewport so if your site looks a little bit different in the browser that could be one reason i mean even if you open the navigator too and you have append you have less real estate for the canvas so you know just keep that in mind you can resize the canvas here so if i wanted to see what the site would look like on a imac 27 inch i think the dimensions are i can't think of the dimensions off the top of my head but maybe something like 2 400 pixels in width you can just resize it here in the canvas settings and you get a good representation of what your site will look like in that specific canvas width um again you know like uh shane was asking about you can use another tool like sizzy.co to really check how your site will look across different devices uh great so yeah let me try to download this kik font so i just have to log into my account um let's see here and um [Music] passwords right all right cool um i had to sign in to be hands i haven't signed in to be hands in a while all right so let's see sure all right so let me bring in the kick display font hopefully i can download it now free font oh here it is i probably could have downloaded it before um so yeah we have the kick font so i'm going to go ahead and download it uh yeah for sure you're welcome shane um so it is a ttf so we do have to convert it to a web font so maybe we can use something like font squirrel if you're not familiar with font squirrel it just allows you to convert your fonts to web fonts so we'll do that and then we'll add it to webflow and then we'll kind of play with it so let's go to the generator and we're going to upload the font which i have here let me find it kik uh is corrupt and cannot be converted great so this might not work out so much um i was hoping we could just install it let me try web font generator um transfonter that sounds interesting add fonts let's add kick okay that worked and family support fix we want to be a all right cool let's do eot and svg as well all right let's try it convert transfonter wow nice let me download it cool i just found something new transfonter.org i'm going to bookmark this uh thanks john i also sent you a message on your website today and on your insta let me know if you got it it's very private so please do not show it on the stream just letting you know for sure in this year i'll check it out and yeah i'll take a look so let's go into the project settings i'm going to install the font um let me open up the zip file awesome so transfonter i i downloaded a zip or i converted the font to eot svg and dot woff so let me go and upload the font um and let me find it here let's see what is the folder called uh transfonter okay here we go all right so i want to add these four i'll open and perfect so we'll just add the font file there's only one because it's kind of like a heading font but we can have some fun with it so let's go into webflow i'm not going to worry about like client the client first system today uh because we're not going to build out a full structured site i'm just going to add some sections and div blocks and we'll just have some fun with it maybe work with the different filters and web flow uh to create some unique effects so i'll go ahead and add a section so i like to start off my site with sections and i'll just call the section hero set the min height to 100 vh set it to flex center center so anything i add will be in the center and then i'll just add a heading we'll make it an h1 heading and i'll call this heading hero and let's pick out that font so let's pick it out it's called kick and already i'm liking it so let's just say web design and it's interesting the font wait let's set it to normal let's make it really big and set the line height to one dash so it's unitless all right cool so we have that font uh from uh this user here we installed it into webflow we use transfonter yeah transfonter my styling is on point today uh thanks thanks nasir um yeah not trying too hard here but uh you know just working working on a few things and let's get an image so i'm gonna add an abstract image uh just to yeah let's add this one yeah i hope everyone's having a good day so far you know sometimes we just want to have fun on webflow it's okay if we don't always build out some really sophisticated structure yeah so webflow is made for designers so the more fun we can have with design you know the the better i guess um well designers and developers i should say all right so for the heading hero let's add a background image so i'll add this image here set it to cover center it and then we will for the text let's click on more wait no for the clipping so we added this background to the heading so under clipping we'll say clip background to text and bam just like that we've designed an interesting uh text so for the section hero i'm just gonna change the color so it's a little bit nicer to see something like this and there we go bam so and we can also add some more letter spacing something like this web design uh john what's your go-to size for your canvas on figma when you start designing a website for webflow 19x whatever height i use 1440 nazir so 1440 is my go-to because i think for large screens like it just works so like if you're on a 1366 with screen or or larger i find 1440 works well and then i like using 10vw for the padding on desktop and then like 5vw for tablet and mobile uh for the padding on the left and the right and i find that works well and if if you do want to scale your desktop version for larger screens i highly recommend the wizardry method i covered it a lot in previous live streams so the wizardry technique.webflow.io i'll go ahead and post it in the chat and you know you can look back at my live streams where i go over the wizardry method and timothyrix has a great video on how to use the wizardry method it's a really cool kind of method and i think it works well so yeah wizardry technique.webflow.io but for me i like using 1440 for the width initially hey kavita what's up alright so we got a lot of um lot of viewers today awesome uh let me find another abstract image i kind of want to try a few different things oh i like this one let's get this one going and tools adjust size so if there's anything you want me to go over feel free to post it we're just i'm just kind of freestyling a little bit today don't have much planned as far as content or design systems that i want to go over today just having fun in web flow seeing if we can come up with something really interesting for like a hero section oh that's interesting i kind of like that oh that's cool too setting it to contain oh that's kind of cool choose let me try this one no i like uh yeah this one's cool and then let's make the background a little bit lighter oh okay so maybe something like yeah like that that's cool um yeah i think web design let's try the font is a little bit out there not gonna lie it's kind of interesting let's see what else we can do here all right so so again i mentioned code drops like you can find a lot of great um inspiration on code drops so i'll post it here uh thanks nazir appreciate it um so go to collective and one thing i found on code drops i think was it it was in their most recent um article or collective right here nn noise this blew my mind all right so if you've been to my live streams we've covered grains a lot and you saw my really tedious method of creating a grain in photoshop which was like like trying to figure out some complex math equation it was really difficult and i found this today and i was like yes this is exactly what i wanted for creating grains because there's a lot of grain websites out there but they're really they're not great and they don't let you customize the grain well enough but i found this this lets you change the color it lets you change pretty much everything about the grain and then you can download it as an svg so hopefully i can set this to transparent actually i can't so the background color so yeah i haven't really messed with this too much so hopefully we can get the background color to be transparent but let's go ahead and uh just create a regular grain i'm going to set it to black so we have a black grain or actually that was the the light source color so let's change it to no black should have worked let's let's do let's do black and the background color yeah we'll do white so i can't really see the grain there so let's try like orange and then you can set it to turbulence or fractal noise turbulence is quite nice the overall opacity you can set the frequency which is quite nice the light surface scale so it can be darker or brighter the light elevation until you get that really nice grain light specularity so just a lot of really nice features to get a really a really good grain so i think i'm gonna do fractal noise and um just lower the rate raise the frequency so we have a lot of a lot of grain and we can change the light surface scale and cool all right so let me try to download this now so i'm going to save it and hopefully it's a transparent svg i don't know if it will be but let's add it to webflow and let's see how we do all right so it's not transparent so let me try downloading it as a png and go back in here and save i should be able to save it as a png um there's instructions here you can use an online tool like squish to convert svg textures as optimized pngs all right let's try that squoosh okay just found something else that's amazing all right original image alright cool reduce palette i want a png browser png and i don't need to resize it alright let's download it still has a white background so maybe this won't work it's my first time using this uh this feature so let's try it uh background color so let's try white oh we can desaturate it that's that's dope uh background image let's save it yeah maybe this won't work so yeah i might still need to do the way i did it in photoshop with the transparent the transparent background so let's see for thailand texture so it's not quite letting me do what i wanted to initially so you can install let me try one more time so squish so we added it here toggle background okay original image browser png no i don't think it's gonna let me channels rgb grayscale progressive rendering nah okay uh you can edit the svg um yeah what do you mean by that yo oh wait it is transparent hold up yeah i just opened it in illustrator and it is transparent yeah it's it's transparent in uh in illustrator yep thanks y'all appreciate it um artboard it's artwork balance what is the square here okay all right that works so yeah so export export for screens and we'll just say and then always grain and let me save it to the desktop here okay export okay i have the grain nice uh so let's go into webflow that's a clipping mask on right click and release it gotcha yep yeah i was wondering about that uh doesn't look like a clipping mask let me look at the layers yeah it's a bit curious i mean we have the svg but it's like not filling the artboard anyway um it should still work so let's go ahead and add a div and i'll call this grain overlay i'll go ahead and put it in the body actually and i'll set it to position absolute and full add image we'll add this grain set it to cover set it to 2x so it's nice and small and bam and tiled all right the grain is white which doesn't look great but it'll work so yeah so we added a grain um what else what else can we do so let's go back in here because i actually want a colored grain and let's go to uh let's create another noise and let's yeah let's do this orange one for example so i'm gonna save it yeah i'm gonna save this one and we'll do that one more time so i'll go to my downloads and we'll open up this grain in illustrator that's weird no it's not it's not quite working when i open the grain it opens black uh yeah can you mix two noises yeah you probably can yeah um anyway i'm having difficulty with this specific feature i'll try to make it black or a different color background color we'll set it to white let me try one more time so save can you mix two noises yeah i'm sure you can yeah you'd have to like maybe download two of them oh so weird path so i don't want to fill i don't want that black fill no i guess my photoshop method might work better um yeah moving on we're just going to leave that for now oh here's another free font we can check out so we'll move on from that idea for a second check out another free font and it's still loading now let's see okay it's taking too long looks like a really cool font though kind of want to check it out okay oops something went wrong i guess it doesn't exist anymore all right so anywho this would have been a cool idea if it would have worked out but it didn't let me make it transparent so for now we just have this kind of white green and let me add a different green actually and add a black green there we go yeah that's kind of cool uh what else can we do today hmm you know what might be kind of fun let's uh let's make it 3d let's make it rotate so let's add a div and i'm going to call this 3d wrapper and i'm going to place the heading inside of this the 3d wrapper and for the 3d wrapper i'm going to set the transform settings i'm going to give it children perspective of 1000. i'm going to copy this heading hero so we have two of them and i'll remove any margin and padding and for this heading hero i'm going to let's see yeah let's go into the let's see how do i want to do this so actually we need to add another div so we'll call this um heading wrapper and then we'll rotate the second heading hero so i'll give it the class name of second uh can john can you make a full body hamburger menu hello um maybe yeah i'll check it out in a second so we're going to rotate this on the x let's rotate it like this but first you have to change the transform origin to the top and i'll go ahead and rotate it on the x-axis so it goes negative 90 degrees negative 90. all right so we can't see it perfect and then on hover so we'll create a hover interaction mouse hover we'll start an animation i'll call this uh text hover in and then we'll rotate the heading wrapper so we'll just rotate it on the x to 90 degrees let's see yeah it kind of works 90 degrees okay but then we want to change the transform origin of the heading wrapper to the top okay and for the heading hero let's set the back face visibility to hidden for both of these that's kind of cool yeah just uh having fun with it all right we made a 3d effect um i do want it to stay in the center though so let me let me let me try the center here no so it wouldn't need to be from the top and we would need i think we need to move it um we need to move it up as well so negative 50 yeah perfect so as it rotates it moves up a little bit too so it stays in the center which is what i want and actually i'm going to set the heading wrapper to an overflow of hidden and give it a specific line height of 220 or a specific height of 220. so it stays in the center and that doesn't quite work let's see why i don't know yeah we can do it like this perfect all right so it stays in the center and we have that nice little 3d effect and we can actually write something else for the second text so web design is dope and we'll make it centered alright so let's see there we go [Music] uh those the noise animates because you can make it transparent png in illustrator just expand all right let's go back and let's try that uh save okay let's go to squash first squash that's funny name downloads all right and we'll save it as png what's oxy png okay we'll just do png browser png download showing finder open it in adobe illustrator [Music] okay background color i don't think i can do that because it's an image it's been flattened so i can't change the background color without changing the entire image and i don't have the option to expand it what's flattened transparency no uh work from the svg yeah this is what happens when i here i'll show you um adobe illustrator yes the sv hold on one second open adobe illustrator huh svg okay here's one no this one this is the one that worked but the other ones have not been working yeah just giving me like a black um canvas or background i'm sure i'm doing something not correct here i just don't know what it is hey vaughn how's it going yeah we're just kind of creating little effects here in illustrator in uh webflow and you know what we can do just to add some more design to it add a div i'll say corner decoration let's make it 300 by 300 position it absolute in the top left and we'll add a background image same one set it to cover center and then we'll add some border radius to the bottom right let's say 100 100 cool and then i'll paste that and i'll call this number two place it in the bottom right and change the border radius here that's kind of cool just like that you can get really creative with it nice nice yeah if there's not too many questions today today i might end the session early um there's not too much i wanted to cover uh besides you know some interesting animations and we'll finish out this hover out effect [Music] so let's set it back to zero degrees and back to zero and then we'll change the easing to let's say ease and out same for this one there we go and we'll change the cursor here to a pointer did you happen to see my super chat from yesterday um i think so let me did you send an email yvonne let me check my email yep i see it um all right let me check it out oh yeah that's really advanced let me check out your site do you mind if i share your site on the live stream yvonne so i think yvonne wants to create a slider that looks something like this yeah yvonne i think for this you would need like a custom um a custom slider i don't i don't think it'd be that easy to achieve what i would actually do for this um is hold on one second for this i don't think i would use a slider at all i might yeah no that's really intense that's that would take quite a bit of messing around i would almost think of creating a lottie animation that changes frames when you click left and right which would really only allow for two specific slides but like you see here they click and then it changes to that ice cream and then it goes back i might try something like that um like creating a lotty animation for it um or finding a custom slider like slick.js that allows for more advanced animation like that because i think that might be difficult yeah i'm trying to think um yeah you'd have to excuse me you'd have to position um the slides diagonally which i don't know how easy that would be with the default webflow slider so i see your website here and you know it's just a it's just a regular slider scroll to second slider in my preview link okay gotcha okay are you using yes so this is the webflow slider um slide six oh carousel so you are using a custom slider let's see no are you just using interactions yeah this is pretty impressive um yvonne yeah it looks like you did it so let's take a look to see how you did it let's see see a slide one oh that's that's intense so yeah yvonne is like a webflow savant for anyone who's not familiar and he just does really amazing things like this that's really impressive yeah that's that's awesome seems like a pretty uh intense interaction from the looks of it so i'm guessing when you click one button it shows a different one yes so you have different buttons here and you just hide and show them that's clever that's really clever yeah so when you click this button yeah okay let me let me just so right so i created the interactions using the buttons then i applied to the arrows it was really challenging i can imagine yeah this is like some you should definitely like get like some award for this because this is i don't know who would spend the time to actually sit there and craft this but it's super impressive yeah that's uh let's see carousel slide wrap yeah major props yvonne so i'm guessing you have yeah you all right you have interactions for each slide and then each button yeah slide okay so you click this button so what happens is you click this button then it changes right right yeah that's uh that's impressive um yeah i don't know if there's anything else i could add to this yvonne because it looks like you pretty much nailed it um yeah like with getting this diagonal type of uh slider yeah great job i guess you could make it pop on hover similar to this but that's just a minor detail compared to all the other work you already put in yeah so yeah i don't think i have much else to say on that yvonne other than congrats because that's pretty amazing um there was yeah actually let me see if i can find it venus somebody asked me recently they built the site for venus williams which i thought was super cool um me just find the site and let me go to it here yeah somebody built venus's site and i'll spend more time with this tomorrow but they asked me to review this and i think this is the actual site for venus williams and it's super impressive so this is uh someone just mentioned it and i don't know if it is for venus williams or if they were just doing a site based on her but it actually looks super legit and to me this is incredible so i wonder what happens if i go to venuswilliams.com it's kind of cool that people who build these websites reach out to me so venuswilliams.com oh yeah no um hopefully that's not the real site because it's really horrible uh venus yeah i guess it is yeah so don't go to the actual venuswilliams.com site it's it's not good this is definitely um a major step up so i'll review this more in depth tomorrow but so far what i see is really impressive that's cool wow wow look at that oh my god that's amazing wow and i think i know how they did that it's just grid they can just use a grid display setting and then scale it out using 3d transform oh my god that is so cool that's probably one of the more creative things i've seen in workflow this uh tennis court as a kind of a 3d image in the site but then it turns into the actual site that's uh amazing very impressive all right um i think i'm going to end it for now i'll spend more time with this tomorrow super impressive website to whoever built this and reached out hopefully this is this becomes uh venus's actual website and not the one that i'm current that's currently at venuswilliams.com just very impressive all right i'm going to end the live stream here thanks everyone for watching um yeah we just played around with some you know interactions and web flow and some design elements uh yeah that's it for the live stream let me know if you have any questions i'll stay on for a few more minutes but yeah didn't have anything too too heavy today as far as like web design and development you know check out codedrops.com great site for for different resources yeah that's a good question pablo i'm not sure um someone reached out they get they bought me a coffee and they asked me to review the project so it just says someone it doesn't say their name but hopefully they yeah i'll leave them i'm going to review it tomorrow in depth and and then i'll leave them a comment uh yeah thanks everyone for watching have a great rest of the day and we will oh yeah i will be here tomorrow thanks peace [Music]

Channel: WebDev For You

Views: 197

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design

Id: GtIHgYJKzcg

Length: 51min 30sec (3090 seconds)

Published: Tue Nov 30 2021