Grid layout and parallax scrolling in Webflow - Live Stream - 11/15/2021

hey what's up everyone john here with web dev for you here to help you build awesome websites without code in webflow i do these live streams every monday through thursday from 12 p.m to 1 p.m central and we cover everything webflow from design systems to building full pages and layouts to creating or building interactions and animations and i also provide a quick support via the super chat function on youtube so if you need help with your personal project or have a question regarding your personal project you can leave a super chat and i can help out if it's any question related to webflow in general just feel free to ask in the chat and i'll be happy to answer it so we have a fun build today in today's live stream um we're gonna work with a few things uh one thing that i'm super excited to share with you so basically we're gonna create this grid layout just a few letters but we're gonna use grid just get some practice with working with the the grid feature in webflow and then we're going to create a uh a different speed section so a section that scrolls at a different speed than the rest of the site so here as i scroll you can notice that this middle section is scrolling at a different speed so it's kind of like a parallax scroll effect and it's really interesting how i went about creating this effect and then we have another grid section grid section here at the bottom and if you hover over these letters they they just rotate so it's just a little effect and then i added a grain overlay over the website to give it more texture so there's a lot to cover we'll see if we can cover it all in 30 minutes but yeah we will get started so just an overview of the agenda for today from 12 to 12 30 we're going to design a grid layout and we're going to create an alternate speed scrolling effect and then from 12 30 to 12 40 i'm going to field any questions about this build and then from 12 40 to 1 we'll just have a general upload discussion and i'll field any super chats that you might have so yeah super excited to get uh get the week started with this build so i'm just gonna breeze through it just it's just gonna be a speed build but as i'm building if you have any questions just let me know and i will answer them so hi taza where hey joey joe yeah so i'm definitely more prepared this week i know the last two days from last week where it was a bit of a freestyle kind of free flowing so this entire week actually only today and tuesday because no code conf is wednesday and thursday so just wanted to mention that there's not going to be live streams on wednesday and thursday because that is the no code conference and i want to watch a few videos from the conference so yeah so today and tomorrow we'll definitely have a lot of kind of interesting things to work on um so yeah i'll go ahead and get started with the build so let's go to a blank project if you're new to webflow and you're just curious about what i'm doing just let me know and i'll try to elaborate a bit more but as i'm building i just kind of breeze through it a little bit so here we have the body it's blank so the first thing i'll start off with i'll just add a div block and we'll call this the page wrapper wrapper and uh i might revisit the client first system i do like their class naming convention but that's about it that's the only thing i'm going to kind of grab from that system and as i'm going through the site you'll see me using kind of that specific class naming convention and i might revisit it we might come back to it and build another site with the client first because even though we we did about two weeks with it i want to give it more time as well because i i am considering it considering it a bit more um so i definitely want to build a few more things with it uh yeah so we have the page wrapper and then i'll add a section in here so this will be the top section so i'm going to call this section dash top and i'm going to give it a min height of 100 vh so spans the full view port the full height of the viewport and great so now to the section top i'm going to give it a let me just double check to make sure this is what i did yeah section top we're going to give it a grid display setting and we're going to set the grid to uh four by two right oh and i didn't mention the inspiration for the site which i should probably do um i just searched on pinterest i typed in web like websites or design sites and i found this one here it's called smilte and it is a theme i think for like wordpress or some other website system and it was this one here portfolio masonry and basically i wanted to rebuild this i didn't build the footer but we can try to do that today as well but i just liked the layout right it's just a simple layout with um with these different blocks and i just noticed they have this nice hover effect that we can try to do as well but then i noticed that this section scrolls slower than the rest of the site so i thought oh that's an interesting effect i wonder how i can do that in webflow so i spent some time and that's what i'm going to showcase today um so johnny wrote hey can you check your ig dm sent a question a few days ago about a button animation uh definitely johnny i definitely um ig isn't i don't check it that often so um any any of that social media but i probably should so that's my bad um but yeah if you want to ask your question here i'll i can definitely check it out as well and we'll get to it uh after 12 40 in the uh in the webflow discussion part of the live stream alright so we have a two by two grid i want a four by two so we'll add two more columns i'll go ahead and remove the gap between the columns and rows so we have a four by two grid okay and great so i'll just add a div block in here and let me see what i named this okay yep so each one so this is top grid wrapper one and i'll just expand it to fill four blocks i'll add another div block and this will be top grid wrapper two i'll add another div this will be top grid wrapper three we'll add another div and this will be top grid wrapper four and then we'll add another div and this will be top grid wrapper five okay so we have one two three four five grid elements uh so yeah as far as the color i just went to coolers dot co so let's go ahead and go to coolers.com we'll give each uh each grid cell a specific color so let's explore and let's just find a color palette uh this one's kind of nice let's use this kind of a vintage color palette and let's open it or maybe let's use this one i kind of like this one open generator and we'll use these colors okay so i'll copy this one and go in here so for the background of this one we'll go into the background color we'll just add it and that's not the color so let's go to the color palette and i will copy it here and paste click the plus to make it a global swatch click create then i'll grab this color and we'll add it down here create a global swatch so i'm just adding it to global swatches so we can access them easily so i like these kind of earth tone colors they're quite nice and create and we'll add this color here so there's not too much contrast except to this one so i might work with that a little bit all right so we have our colors so i'm going to set the burly this color here and then we'll do this color here um [Music] actually i'm not they're okay we'll just we'll roll with it i'm not gonna spend too much time here with the colors but there's our colors um looks interesting okay uh so now for the font i'm using a specific font um i'm using sign so if you've seen my live stream you know that i like using that font um so let's go and install that font so i'm gonna do sign and it is right here i'll just install these fonts they're google fonts uh for anyone coming into the live stream we're just building a grid section and a section that scrolls differently than the rest of the site so it scrolls at a different speed um great so let's go ahead and add that text let me just double check yeah so for this section i will set it to flex center center so whatever i place in here will be in the center and i'll go ahead and add a text block okay and we'll call this uh yeah top top grid letter okay and then here i'll say a and we'll set it to sign sign and we'll make it extra bold and make it really big so i think i used 200 for this one i used 380 so 380 and one dash okay and we'll change the color here we'll pick this color yeah it looks nice when you add kind of contrasting colors in there and we'll add a let's see here a text shadow uh where is it uh text shadow right here okay and hey manuel how's it going add this one and the distance will be the blur will be zero the distance will be 20 and we'll set it to 135. all right cool yeah 135. all right and then i'll copy let's see top okay so this will be top grid letter and i'll give the combo class of two and it'll be 200 we'll make it 200 and then we'll set this to flex center center and we'll just change the colors here so this will be like a green and then the shadow will be like a like a brown okay and then we'll just copy this again we have to set this wrapper to center center let's remove this combo class and just set it to 3 and we'll make it 200 and let's change the color let's try that and then the shadow will make it lighter nice and one in here so let's paste that and we'll change the color here to oh let's remove the combo class and we'll say four and again 200 actually i like that color there and we'll do something like that and maybe we'll change the color okay that works okay here we'll set it to flux center center paste that in there and here we'll say five okay and 200 for the text and that's the text shadow so let's do yeah let's do that one and sure okay cool and we'll just change the letter a b c d and e okay so that's the top section looks interesting so we just created a grid section in webflow all right uh so the next thing we want to do is add the middle section so i'll add a section and this is the fun part this is where we're going to kind of make an offset image or have the the middle part scroll at a different speed so we'll call this section middle and we'll set the min height to 100 vh and here i'll add a div block so command k and here command k div and we'll call this what did i call this middle image wrapper okay so we'll say middle image wrapper and this image wrapper is going to be a 150 vh and this will make sense in a second let me just double check this uh yeah the min height will be 150 vh okay so the reason it's 150 is because we're going to move as the page is scrolling we're going to move it 50 vh quicker than the rest of the site and this will make sense in just a second let's go to unsplash i'm not going to go ahead and try to style those shapes to that color so we'll just say abstract or black and white just so it doesn't detract from the colors of the site um or you know what let's just do mountains mountains is always a good default yeah sure we'll do this one and show on finder or we can actually i have some ideas oh wait i have a cool idea so let's let's pick a different picture abstract background i want it to be landscape um yeah let's do let's do this one or this one here so we'll download it and we'll add this picture all right let's add it to webflow and let's see let's go ahead and add in here so what i'm gonna do to this image so we'll add it in the background here and i'm going to let's see add a background image choose the image go ahead and add it set it to cover center and not tiled okay and i'm going to add a filter and just set it to black and white grayscale and here i'm going to add a div block and we'll say image color overlay set it to let me set the image wrapper to relative and this to absolute and full and i'll add a color so we'll see oh no that's not gonna work okay yeah the the overlay needs to be added to the section and on top so let's do position absolute this section needs to be relative and image overlay see index of 99 and then we'll just change the opacity maybe a little bit higher ah that doesn't quite work yeah i'm gonna go ahead and remove the image overlay um yeah we'll just add the mountains for now just to get that parallax feel [Music] okay that's safe all right let's see hey what's up dylan okay so let me replace this image and let's see if it works with this oh yeah that's not bad that actually works out better okay um so we have the image overlay so for the section middle because it's 100 vh i'm going to set the overflow to hidden okay so it's just the full 100 vh section and i think yeah okay cool yep uh yeah so that looks good and then i'll add i'll copy and paste this top section so copy and paste and we have it at the bottom so let me see here so we have the section middle 100 vh this is a hundred and fifty so i think i might have done something different here oh yeah because the overlay is 150 vh okay yeah i guess that'll work let me see oh yeah and the image has to be fixed i believe so let's see here let me just double check so image wrapper 150 vh oh yeah okay so the image wrapper uh i got it the image wrapper is fixed so the middle image wrapper is set to a position of fixed and full okay same with the overlay we'll say position fixed and full all right and then we'll bring the section top we'll bring it to the front so we'll set the position to relative and we'll say 99 okay so it comes in front and it actually should be yeah 99 and we'll set the color overlay to 70. okay all right perfect nice so we see the image is in the background so already we have like a little bit of a parallax effect where the image doesn't move but we want to move the image so manuel wrote just curious if it would be a real project would also simply use apple's preview to resize images and then drag and drop it into webflow would use additional image optimizing tools a great question manuel i would probably use image optimizing tools as well but just to save a little bit of time i just resize it so i don't have to go you know compress it and then bring it back into webflow it also depends on the size of the image like if the image is already you know like 300 kilobytes or less i might not take the time to to resize it so a great question um but yeah you know i i like to use like compress jpeg or compress png and just drag and drop and and reduce the file size that way cool so nice i'll continue with this uh just to recap so we added the top section it's a grid section then we added this middle section set the height to 100 vh uh we added an image wrapper with an image and this is 150 vh we set it to fixed and full and same with the color overlay so we have that color overlay over the image all right and actually um i think i can put the co cover overlay inside of the image no i can't because i set the image i gave the image a black and white um thing there all right so let's make let's have this uh middle section scroll a bit faster than the site and the way to do this is actually quite simple we go to interactions click the plus and say while page is scrolling and then we'll play a scroll animation we'll click the plus and i'll say um middle scroll section something like this and we'll select the middle image wrapper at zero percent we'll move it we'll say zero vh and then at 100 we'll say negative 50 vh alright so vh stands for viewport height and is that what i did yeah 50vh okay so what's going to happen when we preview as we're scrolling that middle section is going to scroll faster than the rest of the site because as it's scrolling the site is is uh that middle section is moving up 50 vh quicker if that makes sense uh yeah photoshop is another great way to do it mustafa for sure yeah as long as your image i like to say 300 kilobytes or less i know sometimes that's not feasible but working in support at webflow we always recommended users to use 300 kilobytes images or less so nice so as you can see we have that nice parallax effect if you can see the mountain it's scrolling slightly slightly at a different speed than the rest of the site so yeah i looked at the at this site here and i was like yeah i want to create that kind of parallax effect where the background is moving different than the foreground and yeah so that's how we do that and looks good if you wanted it to be even more pronounced you could for example set the image wrapper you could set it to like 200 vh and then you could let's see here and you can set the movement to be negative 100 vh and it would just have a different speed to it hey old man sg thank you appreciate it so i just moved slightly different and i think the less the less height the better um so i can play with this i'm going to say negative 25 vh and then just for the middle section do 1 25 vh so just playing with it now but that's essentially what you want to do is give the the uh the middle section 100 vh or however large you want it and then make the image wrapper inside of it larger and make sure the middle section has an overflow of hidden and and the image wrapper is set to fixed and and it's hard to explain without kind of drawing a visual but basically because the element is fixed as the site's scrolling the elements moving slightly at a slightly different speed than the rest of the site so it's like the site scrolling down and the middle section is moving up a little bit which gives it a different feel than the rest of the site yeah i think i think 50 works best so 150 vh and then um we'll set it to negative 50 here if you have any other ideas on how to do this definitely let me know that's just one approach i took to making that parallax kind of effect all right so it moves at a different speed and we can get another image just to see it more pronounced so let's go to unsplash and let's find um people let's see let's see if i can find a good people and it should be landscape or what's another uh trying to find something that would give that parallax effect uh what do they have in collections let's see okay this is a cool one this will work all right and let's just resize it [Music] yeah this one's not 300 kilobytes but yeah that's okay it's just for quick demonstration purposes we'll go ahead and replace this image cool this will look nice hey john uh do you ever use smoothing on scroll animations i do yeah that's another thing we could do to make it even more um kind of move a little bit different that's a great point pablo um so we're having publishing issues here on webflow so let me reload let's try that again and i'll mention what what you're kind of talking about here pablo [Music] and just a second hopefully it publishes yes okay great all right nice so we have that nice parallax effect to that middle section um cool so what pablo's mentioning uh for scrolling you can add even more smoothing so if i set it to 80 we might get a different feel that actually looks interesting let's let's publish that i like to preview the scrolling in the browser rather than in webflow it just feels a bit different yeah the smoothing kind of throws me off a bit pablo i think 50 was good if we set it to zero let's try that or 20 something really low we can just experiment with it and i think you might even be able to add easing to to the movement here and that might affect the movement as well yeah it all depends kind of what you're going for but i think 50 was good 50 felt felt like a nice smooth uh scrolling all right so cool um that part is done i just wanted to showcase that the last thing we'll do is for section for this one i'm just going to duplicate the class and call this section uh bottom and um yeah we'll just duplicate all of these and i'll say bottom bottom grid wrapper dash one so instead of top we're saying bottom and i'll duplicate this and i'll say bottom grid wrapper two and i'll say duplicate this bottom grid wrapper three duplicate this say bottom grid wrapper four i could probably use combo classes that might save me a little extra step bottom grid wrapper five okay and then for this i'm gonna go ahead and delete these grid letters for now and basically uh let's see here so for this i'm to say like this and this one that looks good this one i'll just span it all four and there we go okay so we have one two three four and five and then i can read out re-add these letters so i'll just paste that in there and i'll just copy and paste these letters hopefully the colors work out uh just to save some time i'm not gonna well that's kind of interesting we'll leave that like that and paste that in there and in here cool so a b c d e f f g h i j alright cool so i'd probably work on this contrast here but i'm not going to spend too much more time with it here yeah so basically i just switched up the grid like i move i changed the size of the div blocks to be in different grid cells so it's kind of like the opposite from this one we just put the bigger block on the right and here the bigger block is on the left all right nice so yeah that's pretty much what i wanted to showcase the last thing we'll do is we'll create a grain i want to cover this step one more time because i think grains are super cool so we'll just create a quick grain let me just grab a drink of water here and um yeah let's create the green so we'll go into photoshop and i'll create a new project create uh for the grain yeah and for this green we're going to use a specific color we're going to use this brown color for the green all right so i'll just copy that there let's go into photoshop um and we'll create a new color over a solid color uh we'll make it white uh yeah and so we have this here and we'll add a grain let me just double check make sure it's white yeah okay we'll add a filter add noise let me undo that so we'll go with filter um noise add noise and we'll convert to yeah smart object okay gaussian so uniform about 15 percent and monochromatic is good then i'll click ok so we have the grain and then i want to go to image adjustments invert then layer and flatten image okay so there's our grain then i'll create a new solid color and black is okay and for this one uh for this background i'm going to copy it for this grain so i'm going to select it let me just zoom in make sure it's a green yep so i'm going to select this layer 0 copy it hit alt or option um click on the color fill so i'm selecting this color fill then i'll paste that grain in there and we'll hide this bottom layer so now we have the grain but we can't see it and i'll go ahead and let me copy this color again go into photoshop and we'll add a blending option go to color overlay double click paste that brown color and click ok so you can't really see it but it is there that speckle is there and i think if we change the background color or if we had a solid color of white this might help yeah you can kind of see that brown speckle it's very subtle but it's there and i'll go ahead and undo that alright so now we'll hide this i'll go to file quick export as png and i'll save the green uh so let me see i have a grain folder and this will be grain brown okay so i'll go back into webflow we'll go into the page wrapper i'll add a div and i'll call this grain dash overlay for the page wrapper we'll give it a position of relative the grain overlay will set to a position of absolute and full and then we'll set the z index to like 199 something much higher we'll add a background i'll choose the image and let me drag and drop that grain let's see if i can find it here here we go green brown and nice and then i'll set it to 2x so it's a nice uh kind of small grain it's very subtle but it looks good and that's it and i'll center it all right great cool so now we have a grain to the site and let's see if i can see it yeah it's very subtle but it's there so let me hide it just to make sure i can tell the difference yep so it's a very subtle grain but it's like a nice adds a nice tone to the site and it looks really good um yeah and the last thing we need to do is add a bit of custom code to make sure that the the grain doesn't interfere with like buttons and things on the site so we'll go into home and we'll paste this dial code so it's grain overlay and pointer events equals none so it doesn't have any pointer events and it won't interfere with the rest of the site cool i think that's all i'll cover for today i did add kind of a 3d effect to the letters but i'm not going to cover that today but yeah we have a nice grain to the site and looks nice all right cool so that's how we do that added a nice parallax effect to the site worked with grid so if i make this smaller we can see the the text is smaller so on really larger screens the text does become smaller and this is where you could use kind of that wizardry method like you could go to the body all pages you know the all body tag and set the font size to one vw and then i could set the let me hide the green for a second i could set the text of the letters to let's see 2vw 5vw it would have to be like something really big 20 vw let's do 22. and the top grid letter here will do 12 vw [Music] you'd obviously want to work with the wizardry method um oh it's not vw it's m's my bad so this should be uh 22 m's not vw 12 m yep i'll make this um clonable pablo and i'll send the link now 12mm [Music] 12 all right and the same for this we'll do okay those are already changed so now if i set the if i go and publish the site the letters will be responsive they won't get smaller if if you're viewing a really large screen so essentially the site is just fully responsive so i think i would have to set the shadows to ms as well so we can see what happens when i make the the browser larger or smaller the shadow changes but yeah you can create like a cool grid responsive site and let me just go into the shadows and try to work with that a little bit so shadows i think would have to be 20 pixels let's see 2m or 10m 22m 30mm oh you can't use uh m's with shadows i'll just leave it at 20. yeah so that's something you might have to like that would require work around uh great so yeah let me publish it and share it with everyone so you can take a look and i'll bring back the grain the grain is very subtle but it's there yeah it's it's very subtle i could even add the the black grain might appear more let me try that so i have a green called intense intense green let's see that looks better grain overlay choose image yeah the black shows up a bit better uh yeah let's see yeah maybe i'll do the block so you can see it um that brown color might be too light for the grain okay and i actually don't like that that's too dark that green let me replace it oh and center it yeah okay all right i'll share this okay so cool if you have any questions about what i just built let me know i just want to showcase that the main thing i want to showcase is the parallax so you know you have a fixed section and then you just move it at a different speed than the rest of the site to create that nice parallax feel all right cool so uh nsv logs wrote hi there i have a question when it comes to responsiveness could you explain a bit on it i'm afraid that my website will look bad on different screens uh that's a great question that is a very kind of like in-depth question as far as like how to make a site responsive um i always recommend using flexbox or even grid uh your those display settings because for example on this site like i can go to tablet mobile landscape and mobile portrait and on tablet everything's a bit squished so what i might do here and i'll hide this grain what i would do is just go to this section top and i might set it to flex instead of grid or if i do leave it at grid i'll go into grid and just remove a column right or just make it two columns and now by removing two columns i have a much a much better looking site so the a is here b c d e and i can do the same for this grid um go into here and just remove two columns right now the h is in the middle you know i could change the layout here if i wanted to make the f like this and just drag let's see if that affects no that's great so whatever if i change grid cells on tablet it doesn't change on desktop which is super amazing so you can use grid and just restyle your grid blocks to to make it more responsive and then on mobile landscape that still looks pretty good and then mobile portrait i'm okay with that not the shadow the shadow is a bit different because you can't add m's to shadows so um that would just take a bit of playing with yeah so i would recommend flexor grid webflow does have webflow responsive video there's a whole course excuse me 101 course [Music] i would recommend this webflow crash course and they talk a lot about responsive design in let's see styling layout responsive design they have a whole section on it and working with breakpoints and things like that but as far as like the easiest way to make sites responsive for me it's to use display settings like flex and grid where i can just go into the tablet and just rearrange you know if i'm using flex i can for example for section top i can use flex here and say vertical and then all my elements become vertical for this i like grid because i can you know have different sized sections here for sure yep definitely it's definitely an art um yeah i consider making a site responsive more of an art than a science sometimes the science for me is the tools that we have like grid and flexbox but the art is like your approach to making it responsive like how do you want to approach it and you know we're getting different design systems coming out every so often that help us make things responsive one is the client first system that i went over a few weeks ago by fence suite and they already have like a pre-packaged system that will make your site responsive if you follow their specific structure their their class naming conventions and their classes you can make your site easily responsive using their design system easily is kind of a relative term because i'm sure even you using their classes you might have to fiddle with it a bit to make sure it's you know to your liking as far as responsive design cool so yeah i think that's it for the build um any questions any discussions interesting things we want to talk about i do like this idea i'm just going to pinterest and you know just typing in websites and just getting some inspiration from here something i might do more and we'll just find our own images and you know try to build out some of these really fancy sites like this one for example you know this would be a fun build just kind of the layout there's some really nice layouts not just you know all perfectly aligned but it makes for a really nice feeling website uh let's see this one's nice i like the shapes in there uh actually that's kind of cool like let me see if i can get like a bigger image oh here we go no okay so how they made these images there let's let's do that real quick that's that's kind of fun uh let's go i could even do it on this site actually so section top let me hide the grain overlay so what they did here is they just added a border radius to the right corner a very large one like that that's kind of cool we'll do 50 percent oops um that's kind of cool fifty percent and fifty percent or i could vary it um oh the only thing is the image shows in the background what i could do is add a color to the section so i'll add a background color make it like this yeah and yeah just by adding some border radius you can add some really interesting design to the site cool here we'll only do and same thing here we can [Music] yeah so just by working with border radius you can add some abstract shapes to your site and make it look unique and you can add images in it so like i'm just you know getting inspired off you know how they did their images here okay like there's that border radius there so if i did add an image here it would be inside of that border radius like that that's cool um do you think you can help with it oh john if you have time i would like to have a help with a landing page um yeah so old man sg um that would require super chat so like whatever you want to give you know donate um just helps support the channel if it's a personal project yeah so if you like you know the super chat is that dollars signed symbol in the chat and you can give whatever you want and we can look at your project in the live stream cool just like that we added a bit of flair to the site those cool curves noise yeah just an abstract design you know just wanted to play with it uh cool 22 viewers wow there's 22 viewers at the moment that's dope 20 okay yeah so the super chat feature um yeah is just if it's anything related to your personal project um yeah and so for anyone who's new here i do these live streams every monday through thursday 12 p.m to 1 p.m central and we just cover everything and anything relating to web flow and web design and development all right so that could be a fun kind of project to work on um yeah we'll see what we come up with tomorrow my new template's still not out yet so i'm definitely you know waiting or like gonna be excited to share that with everyone once it does come out [Music] i guess i could share how to create that like 3d effect so on this initial site you know the letters move when you hover okay so this is probably like the fifth time i've been asked about a discord group um about a discord group so i think i'm definitely gonna have to do it um so just stay tuned for it i'll put it on my site once it's available and i i can probably devote one to two hours a day to helping anyone in the chat but it could be a nice chat room for everyone to help each other and we can discuss web flow so discord is coming very soon i've gotten many requests for it so i will be creating one uh you should do a design portfolio next uh yeah sure send me um if you have an example uh ns v logs uh send it and we can see if we can work on it like i can type in portfolio website john have you ever had a look on system flow design system for figma plus webflow it looks interesting but i'm hesitating to give it a try so let's see um system flow bridging the gap between design and development using webflow for client work us to your system flow and action cool let's uh maybe for next week yeah yeah i'll start it uh i'll start it this week and probably announce the discord next week um yeah unfortunate like not unfortunately but i think it might have to be paid uh yeah because if the value of it will be that we can help each other i don't know if it'll be free sorry i shouldn't feel sorry about charging a little bit for it because i do have to maintain the discord that's not something i wanted to do because i'm kind of busy at the moment and um but i do want to do it because i think it'll be fun and i could probably devote like an hour to it a day or something like that um but but yeah because i i didn't initially plan to do a discord but um yeah and it will just be for members who are really into webflow that's kind of why i want to charge a little bit because then i can be of assistance you have access to me at least once a day for assistance um so yeah yeah i definitely i value my time so i just want to make sure that if i'm if i am using up more of my time to offer more help or a community where we can share information then i want to make it worth my while so uh sweet thank you thanks for the vote of competent confidence manuel i appreciate that i always feel a little bit weird because i you know i do want to help the community as much as i can but i do kind of have to value my time a bit as far as like adding more things to my plate so thank you appreciate it appreciate it ennis appreciate it uh so yvonne wrote hi john i would like to see a custom slider using the slide interactions when in view and out of view yeah let's do it sounds good yeah um i'll set up the discord discord is really easy as far as like setting up payments and stuff um for access to it but i'll set it up next week or this week and i'll announce it next week and we can all just jump into the discord and uh talk about webflow and you know help each other with different projects uh so eric wrote hey i just got here i just thought about something i want to do but i don't know how to how to a pricing calculator with a sliding dial do you know how to do that uh that sounds pretty involved uh eric i'm guessing a client recommended that because it is pretty involved um a pricing calculator with a sliding dial what would the sliding dial do hey marcin hello hello yeah um yeah let me see get system flow oh shoot yeah it's 150 dollars yeah manuel i don't know if i'm going to uh to try it out don't know if i mean it might be worth it but i don't want to pay that much to just try out a system that i might not use if it was free i'd definitely go over it but it could be i mean let me know if you want me to cover it and i might check it out i have to look more into to it though um custom code can we do the webflow multilingual setup um yeah that would require custom code uh rasheed so actually i did talk to the guys from wii glot um they actually reached out to me and maybe i should because they wanted me to like maybe advertise them on my site but um we glo is a good a good uh way to make your site uh multi-language so check that out we i'll post the link in here the sliding dial is just a variable that would increase or decrease the price uh yeah that would be javascript i can i can look this up sliding calculator [Music] yeah maybe something like this i don't know like this is a javascript slider calculator enter the bill amount for the meal um 25 and then the tip amount and it would calculate the the tip here so you could use the script and this code and you can style it a bit you'd have to do it with code but you could add this code in the script and kind of play with that if you want we can go over it maybe at some point i think this would be a super chat for sure or something like this um yeah it doesn't look like they have a free trial uh manuel preview oh we could check out the the uh the read only in webflow so yeah i'll check it out and and see if it's worth it uh let's see uh what else was i yeah i was checking javascript slider calculator yeah i think um was it eric yeah i'd uh i might do some uh like a search for a sliding calculator and then try to implement the javascript into workflow using custom code i have system flow and it's good for newbie and webflow nice so cool so you might not recommend it for maybe more intermediate users martin yeah i think you know if you have something like maybe client first that's free that's i'd probably go with that but let's see components yeah i can see why a beginner might like this oh i see yeah it's just like drag and drop components that's that's fine color palettes cool yeah very nice uh so nas wrote sorry for all the questions now that now that i'm spending so much time in webflow coding is definitely interesting i've been designing for five years now and i have a background in c cs uh where do you recommend to start learning about javascript css and html um that's a great question uh nas there used to be treehouse i know that was like a place to learn code but i think they stopped treehouse coding yeah maybe team team treehouse and they have videos on different uh different topics with coding also skillshare is probably a good place to to learn um if you're using webflow though you don't necessarily necessarily need to learn too much of that it's always good to have some knowledge of of javascript css and html because it will help you understand webflow concepts but if you're just building in webflow then you could probably get away with just understanding how webflow works and how to build and web flow but yeah definitely coding is is a good tool to have or a good good background when designing websites all right so so yeah we built a nice site very interesting oh cool is it possible to use the native css and html on webflow and just implement the javascript i've never done that uh yeah i might be able to go over that tomorrow eric yeah w3school is also good for learning code yep exactly uh no codeconf and john discord this will be just great yeah definitely yep so yeah um we're nearing the end of the live stream um so yeah i'll repeat again uh wednesday and thursday we're not gonna have a live stream so tomorrow is going to be the last live stream for this week because no code conference is this wednesday and thursday and then after next week i'll i'll announce the discord group and we can all join and yeah i'll set up different channels so it'll be nice and organized all right thanks everyone thanks for joining um yeah i appreciate everyone joining this this live stream is growing uh every week it seems i get more viewers at a time so let's see if we can reach that 100 uh 100 viewers at one time that would be amazing but yeah just one day at a time definitely going to do something cool for tomorrow as well i'm going to prepare some something interesting for tomorrow and we might revisit the client first system just to get a bit more practice with that and yeah we'll just continue building and getting better at webflow so thank you naz thank you manuel thank you marcin thank you pablo rasheed eric um old man thank you eric rasheed yvonne thanks again ns vlogs joey joe uh thanks everyone for joining mustafa dylan johnny yao and taz ware appreciate you thank you and uh yeah we'll see you tomorrow spread the word about the live stream and let's get more people into uh the group thank you appreciate it thank you thank you nice all right everyone see you tomorrow peace

Channel: WebDev For You

Views: 440

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, webflow grid, grid in webflow, parallax scrolling, parallax scrolling in webflow

Id: tv1geoxT7_A

Length: 63min 35sec (3815 seconds)

Published: Mon Nov 15 2021