Typed.js script and interactions in Webflow- Live Stream - 11/11/2021

hey what's up everyone john here with web dev for you here to help you build awesome websites without code so so yeah welcome uh if you're new here i do these live streams every monday through thursday from 1 from 12 p.m to 1 p.m central and we cover everything uh anything related everything and anything related to webflow and web design and development i go over how to build layouts in webflow how to use different design systems in webflow i also go over how to create animations and interactions in webflow and all all of this is to help you design better and more beautiful websites um yeah that's basically it i do that spiel every uh every day pretty much um but yeah i know a lot of uh there's quite a few new viewers and visitors so i always like to mention that i also provide support via the super chat feature on youtube so if you need help with your personal project you can drop a super chat and i can help you live here on this live stream if it's anything any simple questions related to webflow you can just feel free to type it in the chat and i'll be happy to go over it so today is going to be kind of a another light and breezy live stream uh thursdays are usually more relaxed it's the last day of the week for my live streams so i always like to open it up and just field any questions and have a more general discussion about web flow and web design and development in general so yeah let's go ahead and get started hi joey hello hi dale hi i'm car uh hello john just want to thank you got my first full webflow project today been stuck to wordpress for so long for long yeah i understand um car wordpress uh is no fun in my opinion it's i'll never yeah well yeah not not a great experience with wordpress happy to hear that omkar for sure yeah i'm happy to help um you know the world of web design and development is vast and there's a lot of content and information and if i can provide some assistance in any way i'm happy to do that um yeah so i did want to open this up and you know i'll showcase another little script that we can work with when web when using web design development hi jenny hello hi welcome welcome yes uh yeah if it's your first time just uh yeah just welcome and um super happy to have you here uh yeah the general like usually i provide or like i go over some pretty in-depth uh content regarding webflow and different design systems you came on thursday thursdays are just really chill so if you're new to webflow if you're new to this live stream and you have just questions in general about web design and development just feel free to ask and you know we can we can discuss it and i can see if i can help in any way all right so i don't have too much on the agenda for today um i just want to show this typed js script where you can type out text i know a lot of users and a lot of websites have this effect so i just wanted to cover it there's a few different examples that we can take a look at slack uses type.js let's see if i can find the example here um no visual dev.fm check that out if you haven't already they go over some really great no code content i don't see it here the type.js let's see if i can find another example go rails huh i guess they stopped using this what's typed.com can't be reached let's check out this one all right so i it says these sites use it but i don't see the effect on the site okay here it is so manage instances manage droplets easy online manage servers easily online so yeah we'll just maybe we'll try to recreate this that could be fun hi manuel hi eunice yes yeah everything's good we've just been covering different uh web design and development topics for sure all right cool let's get into it um let me just delete this content here we'll go ahead and add the descript from js deliver and actually so this script is by matt bolt and he provides the js deliver script right here so we can just copy this and then go back into webflow and we'll go to the custom code i'll delete this code here and we'll just add the script here in the before body tag section then i'll save it all right and then we can add this code so let's start with this code here so variable typed two and so i'll just copy this and we'll go into webflow and i'll just add that script in there so basically the way you want to add it is let's see variable this needs to be variable type 2 equals new typed and then type 2 so we want to apply this id to a div and then it'll type out this string here and we can set a type speed so i'll sub set the type speed maybe 200 milliseconds the back speed back speed to 100 milliseconds fade out true and loop true so i'll save this and i'll add a div block and i'll just say typed js element and then for the id we just add the id typed to here so i'll select the element and type in typed2 and publish and also if there's a website you'd like to see me rebuild quickly in webflow just post it you can't post i guess the the url in the chat but just post the site name and then maybe space.com and we can just rebuild a site in today's session and just have fun with it um oh it needs to be a text block so let me add a text block i believe it needs to be a text block let's see and then i'll give it type to 2 for the id and let's see new typed type 2 yeah that should work so jenny if there's a site you like and you'd like to see how it's created in webflow let me know and i'd be happy to go over it so there we have the typed so you do need to add a text block and then you can add some text and it looks good so let's go ahead and style this text so i already installed a courier font to look like you know like a typewriter and i'll just write text here it doesn't matter what text is here because the script will override it and then we can just make it much bigger and i'll say one dash okay and then i'll publish and preview we can also take a look at a few sites from awards.com see how they were built nice um okay i think it's because i have typed two applied to this and let me remove the text here so we'll just have a text block let's see how that works there we go that's better some strings with some html characters okay cool so i could do so then i can go into the code and i could be like web dev um some four let's do it like that so you can add commas between strings so like a open quote her open single quote close single quote quote comma then another word and then um then another text so web dev for you and save and then publish so i'll showcase another method of doing it um some web dev for you no that's not what i wanted to say um forgot to delete some here so you can put italics and you do need to add a few html tags to make it italic or bold so we have web dev italic for is bold strong is is bold and y y-o-u nice and then i'll go over the different properties that we can use for it so webdav for you yeah so simple uh we see the cursors here on the bottom and i think all we need to do here is set the position of this text block to absolute and position left or no um let's try relative actually i think we have to set it to relative note the cursor's still at the bottom so let's see why that cursor is at the bottom type.js element type 2 so we have the cursor okay so for the typed cursor let me grab this this class name typed cursor and i'm going to add some custom html because that cursor shouldn't be at the bottom so we'll add a style tag we'll add that class name and we'll say position absolute and left 0 and close the style tag let's see how we do okay i don't see the cursor now oh i think i have to yeah set this text block to relative i'll set this to relative and nice and uh yeah i'll i'll spend a little more time on this and then i'll create we can create like a cool button no that cursor is still at the bottom okay type cursor and position absolute okay i'm not going to spend too much more time on this but that is a bit weird that it's at the bottom um okay i'll show the other way to do this we can so this is the documentation for it we can also let's see div id type strings to do okay we can create a text block so we can add the text here and we can just smart backspace true and just do this code here i think that should work type type strings yep let's take a look nope i think i have to apply typed typed and typed string so this is typed strings and this is tight i can't see the code pen did you send it in an email omkar no yeah it's not working uh unexpected token oh can't have two script tags okay all right probably undefined reading subs yeah that doesn't work i actually was messing with this and this way of doing it doesn't quite work so i'm not exactly sure why but yeah that's type.js just real simple i might go more in depth with this but just add the script and you can use i would probably recommend using um this way of doing it you know like the um yeah the first way i showed basically yeah where you add the strings like this so you you know variable type new typed and first sentence second sentence so just you know like that and oh actually this is way better yeah typed element and yeah we can use a class name rather than the id so strings and maybe i have to say strings element uh type.js yeah it doesn't show up i'm car hey jay what's up um yeah you'd have to send it to my contact form at webdevfree.com because it doesn't um you can't add links in the super in the youtube chat so strings strings strings element okay let's try this strings element we'll do that uh element new typed type strings let's see if this works let's call this type.js element type.js element strings element and preview uh what camera do you use for that circle effect in your live stream um so that was actually quite involved i had to create the circle and i had to download like the circle and then i had to crop and use like an alpha matte in obs there's a video on it like type in using a circle in obs and a nice video will pop up so does this need to be typed.js element okay hey what's up craig uh let's see yeah this is a weird kind of thing with the script the past few scripts i've been working with have not worked how i thought they would um yesterday i work with text delete and that was just kind of weird in a way here we'll just we'll use it this way then we'll just we won't add it to the actual text okay first sentence so element yeah we'll just call element how's that element it's an element great yay it worked uh yeah for sure okay so that's type.js and cool so first sentence and the type speed i'll change it here to 100. uh so the basic thing yeah you just go to type.js you want to copy the um this js delivers script and then just use kind of the script that they provide and create your text and if you're creating it within the code you don't want any text in the element but you do want a text block i believe or you can just add a div block actually yeah nice all right i should do the first sentence too cool i'm not gonna spend too much more time with that if you have any questions about that let me know um but yeah just wanted to showcase that script really quick probably spend too much time on that one all right um cool let's go to awards.com or let's let's do code drops if you're not familiar with code drops um it's just a great place to get inspiration on the different things you can accomplish within a site and for that type.js i'll prepare something a bit more i didn't quite prepare a site beforehand and i think that's why it was a bit slow me kind of explaining that so again i mentioned this yesterday and for any newcomers i do apologize if you're finding this a bit slow because i know i'm not really sharing a lot of well i guess it's useful if you want to do type.js but i'm just working on some content that i want to share with with everyone here and i'm kind of preparing that content so today's just kind of a filler day not all the live streams are going to be home runs um so so yeah just wanted to mention that um let's see and if you need help with your site or like you want to drop a super chat just uh drop a chat let's see here inspirational website so let's just take a look at sites and see how we do wow that's cool and very nice that's cool let's make a card let's do a card like this this will be fun let's make a card rotate on hover yeah all right let's find an image on unsplash [Music] on splash and let's do so we'll do like a 3d card how's that we'll make we'll make today's live stream fun we're not gonna just hang around doing nothing what's um cool image so abstract art let's try that and or person let's do a person okay [Music] i remember we used this one and this beard game is on point um or just maybe animals or let's do blue healer okay i have a blue healer uh awesome dog and yeah this is what my blue healer looks like when he looks at me um yeah all right how about this one sure okay um so we have a section uh personally i love the rawness of the live pro live problem solving keep doing what you're doing appreciate it richard appreciate it yeah we can we can go back to type.js um but it wasn't working how i intended or like there's some probably like something i overlooked with it where because ideally you would want to type your text on the site or just have it as part of the design and then just apply the script to that text so you're not having to do much else or you can have the the text and then delete the text and apply the the text in the script it's confusing i know it's um we'll revisit it i'll have something way more prepared for that maybe even an entire site built or an entire page so we can actually see the the utility of that script uh but for now let's just create a quick interaction some 3d stuff and so we have this section i'll center it we'll add a div block we'll make this div 300x400 and let me go ahead and get that image so omkar wrote the project i'm starting with is for graphics design agency any tips to finding inspirations for design and interactions um yeah absolutely i'm car like i have quite a list um you know one site i use is awards.com just go through you can type in what you're looking for what type of design you're looking for um dribble you can type in or go to web design here under dribble and just get some inspiration here like this is super cool like you know that grid of the site is dope that would be a fun thing to rebuild and maybe there's something we can do moving on just find a dribble shot and recreate it i'm for that like here's a nice one you know careers glowfox that would be a nice rebuild yeah and they have more pages here so there's plenty of inspiration yeah dribble is a good place co drops as i mentioned i use code drops a lot if you go to their playground they have a lot of really really cool effects that you can get inspiration from all right so let's make a 3d card or a card that kind of rotates as we hover over it so let's go to let's see downloads let me resize this image 1500 okay and i'll save it alright so i'll call this um image wrapper and let's add that image and i'll add it as a background cover nice that's a happy happy-go-lucky dog all right add a border radius okay so yeah i did this incorrectly we don't want to add the background image yeah yeah some days are better than others dale i'm sure you've guys probably seen like and i think i think it's preparation and i'll be honest i didn't quite prepare as much for this live stream in the other live streams we had different design systems we were working with and uh different layouts so i might just go back to that because you know if i don't have any content to really share that the specific day makes it a bit tougher so i do apologize and not trying to make excuses but i've been getting you know new projects and different things i've been working on and it's taking up quite a bit of my time and i'm i'm always saying i'm stopping stopping the live streams i just have to manage my time a bit better to prepare for these live streams to make sure that i'm providing useful and helpful content yeah with that said we'll just you know just build some interesting stuff today but yeah i might just go if if i don't have anything for the day we'll just build out some of these layouts as i mentioned before and actually forgot about some of these layouts this would have been perfect content for today um but yeah we'll just work on an interaction for today so we have the image wrapper then i'll add a div and this will be the image for the image wrapper i'll set it to position relative and position absolute and full and then we'll add the image to this div so i'll click the plus choose image add it here set it to cover center it and i'll add a border radius to it alright so then to the image wrapper we want to um add some 3d perspective to it so under 2 2d and 3d uh transforms we'll click the three dots and we'll add some children perspective of 1000 so the children elements have some space for some 3d motion and then i can select this image and i can go to interactions i can go to on mouse move over element and on mouse move we can play a mouse animation and i'll start an animation and i'll say uh image mouse move and when the mouse moves to the x we're gonna rotate it on the y axis we'll rotate it negative 10 and then we'll rotate it 10 and then on the that was the x-axis excuse me so then on the y-axis will rotate it vertically or not move it will rotate it on the x-axis we'll say negative 10 or i think it's 10 yet 10 and then negative 10. and if i preview we have a cool rotating card uh so eric wrote hey do you do you know something about what it takes to become an official webflow expert i have some questions like do the sites you submit have to be your design and do they have to be for clients do you need to have an established reputation as a freelancer or agency already that's a great question i don't have the exact answers to that eric become a web flow expert let's see apply to become a web flow expert so requirements you need to have one employee minimum customer projects three public customer sites so yeah i guess maybe your own sites or sites for clients it looks here like client projects number of client projects you must have completed as a freelancer agency to qualify for the partner program a webflow partner page partner must have or create a landing page on their website showcasing their webflow services offering yeah i i guess that's it so you can become a professional partner or an enterprise partner and yeah so they would have to be client projects eric um yeah so let's use another image from let me just add another image uh i have quite a few here let's go to unsplash and um let's see let's do mountains sure or abstract art oh this one's cool [Music] this might look cool with a white background yeah as far as having an established reputation as a freelancer i'm not sure um possibly i think they just said yeah you need um yeah i don't i don't know if they have to be your design eric they might ask you if you designed it but if you hire a designer if you have a designer that you hired for the site and you built it in webflow like i'm sure they wouldn't mind that that's kind of cool i can add a border to it nice and if i wanted it to get even more intense i could be like you know just increment it by 10 negative 20 20. 20 excuse me negative 20. cool and i could be like copy this and i have a collection of different cards that rotate and i can change the images so let's add a few more images and we can have three different images it could be a nice kind of card effect uh yeah let's add this one and this one and so the image i'll just add a combo class of two and then i'll replace the image in here and then replace this image we'll say three for the combo class and then choose the image and we'll say right here noise yep for sure cool that's a fun little effect actually that image looks really interesting when it moves yeah i like that that's cool i like it um yeah so let's see if there's anything else we can do that's kind of fun yeah let's go to code drops and let's see playground let's look at some buttons let's make some interesting buttons wait let me see how all right let's make this button this this is kind of fun um so let me just hide this image these image wrappers for a second and we'll make a button alright so let's start with a div so we'll call this button wrapper and let's make it a big button 300 by 200 and we'll make it a link block because buttons are usually link blocks so 300 by 100 is better um and then okay so initially the background is black so we'll add some a text block in here let's make the button wrapper uh flex center center and we'll say button text and for the text we'll set to position absolute that's good and then for this button wrapper we'll remove the underline and we'll set the text to black okay and we'll say next for the text i think that's what it is here or new page new page okay we'll add a font i'm gonna install sign because sign is just an awesome font we'll go to fonts and let's add sign yeah and if you guys like if you have something that you want me to cover like if there's a site that you really like and you want to see me rebuild it in these live streams like just send it i want to make this more like interactive too like i can find content you know on sites we can rebuild but you know i'll always take requests from from anyone here in in the in the chat as well a sign all right and yeah let's do that and let's make it bold and much larger new page all right and we'll make this white and the background here black all right so that's a bit big okay cool so the background's black and okay so in here we can add hi yvonne hello hello um button wrapper let's set the position to relative and let's set this to block so it's going to be um button block and i'll set this to position absolute and full and we'll make this more of a gray okay and let's make sure the button text is in front and great so that's all we need for that and actually i did miss one thing yeah i did okay so we want to add a div block in here and we want to place this button text inside of this div block so i'm going to call this text wrapper and this button text i'm just going to say position relative and this text wrapper i'm gonna say position absolute okay great um then i'm gonna copy this button text and i'm gonna say button text two and this is gonna be the color black okay so we need a white text and um and a black text there for this effect so initially the button is black with white text so for the text wrapper let's set the overflow to hidden and let's set the height so let's give the text a specific line height so i'll say 25 pixels or how about 30 pixels yeah 30 pixels and then we'll set the height of the text wrapper to 30 pixels so we only see one text there's a text below it okay so this is going to be important when it comes to the animation um so yeah so let's go ahead and animate it we have all our elements all of our components set up so now we can animate it so for the button wrapper when i hover over it we're going to go to interactions i'll click the plus and i'll say on mouse hover will start an animation i'll click the timed animation and i'll say button hover in and then initially for this button block we're going to move it 100 to the right okay so 100 percent and we're going to set it as the initial state and let's see so text okay and then um yeah that'll work and then we can animate it so then for the button block we're gonna animate it we're gonna move it to zero percent on the x-axis and we're going to set the easing to ease duration of 0.3 and let's do a fun easing of ease out circ how's that okay so let's see um so text is white okay and then black okay so then we take the this button text here or this first text we move it up so we'll move it up negative 100 and just the selected element i don't want to move both of them so just the selected element and then we'll grab the second book button text we'll move this negative 100 on the y and we'll just do the selected element okay so i hover and we have that effect so let's see okay so we're get we're going to start them together so hover and nice so let me change the speed of these to 0.3 and ease out circ okay that easing doesn't really work for me so let's just do ease okay and then it needs to be slower so maybe 0.7 no point five let's try that point five actually point three might have worked point four and i want this to move faster the button block so we'll say 0.2 yeah that works all right so we hover in that looks good and yeah and then for the second button text at the end we're going to move it down to 100 okay so it moves down to 100 duration of zero and that's it so it goes to the top and we want to bring it back to the bottom so we're not going to notice it it's not going to look like anything but that white text is now at the bottom so when we hover out we're going to kind of repeat the process all right so i'll save so you have to kind of think in a loop idea of like making things wanting to loop so on hover out we'll start an animation i'll duplicate this uh pablo hey hey john quick question what tool do you use to test your websites on multiple devices browsers i use sizzy.com it's an awesome awesome tool and site where you can just test you know your different sites on it um you know you can look at macbook pro 15-inch app ipad pro and all that good stuff so yeah the site is dot sizzy.com it is a subscription but to me it's well worth it um so i think it's like uh yeah seven dollars a month for one seat yeah awesome program so i'll type it in here sizzy suzy dot co all right cool so on hover out we're going to uh button wrapper uh let me go in here button hover out okay cool so i'll delete this initial state the button block we're just going to move it to negative 100 so it moves to the right um yeah okay that works and this button tucks this first one let's see okay so this this black text is going to move negative 100 okay yep that's right and yeah that would work so do okay so let's see so this moves to the left the the white text moves up negative 100 percent the black text moves up negative 100 and then for the black text we're going to move it down to 100 quickly and no duration i think i can delete this and then the button block we're also going to move it back to 100 so we're going to reset it essentially and we don't need any duration for that okay so we hover oh and we need to wait let's see however oh uh nope the white text needs to go to zero percent not not negative 100. and the black text let's see button text move to 100 so this moves up negative 100 all right let me go ahead and set the overflow hidden to the button wrapper however that's good almost okay so let's take a look here so on hover in the button moves to the center the white text goes up the black text goes up negative 100 percent uh and then we takes moves down okay so that's right and then on hover out the button block moves negative 100 percent this button text yet moves to zero percent that's right and the black text moves up negative 100 percent interesting should this be negative 100 i don't think it should oh oh wait yeah maybe it should be no it should be zero percent for sure i guess the black text is not moving correctly so black text negative 100 hmm [Music] if anyone sees what i'm missing let me know [Music] because it's not quite working so that works initially and then on hover out so we have the button block okay button block move that's fine button text oh maybe i nope that's should be fine one text button text okay move move and okay so initially oh it seems right and we moved that text to the bottom 100 percent uh okay so it moves oh okay i got it yeah we moved it negative a hundred percent ah got it so we actually need to move the black text here negative 200 percent yeah and then so let's see yeah that almost worked it just doesn't reset quite okay so then this button move oh this is getting see what happens when it isn't overflow hidden uh thanks eric great point that's right and then let me change the background color of this button wrapper to you know red so we can see it okay that black text doesn't reset so why isn't it resetting so on hover out this text yeah it should move back down oh back down to 200 okay no nope that wasn't it oh okay so the black text needed to go back to zero percent which i don't quite understand move the negative 200 oh i guess zero percent would be the initial state of that button of that text yeah that took a bit of messing around with to get wrap my head around that but i guess the the resting state of this black text is zero percent the bottom is zero percent zero percent for the white text is in the middle so when i wanted to move the black text to the bottom i had to set the the reset state to zero percent and not a hundred percent hopefully that made sense um but it just clicked for me um so i'll make this black and let's set the overflow to the text wrapper to hidden and there we go and it doesn't work oh okay button wrapper so let's see button hover out the button block moves negative 100 and then goes to 100 percent so oh yeah let me take the should it loop i think it should loop no oh that's strange oh man what an effect okay okay and then hover out button block i gotta say the interactions panels were often most confused still wrapping my head around it yeah it does take a bit of um time to to get used to it it's not like after effects where you have a timeline and you can kind of see what your animation is doing you have to work a bit differently with the animation so yeah i've done quite a few of these now so i'm kind of familiar with the interactions but this one's kind of interesting i'm not sure why it's doing what it's doing really so jay wrote hey john i want to ask in the mobile part using wizardry should you should you use the embed code and adjust the font size or should you manually or should you make you should manually put the m and tablet and mobile um yeah i would use uh so what timothy does on tablet and mobile is he changes the body font to use pixels instead of vw so i would um yeah i would just use pixels for tablet and mobile yeah that would that would be my recommendation because on tablet and mobile you don't need things to scale like you would on a desktop um so i would just change it to pixels what i find the most useful thing about the wizardry method is that on desktop you can just scale up the the desktop version and not lose the proportions and the scalability of your elements so you could essentially put the same website on a super large screen and it would look the same as if looking at it on a laptop and that's what i really really like about the wizardry method when you get down to tablet and mobile you can just use pixels for that like you wouldn't need to necessarily scale scale the site on tablet and mobile so yeah i definitely want to get this working before the end of this live stream let's see so we got that working i think and move to zero percent uh maybe in the hover in animation you must have the initial state again right at the beginning as a starting point because it will start there again after hover out not the initial state yeah that's a very good point manuel um i was thinking i had to do something with the initial state so if i delete the initial state and we just add see position absolute and i move it 100 no not the button wrapper the button block yeah let's move it 100 this way and so then it would be negative 100 percent button block i have to do like 300 by 200 300 by 100 no that just button block okay so that's initial state so we move it in save that button hover out let me try deleting the loop uh button block goes to negative 100 then move it back to zero oh here it is yeah i moved it on the y-axis instead of the x okay yay we did it kind of okay yeah if you hover too quickly it doesn't quite work all right yeah i guess it's been kind of a longer week um just a little mistakes there uh but yeah i'll definitely for next week these live streams will will have a lot more content around layouts and we'll dive deeper into webflow i think we just had a few at least personally i had a few intense weeks of different design systems and layouts and i think i just needed to take a little break and i'm also working on templates so i didn't want to overdo it as far as like continuing to build in webflow so hopefully that was okay this live stream was okay you know when all else fails start fresh yeah or hit the aha moment definitely yep so the yeah this this effect i mean if you hover too quickly it doesn't quite work that well so there would need to be some adjustments um i'm trying to think what the best way would be to to fix that like it'd be cool if there was a feature where you couldn't the hover out animation wouldn't play until the hover in was done and that way it would ensure that the button doesn't do anything weird if the user like scrolls in and out quickly because you can see like what happens when i'm doing this type of thing it just like looks strange but i guess maybe other sites have that going on um yeah i appreciate it dale uh yeah definitely we'll have more um yeah in-depth uh live streams and things like that so if you're new definitely come back this isn't you know the the normal live stream where i'm just off the cuff doing whatever i usually like to work on a specific build so definitely come back next week and if you need help with your webflow project yeah come come by any any day monday through thursday from 12 p.m to 1 p.m but yeah i think i'll end it there um let's see if this button does it yeah this button does it too so i don't feel so bad if you hover in and out it does some janky stuff um so i feel i feel better but uh it is a cool cool button maybe to make it like less janky like you could just make it super fast right like the movement um just set it to like point two right and this would be zero and then for the hover out um thanks joey appreciate it set it to 0.2 so it's really fast and that way you're less likely to get any janky type of um thing going on there yeah but that's fun that's actually a really cool button i like it so we did something today i shouldn't you know feel so bad or like you know say we didn't do much but yeah we did did a few things um we worked on type.js and this button uh so yeah everyone uh yeah thanks for for stopping by um have a great weekend for all for all of you who come regularly i super appreciate it um tell anyone you know who's into webflow to stop by definitely want to keep growing this live stream it has grown since i've started so i just want to continue that momentum and just make it a really fun live stream i am considering the discord so we can branch out you know this this uh i'm not going to call it a community yet but like this group that's really interested in web design so we can always have access i guess to each other and ask questions and you know get help when we need help so so yeah i'm definitely considering the discord and i'll keep you posted on that uh mustafa wrote hi john would you mind critiquing one of the webflow design i created for client i made it late to your stream uh young stuff if you want to drop a super chat i can i can review it for anyone who's still on feel free to drop off because i'm you know i might just review mustafa's site here if not i can review it next week mustafa that will be fine but send the site to webdev4you.com contact and just fill out this contact form and send it to me that way all right let's add some border radius to this button i think that that'll look cool too border radius of 30 all right let's do 50. cool if we did add border radius we want to add border radius to the button block um so that when it comes in it looks more like a like a pill shape that is a very cool button what am i talking about i like that let me set the border radius to higher on both of these yeah that's good noise next week no code watching party yeah um let's do that actually yeah no code is next week so let's do it um i guess i'll stream it through my stream and we can just comment and actually i don't know how that would work no code conference is next week should we take next week off yeah no code conference is november 17th through the 18th so it's two days um so 12 13 14. yeah i think i might do wednesday and thursday off so we can watch the no code conf let's do that yeah so i'm i might declare that now next week wednesday and thursday is no code conf days so i definitely want to be there so we'll just take those two days off mustafa let's see if we have the email yeah let me see if my template's up yet that would be that'd be nice no not yet i have my video ready to um ready to publish uh live once my temp new template is up i did a whole video on this new template which um i'm really happy about yeah definitely um yeah so wednesday and thursday i believe those are the the days let me double check me yeah the 17th and 18th um are no code comp days so no live stream those days and the week after that we can talk about no code conf that will be super fun i'm gonna register and make sure i know what talks are being given cool let's bring back these image wrappers too and let's do center this button wrapper we'll set the position relative and we'll do vertical nope cool so we did some you know we had some cool effects yep uh so mustafa send the link to the super chat did work uh send the link through my contact form so fill this out and put the link in this message and i can review it you can add a shadow to these cards that might be fun i had a shadow 180 to the bottom distance change the opacity add more blur shadows are awesome distance oh yeah no i added the shadow to the wrong thing oops let me add it to the image [Music] nice subtle shadow all right cool okay let's see i'll wait a few more minutes mustafa uh if not we can pick it up next week um yeah i'm hoping either today or tomorrow i don't have control of when it's released but because it goes into the webflow marketplace so yeah i'm not sure when when it's going to be released i'm hoping tomorrow yeah so i'm starting to think of different ideas we can do for other live streams like yeah maybe just find a dribble shot and we can recreate it in webflow that could be pretty cool there's so much inspiration on dribble yeah this is nice look at this yeah very unique yeah let's do that let's do this for monday i like this type of design oh yeah let's do it this would be a fun wizardry method uh home page too this is a full a full home page all right so let's see yeah mustafa and let's take a look whoa whoa whoa that was way too cool hold on yep hair removal services from highly skilled certified male medical esthetician okay yo mustafa you're joking right this is amazing this is amazing dude look at that this is really nice design awesome so i'm guessing you revealed this with like an overflow hidden div block cool cool animations i love the design with the borders and everything super clean let's check out the responsiveness oh yeah that's amazing what uh did you use any type of design system for this mustafa or just your own class name convention this looks like wizardry yeah i'm guessing you use the wizardry method because the text is scaling yeah the text is scaling um yeah that'd probably be my only critique on mobile so let me see what this looks like on mobile and i haven't even checked out the other pages but so far this is like super cool um so on mobile let's take a look oh no okay so we do have a mobile menu i don't know why it didn't work here it didn't turn into a mobile menu here when i resized it and you have dark and light mode hold on right here yeah oh my god excuse me i'm just uh wigging out this is so good we have about super clean i i think mustafa just wanted us to see this site he knows it's good this is a really nice sight yeah i don't have any critique i love the alignment i love the lines let me see if there's anything i can find to to help reviews that's cool the reviews uh this probably could use a bit more design work um maybe a little bit more embellishment to a more typography here this feels a little bit plain um i might add some cool quotes that would be fun like in this type of style quote quotations so like um you know i would let's see where's the text here so like so this quote this quote right here i would use that and like put it at the beginning maybe of each review to make it stand out more and maybe maybe the text not have it be so wide because i have to read kind of a lot of text from left to right on a bigger screen on a smaller screen it might not be an issue i also notice that you're scaling the paragraph text so on smaller screens this text gets really small so if you're using the wizardry method i might stop scaling maybe i don't know what the size of this here is but i don't know like 1280 or something or like let me actually just inspect it to see what the width is at 1200 i might stop scaling the text so it doesn't get too small um yeah wizardry so mustafa you're using wizardry yeah so i would add that piece of code that timothy ricks provides to make sure that so it's this uh max with calculator or is that it let me see uh min width uh yeah i would use the min width calculator and you can see even here he uses 1200 so that could be a good thing to to do um when the screen after the screen gets below a certain size like stop scaling the text and use a font size instead so i would just review that maybe watch that video again because i don't think you'd want to have your um your text scale like that small when getting to it like a smaller screen and even on mobile it looks a little bit small um but i'm hold on i'm curious about something so if i go to here to reviews yeah here looks fine it looks great so i'm not sure how you did that like if i resize here it looks it doesn't change the break points yeah book an appointment uh yeah this looks like um type form yeah type form yes that's type form you can embed typeform into webflow typeform webflow yeah typeform integration yeah it goes over it here how to embed type form um yeah if you could explain that mustafa like i don't know if i'm missing something but when i resize to um to tablet and mobile okay all right now it's working oh i see okay so you on tablet you don't have the mobile menu you just have it on mobile landscape and mobile portrait okay that makes sense uh yeah okay okay okay let me go back into sizzy so that looks okay on ipad let's see how it looks on ipad yeah so this is what i would change here on ipad i would try to make it more similar to mobile because this text is a little bit small and it's a lot of text so i would just try to update that but yeah and then i might put the mobile menu on tablet 2 or make this bigger on tablet this menu because it's a little bit small the text is really small on a tablet but here the text looks good on all the other pages rates that looks good this is perfect i really like this table um i don't know if there's anything i'd critique here it might be nice to have grid lines between the different offerings to help me visually distinguish between them but that's a minor thing i don't even know if it looks that bad without dividing lines but that might help create that more of a table feel and let my eye find specific services quickly so it's not confused with the other services other than that mustafa i think like this design is impeccable it's really really good stuff when i see this i think about the uh that part in the 40 year old version where he got the wax i've never done wax or anything like that so i i i don't know about that world um but don't think i'd ever want to do that seems intense i like this uh yeah if you can share what you use for the marquee here that'd be cool i'm curious if you use the script or how you did this or if you just used multiple text and then looped it using interactions that'd be interesting to know um yeah i like a lot that you have a dark and light theme i think that's super cool and yeah the booking is a type form that's great and yeah there's not much i have to say about this uh mustafa other than maybe on tablet use pixels and change the size of the font here on tablet and have it look more like mobile so that the user isn't really reading really small text so if you're using still using vw for tablet i might switch to pixels for the body font on on tablet that's all i got super strong design anytime i see lines and alignment i think it just makes the the design pop out you know so much more and those are things i'm going to consider too for my new site my new web dev for you site right now it's just a simple site but i am planning on revamping it for sure but yeah great stuff mustafa don't don't think i have anything else to say uh yeah let me check out the blog see if i looked at everything yeah awesome there's a yeah there's a marquee here great let's look at the blog post okay um yeah so i probably should have looked at this too yeah this isn't bad now the text here feels a little bit big to me and a bit i don't know if i like this text so much it feels either too big or let me change let me change it to black yeah i might style this a bit more maybe make the text uh with like the width of this uh text like smaller like ideally i would want the text to look more like this even on larger screens so on large screens this text is huge so maybe i i wouldn't scale the text for the blog just have it be a specific um pixel value maybe because when it scales up and let me see if i even zoom out more no okay that's yeah i know this text feels a little bit too big for the blog post this image is really big i might give a height to this section and this image is pixelated um you know i might make the image like 500 pixels in height or something like that if it's going across the full width of the blog post this image is fine but the text feels too big and this down here looks looks good um the the font size looks good yeah so again it's probably just working with where you want text to scale and like how you want it to scale um so again i'd probably just do it for desktop and specific text like this i don't know if i'd scale or i'd probably make this text a bit smaller and this picture smaller too um let's check out another one yeah i guess i guess it's not yeah i might make it a little bit smaller that that text and here the image works a bit better because it's not pixelated so yeah if you're going to use really big images like that make sure they're not pixelated so that i can get the full effect uh because if i go here this is just it looks bad it's just pixelated and um to me when i see that first image i'm like are all the images gonna look like that let's check out this one yeah this this is okay because the image is like not pixelated um but yeah yeah those are all i have um i have to go enjoy your weekend all right thank you for seeing thank you vaughn i know it's gone over um i just wanted to review wanted to review mustafa's site uh but yeah that's all i got mustafa uh yeah thanks for sharing um great design great work amazing the type of sites you can build in webflow i always tell people there's no limitation when you're building webflow some people are like oh well i like building in code because i feel like i can do more i don't think there's anything you cannot do in webflow that you can do uh you know hand coding and that's why i like webflow so much it's so directly connected or correlated with actual code or there's just that one-to-one relationship that i feel like if you can take a shortcut with building visually you know by learning webflow for a few weeks i think it's a huge time saver and you can offer your clients really amazing websites so yeah that's it for today's live stream thanks everyone have a great weekend enjoy it we'll get back to intense layout building next week thanks for bearing with me the past couple days where we just kind of winged it a little bit and worked on interactions and attempted working with some some scripts yeah i appreciate you all thanks for coming enjoy the weekend and see you next week and no code conf next week the 17th and 18th so we'll be taking those those two days off thanks everyone uh yep see you next week uh yeah have a great weekend bye

Channel: WebDev For You

Views: 266

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: 8a1aVDjJuaw

Length: 84min 30sec (5070 seconds)

Published: Thu Nov 11 2021