Rebuilding the Apple macOS Big Sur webpage in Webflow

[Music] uh [Music] um [Music] so [Music] [Music] so [Music] [Music] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] two hey oh yes this working yep got audio we made it another saturday hey everyone welcome to another how to web flow live i am your host nelson aka the pixel geek um man another crazy week another busy week a lot of things happening in the no code space i hope you all are healthy happy getting projects done and um sharing your knowledge um i want to start out this stream by saying um sharing sharing is what makes us humans evolve and the reason why i got this first thought was um i was wha i'm watching this uh netflix show with my three-year-old daughter nova and it's called storybots or ask the storybots and it's basically uh kids who would record their question ask a question like how do airplanes fly um uh what happens after you flush the toilet what happens to your garbage you know what is recycled so stuff like that you know and what i love about um kids who ask a lot of questions is that each question opens up a door to even more questions and more answers and it's a beautiful thing it's science that's what science is you ask questions but one of the questions that got me over the week was um how is energy made uh and i was more into it than my daughter watching this episode and you can find a clip of this uh on youtube but it was someone who is like very shakily holding their phone or camera or something so it's not really clear but um the the the clip or or the part of the episode shows that like when when neutrons so you have atoms and then so when neutrons that go around the atoms go from one atom and bounce to another one bounce to another one and when it keeps doing that it it an atom is sending a a neutron goes from atom to atom atom um it's uh that's how energy is made it's just going all the way around and yeah and i was like wow that was a very very interesting clip very very easily digestible because there's a kid's show and i was like yeah that makes sense and it made me think about life i always think about life very deeply and and just noticing things around me and if you think about it the smallest thing the atom and how they um if they share neutrons if there's neutrons going around each other uh going from one atom to another it creates energy and it's like you think about it if you share knowledge if you share your food if you share your resources if you share hugs if you share if you share things happen electrons yes i might be wrong i'm not a scientist or anything but yeah and so i'm like man the most basic thing i mean when when an animal eats food or you know and then creates waste and that waste is used for something else in in the world because nature takes it over and then yeah anyways how are you all doing um that's top of mind for the week but um deep thought for the week but hello everyone in the live chat uh first one here stay up late i hope you're not staying up too late because you know these streams are recorded and you can watch it at any time so um i hope wherever you from wherever you are from uh is not too late right now but uh you're saying this is gonna be good i hope it's gonna be good because we're gonna be recreating the mac os big sur preview landing page and um this is not gonna be a tutorial this is gonna be an exploration this is basically a build with me and i'll try to explain what goes through my head as i'm building it and trying to trying to show you uh my attempt at it because i've never done this before i didn't have time to practice this is just me going at it but hopefully it's gonna be good hopefully all right scott welcome back farook welcome back hg is back so live 16. uh john i need some webflow swag yes um this is employee swag but um everyone in the webflow team knows that the community really wants a webflow official webflow e-commerce uh store to buy webflow swag um i wish i can share this swag with you all you know um but yeah we used to give away swag but then the community got so big that we were running out of stock like i remember when we had the community day um right after the no code conference and we ran out of sizes really quick so yeah um hopefully hopefully we can get e-commerce uh a web flow swag store soon who else is here pablo welcome back um nasser welcome back joseph a lot of people are back nice joseph bates ridpath is back 20g colleen is healthy and she's back she's moderating thank you thank you so much for being here i'm glad you're healthy i'm glad you're back in the live chat room um yes muhammad is back nice carol is back thomas thomas from iowa city uh yeah carol uh is from belgium seven p.m okay not too not too late all right sharing is caring yes guano is in the house or in a house either way you're here do what unity does send a swag bundle with the highest tier plan yearly sub maybe i'll i'll let the team know uh yeah muhammad's saying uh do a tutorial of it how do i get to invert text effect like the one in cuberto website ooh what wait invert text effect you birdo i've done an inverted text effect before but um yeah i think uh colleen if you can link uh it's it's uh a text effect where i'm scrolling down and then it ah i don't know you don't have to find it never mind i'll try to find it later all right junior's back yes he is well okay thank you all so so much for being here uh let's get to it so if you're new to the stream if you are not talking chat room but you're just watching thank you so much for being here it's cool if you don't chat as long as you're getting um some value out of these streams and uh learning along with me um these streams happen every saturday at 10 a.m to 7 00 to 12 p.m pacific time and what i usually do is show you something cool to build with webflow or any of other no code tools i'll give you some tips and tricks answer your questions um and review your sites if you want me to right that's what we do and yeah um oh wow okay so [Music] thank you so much to 20g and pauline for yeah for donating to my buy me a coffee page link that right now you all are wonderful i mean colleen donates and also helps moderate and i i already feel like that's too much to ask like i i feel like i feel super grateful so thank you so much for doing that colleen and uh 20g again thank you so much for the coffee um let's get to it where's my screen go all right um yeah before we begin with the tutorial or the build through uh big shout out to thomas or toma he is from france and he was i interviewed him uh in a previous live stream and he built this wonderful wonderful portfolio site of course in one flow and um i did uh two of his interactions in the previous stream and he is an up-and-comer he's only 27. and he says he said that he took a lot of ideas from my previous live streams and my tutorial videos and i i couldn't be more proud of him he this website his portfolio site um let me link it in chat let me close that there we go let me link it in chat um he won site of the day for today on awards.com so june 27th 2020 is his day so congrats to toma uh for this wonderful wonderful website and um like i said in my previous streams about portfolio sites it always starts with the story it always starts with you do not hide behind your name do not hide behind your title who you are is you your face your your personality show that off on your website first you are not just hi i'm john smith i'm a web developer hi i'm jane smith i'm a graphic designer no tomah just shows who he who he is with a photo and then you learn more about his story story first story first and then get into your work but the way he uses interactions is so beautiful so beautiful and i've reviewed his site before i'm not going to review it completely but check out just check it out check it out and um use this as inspiration to build your own portfolio site i know portfolio sites are hard to create because once you're done or even when you're halfway done you already start to hate it and i hate my own portfolio site and i feel like i need to redo it every three months or something but um congrats to toma um oh yeah nice haircut thank you so much yeah i finally got one i was kind of freaked out but we're masking staying healthy all right um next thing i want to talk about story script ooh storyscript.com so this uh landing page was built inside of webflow as well and uh the webflow team in our slack channel we have a channel called made in webflow so whenever someone in the team sees something made in webflow and uh it looks really cool we posted in that slack channel and this is one of the ones one of the team members saw and i'm like whoa this is nice nicely created but more importantly this part here you their product is claiming that you can make automations kind of like zapier by talking to a bot talking to an ai so imagine you're talking in i don't know what they're going to use slack or their own proprietary bot thing but in this example it says after new events are added to the team's google calendar post them to slack after waiting three minutes and then the bot makes an automation for you kind of like how you would connect the dots using zap and you would have to go through each step this does it for you by you just telling it what you want so i freaked out i was like is this real and i noticed that um if you click on try now you can only request access so i um dm'd the story script team i'm like can i see a demo can can we record a demo for the youtube channel i i'm like super excited if this like claims it does what it does and they said they don't have they don't have a demo ready yet but when it's ready they'll more than happy to get on the stream or on the youtube channel to record a demo so i'm really excited about that so that's coming soon to the channel again what if you can talk to a bot to say when some you can just tell about when someone submits a contact form on my website send me a text message and save the data to a google sheet or to air table and you don't have to connect the dots like this bot will do it for you i don't know freaking out about that one that would be so cool right all right 21 let's get into it mac os big sur mac os 11. so what we're going to be doing today in the stream is the first two sections we're going to do an interaction with this zoom out and then this right here where the laptop sticks moves side to side moves to the right zooms in moves down to the left um and yeah and that's it we're going to just stop right here it's already super complicated and i'm gonna again i'm gonna tell you right now this is an attempt this is it's not gonna be perfect i'm gonna do my best with the knowledge that i have and explain what i'm doing explain what i'm thinking explaining how i'm trying to overcome any obstacles or any mistakes that i see myself doing i'm not going to have time to go into responsive with something this crazy but maybe it'll help you learn webflow interactions okay so these are going to be advanced interactions you need to understand html css at least the fundamentals of it you need to understand the basics of webflow interactions and all uh child parent relationships in elements and also css positioning so yeah that's a lot and i hope you get something out of this all right okay and if you want to follow the progress if you want to um just duplicate this project you can do so right here post in the chat we believe in you nelson ah thank you stay up late and if you have any questions as i'm going on um i won't be able to get to it because i want to focus on building but colleen our wonderful moderator she will note it down and i will get to your questions around 11 30. right isn't out about an hour from now okie dokie uh let's go so i already have i've already uploaded the images i found their images by like going through chrome inspector or chrome dev tools so i downloaded them and just re uploaded into webflow and i looked at their font and they're using obviously the san francisco font that's apple's actual font you can't touch makes sense but they do have a fallback and i looked into their css and it is lato lotto lotto one of those all right so i've already set that up everything else is just clean blank project i've done nothing before like i'm prepping a magic trick or something all right here we go the first thing we want to do is we have this zoom out effect and then it seems like sticky because it goes like once i zoom out then it goes up uh already my brain's hurting because it's like you know when the fan starts to turn on on your macbook or something or your computer when it starts processing a lot so my fan is like spinning up a little bit right okay nothing new okay so let's do a zoom out uh what am i gonna do zoom out oh my god uh okay so i see that there's two divs an overall div for the scrolling and another one for the stickiness so i'm gonna bring in a section and we'll just make this height taking its random number 500 vh vh being the um viewport height so 500 times whatever height the browser is to rename this class to hero and let's also change the background color to what color is this i didn't get this color okay oh cool right there just get that so let's just get that hex color um background radial gradient so the first one is that then the second one is that okay cool okay i think i need to flip it okay i'll take that oh because it's ah okay let me save this uh save that color midnight so the gradient isn't really showing because um the height of this right so i'm gonna remove the radial gradient from here and we need to you need to figure this out i'm guessing i'm guessing we're going to go ahead and make uh make a a sticky yeah relative well let's make actually if you know position absolutely hero oh no no i need to put a div and i'm going to call it bg hero so this will be the background um it'll be position absolute with a hundred percent 100 vh and this is going to hold the i feel like i'm already doing we're just gonna keep going all right something like that so as i scroll it shouldn't uh and maybe it should be position sticky because as i scroll it shouldn't move okay so maybe this hero shouldn't have a height okay so that hero doesn't have a height i need something to create a height so that way as i'm scrolling i can make interactions happen but at the same time i need this gradient to not move because as you can see radiant doesn't move so oh my gosh this first section is already hard oh my gosh i need something to okay what if i put another div and call this scroll track meaning this is the thing that will make it large five thousand yo hundred try this okay yeah not working not cool but whatever um all right something like that not liking this not liking this oh i forgot to put zero okay okay so this zero right here you have to tell sticky where do you want me to pin to and so zero is exactly at the top of the browser um let me put another section just so i can make sure that the stickiness is working using a random number 200 vh go okay all right oh sometimes stickiness is like sometimes stickiness gets you into sticky situations i think it's mandatory if you're a webflow employee to learn dad jokes all right so this works our scroll track is is what is creating the height of the hero and if you go through webflow's uh sticky uh webflow university article on position sticky it tells you you cannot have any parent elements with an overflow or a height [Music] body bg color i don't want to put the body tag with the um with the background color because um because the rest of it is white so it's just better to put it on the somewhere inside the section all right okay so we got that one cool um i still feel like this is gonna this is not the way to do it but let's just keep going because if you just gotta keep building see where life takes you yeah okay um do i put it in here oh i'm so confused okay so this div this is going to hold the um the macbook and wondering is the macbook background image or it's just a bunch of divs that are stacked on top of each other oh man so let's see here uh i'm just gonna call this hero macbook macbook pro mbp uh let's go ahead and set the height to 100 of its parent and let's go ahead and black center center that way whatever i put in here which is the macbook actually let's put a another div and inside of this is the macbook okay hey i really feel like this is not going down why is this oh the macbook has a bunch of space below it oh yeah the image has a lot of space float right here all right all right now we got to put images on top of it um i scroll down okay so this is my macbook oh wait what's easier to stack things on top use grid that way you don't have to use position absolute you can just do a one by one grid all right in here i'm thinking here i'm gonna add a grid and we're just gonna say it's one by one we're just gonna stack things off of each other um and see where life takes us all right so zero in you okay and so usually you do position absolute and stack things on top of each other using z index but what if and just up wait wait i have to make sure that this is manual okay and look even if i click manual you don't have to give it a class name put you in here manual one by one okay see they're on top of each other um oh but you need to be in a div okay nope you need to be inside of the laptop right so let's put a div instead and this is gonna be manual one by one and we're gonna say you are hero macbook pro screen so your the contents of whatever's in the screen but now we need to make sure that you fit inside the screen because it's taking up the whole div so i'm going to use percentages 75 and we'll center that right so 75 is not it that's 64 we'll do 24 vh nope not it okay okay we're getting somewhere and we'll also use not pixels but vh so let's say 1vh oh i feel like this is becoming like my nintendo switch stream where my brain just broke had a headache after the stream i hope that this that doesn't happen today maybe 64.5 i know good 61.5 nope 0.2 60.5 okay do something like that and um so i don't have to do position absolute and stuff like that we'll set this one as a grid as well and one by one go so now i can stack things on top of each other if it's position if it's position manual uh so let's go ahead and put in that hero inside of this grids inside of grids okay we're doing it i feel like this needs to be smaller maybe 83 yeah too much bezel it's not going to be perfect all right we're just going to go 24 cool do that okay maybe 95 there we go okay so we're here let's make this manual all right um and now let's do the first thing i'm going to scroll back up and um so it starts off really huge and so my thing is what if you can just take this and make the transform scale really huge um i'm guessing it has to start at three so let me move that and we're just going to go into we'll just go straight into interactions now because now i see that i have to make sure that it's big on the first load so let's go ahead and interactions and [Music] we're going to use the scroll track as the element trigger plus while scrolling in view so this creates that um parallax effect or whatever play scroll animation and let's start i'm going to target this at 0 we want the scale of this to be intense say three three times its actual size right uh and then when we get to a hundred percent we're gonna go to one i preview what happens cool i know there's a bottom but we'll get there okay okay we're getting somewhere with the stickiness happening we're getting somewhere move this up a bit to 30. and if you're a beginner at webflow i know i'm going fast this is an advanced walkthrough but maybe just sit back relax and see the possibilities of web flow okay okay okay we're getting we're doing it okay look at that so we're doing that zoom out and all that zoom out was it's that scale down here all it is is just scale so at zero percent we start out at three three on the x and y and then at um thirty thirty percent you get back down to one all right making sense anyone in the chat no we're good cool all right so i'm feeling like this image also needs to be centered because look how centered it is it's 100 so let's put some padding um i said center center but or i said this one isn't i don't know i don't want to use pixels so if i set it like that what's the interaction gonna look like go back to it preview okay okay we're doing things we have our zoom out effect so my mind right now is okay that was a little bit easy i feel like i've set something up in the beginning somewhere here that is just going to bite me in the butt later in the stream but we'll just keep building and hope for the best okay uh hero macbook pro all right so we also need some text inside of here to say uh to say the things what why is that here all right well okay anyways um here let me publish so you can follow along go it looks like this and if you scroll down we have some overflow issues but whatever here and i overflow if cool i fixed that cool no more horizontal scroll bar doing it we're do wait we're not doing it too big it doesn't go zoom out all the way but yet here it does or does it oh it doesn't okay that's fine whatever you can fix that scroll track hero and see that's what happens with responsiveness you think you got it but you don't i'm going to make this small oh let's make this smaller 0.7 or eight okay it looks good there the grid may come back to bite you as you want to split up the four windows uh well that's why i like grid because i don't have to use position absolute so you'll see you'll see but you may be right we'll see oh it fits oh every every ever sometimes you gotta you gotta celebrate those small wins because there's more small wins than big wins all right so we're here we need to add okay so we have this image which is inside of the screen um okay so inside the screen we need another div and this is going to be manual so it's on top one by one and we'll go ahead and this is a big sir that's the text inside of it here's center cool cool and in here we're going to have a text text blocked in there and what's going to say mac os big s sir and everything inside of this is going to be font weight 900 we'll make this 7vw and i'll be 12 vw 10 and 10. and everything's white and big sur is bigger than mac os so we'll take this one max less that cost and a cost smaller everything inside of there will be centered something like that yeah yes no something like that and so if we zoom in okay no that's not what i wanted so maybe this big sir needs to be here manual um okay but on top of the screen so right here okay cool yeah um i guess i can just use as okay so that has padding i'm guessing this one needs to have padding too because if i do center gonna push down there i don't want it there but how's it gonna look but how is it gonna look in this ah it needs to be on the center of the screen um okay and as with everything i don't know what i'm doing i'm just guessing but we'll see no i don't want you to [Music] bro is the hole what am i targeting hero oh the whole thing okay i don't want to do the whole thing i i put myself right here the big sur is yeah right there okay i guess i have to use position absolute to be on top of this um or something oh geez fixed full get rid of that so what i'm doing is i'm putting this on top of everything okay okay what i did was position fix meaning it's targeting the body tag and it's never gonna go away okay so no matter how far i scroll down it's always going to be there but with interactions what i can do is on the scroll track when i get to a certain point i want it to fade out so that's what i'm gonna do so it's a child of hero and for the scroll track i'm going to make this fade out so let's do that so i'm going to target big sur and at zero percent the opacity we're going to start at 100 and then at 30 percent of the scroll track i'm going to set the opacity zero go um i'm probably at this point like 33. oh i can't do a display hide um this might might mean the butt later but we're gonna keep going preview cool so maybe i can here's theirs okay so it fades out faster than mine so i can do is take this animation and say at ten percent of the scroll track cool all right woof um [Music] oh yeah okay yeah that works that works moving on moving on what's next what's next apple actually uh quick thing um there was a conference i forgot who was doing the conference but vlad spoke at the conference um i was assisting pablo stanley at a web flow workshop that he was um conducting and three people at the workshop were actually from apple and um i showed them that i did the apple arcade landing page inside of webflow and all three of them were like what and like yeah with no code you guys can use it oh but i doubt that i doubt they use webflow at apple but it'll be really cool if they did at least for prototyping if you're from apple and you're watching this hit me up say hi um yeah where was i okay so uh now that we have the zoom out we need these four things coming in so let's start with the map because it starts at the top left right so i'm gonna open up this grid the screen and again the reason why i like grid uh is because you can overlay things on top of each other so let's go ahead and put our map inside of the screen right there manual boom cool and we're done no just um so what's the what's the ending point of this what does this look like at the end okay so it's there's some padding here and here it's a bit smaller than what the screen is showing so um i'm clicking on this i knew this was gonna be a problem can i say z index this is a problem i'll deal with it later okay let's make this smaller all right actually never use this i'm going to use percentage 25 we'll start at 25 right something like that so 70 is going move this away from the top a bit one vh something like that one vw or no one percent like that cool looks like it apple uses dreamweaver mx 2004 that used to be my jam oh use g-seven also i must use let's have a huge theme yeah yeah webflow cannot handle all use cases so whatever they're using at apple probably works for them and webflow they probably took a look at webflow after that conference after that workshop they probably brought to their colleagues and they're like yeah i can't work inside of our enterprise which makes sense webflow never started as a enterprise type of tool and we're making steps uh to find out what enterprise needs so we can get there um yeah and if you look we just launched the webflow.com enterprise there's a new landing page for the enterprise we're trying to learn what do they want um all right so we have this let's go ahead and do that zooming effect go back here uh scroll track interactions what we got this happening it looks like we just need to move this guy to the left so when at zero percent let's just move him to the left and get him get him out of the way we don't see let's not use pixels i'm down here at the move i'm not going to use pixels i'm going to use w or v whatever let's use percentage way just 100 you're gone cool and then when you get back here once you back at zero percent see what happens cool that's basically what they're doing right just moving it yeah we're just moving it from left to right oh okay have fun that's my daughter and wife a fam yeah so they're just moving from left to right and the thing that's making it look like a zoom out is the overall wrapper and so there you go that's it and one thing i suggested when i talked to the um people from apple at the workshop i was like how come uh it would be really cool if you did more of a blur effect because if you think about it when you're looking at something really close it's blurry and so when you pull back from it it becomes less blurry so webflow interactions i'm going to step it up a notch for apple for this image i'm going to also add a filter and this filter is going to be blur and we'll blur it by 10 pixels and by the time you get here to set the filter to be blur zero pixels so if i preview you have the blur happening and watch maybe 10 is too much yeah ten is too much i'll go back to five but that's what i mean that easy let's go to five stepping it up stepping it up a notch and talk is five too much try one can you imagine writing this in code what i'm doing right now no all right i'm gonna try one more let's just do two and we're done with it publish so you all can see wd yeah seven yeah hello nelson hello how are you doing check it out fresh yeah see that blur effect adds some style points to it boom next let's go for it uh let's go ahead and do let's do this we'll go around a circle counterclockwise go ahead and put messenger or messages google is messenger apple is messages all right so let's go here i named the image let's rename it to um apple maps this image we should rename it just for cleanliness um that's hero desktop all right moving on uh messages there call this messages manual one one nice uh let's see here okay yeah oh this is next because okay we can fix the order later and i'll show you why grid for overlaying things on top of each other is so much more better um you'll see later so we got to put that in the bottom left so where it hits at the end is down here um here put it back easy okay uh how small is it and smaller than maps again we're not going for perfect we're just learning 50 of its parent okay cool whatever and then it's like okay oh yeah we have the dock got to put the dock does the dock come in too okay cool so i need to leave space for the dock i don't know how much space so i'm just gonna eyeball it um margin bottom 10 vh something like this this one will say percentage we'll just throw it there and we'll fix it later um okay so how does that come in so it just comes in from the bottom left so i'm guessing i have to do x and y so let's go ahead and do that to the interaction click on messages we're targeting messages and at zero percent we're going to move using percentages and get out of here 100 and also say positive 100 pushing it down off the screen let's duplicate this move it down to 30 and we'll set these back to zero and see what happens excuse me oof i hit the mute button on time all right here we go yeah yeah is that it did i do it right something like that all right if you're cool with it i'm going with it but yeah as you can see with some fundamental knowledge of everything i talked about with at the beginning hml css positioning grid uh child parent relations you can get a lot of stuff done but i know this is kind of intermediate to advanced again hopefully you're having fun watching let's add a filter and we'll do that blur effect because as a suggestion to apple add a blur why not doesn't hurt or does it does it her performance probably looks fun yeah not too hard too hard only 1102 we're probably not going gonna get to the second section um let me know in chat should we do a part two of this if i don't get done with the first section in time blur effect is quite cpu heavy though okay so that's why they probably don't have it but for this demo for this exploration we're adding it yeah they probably did some tests speed tests load tests or whatever and we're like nope not good so makes sense uh next let's go ahead and put safari so safari is supposed to be under this but over this so so safari is supposed to be over maps but under messages so check this out if i bring in the safari i can actually put it in between those two and watch bari and annual one by one and it's already in between because it's in between right here in the navigator you know if i want to change the order if i want this on top of everything i just bring it down i want this behind i can just go like that much much more visual than using z index and saying okay this is the index one this is the index two this is z and x three i can just move it thanks to grid rid is your friend all right so let's center center because i want that i feel like that's directly centered on the page or i mean in the macbook so yeah there it is is the map showing a bit okay so maps is showing a bit so let's 260. yeah something like that um we just how is this working so it's moving off to the side and bottom so just x and y 100 100 percent cool let's do it to the animation to the interaction do the thing and take safari go to zero percent and say move out of the way you're not supposed to be on stage yet duplicate here zero zero preview cool cool yeah it's just rinse and repeat love it all right let's remove the filters but as you all saw how easy it is to add filters but there we go all right last one we're adding uh adding this guy the new thingy we call it thingy settings quick settings yeah uh style panel so we can leave the interaction we'll drag in the settings that right here um there you here and hey luke what's up peta hi ripple effect is back katie welcome your circus is back 30. um quick settings annual 101 uh to the right cool you pushes the bottom bit so we're going to do 1v8 i think and this image is way too big guessing we'll start at 10 okay cool 20 even number oh it's all the way to the to the right okay that [Music] could be one percent 1.5 oh okay yeah we'll take it cool um and i'm guessing this is at the top right okay yeah easy peasy scroll track go back to it quick settings and we'll move 100 percent to the right and um hold on it up yeah so negative 100 on the y so it moves up right click duplicate drag it to 30 percent zero it out to its original spot preview and you're done publish bam cool blacky keyboard huh uh yeah logitech g610 my wife hates it like why do you want need a mechanical keyboard and i said why not it makes me feel cool like in those movies anyways okay cool uh yeah so let's let's fix this problem right here so the problem so far is the words big sur is not showing up how do i get the words big sir in the center and on top of everything else so let's try something else instead of position fixed what if i put it in the screen hmm what if i put it on the screen oh man i don't even see it what where'd you go where'd you go um john mr john shaw thank you so much you are the chewbacca to my hot you're the chewbacca to my han solo thanks to your valuable and clear teachings able to offer butler as part of my creative services yay uh you have a question in a previous video your designer friend advised on setting line height to 1.3 dash what's the reasoning for this ooh i'll ask him he's not a f uh he's a friend he's a friend uh ryan he actually works as our lead brand designer over at webflow uh he taught me this and i was like okay cool i didn't really question it but yeah we'll we'll ask him what does the dash mean actually when to use dash for font size uh css hmm i guess i have to read into this all right where is this type i can't see why is the type not showing up so this is kind of making me confused because i have a z index on it still okay so fyi let me undo i figured out the problem all right so i don't have position fixed here but what webflow does is it saves any of the styles you create even the ones you can't see so if before i had this position fixed and a z index of negative one if i remove this the position fixed is gone however in the background still hidden z index negative one is still there right so make sure to remove anything else for removing the the parent style yeah i know it's one of those things it's just you learn through experience um okay so you delete that so if i delete watch see uh all of these these three things if i delete this if i delete that so it's no longer position flex but if i put flex back all three of these are still there so delete holding option and then delete all right enter this oh it's not centered what if i put you in here okay okay all right all right okay i want you here um let's go scroll track it's a feature not a bug yeah i don't know sometimes i like it when it stays there because like if i change my mind like oh no i want these grid settings back then it's still there oh oh like one of those things got to take a survey that's what our ux our product product designers yeah i think that's what our product designers or researchers someone project manager who's who's supposed to do all the surveys and stuff user surveys the title for that researcher project manager questioner all right so big sir the opacity goes there to there opacity zero how come your opacity is not going zero [Music] this bug probably i don't understand any of this refresh i'm going to save refresh product owner probably again thank you john for the coffee roll track okay so this is what i want to happen i want to take this big sir the opacity it works here that's cool now show me that you can work here oh that's why i have it set as siblings not supposed to be a sibling must be all elements there we go all right oh it looks like a mess right how about we start out with big sir um having a scale do our best to keep the scale what it's supposed to be it doesn't look centered on the page or or here [Music] oh oh point five this is not the way they did but it it kind of works okay kind of works i just need to make sure that uh the type moves up as everything's scaling down move so we'll start out um vh [Music] the y will do start out at zero and then it moves up ph and yes five no moving upside okay five positive five vh now you're moving down way too much right that's fine okay you're not supposed to be moving down so i'm guessing it's up i got my up and down backwards that's fine keep trying okay cool and let's make this happen sooner five percent oh okay i guess i gotta play around with this [Music] uh okay i don't want you to scale though so okay brains gonna hurt soon oh stop scaling we're near it i'm gonna leave it at that and go for the day grace that seems a bit of a tool flaw okay i'm agreeing i'm agreeing grace how frustrating could that be if you didn't have the experience not hating on webflow love it but maybe consider yeah what if their styles panel uh what if the styles panel had a hidden style but um it had a blue dot or something what i mean is um go to grid and notice how grid is closed right i'm not editing my grid but this blue and orange dot indicate that there are um styles hidden within it and so in order to see it i have to click it excuse me so um i'm guessing that should be a um apparent somewhere in here so like for position put the dots right here or add another row and say hey you have some styles left over i don't know maybe not a product designer but yes we'll we'll fix this feature there's so many features that need to be fixed but as with everything software nothing is perfect and um yeah the more the community tells us what we need to fix the better for everyone yeah are we done with this first oh no no not yet i have to put some copy underneath but here we go that pretty cool yeah i mean it's smooth though velvety buttery all right um okay so now here's the next problem uh next problem next problem this this moves up so it zooms out to reveal copy and then it moves up and so how do i do that how do i do that your designer has entered the chat if one of my employees my employees one of my colleagues uh are in the chat you know feel free to talk it up with the community and he's already got some from john and colleen today and 20g but um i'm actually to be honest i'm not using the the coffee fun or coffee but i am in some way giving it back to the community by um making sure that these streams are at least high um some sort of good production quality uh thank you again to everyone who's donated before and um they were able to help me get this new stream pc and that's what i'm doing right now i'm sending a video signal to the stream pc that the community has graciously donated to me um and my next thing is make the camera quality better so i'm trying to gain donations for a mirrorless camera that i can hook up to the stream pc so yes the thing again here's thank you to you all the pixel gate community all right how am i gonna do this i don't know so you need to move up but you only move up when i get down to the bottom so um it's probably one of those things that has already bit me in the butt but uh oh here you're sticky but you're a height of 100 vh okay that's fine the scroll track is what's the scroll track is what's telling height of this i'm wondering if bg hero doesn't even have background color um geez uh use black magics i don't know what that is i need to read up more on video stuff move up its container if there's no container okay so the container of bg hero is hero saying wrap this phone uh here i think i'm getting you i'm i'm getting you uh yeah let's remove this background and i'll come back to it we're just gonna call this macbook pro wrapper plastic wrapper um and then so when you're done with the scroll track though this is with the scroll track so should this macbook wrapper this have the height of 500 v8 oh god i'm trying to uh how come this goes away all the way to the center why is this in the center oh because this has a height of 110 okay that's fine 100 vh i want you back at the top okay we're good we're good okay so you're back at the top this wrapper has the 500 vh the scroll track i'm going to remove because i want interaction to want the interaction to happen [Music] with the macbook wrapper instead of a scroll track because now this has the height please still work okay no man um because if i scroll down that goes up with it i don't want it to go up um can this sticky so this is not going to be not going to be i do this and this it won't work because the parent this right here has overflow of hidden so if i reset that overflow scroll down sticky works okay okay we're almost there so let me fix this so start when it's fully visible preview okay we're good we're good and then it goes up okay feeling good on a wednesday right now um that's sticky 500 sounds like jeopardy sticky for 500. now let's put another div and this is going to hold the hero copy all this copy is centered and it's going to be white obviously i won't be able to see it so i need that background color and i'm guessing let me put a div for the dg hero color thing fix the index negative one just need to see that color and i'll figure it out but the later one should have should have seen it by now where are you oh [Music] i don't know why that happened but it did um yeah but this won't work because if i go down to the next section maybe stay up late was right and do it on the body background and then just setting the next rows all as white that this yeah no but it would take up the whole thing need this to float on top so relative there we go okay well okay so what did i do hard to recap but um bg hero color is fixed but i did um z index negative one so it's to the back it's behind everything but any other row will be on top of it using position relative and it has a background color of white so it overlays on top so if i preview to the top cool and so if i put copy in here um hero copy just put in um a rich text just for now oh okay okay look at that we're doing things we just need to move this away sooner so uh hero copy what if i just add some ridiculous margin oh okay okay so i have a margin right here for this hero copy i have a margin of 100 v8 so this is not adding to the height of macbook pro wrapper 500 vh and so this needs to be a height of um auto and then this can have an origin like i don't know i'm trying it 500 v that goes like that and that goes oh you need to go away sooner why aren't you going away sooner uh uh something there's something something ah there's something something something you should move up i need you to move up i don't want to move you up using interaction because i feel that that doesn't stop margin yeah that's what i tried with hero world cup hero copy i call it hero copy oh yeah i'll call it content why did it do that okay there i am oh and i can just do padding no of course not get away from the text okay i'm going to use interactions fine animation of the height of the okay okay okay animation of the height of top margin okay right here you guys were watching as good so this okay that we're talking about but look see i needed to go away faster so that doesn't do it so i'm going to do it in interactions here you're fine you you're fine that bottom margins oh oh okay look at stay up late with the options okay wait am i making the um okay maybe it's the oh wait wait not padding you're probably talking about margin okay wait okay so if i go like this now see that's not happening not put it's not pushing down because it's sticky so what sticky does it makes it fixed up into a certain point and so yeah it's not not doing it but good try good try we're all learning so next option just make it go away oh uh oh i broke it i broke everything oh how come it's happening so late that was weird starting at 50 um help i don't know what i'm doing wow okay i guess i need to go back you go back what i'm gonna do is this hero content um this hero content should be doing the height your window is higher now yeah window is higher now right so hiro that but nothing's going beyond here that's good wait oh well it's overflow hidden wait it took off the overflow hidden why did i take off overflow because sticky doesn't work with the i don't need no okay fix fix fix i need to know i don't even see my oh one of these things is not doing it right the div block in between position is static or hero yeah it's supposed to be well i mean position static for oh for hero content static it's supposed to be because i want to i want this content to dictate the height of the hero section or the oh supposed to be in here ah there it is i just said it out loud i want the hero content to dictate the height of the hero section no that was wrong it's supposed to dictate the height of the mbp wrapper which used to be which gives it the height okay well let's see here okay okay so that's why this needed okay this one has additional flow and this is supposed to be sticky zero go away ah we're i feel like we're back to square one less oh oh look at it yes i'm confused on what i just did but it's one of those things like i don't know why it's not working i fixed it i don't know why it's working okay okay okay okay okay okay i'm just clicking around i'm sorry if i'm going too fast everyone okay it's starting at zero yes yes yes yes and then go up go up okay it went up too slow but it's okay we can we can fix we have the technology this happens to me weekly i know right you just like click and click the click it works why i don't know just keep going um and yeah i'm gonna give uh not give away the um if uh colleen if you can put the uh clonable project link so at the end of this you can uh clone this and just reverse engineer and explain to me what the heck i just did on the next stream um 500 vh is too deep yeah we're just playing around with numbers so yeah we can tighten it up a bit um we'll go 400 400 okay there's a lot of scrolling still happening from here to here so i'm guessing it's the interaction that we just need to tighten up so instead of 30 we can just send all of these if 60 see where life takes us yeah oh yeah yeah the lemons okay yes yeah let me get the uh cloneable link sorry colleen i wasn't um explaining it right but here you go so you'll be able to clone this with a webflow uh account you do a live zoom speed run with four builders um yeah if you want you know what i'm down uh that would make my brain hurt even more but yeah i'm down for a speed run um we have the technology nelson have you ever watched the sixth million dollar man um no it costs too much to watch that uh sweet so let's just put in the copy and we'll call it a day and i'll take questions um since i'm taking questions late i'll stay on a little bit later but i really wanted to get this part done so let's copy the oh you can't even okay there we go let me just um weird put in some copy put in some gappy eat so proud of you all thank you so much pasta um so they have this as h1 that's cool then this two oh h one two paragraph um and then we'll just end it okay so this is hiro gappy stuff or we'll say hero rich text block rtb the max width of i don't know 500 550 center that it looks bigger than five we'll go nine and 16. paragraph all paragraphs within this rich text block is how big is this and okay looks like hero content needs a little bit more space or so happy this oh i'm so happy wait it doesn't work uh it's not perfect because this was supposed to reveal this ah um not perfect use inside of this go ahead and make it 80. then he runs inside of this is oh that's not it lastly 28. move this actually move it and one let's down a bit lastly cool publish something like this oh we have a what do you call it it's not a widow is this or yeah i call it orphanage life is teaching me type cool call it a day you even need interaction to move the hero if not sure oh yeah yeah you do need interact you might i don't know yay cool something like that um oh rain that was fun headline under the computer but not yeah i i think yeah i want to do more but i want to take your questions too i want to give you all time to ask your questions um let me go check him question um oh wait okay so stay up late says if you want to hear how we use webflow in our big four dev team what's big four four accounting firms big four holiday parks big for your accounting firm uh yeah uh um can you dm me stay up late i would love to know more i shared info on the webflow virtual oh you're gonna be a speaker yeah webflow is going to do a virtual tour and they're looking for speakers so check that out um people want a part two of this okay so next week we'll do a part two of this we'll get down to the second section and see how to move the laptop around uh luke line height 1.4 num unit measure powerful yeah i'll i'll ask brian about it okay cool yeah dm me and let me know if you like get on the stream or something like how i did with tomah hey john if some older browsers don't support some of these webflow advanced webflow effects you just add the webkit fix in the custom code section oh thank you stay up late answer that question matt is asking how do you make the text wait in place like on the original page uh oh well you saw how i did that you even need interaction to move oh okay not much uh questions today um if you have any other questions about webflow web design if you want to show off what you're working on your current project or you want me to review it give you feedback on a project that you've done inside of webflow let me know this is your time and if we don't have questions then we'll just end on time but yeah that was fun that was wasn't as hard as the nintendo switch stream so that hey notifications on your page on your page the text scrolls on apple page under the computer and then it's yeah that's one of those things i need to figure out to hide the overflow on here i don't think you can hide overflow oh oh no you can't hide the overflowing hero because there's a there's a um position sticky doesn't like overflow oh yeah i still have that problem where um i have a horizontal scroll bar so this is broken still but it's one of those things gonna figure it out but this is as far as we got in an hour this this is hour in 20 minutes so imagine what you can do in a full work week uh what do you think of this site i built oh if you have a link um just put your link but don't put com or whatever the top level domain is uh remove the period in the dot com just put like parentheses dot parentheses okay fight overflow x on body oh yeah yeah yeah here we go this is what uh diablo is talking about so webflow doesn't have this option to overflow hide on us on one axis but css does so what you can do is uh take a embed drag it to the top add your own custom code style and we'll say the body tag has overflow overflow x as hidden and the style tag and and you're done so that way you shouldn't be able to roll left and right and that fixed it yay simple fix i need to know your name stay up late or i'll just call you stay sweet okay we have some questions that are about to come in while i'm waiting for those um by the way i want to sign up for the slack channel and the up-and-coming uh community website for all of you pixel geeks please sign up there and i'll send you an invite basically it's a a form a web flow forum support board that i feel um to be laid out and i'm using zapier to run it all and member stack it's free join up and help each other out hi ben how do i dm you guitar so much for the tips ben and thank you so much for watching throughout the whole stream very nice and for everyone else who started watching from the beginning all the way to now i mean thank you so much you you're spending your some of your life time with me and i appreciate that so so much it it um asking for someone's time is a lot it's it's all asking for a lot so the fact that you all would do that e-hive learning academy done in webflow buzz hey so uh joseph bates yes welcome back joseph [Music] okay uh what the here so a careful is this life type yeah that's life type careful with um with these type it's going to the next um section okay so a couple of things go through them uh watch out for your text that goes on to its uh the single line uh like i was talking about earlier it's called orphan i think you don't want these orphans plus this is a kindergarten uh a learning academy no orphans on everyone to be happy in groups so put this all in one line put this all in one line uh i love the type of the font you've chosen cool drop downs i really like the interactions that you did for the drop downs right it's very subtle but i see that you have a inner shadow hover effect on this contact us very subtle job with that um maybe make it less subtle make it more apparent um yeah i like this mega menu it's nice um so type hierarchy um for instance type hierarchy your type is is too close to the size of each type is way too close to each other like this one uh your subheadings could be less say 1m and then maybe this one can be five and there we go maybe this is going to be even less something like that so looks much more cl oh no i clicked it fix it actually um can i can i um joseph the menu as a template oh okay um can i go into your read-only link daniel i gladly spend my lifetime with people who are interested in learning five high five glad i can help glad i can um give you value in your day so let me know if i can go into your read-only link joseph um while i'm waiting for that um yeah this is cool and showing pictures immediately gives people a sense of like what can they expect and these are real photos these aren't staged um i mean these are like super professional photos so it's more real more raw i like that it and you're not using stock photography that's even better because if you use stock photography for something like a learning academy that makes parents go is this really real am i because you're trying to build trust because as a as a new parent can i trust leaving my kid here for a couple of hours in a day that's a lot that's asking for a lot and um using these type of photos awesome obviously this is stage there's professional lighting on it i can tell this one's not state so that's cool all right um down well a little bit more space in between these two rows right here because um it's yeah you need to make sure that the eyes can breathe for instance i'm reading this i'm seeing this okay let me take a let me take a break before i get down to the next section and i see this so yeah put some more uh margin in between your rows okay again photography awesome job um need more space in between each column more gap again um and the type i feel like the type is is way too much for example uh there's a things like what's the rule the width of copy is not supposed to be more than one and a half alphabets something on the character side so like so the width of this paragraph or all of your paragraphs shouldn't be a hundred percent it should be a max width of like 750 they yeah and then you would center this because it's easier to read when it's in like a block like this rather than the full width of the browser window because it's like yelling at me and uh the and plus you're um it'll be nice if you're uh tight oh why is that okay i'll get into that this type right here should um the paragraphs um i think should be like a smaller font size 1.5 v i'm not sure why you're using vh for your font size uh i would i would suggest using vw but yeah see how this is i clicked it it's easier if this is smaller this type okay and the reason why i'm getting mad that i'm clicking this and goes to the to that page is because nothing here on this section tells me that something's clickable the only thing that's telling me something's clickable is the mouse cursor changes from an arrow to a hand if something is about to be click if something is clickable tell the user immediately hey it's clickable for example if i hover over this and um a link icon shows up or an arrow pointing right shows up for example i think i did this with a my wife's client a r i can't spell whatever thank you google this the one yeah so my wife designed this i built this uh oh oh i'm not doing what i say please um yeah listen to what i say do as i say not as i do okay for example see this contact if i hover over it has a telling me oh this is clickable you know i guess it's not done yet but for example um this can have some sort of effect to tell me that it's clickable but all of this text don't make it clickable so take this text out of the link block okay uh for this this can be clickable too if you give it a hover effect um yeah so this isn't clickable but this is so that's what my mind is telling me is like okay not clickable the best paragraph is not clickable but this is but here the paragraph is clickable so that's you're confusing the user experience right or just put a button somewhere like at the bottom um now i see that you're you have a lot of copy happening instead of this is a lot this is a lot of information now instead of using four columns what if you used tabs tabs instead so one two three four five six seven eight so what if you oh this just came out of nowhere fine i'm confused um yeah this is very hard to digest um and i'm just being honest so you can um you know just helping you grow a learning academy um i would use tabs on the left and that way there's only one piece of content that's showing up and if someone's like oh my my kid isn't an infant but my kid is three years old so then you would have a tab on the left that says threes uh buzzy bs and you click it and it shows that content um yeah there's a lot of chat happening um i'll i'll get to it um yeah there's just a lot going on report cards yeah i would make things smaller this is huge everything is super huge right now but i'll make it a bit all right i hope that helps let me get into the chat right now but keep going keep going um loving this feedback thank you okay cool um funny g can you use nested collections to display an e-commerce product page you use tested collection display commerce um yeah so with e-commerce you have two different types of collections you have the cms regular type of collections and then you have the e-commerce products collection in the cms collections you can create a collection and one of those collection fields is now let me show it to you you open up a template webflow template for e-commerce i know i have one four right so you have these types of collections and then you have products so what you can do is go to your like blog post or whatever add a new field multi-reference say related products so related products to this blog post and then i can pull from products it's multi-reference save field and there you go so if i go to this blog post and i can look through all of the products and say all of these are related to this one blog post i can go to this blog post template and um drag in a collection list and pull from related products there you go good question um grid path uh i think the site needs interactions with the client's budget wouldn't that you don't need interactions you don't need interactions so you only need interactions if it helps tell the story notice how tomas toma his website um this website is meant to tell his story right if i go to something like if i go to something like yelp amazon there's no interaction why because i'm just looking for information if i'm a if i'm a parent who's looking to bring my child to a preschool i'm not looking for inter i'm not looking for flashiness i'm looking for information quickly because i need to know can i trust this place with my child will my child learn can i can i see who would be teaching my child i trust is the number one thing when it comes to a learning academy adding interactions is not going to build trust but laying out the content for that type of site that you're building wait i might talk wait was it joseph oh my bad i was getting joseph and red path confused grid path is talking about reverse medical spa okay sorry joseph but in any case yeah joseph your website a little bit more spacing smaller uh text you'll be fine red path let me look into your uh reverse medical spa sorry got confused there look for this site all right looking at it red path um so if you so my thoughts when it comes to this um industry um spas it's all about breathing being relaxed and when i see this right here this even though you're using calm and cool colors all your of your content is stuck together i saw the word stuck but all of your content is like squished together i would strongly suggest making more breathing room breathing room for everything so um that um so your this one lots more let's go crazy 250 50 something like this so now i can see the now i can see the lady and this content is not super close let people scroll it's okay to let people scroll and um you could yeah you could add quick interactions to this one let's add some margin 250 zero auto whoa well i mean you know see how like it's not so close to each other yeah see this is really close to that so more breathing room give it more space more space more space and then when things come in you can do quick interactions or quick effects where they just you know they slide in or something like um yeah so uh i want to click this but i can't i would suggest click this and then go it'll auto scroll down here so in page link um okay um flex welcome flex you're new here tutto price plan like netflix or fiverr are you asking for a tutorial nice plan um netflix price i'm guessing you want a tutorial on netflix's pricing page the plans so here i went on incognito so something like this yeah um you can actually clone that here let me find a cloneable link for you because i've already done this yeah um [Music] and thank you for your questions thank you for the links uh you guys are awesome compare i name it price chart aha pricing chart this is what you're looking for right yeah so if i go like this and this one is even sticky so watch ooh stickiness it's responsive too yeah so here it is and you can um let me get you the get you the cloneable link you can enjoy enjoy okay going down the road where where did i leave off at um hey flex uh no spamming please i get to your questions whenever i can um and if i don't get to your question you can always dm me on twitter uh and colleen will make a note of your question but hopefully those links answer your question but again no spam okay i don't wanna i don't i rarely ban people from these streams so uh rio cool okay nikita let's check out what you're making so we'll end the stream and at 12 30 pacific time oh this is cool okay okay okay okay refresh yeah um love the use of lottie um this is cool okay cool uh so whenever i talk about portfolios again tell your story first show who you are um and i get it there's some people who don't want to show a head shot on their website totally fine as long as your personality comes out okay and it's not just your title and your name uh so right here this is her personality okay cool and she shows her personality even more by not only saying uh her title but bryan's lover um now i have a question what kind of fries are we talking uh carnia soda fries i'm getting hungry it's lunch time are we talking sweet potato uh truffle fries what are we talking about all right anyways see just those little things helps come bring the personality out of your website because your website is basically brochure and you need a need to show who you are you want to be real um cool logo showing what you've done is clickable okay so i wanted to click these i wanted to click these because these aren't clickable it doesn't make sense to have them there maybe if this is part of the is this part of the lottie file yeah it's part of the lottie file okay so uh if possible remove these and uh put them here put them here and let them be clickable let's move on okay quick effects like it like it like it with the staggering too uh okay no percentages no percentages i am i put my foot down on no percentages the reason why this is a hard no is because there's what are you basing these percentages on because for me webflow i'm like at a 43 but then webflow adds another feature which then brings me down to 40 and then they add another feature and i'm down to 38 and maybe in time i'll learn that new feature that i'm still backlogged on like i am not completely i'm still not comfortable completely doing webflow ecommerce from start to finish by also adding the taxes and the shipping and in in and all that stuff so i mean does that make what percentage is am i what percentage am i in photoshop there's no such thing as percentage just say just remove all of these percentages and show off what you know because everyone is a beginner at something so percentages there's no such thing right so remove them please remove those and nikita likes simple salted fries now are we talking about burger king wendy's mcdonald's old school um jack in the box kind of different curly fries kidding i'm hungry uh moving on cool i love your um okay uh you have a little bit of issue here notice how the bottom section moves up and down when i hover the reason why i'm guessing is because you do not have a border try this out however here's the i'll push it here we're here okay we'll find this okay so you have a border width of one if i remove okay so the reason why the second section is moving is because you need a transparent border on your project card so if i do border one pixel transparent solid cool if i add a one pixel border that's transparent and solid and then hover over it fixed all right so go on webflow and in its off state on its none state of this project card add a border one pixel color it transparent and make it solid and you'll fix that glitch boom all right let's move on okay cool did you use pablo stanley's uh humans or something you did awesome good job great job i like it cool so remove so recap move your social buttons over here um remove the percentages and fix that border you're good to go mcdonald's uh moving on moving on lots of questions woof guys are chatty today uh loving this feedback thank you you're welcome ridpath you're welcome flex uh that's two strikes on spamming no more uh let's see here could you please talk about this subject use that an item is clickable in relation to arya in the not so distant i don't know much about arya i need to learn up on it explain it to me or i'll read up on it sorry rachel like cues that an item is clickable uh so basically just doing things like um what nikita did you know if i hover that means oh wait the whole thing isn't clickable only this huh maybe this whole thing should be clickable because it's doing doing this but yeah it's just a ux thing but i need to understand arya more like i don't do i'll be honest i need to do better i need to do better with accessibility um yeah i need to learn up on it and webflow is doing a lot in behind the scenes on um accessibility they wrote an article on the blog the webflow blog about what we're trying to do and so right now accessibility is not super duper apparent inside of web but like one of the things that would be cool is like when you put an image in you can't um you can't move forward or something like that like you you can't move over forward to the next step until you add an alt tag oh so like you dragging an image it's like okay cool next i can go ahead and start building something else no you drag an image hey put alt tag oh yeah okay cool i'll tag now move on to next because i don't know if it's going to cause friction with the community but i mean it's needed no who knows all right uh next question and just going down the chat room um sam thanks for the tutorials you're welcome super helpful for an industrial design student trying to show off their work on their site similar to the likes of apple yes uh flex for call the attention a little yes your you will get attention just have to wait um okay colleen when 20g has a question can you use oh okay you kind of catch up all right let me just look at the the document that arlene is god wow dino dino welcome back uh hey pixel loving the show once again can you have a cms where users are able to add to it yes um using zapier so that's what i'm doing right now with um the pixel geek community website where if you want to add a a so if you have a question you can add it um through a web flow form and that gets sent out to that data gets sent out to zapier and zapier throws it back into the webflow cms right um i can do a stream about that the future but yeah uh stay up late uh work in progress playing with pixel warehouse dot store okay okay pixel warehouse you got for me mr ben soul air how many pixels can i buy oh apparently a lot of pixels by 8 000 pixels 6 000 pixels by 35 millimeter pixel all right um okay let me take this in okay my first thought when i'm just scrolling down for that first user experience i was like what what is this about i'm not sure am i buying stuff kind of like is this like a pond5 shutterstock uh place where i can just buy stock stuff and as i read into it more the small copy makes sense these are just overlays so what i would suggest is one of those comparison things um where you know you have two images overlaid on each other or have two background videos looping overlaid on each other and then the user can like mouse over and move the comparison slider you've seen comparison sliders before right um webflow comparison slider comparison sliders before and yeah oh yeah magic mark he actually works for us qa guy um yeah so one of these so wouldn't it be cool if you have a video that's playing without your overlay and then one with it you know so that brings home the the that bringing home that brings home the the point of what you're trying to sell like hey you can have it here's what your um your raw film looks like but what if you can add an overlay on top of it right and maybe that's showing in examples yeah so you're not even showing any examples of before and after show me a before and after so i can actually see what your product does um that's what this site is missing before and after um and plus um maybe this could be bigger this this height it just seems it seems very small like let's take it up to like what happened take it up to like 650 and then you can take this copy right and like take this copy and do like a margin top negative 150. oh gee get a 150 pixel even more like something like this where that and then um let's say background background has a color of i don't know i don't know what you're using to see no not nope i want just the type to yeah right there cool so background no black padding 50 and all for the top of 25 or something like that but then the margins on the sides are zero yeah something like that so see what i mean how it's like overlay like has that you see what i mean something like that oh i'm remove this nothing like that yeah so what i did was negative top margin is a negative we can push it up but play around with that hopefully this helps with comparison slider and um sorry 12 32 okay last question and then i gotta go eat no more water and if you ask a question i'll get to it next week i'm so sorry um hey sam could you review my site okay last uh actually okay loxzo lock zolls or what you're asking five your top five websites created with webflow that's a hard question i don't know there's so many good ones um oma is one of them obviously uh but it depends is it trying to sell something or is it being experimental i mean there's a lot of good experimental ones and there's a lot of good ones that are actually for real clients and selling stuff um hard to say hard to say all right sam beanie last question on the list so i made it tweet let's go let's go watching you go into html code makes me so glad webflow exists yeah uh this is work in progress but have at it yeah yeah yeah um glad i can help you are awesome sensei you're awesome for being here uh let's go at it sam beanie hold it wrong oh wait look okay okay okay i feel like it's like dove i okay i was half waiting for something else to happen i had that fade out effect with the preloader and then i'm here nothing happens now i know everyone scrolls however because an animation happened i was expecting another animation to happen the only reason why i know you are waiting for me to scroll is because of this scroll bar right here this indicates that there's more content below however a non-techy person a person who doesn't consume the internet every minute of their life which is what i do um would not know that so put a lot of animation of a mouse throwing down put a text that says scroll down put a button where you can click on it and it starts to scroll down you need to tell someone what to do because i don't know what to do with here from here all right move on oh okay okay we got stuff we got stuff all right so we have three things three things happening nice and clean it feels like a dove commercial right now okay okay i see you yeah i knew there was gonna be a mouse position i had a feeling uh i've been looking at websites for so long and immediately i was like this has to have a mouse position and it does all right um take this up a notch what if this the inner image also moves with the mouse and you can see my hand because i'm pointing at the anyways uh yeah what if this can also move with the mouse right um i don't know what this is about though what does this focus mean uh maybe some uh extra copy one line of copy that explains what i'm about to look at or what this product is i don't what is i don't know i don't know what this is are you and are you a ux designer are you an industrial designer like what did you do for this project what is focus what am i going to experience so treat ui like road signs imagine i'm driving down a road and i see a sign that says focus what does that mean it could but what if i go down the street and says focus and it has a sublime that says something's gonna happen how do i explain this um it's like you're on a you know uh this lane will turn right or like right turn only and then like oh okay i'm on this street i'm on this lane of the street and it's going to be a right turn only so i'm going to turn right when i get to the intersection this doesn't this doesn't tell me what's going to happen so i don't want to click it yet i want to experience the whole home page all right cool hover what what is it what am i going to experience orbit am i going to experience a case study what is orbit is was this made like is this a prototype of the google home nest max hub thing uh neo to do would you create these products industrial design just give me a little bit more information shampoo bottle that's interesting air down so so tear downs that word makes sense this means to me that you this will i feel like i'm gonna you're gonna tell me a case study like gonna tear down this product and so that's it all right let me go to the next page click what am i looking at sam [Music] webflow servers hello there we go oh okay okay is this android this is the watch hey cool okay so yeah you are a industrial or your ux designer so these are case studies okay so if you um i know you want to keep things clean um something to say that these are case studies i don't know and again maybe these suggestions won't work but a good shot always thinking the viewer is someone who's an industrial and make it more clear yeah happy to help they're my industrial design project dude this is cool industrial design is in to me is intense how do you make it functional and beautiful at the same time that's a whole different mind this is such a 3d thing but um good job yeah what is this furniture what is this oh what is that a speaker oh yeah it is that you hello hey sam so much so much thought has to go into a product man and then people make fun of the playstation 5 looking like a router and i'm like there was probably so much thought into making the new playstation 5 look i mean it looks way much better than the xbox box box with the holes in my opinion but all right that's it i'm done i'm hungry i need to eat it's almost one i'm gonna get headaches but uh here let me play my outro music i can't hear the music that's playing right now i don't know why something's wrong but uh thank you all thank you all so so much for being here um if this is your first time again i stream every saturday at 10 a.m to 12 p.m pacific uh if you haven't subscribed yet go ahead and do so um thank you all so much those who donated to the coffee fund trying to get a new camera thank you to everyone who's watching with recording everyone in the live chat room i really really really hope that this knowledge gets passed on to you and you're consuming it and you're understanding it in a way that that helps but more importantly share it with others don't hoard this knowledge don't hoard the feelings the great feelings that you get that you have the privilege of getting whenever you're making a new website um help your clients learn help their clients learn help your friend just share this knowledge that's what we're supposed to do as humans here um yeah so thank you all so much you want to join the pixley community pg-community.webflow.io i've been your host nelson thank you for joining me i'll see you next week as always make the web beautiful together see ya [Music] you

Channel: pixelgeek

Views: 2,483

Keywords: content management system, design, graphic design, jquery, responsive web design, tutorial, web design, web design tutorial, web development, webflow, webflow tutorial, pixel geek, pixelgeek, apple big sur, apple web design, apple macos big sur, apple mac os, apple macos

Id: Q3MDmm3iz0A

Length: 162min 38sec (9758 seconds)

Published: Sat Jun 27 2020