Developing a Website LIVE in Webflow

what's up youtube in today's video i'm going to try something a little different so this is going to be a long form live build out of a web flow site that i'm working on right now for a client so this isn't really going to be a tutorial style but do feel free if you have questions if i have time to answer them put them in the chat i'll try to get to as many of them as i can um and then yeah this whole process is just going to be a live build out of this site that i'm working on right now for a client so i already started on some of it i got a little bit of the home page done thank you so much appreciate it and then i'm working on pretty much the bottom part of this so working on the missions page which i'll go ahead and show you uh kind of the screen so working on this about part working on the footer um thanks so much alan and i'm going to just kind of build this out live so if you have time if you want to hang back and kind of uh build this out with me let's uh let's do this so i have a little bit of this done so far um let's see this is where i left off and then i think some of this is all cms enabled which is good um and i think my next part i was going to animate this so i get this question a lot how do you animate these photos when you scroll into view so what i basically have is a container called about image that's has a width and a height defined and that height is being defined by the flexbox parent that's kind of stretching it so if i was to dump a ton of more content in this uh box here you'll see that image grows with it so it's great to just think about this like if your client was to break the site try and make it as unbreakable as possible but um yeah so in there i have this about image inside that container i have this about photo which is the thing that actually houses the photo and like if i start backing down the height you'll see it has a background color so what i could do is whenever we scroll into view just have this photo slide up to 100 height so we'll get this nice effect like it's just wiping up and we'll see a little bit of the color now what i want to use for my trigger for this is the actual image container because i i don't want to use this whole section because i don't want the animation to start when the section starts i want it to start when this image this image comes into view that's really important and when mobile because if i were to stack this image under this text on mobile this animation might trigger before we even see this image if this whole section was my trigger so think about what you need your trigger to be in this case it's my about image i'm going to add a trigger of scroll into view and then i'm going to apply this to the class so if i ever reuse this section on another page it's always going to have this animation here so i'm gonna do the first start scroll into view and i like to keep this somewhat organized so i'll call this about section photo so i at least know what it is and what's happening here and then i'll grab the actual photo and then we want to set its initial state so this is using size um so we're going to use a hundred percent width and then zero percent height and it's kind of snapped to the bottom that's because it's parent is using flexbox to anchor it down to the bottom that way it grows from the bottom and i'll set this as my initial state so this is how it needs to start off then the size will just come over here and set the width to 100 and then the height to 100 so this is where it's going to grow and then i really like to play with the easings usually an out easing works really nice for this kind of thing um just i find it's really smooth so you could do out uh back which is just going to make it grow past the limit and then shrink back down probably not best for this use case i find myself using outport a lot just because it's this really nice smooth effect and point five is probably good for that so now if we save this and then we scroll back up a little bit and then i'm gonna just scroll down into view and it did like it did swipe a little too soon like you barely caught the end of it so what we could do is add a little bit of an offset which means it's not going to start as soon as this enters the top of the view but about maybe like 25 30 uh through then it will start sort of make this swipe so let's try that again um i need to scroll up and then preview yeah so now i'm catching a little bit more of it i could increase that a little bit more but again just keep in mind your mobile states because usually you're seeing more of the screen on mobile because the screen is more of a portrait and less of a horizontal so you don't want this offset to be too far but i'll try and bump it up just a little bit and then you notice too the second time i scrolled down nothing actually happened with this photo it only triggered once so if i want this uh to trigger again i'll have to queue up the when scrolled out of view and then this time uh we're going to duplicate this animation i find if you duplicate it it just makes your life a lot easier you're not having to reinvent the wheel each time so i'll just call this one out because the first one was in and then i want to set the size uh back to how it started zero percent width and then book i mean i'm sorry zero percent height and because this is uh only gonna happen when we scroll out of view we're not even gonna see this so the duration doesn't matter in fact i'll just set it to zero seconds so it's instant the only reason i'm setting up this out animation is so that it cues again when i scroll back into view let's see thanks so much for your recent tutorial super easy to follow thank you so much i really appreciate it um yes i definitely plan to try and make this available we'll see how it goes um but yeah so when we scroll back it works all right and then we come back up and it works again so now it's triggering every time totally personal preference whatever you want but it's working both times so that's good for me and honestly that's all i really want to do with this section i might add some text animation later or something but i haven't fully decided yet um let me see i have a couple events in here but i think one of them is past the current date maybe so the start date and date is 11 8 11 1 yeah so what's cool about the way these events are set up is that whenever the um whenever the event is over the day after the event happens it's automatically taken down from the site and that's just using this filter that says you know end date is after or equal to today so uh or after equal to zero days in the past so once that event is over the day after it's just not gonna appear here using that filter so that way they're only seeing up to date events um let's see so i think that is pretty much it for that section the last piece i need to build out is the footer i have these nice gradients going on here so i have this um class i've been using for everything called section and then inside that i have another class called container what i'm going to do for this section is i'm going to add a combo class and if you ever followed bem naming conventions basically anytime you add a combo class you type i s for is dash dash and then the name of your combo class and that just lets you know really easily what that class is used for so in this case i'm going to say is footer and then i know this is definitely a combo class applied to my section it's just a specific way to write it but then i can give that a background color and it's not going to affect my other sections because of that combo class and then um i may even want to position that section to relative i think it already is cool and then i'm gonna have these gradients kind of hanging over the side so i want this section to be overflow hidden that way when i drop the gradients in it's being cut off from the sides so i already have these gradients basically a good rule is don't repeat yourself if you made something that you can reuse definitely reuse it and i have these gradients in this other section so i'm going to reuse it for this section and that's going to help especially with mobile when i go to start stacking things and resizing these gradients it'll resize in both sections once i do it in one thanks so much appreciate it let's see so i have those two gradients in you can't really see much right now for now i'm just going to set a minimum height on this container so this container is going to be his footer as well for now just so we can see what's going on uh let's do minimum height of 30 a.m all right we got some gradients on and then i just have i think a red over here a reddish and then a bluish right there so what i can do is i have gradient top right gradient bottom right i'll do i'll duplicate this gradient duplicate the class this would be gradient um bottom left and then it would be anchored to the bottom left and then for here i'm using ems for everything just to like make it scale really well so if you uh if you checked out my recent video on like responsive topography and scaling that's pretty much the method i'm using here for these so i'm going to remove these paddings i mean these margins there don't really need them there and then we got one more so i'll duplicate this one and duplicate the class and this will be um so this will be top left and anchor it to the top left 20 am just going to kind of offset it into that corner and because the section is full width on really large screens these gradients will go all the way to the edge of the screen let's see so then i'm going to kind of reposition that there and there and then let's change the color to red so i'm using 19 opacity for this part of it and then for the end part zero percent just so it's a nice fade all right thanks so much brian um so i have that gradient there that looks great i think that's everything i need for that so now i just need to get these links in and i believe they're using my h4 style so what i can do is uh let's see drag in the link block and uh this is goes back to bem naming convention too you name things by components so like this whole section is my footer component but a piece inside of it is um just an element inside the overall component so i do an underscore and the word link because this is my element inside the footer so that way you're not naming everything on your site link one link two link three like you know like this is the hero link this is the nav link this is the footer link you're being a little more specific and that underscore to separate things just keeps things nice and tidy um so then i'll just drag in this heading and that actually i can copy it that needs to go inside the link which right now my gradients are overlapping everything so that's going to be interesting my gradients are so since this has a class of is footer i'll set it to relative and give it a z index of like 20 that way it sits above those um gradients and we can actually see and click on things um this whole footer link will change to this white color that i have yeah that's pure white um and then h4 for the styles for now i'll just throw in these sort of headings go here and then just in case i need it you never know usually you don't but i'll just put footer underscore link dash text so this is the link text in case i need to do something with that maybe animate it or who knows duplicate all these and then i can start piling them up so i think this goes get involved yeah comes next updates let's do partners and duplicate again the next one is contact and one more i believe is give now and for that i'm actually going to have anything that's like an external link i want like an arrow attached so i already have that in my menu if i go ahead and open up my menu which is um let's see there it is i'll set this to display block for now just so we can see it so i have this little arrow it's inside an out arrow container um i can actually just use that should work perfectly um so let me go ahead and set my menu back to display none um let's see come back over here and then paste that in beside this link so this is in a this is an svg i pasted in and if you use the variable current lowercase current capital color it's going to inherit the color of its parent div so that's great if you want to animate the svg change its color i already have this i'm using in the nav so i'll just give this a combo class of again you guessed it is footer and then i can change the text color to red and that's going to change the svg color for me then also i can grab the overall link block and do a flexbox and that way these are kind of side by side and that's looking pretty good and then i want to stack these in two columns basically so i need to grab a div this will be called footer and then this is where it gets a little interesting i'll do footer underscore uh link contain and this will contain my first three links and then i'll need two of these um so let's see paste in this one that one that one that works for that and then this one that one and that one so they're in two separate containers and i really have two pieces to this i have the footer top and the footer bottom so i'm going to need another div called a footer underscore top and then inside that i can put the two footer containers and then i'll use footer top to do flexbox and then i'll anchor this to the top for now and then align side by side that's perfect i may give these a little bit of bottom margin using ems again and for now i'm just going to distribute these to get them off to the side and then let's see i also have this sort of subscribe box um so i can go ahead and start building that out they're going to want to connect that to mailchimp eventually but for now i'll just say footer underscore subscribe and then uh it can get tricky to think like where do where should you name things like where should subscribe be its own component my rule of thumb is like if you're using the subscribe block on a different page or a different section on the site then you would want to make this its own module like its own component that you could just pull out so instead of saying footer underscore subscribe you would say subscribe underscore heading subscribe underscore paragraph but because the only place i'm using this is my um my actual footer this should be fine to keep it as a child of the footer with my class naming so this is an h4 as well just copy that paste it in here remove that um really the whole um instead of making every single piece of text that i drag in here white that's gonna add a lot of styles that i really don't need i can grab the whole container and set the text color to white here and now any text i drag inside here will automatically be white so i don't have to add a bunch of new classes so then i can drop in some paragraph text and maybe give that a different size and then this was at uh 70 percent uh opacity so this is where i might do um footer so subscribe uh p for paragraph and then change that back down to 70 um and then i can drag in my form so let's see drag in a form block we'll go right here and then this uh this is probably what i'm going to make its own component i don't think i'll be using anywhere else but i'm going to start just with i'm going to have multiple forms so this will be a subscribe form subscribe underscore form and i'm going to take these out for now and then the form container the thing inside it would be subscribe underscore contain and that's going to actually have flexbox so i can put these all side by side then i'll have a subscribe underscore field for my form view and just apply that to both and if we look at the example this um border needs to wrap around all of them so i'll probably apply that let me zero out this default 10 pixel padding at the bottom of the web flow form i'll probably apply that border here so i might set it to like two pixels or something and border color of my color um and then this would be subscribe underscore button and again my color um and then we'll do a radius of 50 so that way it just sorry i'm gonna do a hundred viewport with just to make sure like no matter what size i make it it's always that pill sort of shape um and then i'll do radius of 100 viewport width on that as well on that container the field i'm going to set its color to transparent i'm going to set its borders to zero pixels for now um that should be okay the subscribe text should say that um let's see and then the text inside so i'm gonna have some placeholder text of full name and this is required for the name field and then email address for the second one required an email call um and then let's see we can even grab the whole form and add a little bit of padding inside of it maybe 2 am just to get it away from that text 0 pixels padding on the bottom just close that out um this button i'm gonna add some padding uh using amps as well so maybe a little less here more there um let's see then i have a line so what i can do for this is give this second field a combo class of is second and that way i can give it that sort of left line um two pixels maybe this grayish color for that um actually it was white at um white at 36 opacity so i'll just do that here uh let's do 36. cool cool cool um that is working out all right so i may have a little bit of padding inside these and that should be okay it's pretty close um maybe increase the wants the border a little bit where the radius can go up a little more and i think that's pretty close to what i had and a little bit of margin this border is kind of looking weird i never saw anything like that before it's thicker here and it's thinner at the top and i don't really know what's going on with that can you guys see that um it might be just that i can't use webflow's native container for the border so maybe i'll zero that out and yeah wow the whole way it was set was weird it's like not applied as borders as a whole it's applied to each one of these so i think i'm just going to have to drag another div in that container some of these default web flow things just act kind of weird sometimes subscribe um border why not um and that will be flex and that will be radius of 100 viewport width let's see if it lets me it might have been the way i had this set i don't know but it's just for good measure just dragging a clean example subscribe cool and cool so i like to preview and just compare this stuff um to my like xd prototype so i can see this stuff side by side and see like um how's the spacing look what did i miss what needs to be changed um this arrow actually this uh button actually needs an arrow so i'm gonna add that as a background image and i should have it right here i can make it anchored to the side um custom size no tile um width would be i don't know vm so it would be about the size of the um the text and then we can anchor it from the left just back it out a little and then to offset that i can just add a little extra padding on this side to basically achieve the same effect um and then that partners needs to save this um and let's see this a whole container is gonna have a lot more padding top and bottom in some of my other sections um for responsibility oh yeah why do i use idioms for everything yeah if you go look at um let's see i have a tutorial up right now actually just released it it really helps with uh understanding some of this responsive typography 2020. if you look at that video um it's basically gonna explain this a little better but everything scales like a unit so like everything is locking you see this text isn't wrapping or breaking onto new lines like we typically see or expect so um my design is pretty much staying solid now at a certain screen size like say 3000 pixels wide i have a max width on all these containers of um let's see my max width is pretty much 1400 pixels so at that size 1440 pixels i'm just changing my body font size to whatever pixels it's supposed to be at that size if that makes sense 1.3 it's it's viewport width right now so it's all scaling once it gets to that max width i change the body font size to pixels and that means everything else that was ems is now pixels at that larger breakpoint so i don't have to go back and change everything one by one it's all being inherited from the body so it makes like uh scaling things really smooth uh really easy um so i think that is good for that section i did notice like these were grouped a little bit closer together so this is where you have to get um a little bit picky about this so footer top um left and then inside this footer top left i'm going to drag in my two footer top links containers so it takes a lot of dips sometimes to get things looking the way you want them to i'll anchor this to the top and the corner and i'll grab the whole container and i like using paddings uh in this instance for one reason it's easier to grab the container like if i were to use margins it's a little bit harder to select the container i have to select the text and stuff so that's the only reason i use padding instead of margin right here let me just go and compare this stuff side by side again so i need a lot more padding in between the lines of text i could go with a little bit more padding in between these so this is where i just had to eyeball it [Music] and just kind of get it as close as possible to my original design um that's close good enough and then this subscribe bar needs to be like a lot wider i'm noticing so golly this stuff is off all right so we'll make this smaller for starters um oh my goodness what did i do that was terrible uh okay and then we'll make this a little bit wider off the sides um and then what i could do even is set a width uh using ems again and that way it kind of just forces this to be the wider sort of thing let me see how i was anchoring these two um yeah this was anchored to the top like it's all aligned to the top so that's that's looking okay i think i need a lot more space in between my lines of text more padding in between my form fields uh yeah all right so these i need to make sure not to affect my combo class because that would could really mess some things up and then even here i think these were a bit wider or supposed to be a bit taller um and then here a little bit more padding off the top i mean margin a little bit more padding here a friend of mine taught me this like you keep your um just as a general design rule it doesn't always have to be this way but you keep your headings and paragraphs closer and then instead of having equal space between your heading and paragraph you do a little bit more between the like button or form or component beneath it so it just groups these together a little closer than you see the the form field or whatever you're using um that is looking better subscribe was bold uh just being super nitpicky here um let's see so subscribe need it to be bold this still needed to be more padding or medium medium's fine okay moving on from that i think i spent enough time on that for now let's do the footer underscore bottom and we will go ahead and build out this part so i just need a top bar i think that top bar was uh let's see two pixels at 20 at 12 opacity of light 12 okay and then i'll just add some padding inside of it top and bottom and then in there i'm going to have my um my paragraph and i should have a p2 class no i don't okay so i do need this to be a little bit smaller than your typical um paragraph but and i have another one just like it so these two need to be smaller sizes i think what i can do for that is just one em is the default body font size if i decrease that i can make all paragraphs inside this container smaller without having to create like a new class which is exactly what i need to do here um and then let's grab the copyright and let's make this a link and i'll give this class of footer copy right link it out to my website and i'll make sure this opens in a new tab so they're not leaving a client site and make the font color white and just make it slightly bolder than what it was before i can grab the whole footer bottom and do flex center distribute to anchor those to the corners and then i just need the social media icons in the center so i'm gonna actually create a group for those probably this will be um footer underscore social because i have other socials and then inside that i'll have a link block of footer underscore social link and then from there i can have the icon um which in this case i'll just drag it in instagram um footer underscore social icon all right so the link is gonna be i don't know 2 a.m by 2 a.m maybe a little bit larger maybe we'll do 3 and 3. um and then the background color will be this blueish the radius will be fifty percent i'll apply a flex box to center the icon inside it um and the icon i'm actually don't need a max with it's just gonna be a percentage width of its parent that way if i change the size of the outer circle on mobile the icon inside will scale up i won't have to change both sizes can just do one and they'll both change let me go ahead and duplicate this and let me change out um change this out to be i think email is what i had yeah and then let me grab the parent of them both do flexbox and do that and then i'm gonna do margin left and right on them that way like it doesn't mess up my center alignment um that way it's perfectly centered and i think that's close i mean definitely is going to need some touch-ups here and there for sure but it's probably close to my original design um and then i think i had i'm gonna do less bottom padding on the footer let's see less not more oh i have this min height i'm gonna go ahead and remove that min height now and then i also have this section i was just using as a spacer i'm going to go ahead and delete that i don't need that anymore cool this will give me a better idea of what my footer is actually looking like um [Music] so that is better let's see what we have um that wow not not too far off i mean it still has a little bit of still could use a little bit of tweaking but it's it's actually pretty close um [Music] yeah i could make the circles slightly bigger i think slightly larger 3.2 or something and then on hover maybe we just make these uh which should we make these i have this blue that i've been using as a hover state i kind of like just because it's so bright and different from everything then transition will be applied to all properties just in case i decide to change something out uh outcourt my favorite easing for this and then yeah that's that's that works that works this all works um i need some margin or i guess i could add some padding off the bottom of this top one more so i swear it gets a little tedious and i mean it's close i would say this let's see when we scroll all the way down i may have slightly too much padding on what's the top the top maybe yeah because these are aligning in about the same place but it's like the top might have a little too much padding of the whole footer so i'll back that down a little that's good um one thing that i usually forget to do is success in error states those are kind of a pain sometimes but um i may just style this to kind of look so this was what this was the subscribe so subscribe message see oops i guess success all right and here i'll do radius round it all off background color of blue yeah why not and then make sure to change all these pixel paddings to em paddings and then for my error state that's kind of a rough error um let's see subscribe um let's see let's undo let's do that zero out the padding uh let's do no background color and let's change the text color to red yep that works that works for me so i think that's it for the form it's looking pretty good so i mean i wonder if i want hover states on these no maybe i don't know yet let's see maybe one hover i might change the color to this light blue for now and just leave leave it at that um okay that's cool that's all working i think from there i might want to just so in my menu i'll go ahead and publish my site and check it out i got a couple things on the live site that you're not gonna quite see in the designer just because i have some custom code going on so like these text animations i did a tutorial on those while back and slide in i have this menu where whenever you open it up you kind of can move from left to right with your cursor and then i have a blur if you look in my um my notion code i have some custom code for a blur where you can blur a div so under these uh when the text moves under the shapes you're getting sort of that blur effect and then you can also use a little bit of custom code um to kind of change the shape of them to rectangles or whatever else these also are kind of just hover when you hover over the arrows rotate and change colors so that's where using that custom svg helps because you're able to change the color on hover and i also have blending modes on the nav so the logos being inverted like is when we get into sections like these so it's just a little bit easier to see it than if it was just a black logo on a dark section so that's a couple things uh i don't foresee them adding like um more of these pages in the future but i do see them maybe wanting to change like some of these links like if their instagram ever changed or give now so um it's not i don't think it's super easy to do this from the designer or editor if you're not familiar with webflow just because like this is set to display none by default and stuff so i may make a collection i usually use a collection uh pretty often just called general info and i put whatever i want to reference in there just to make it a little bit easier on the client that way i can pull that in multiple places so i might have like instagram url as one of them uh like that required may have like a give url for another one um and what were some of the others i had a their home page of their main site so their stone home url and what's anything else that i think they may want to change later on contact shouldn't change i think those are the main ones that i get give now in there yeah then give and then i can use those same fields down here that way if they change it once it's just going to change it in both places so it's just going to make it really easy for them if they need to change multiple things i may come back and add to this later but that is probably good for now so i can just get those urls i can get that give url for instance um let's just say general info give now url i forgot to make that one required um let's see i can get the instagram url and the home page of the main site um that works and let's go ahead and make this one required save save what i can do is drag in a collection list now the only bad thing about dragging in a list into something like the footer like this is um you can't use it on a 404 page you can't have any collection list in a 404 page so i'm just going to have to create like a a design that doesn't require the footer in it so general info oh yeah thanks for the compliment on the menu um let's see so general info we're going to limit the item to only show one so like if they were to add this is again going back to dummy proof in your site if your clients were to break it like if they were to accidentally add two general infos like maybe they thought i want to update this let me just create a new one i don't want two duplicates of my form down here so i need to make sure to limit this just to one and also if they were to delete all the general infos i don't want this uh empty state so usually i have something called um is hidden empty that i just use and it's just uh zero pixel height zero padding transparent background and it just hides that empty state on collection forms that i don't want an empty state in um so then from there i can just go ahead and grab the footer top and footer bottom actually yeah yeah i'm going to put it inside the container and i'll drag the collection item both of these go in the collection item so now from there i can get the url of this give now from the give now url open a new tab um i can get the url of their instagram let's see get url from the instagram open a new tab that way they can change this pretty easily and then i will just need to do that for the menu too so the menu if we come over here uh let's go ahead and add menu display block uh i really only need it in these bottom pieces that's where it's going so i think i can just drag in a collection list it would have been smart of me to just copy the whole list instead of having to redo this but here we go general infos i just noticed it said infos that's dumb i'll change it limit items to only show one again and then for my empty state remove that same process add my combo class of is hidden empty and then for my default state normal you can go over here menu links is the container so inside these items i just want to drag each one of my links so oh wait wait undo did i have them in some sort of no i didn't i was getting a little confused i didn't have them in some sort of wrap okay um let's just drag them each in one after the other and okay and then this menu small links what i can do is just uh copy that class because this is kind of unnecessary having to i'll delete that and apply the menu small links to the collection item that way they are flexed i'm not having to create extra classes um give now is again get url from give now instagram get url from instagram cornerstone home cornerstone home okay now if they update it in one place it'll update in the menu and the footer for them and they don't have to worry about digging into this menu and breaking stuff to change things uh that is everything for the home page wow that wasn't too bad i think i need to work on making this responsive next um let me compare eye to eye this footer again yeah my footer was a lot taller like it was a hundred percent vh in my prototype i'm just really i don't know why i didn't notice that before what i'm gonna do uh is let's see i'm gonna set a min height of a hundred vhs so if this content exceeds that on mobile or if they dump a new content into it it's not gonna hurt anything i'll set a flex box of vertical so they stack one on top the other stretch center so now this footer will always be 100 vh of um yeah the only thing i have to keep in mind is let's see on really large screens look how stupidly huge 100 vh is like on a bigger monitor so that's going gonna be an issue um i wonder if max height would work if i can set a max no because min height overrides max height um i may have to just suck it up and be okay with the 100 vh for the actual height instead of using min it's not best practice but i think i'm gonna do it and that way i can set my max height um on the on this one so yeah all right that should do the trick i think that works um okay now i just need to make this responsive so this should be the fun part i mean if everything's done correctly this should be easy so because i'm using viewport with you'll notice everything is like just scaling down kind of like a unit um there's like it's getting a little too small so i'm gonna have to switch either uh increase the viewport with one tablet or switch this to pixels or do something here to make it kind of work better so on this breakpoint um i may just switch it to pixels let's let's think this through let me try and keep it viewport width for here so i'll just increase the size a little bit um too yeah that's fine how's it scaling kind of interesting um let's come and look at some of these other sections yeah i'm gonna have some issues um you know what i'm just gonna keep it pixels so switch it to what was my body font size i think it was 20 pixels but 20 is very large 16 is usually good like for you don't want to go any smaller than 16 um so this sort of is display let me duplicate this one and remove so these combo classes are just to animate the letters one by one i'm gonna remove that for now and set this to viewport with again just that way uh it's not to break on a new line it's just going to keep getting smaller um here again still getting smaller and then here it's a little too small so i'm going to have to increase the font size but it can use viewport with and then that line height is really large i find i might back that down here i think i had that set up for the animation um did i no i guess not um yeah let me increase the size a little bit so now it should just scale it's not too bad um yeah that's that's good oops deleted the wrong one meant to delete this one cool um that's looking good there this is good here these shapes are still okay um things are really falling apart here so i think i'm going to stack the button underneath the heading so i'll just switch this back to block and then this button um let's see i have a heading button h okay i'll give this some bottom margin because this is a class i'm using in the anytime i'm using like this section where a heading and a button stack side by side this will be the class i'm using so i can just do that hey do you always use max with 14 for you on your projects or is it relative depending on the project is really relative depending on the project some projects i don't even set a max with like if you look at project turntable which is one the agency i work for we released this pretty recently uh if you look at this on a really large screen you'll notice it never has a max width it just keeps scaling infinitely and that's really good because it could look kind of silly to just set a max width on a design like this and have some empty space on both sides and even though like the buttons are pretty large on bigger screens it looks okay like it's not um it's not obnoxious so it really depends on your design some designs you'll want to set different max widths um some designs you won't even need a max with it's totally up to you but yeah and then also i guess it would depend on like analytics of that particular client like what do their users typically view the site at what screen size is because if for some weird reason they're viewing it at a thousand five hundred pixels you wouldn't want those i don't know 60 pixels of empty space on each side when you could have just made it span the full lift so just keeping things like that in mind um it's probably smart here i was thinking it could be cool to like make these scrollable um uh i think that could be kind of cool so what i might do let me think this through so i got uh i got 4.2 ems for the margin here so what i can do is on the collection wrapper a negative margin of 4.2 em and then i can set the width to 100 viewport width now usually that would be bad usually that would cause an um some horizontal scrolling because 100 viewport width doesn't take into account scroll bars and stuff but i have everything on my site wrapped into an overflow container with a width of 100 and overflow hidden so i don't have to really worry about things hanging off the edge and kind of breaking with this horizontal scroll that's another reason why like this circle like this can hang off the side it's not going to cause any sort of scrolling but on larger screens um you're actually going to get to see the circle it's not getting cut right there and that's because this overflow is outside of the section container and it's a hundred percent width so um if this circle we're lightly touching lightly overhanging this container we're still not going to get some awkward scrolling um because of this wrapper right here so i like to just use that wrapper a lot for different things um but now that i have this section it's working pretty good um my padding here was 4.2 ems what i can do and what i really needed to do before i did this because i plan to use this list on another page i think i have a updates page in my xd no it's in uh it's a get involved page so this is my i'm gonna have a grid view so i really don't want to mess up this class here um so what i should have done before i started doing all this was create a combo class so i'll just do that is home page and then now i can do that what was it uh 4.2 so my wrapper negative 4.2 ems and then my width of 100 viewport width and then the list itself which is this here can have an overflow of scroll so now we can just scroll from side to side inside this list and then it's going to need margin of 4.2 ems to get it to a line i'm sorry not margin padding to get it to a line right there and then these items these items can be tricky so instead of using margin of um 2em because it's getting cut we're not seeing that margin i can't scroll any further i'm going to have to set the margin 0 and do padding of 2em let's see and now now i can see that it's it's got that padding right there and it's not even 2 a.m it's 4.2 a.m my bad oops no i can't do that because yeah so it's not gonna be perfect but it's okay if it has a little less padding also we're getting this really uh annoying scroll bar here for uh so i just wanna remove that scroll bar so i'm gonna use a little code so i'll copy this collection list class the thing that has the overflow scroll set and i'll go over to the custom code which i keep all my custom code in a symbol you could have put it in your project settings but i like keeping it in the symbol on the page so i'm seeing these changes live um and then i also have this kind of broken up so like site-wide changes are here that way i can look for my site-wide stuff home page only code is here and i mean yeah this is affecting all the all the pages but this is just for my own sanity to keep things organized so i kind of know um you know uh let's see notion let me do a search for my code real quick i like to this is open to you too if you want to use my notion page i have all this code in here so if you just search for what you're looking for like if i type in scroll bar i can copy this uh scroll bar code that's going to remove the scroll bar for me and it is going to have to go right after my class name and now because it's in an embed on the page i should be able to see as i scroll that scroll bar is gone so i'm kind of seeing these changes in real time which is really nice um i may need to increase the width because when i uh when i added this padding it actually made the width of these items a lot smaller by 2 am so i need to increase this by 2 so that would be 3 3 cool so now we got some little bit of scrolling and actually what i want to do like i don't want the client to ever see this because then they might not know that they can scroll if they don't see a little bit of a card hanging out so for this home page module specifically i'm probably going to set the width using viewport with um so let's see 30 viewport width um it can be pretty wide like i'm okay with that uh 52 and 52 and this let's see if this i may need to change some other stuff yeah so it is a little wide that's okay but at least now we're always seeing that card get cut off so we always know we can scroll and here um it's getting a little too small again so i'm gonna have to increase that width again maybe 82 and 82 and that's looking good um let's see yep it's always working and then even here um we start to lose it so here i'm going to need my my containers are getting way too tight i think um even here i probably could have reduced my container size so great thing is because all my sections have the same container class adjusting one of them is going to adjust all of them so i will kind of back this down some it's because it was a bit much um so i will kind of back this down some it's because it was a bit much um 1.4 em so i need to make sure to adjust this negative 1.4 vm that should bring that back and then even the padding inside this 1.4 am okay that's looking better definitely not so harsh anymore um and even here i think here what i'm going to do is set the padding to viewport width that way it kind of scales with the um browser size and that will be better i think yeah yeah that's uh that's pretty good i don't think anyone's going to look at it that tight that small but um yeah because we're getting kind of a weird sort of wrap when the text stack i'm noticing that so what i should have done is this list instead of anchoring it to the center i'll go back to desktop anchor it to the top that way if this text does ever like wrap onto other lines at least the images will always be aligned with each other to towards the top and i may even add i don't know if i need padding here i think it's okay um i may just increase this slightly and increase this slightly just give us a little bit more breathing room um that is looking okay i want to say so now this section is a mess ooh all right this is going to be an interesting one to figure out um so i think this text is um scrolling up and it really needs to scroll horizontally so for that i'm gonna have to change something so if i'm gonna have to get a media query first of all um so let's do media i'll clear this out media query and this is my code for media query right here and let's see so we can go into this code so this on the whole under the home page this is where um i need to kind of just say let's see all this home page animation stuff i need to create a media query for um so the tablet size is 991 is the largest tablet will go so let's see so this needs to say the minimum width would be 992 that way it only shows up on desktop and then i can take all my animation code copy it delete it from there and then inside that media query paste and then save so now no animation here but animation on desktop all the way down um to the smallest breakpoint which is this 992 and it's still moving okay so now i need to rearrange quite a few things um partners this sections i have two columns set side by side i really want this text to appear on top and then this text up here on bottom so this is where flexbox comes in handy you gotta love flexbox so i can switch this to vertical that way these stack one top each other now instead of side by side and then i can hit this reverse order switch so that way this content appears first and then these appear second and then this has its own text its own class um ems i want to set the class set the size using viewport with and then i want to grab the um the list these are all pulling from collection lists by the way um yeah and then is the text that scrolls cms custom code yeah so it is custom code it's um if we go to webflow um css uh more keys someone actually created a really cool uh cloneable that we can use for this workflow css yeah it's this one right here so just uh just google it but basically i'm gonna want to on mobile so i was using this one on desktop where they kind of slide up but on mobile i'm going to want to change it to this one um so i can just open up the code for that and this is that code so what i can do is copy that because i'm going to keep that for this first step is i have two collection lists that are exact duplicates of each other um that way it creates a seamless loop so i want to grab the list i want to use flexbox on them to get them all side by side align to center justify left they're kind of forcing the text to wrap so what i want to do is do breaking no wrap that way it forces them not to and then the collection list so there's two collection lists side by side i need to grab their parent which is this uh this one here and do flex to get those two lists to stack side by side and then um here i don't need that e i'll leave that for now i'll add some margin uh using viewport this time because my font size is going to be viewport so that everything scales um yeah like i want i want a little bit of the next word to be seen at a time so that's probably good um and then let's see what i need to change in my custom code all right so if i open this up um and i go over to my animation the main thing i think like i don't really need the time to change i don't think i don't need any of this absolute to change i just need the direction to change so this keyframes part so honestly this first half i can just delete um so what i could do is keep this uh this code out of the media query so that way it applies to all screen sizes and that way it's right there and then the media query stuff is um happening right here and then this is what all other sizes should do is move to the side let's test my theory um all right that didn't work the way it was supposed to so i may need a media query after all um all right let's see where are we moving maybe yeah let me go ahead and just create two media queries for now and then if i don't need it i'll come back and remove it so this one will be max width of 991 so we're only affecting tablet and then that is where i would actually want this keyframe class right here so then that should do the trade let me just put this back in each one i don't know if that matters but just in case it does i'll put these in here partner slide partner slide move is what i'm moving um which should be where is it partner slide move this thing um it's being positioned absolute is it its parent is relative its parent might need a height let's see sure enough his parent needed a height but we're still not getting any sort of move happening um partner slider move this is absolute it's has no width affect it whatsoever this one is it does have negative ems that'll remove this with can be a hundred percent of its parent but that's not working because i have 100 of this parent because this has padding that i need to remove um is my desktop one still working the desktop is definitely still working so that's interesting um partners slide move and partner slide all right this is my class i'm trying to get it to move horizontally on this breakpoint only [Music] [Music] so this is tablet only this marquee is affecting uh the simplest thing sometimes so this one was called marquee horizontal this one was called marquee vertical the animation name so let me just make sure they're both the same name and bam okay and it's a good thing that i um made these two separate animations anyway because look how fast that's moving i'm really gonna have to slow this down for this horizontal version just because that's like super fast um so i may double this to like 40 seconds and if i need to change it later i can it's still fast like golly look at that um and let's make this larger just like stupid large and more margin yeah that looks good um i guess it's okay at this speed i mean i may change it later i don't know um this uh partner's text i had a width set i'm going to change that to 100 width and then um these sort of modules i have some like this partner so i'm gonna have like modules like this where it's like contained in a card that's full with and i'm going to need some sort of padding set like i really want to be able to reuse that class like say this instance um but i don't know if i'll be able to just because of all the things i'm doing with that hero section even this one i'd like to be able to have consistent paddings on mobile in these sort of contained cards but i don't think i'll be able to like i may have to just add another class this is partners yeah um yeah it is what it is i'll come back to it if there's a better way to do it um this now i'm messing this up man yep now we're not gonna have a seamless loop so let me undo that and redo whatever i just undid okay this is where i want my paddings to be um so i'll do 2 a.m and 2 p.m all right that should be okay and i think then i can add some [Music] bottom padding here and then something isn't quite adding up it's because the height of the slider i need to set the height using viewport width as well since my font size is viewport width because i want this to scale pretty seamlessly and then something else isn't like what's going on here why aren't oh i must have a height defined when this overall card i have a min height to find i'll just set that to auto there we go clear out some of that extra space all right um this has a combo class so i can just move it wherever i really liked how it was overlapping like maybe corner and it has a little bit of animation applied to it um so let's see the overflow hidden div um okay yeah let me catch up on some of these questions guys sorry i wasn't really i got sidetracked on this uh right now all right overflow hidden div basically it's just a div on the site that holds all my content and it's a hundred percent width and the overflow is set to hidden so basically what that's going to do is i can position like say this circle off to the side of the screen and um now i won't have this horizontal scroll that we see a lot of times because this div is like cropping off everything that's not 100 width of my screen and it's good to use a 100 width not 100 vw because vw doesn't account for scroll bars so it'll cause that horizontal scroll anyway so definitely use a hundred percent for your width and then overflow hidden and then just wrap everything like put everything inside that div and just helps with that on the text scroll using the cms collection custom code or using interactions oh i think we answered that question so it is using custom code i'm just using the cms to pull these texts dynamically um i think that's good there so then here again i'm just going to stack stuff this has a combo class of is about so just set it uh to block for now the width can be a hundred percent for this container oof and then i need to this is 4.2 em for the padding here and then remember on this break point i actually changed that to 1.4 am so just making sure that these stay consistent throughout is pretty important and then even this let's see why isn't this spanning oh because this has a width which i'm going to leave here it has a width of 89 percent but and that even looks good there but here it gets to be too much i'll just switch it to 100 um this is getting oh my goodness so squished on this break point was it getting squished on these let's see no it just made it on those so what i can do is uh stack it just like that and that works there um let me go back over here this is all looking great um even at the smallest size yep still good here it definitely breaks so i'm gonna have to uh display black and then apply flex horizontal um center left and then these man what is happening okay i just need some bio link okay i need some margin going on right there do they have a they're in this div needs a 100 width and i can add some bottom padding of em all right that is that's better i think yeah and then this is another mess that we get to sort out so the footer top first thing i'll do is set that to block um these are what's going on here like it seems like you should be stacking oh i have these wrapped in something which is cool um i may take the footer link and set these to breaking none which i should have did on desktop breaking new wrap that way yeah we get some nice clean stuff happening there uh what's going on here i have a whiff set so was it the width breaking here oof okay yeah this was this was breaking i got ahead of myself here um let me set this to block on this breakpoint then and set this to 100 width of its parent um these are good so everything i just did here i didn't really need to do here um because i'm doing it on the higher break point so then the whole subscribe which is this guy i can add some padding just to give it some space from all the links and this stuff all still looks good so that's encouraging um here things are definitely getting cut like that form field and then this is very close um so what i'm gonna have to do is rework this form field on this breakpoint to block and man this is going to kind of mess up my styling some but that's okay i think what i'm going to have to do is i'm going to remove the border here zero pixels and i'll add it to these two pixels um and then 100 viewport width um and some increase some padding here which actually i learned you're not supposed to quite do that because it could cause issues on some browsers so you're supposed to set a height instead um which that is insane all right cool that's better and then just add some bottom margin to these fields and then i'll even make the width of this be a hundred percent on this break point um and then i'll get that little arrow a little bit closer to the to the link all right that's pretty good if that arrow isn't really scaling the way i want it to scale um i may just anchor it here like i don't know that may look dumb let's see it's not i could hide it all together but i think i'll just leave it for now and i'll see what what happens um this has that little bit of gray border from desktop on that side so i just need to make sure to set that back to this color where we're kind of fixing that um this all okay and then also i really shouldn't have a height set here so max height will be none height will be auto and that should fix that issue of it not working right then here i want to grab these display block and that looks good um and then here display block as well and i think i'll center align these so wait up i'll do flex vertical that way it's all centered text align needs to be centered and usually you want the copyright to be well copyright's fine there i was going to put it last but i think the credit should probably be last in this case um and then the padding inside these um that that's looking good i think so that should do the trick that's working we got lots of links on this breakpoint but it's all good just part of it this great ants are kind of doing something interesting i might might shake them up differently but we'll see um that the these uh text is actually underneath the gradient which honestly i don't mind it it's kind of cool looking this uh scrolling text so i think i'll leave that and then i might move this one over just a bit like i don't want it going too far over uh we're having issues here let's see so i think this is my h2s um up until this point it was working fine and then once we hit here it kind of fell apart so i think i'll use viewport width for my paddings here um just to keep it scalable and then my h2s i may even switch to viewport with as well on this breakpoint and a little bit smaller something like that and then these should have been uh display block here and then this would be zero em and 2 am something like that um that's better i think honestly this module might look cool if i just center line and center line everything inside it what's going on here uh let me center a line that yeah i like that i think that could work um all right let's just make sure everything is good because there's been a lot going on that link up top i'm gonna have to fix that some sort of way uh like the nav menu this oof i did have that for a reason okay let's duplicate and remove and this is display i'm gonna have to increase the either the line height or i can just add some bottom padding which i think that's what i'll do in this case just to keep my line height but keep that text from getting cut off um delete that that works cool this is way too tall i think when this size up until this point it was also too tall okay hero photo hero image is no where is the height being defined hero image contain all right so what i could do is set the height using viewport with and that way it's just going to walk in and scale like a unit so it's going to yeah just kind of scale like that um so we're not like losing people's faces and stuff on different sizes here i may need to increase the size let's see yeah that's going to look dumb because well it could work all right let's see yeah it could work um so i'm gonna have to move these over which these are i don't think they're affecting anything else class wise yeah that's gonna have to come over that can come up and over maybe a little that is fine as is should be let me see let me make sure that it's not gonna yeah it goes underneath my text good i just wanted to make sure when it's animated it doesn't hurt anything um this hero button and then you should put your video on the other side so it won't block the settings oh thanks man great uh let's see okay cool thanks um so let's see i may reduce some of that right here some of that margin actually i don't think i'm even gonna be able to keep this overlap it's going to look dumb so what i'll do is just add some margin so it's just not going to overlap the photo on this breakpoint just because there's too much going on all right that is okay still gotta fix the nav bar this is looking not great the shapes are really where it's starting to fall apart i think so i may need to make the scale viewport width which i could do if i set their font size so this right here is why i love ems because instead of having to set the width the height and all the margins to viewport with and changing all that all i had to do is change the font size and now look it's margin scale it's with scales the holding scales and i'm not having to change all these values so it's really easy to switch between unit types and it just makes life so much easier um so now these shapes should just shrink yes awesome awesome all right um this is so good this is all good that's all good i may add a little bit of margin here so it's not touching and then this just looks like a lot what's going on here oh no how is the height of this container being defined because i'm not oh this has did i really have that much uh margin at one point i mean padding i might have um this is still good what about really small sizes it gets tight but this is usually where i stop breakpoint wise even then it's too tight so i think what i'm going to have to do is stack this and this is another container that i think i'm just going to center align everything which means this will be vertical center center and this will be center center as well um ems for the size i don't know if i liked this i guess i needed that much padding on uh when they weren't stacked side by side i don't know um like i'm definitely making some adjustments these are going to have to be just a div block that way these are both in line so that way when the size gets too small they should just stack underneath each other they're not though what am i doing wrong let's do inline block there we go okay and then this should be wrapping um breaking normal i think what i could do that would help is make the margin i mean the padding inside this container viewport with um that's gonna help this not get like too tight too quickly and then here it looks fine i'm gonna be okay with that we'll just call it good um that works this all works these are again the shapes are large so i may do that same thing i did to keep things consistent i did it here so it could be a little larger like three so three part width yeah 2.5 just eyeballing it yeah it's okay it works um yeah we're good then this is where i want to start scaling things so again this is all really getting really tight um let's see what i can do this nav elements is separate from nav menu so if i want it to is this overflow no it's not i could easily take the nav elements and do viewport width for the size and now that just scales down pretty close to seamlessly yeah that way it's kind of locking in and not getting cut off um that all looks good i think we have a home page that is responsive um it's it's working there was quite a few uh pieces that gave me a little bit of trouble i had to say but um overall i think it's it seems to be working pretty well uh scaling across different sizes and stuff i'll go ahead and publish this and um i think that's where i'm gonna end it for tonight guys so thanks for hanging out with me this was super fun i hope you've learned something if not i hope you at least just was amused by my ramblings and talking to my selfish definitely subscribe so that way you'll see more of my tutorial style videos and then i'll catch you in the next video see you later guys have a good night

Channel: Timothy Ricks

Views: 7,842

Keywords: webflow, how to, tutorial, lesson, live, development, website, build, out, how, to, working, real time, client, project, building, creating, webpage

Id: sWqkHtSmX7Y

Length: 91min 58sec (5518 seconds)

Published: Fri Nov 06 2020