Rebuilding the Taylor Swift website in Figma and Webflow - Live Stream - 11/22/2021

[Music] hey what's up everyone john here with web dev for you here to help you build awesome websites without code in webflow welcome to today's live stream for anyone who's new to the live stream i do these every monday through thursday from 12 p.m to 1 pm central and we cover everything webflow and anything related to web design and web development so if you're interested in building websites designing and building websites you've come to the right place yeah we cover everything layout building design systems class naming conventions uh creating animations and interactions and yeah just building entire sites at times as well so if you need to learn anything about webflow yeah this is the place so feel free to drop any questions in chat i provide support via the super chat feature here on youtube so if you need help with a personal project i cover that near the end of the live stream you can just drop a little donation whatever you want to give it does help support the channel it helps supports me yeah it helps to support me continue to do this every day i don't know if i said that right but yeah it just helps support the channel basically um so yeah i'll get started with today's live stream um hello everyone hello yao tazzaware joey joe so if you've been to my live stream i think it was a couple weeks ago it will also talk about the no code conf which was amazing uh and the new features coming out for webflow but i'll quickly talk about what we're going to be building today or for pretty much the rest of this week so if you were in my live stream yeah about two weeks ago uh you uh yeah taylor swift exactly um you probably heard me mention about taylor swift's website which i thought was really not good like it was i looked at it and i was like this isn't a great website right like the these sections are actual images like i can download this image uh here let me let me download it or it's uh yeah save image as and this section is an image which if you know about kind of web design adding images to a site uh like like it's done here it's horrible for seo right search engines can't decipher the text in an image um so there's just many things that are not good about this site um so i took it upon myself and here let me just open it yeah so it's a little literal image here this is an image um so i decided to take it upon myself and and we might do more of these i think it'll be a fun thing to do in the live streams where we just look at different artist websites you know in this case it can be taylor swift it can be websites from movies um because a lot of times these movies like it's amazing i watch a movie and it's an amazing movie and then i go to the site just to check it out and it's just like really not great and with tools like webflow now i don't see any reason why we can't have really amazing websites for every situation right for an artist a musician a designer uh a movie like yeah i just don't see why we still see sites like this uh nowadays so uh end of rant basically so i took it upon myself i opened up a figma file and i started redesigning the taylor swift website uh now i don't consider myself like this great designer or i don't spend too much time with design i usually like to hire outside designers but you know i dabble a little bit so i i literally whipped this up in probably probably less than an hour you know just a layout and so so yeah what i have in mind for this week is we're going to rebuild the taylor swift website uh it and we're gonna add e-commerce because she has e-commerce on her site that goes to another site which is horrendous and um you know i actually checked if this was the actual site but it is taylorswift.com because i couldn't believe what i was seeing there's a video and there's e-commerce here that goes to a shopify site i think so it's another separate site that again doesn't look great and if taylor swift is watching this or anybody from taylor swift's camp i don't mean to like poo poo the site so much but there's definitely better ways to to build a site or to convey information on a website especially if you're like a nominated uh or award winning so rant over um and then i thought maybe they were going for this type of like old school feel but if they were there's better ways to do that too like don't make your section images you know um and and even if it was an old school feel like it's not even done that great so anyways okay uh rant over um yeah so i do like taylor swift's music too so that came into my mind i like hip-hop i like you know good i think taylor swift is more pop and country but i like her production like her her beats are cool and um she has a cool voice so uh yeah i decided to to take a look at her site and we'll be building it so joey's laughing um yeah you know i just had to express that uh kind of give you a backstory or an intro as to why we're approaching this build um so we're just gonna rebuild this in webflow today we're gonna start building it um but before i do that i just wanted to quickly touch upon the no code conf um i didn't go to too many of the breakout sessions i did see the the keynote or the the opening you know um video where vlad vlad and the different um members of webflow talked about the new features that are coming out um so i had an idea about these features again having worked at webflow i i i was hearing about some of these features so we're gonna get things like memberships subscriptions uh logic flows uh what else was mentioned oh yeah we're gonna we're gonna try working with the new backdrop filters and i don't know if the the image filters are there yet like the screen and and all those different kind of photoshop filters that we're used to seeing um i'll check if they're there i think it's still in beta but if they are maybe we can use it for this site um yeah so let's go ahead and get started i didn't whip up an agenda but that's basically it we're going to work on this taylor swift site and then in the last 20 minutes i'll field any super chats or any questions and we'll go through that um so yeah my idea with this site is just to have a nice hero section and yeah i didn't go through the old site too much but it's basically this it's just like i don't even know if it's responsive yeah it's kind of weirdly responsive because it's images so um yeah so yeah we're just gonna build the hero section um let me go back in here so we have this hero image and this uh section here because what my idea for this is uh to always have the call to action of either by the album or listen to the album on spotify so once the user starts scrolling this little section is going to be position sticky so the user always sees it so they can click either buy the album on amazon or listen on spotify then this is going to be a video because she has a video called all too well and then we're going to get into the album so another thing for the album um because if we go to this site we see that they have these images that are low quality so you know i just want to envado elements and we're going to work with photoshop a lot today and this will give you an idea too of what you can do for your own sites but um i typed in cd mock-up right and there's some beautiful mock-ups so i might use this one here and all i have to do is grab a nice high quality image of taylor swift or maybe the red album and drop it into photoshop and i have a super crisp cd mock-up right that looks way better like look at this i could do like any one of these and it would look 10 times better than what's here so we're going to work it with photoshop there's also a vinyl mock-up that we're going to use because she has the album available in vinyl as well so here perfect like any one of these would be perfect for for this so we'll have fun with this we're gonna create some cool vinyl mock-ups and some cool cd mock-ups to make the site really pop right when you go to a site you you don't want to see like low quality images you want to see something that's nice crisp and clear and that's what we're going to do on today's site so without further ado i know i've talked a lot um yeah and she has like uh products here a video we'll create an e-commerce site in webflow so we don't have to go to shopify or any other site everything will be in-house and yeah so we'll do that you could even link up printful to to uh to have printful ship your shirts like so taylor swift or her team wouldn't need to even look at shirts or any merchandise it could all be done through printful okay so with all that said let's go ahead and get started um the first thing we're gonna do is build the navbar it's very simple and the last thing i'll mention here um i do want this to be a collaborative effort so as i'm building if you have ideas of what could be done or different design ideas just feel free to write it in the chat i'll look at them and we can have a good time getting creative and building a site so i want to make this see if we can get this to be like one of the themes for the live streams is just rebuilding websites different artists websites so could be fun so let's get started alright so the first thing is the color palette uh so i went to the website and i just grabbed a few different colors right here so i'm going to start with the style guide and the branding so maverick wrote can you please plan a video related to building an ft nft marketplace using attributes from finn suite maybe maverick i know nft is like a popular thing right now this week we're probably going to focus on this site maybe next week i can get into nfts but nfts to me would be more of like just building maybe a cms of nfts so you build like a a collection list right and if you have your categories of nfts uh a link i don't know i think it's open c they sell nfts and just link out to the nft that way maybe that could work um but as far as like linking up like crypto plugins into your site there's a whole other story and something i honestly don't want to get into because that whole world can get a little bit crazy so we'll stick to this site for this week and we'll see i can probably just tell you to maybe look up working with collections and webflow to build out a collection of images that you want to sell or something like like like that like digital um nfts so that's the short answer so let's go ahead and start building the site so we have the colors here i'm going to go ahead and add these colors as global swatches in webflow so we don't have to continuously add those colors so for the body i'm gonna say body all pages and for the background let's go ahead and make the background this beige color i'll go ahead and click the plus and create and let me just grab this uh this red color so i'll copy it here and i'll change the background to this for now just for a moment and then we have uh white so click plus we have white and we have black all right so those are the colors we're going to use for the site i want this to be the background for all my pages done great great so the next thing we're going to be using oswald for the font so i'll say body all pages we'll change the font to oswald and i honestly didn't spend too much time looking up different fonts for this i thought oswald would work well obviously there's probably like some really nice paid font that would work even better for this type of site but oswald will will work good here it is a google font all right so let's go ahead and i'll add a div block right so we're going to start with a page wrapper so i got this from the client first system like this type of structure which i kind of like so we have the page wrapper the then we have the main wrapper and then the content goes in here in the main wrapper so the first thing i'll add is a navbar and i'll call this the navbar underscore component great uh yeah so that's about it um and then for the navbar background we're going to set the color to this red we're going to make the nav link so i'll call this nav underscore link we're going to set it to the text color to white and we'll just call all of these nav link and nav underscore link great so let me check the site here i made them all capital so we have merch videos events and newsletter so let's go into the uh the text let's make it a capital case and let's make it 16. we have merch let's add some letter spacing let me see yeah letter spacing one works well uh cool yeah inside the page wrapper the global styles resides as a symbol yep all right cool so merch events um no videos events videos events oh come on event there we go and newsletter um newsletter great and then for the brand it's just going to be a text block i don't have time to or i don't know if if uh taylor swift has a has a logo so i'm just gonna for the brand it's just gonna be taylor swift so i'll just use taylor swift uh logo type and for the color we'll set it to white and we'll make it fairly large maybe 32 and line height we'll do one dash all right so for this container we'll say nav underscore container and we'll set the uh the max width to 1440 so our containers are going to be 1440 and width the nav bar component i'm going to use 10vw for padding so all our sections will have 10 vw for padding and great so the nav container let's set it to flex align center and justify right then for the brand i'm going to say and this is just specific to the navbar because if i try to do for example on the nav container if i try to do justify space between it puts it in the center which i don't want so i have to justify to the right then i select the brand and then set it to absolute and position it to the left and for the nav container let's make sure it has a position of relative so that this brand element is relative to the nav container now for the brand let's set it to flex uh center and perfect so we have the logo in the center all right and let me add maybe some letter spacing to taylor swift yeah one pixel great um so for the navbar component i do want it to be a little bit taller so i'll just add some padding to the top and the bottom maybe 10 pixels and i like that so so far so good uh yeah let me hide this uh this toolbar here for the moment so we have more real estate screen real estate great okay so now we can add the hero section which is this image uh we have this red text and it says available now so let's go ahead and add that hero image so i'll add a section and the section is going to go in the main wrapper so right in here yep section we're going to call this section hero and let's go ahead and add yeah let's add a div block and i'm going to call this hero image wrapper and yeah so let's see here how i want to do this so for the section hero let's add some padding of 10 v w and 10 vw and okay so we have the now we have the image wrapper so let's go ahead let me add some images that i downloaded the other thing i found kind of unusual when i was looking for taylor swift images there was no real high quality images i actually had to download a wallpaper it still works it's a good image of a wallpaper but i'm not sure why that is but i couldn't find any any real great images anyways so for the height of this hero image let's make it 500 and let's add the background image so for this i don't mind setting the background image as a decoration because that's what it is more of a decoration here and let's see i kind of like that so let me let's see here yeah i have a better idea so rather than add 10 vw to this section i'm just gonna add a little bit of padding like 20 pixels and this will make sense in a second uh then for this hero image wrapper let me set the border radius to i think 50 yeah 50 is good and i'll add some margin from the top to this image so like 20. all right that looks good i kind of like this effect here was just showing her i guess lipstick there um not trying to get too designy so uh but yeah i just like that idea like we could change the image so it shows more of her face like this but this is kind of stylistic i feel and we might change that but we'll go for this for now so we have the hero image wrapper uh for this kind of design element right here um i built this in figma so it might be a little bit hard to build this in webflow so we'll just export it from figma as a png because i added an image here and some red and the shadow so i could hide the image let's see how it looks like without the image and with the image yeah actually i don't think it needs the image in the background so we'll export it as an svg which look should look super crisp so i'll export it let's check it out yeah i think that'll work let's uh let's drop it into the site and let me go into my finder and let me just rename this svg red i just call it red okay all right and let me drag and drop into my assets panel panel okay and i'll add a div block in here and i'll call this hero underscore image content and then for the image wrapper let's set it to flex and we'll do right perfect and then in here i'll add an image choose the image and we'll select this image here alright so yeah i'm getting some weird kind of artifacts here on this svg image which is not ideal but let's see here let's export it as png instead let's see maybe it's because yeah it must be this um this stroke that i added here here i'm gonna try to export it like that as svg without that stroke it still looks good um our complex svg resource intensive uh not so much maverick um depends on the type of svg that's kind of a little bit of a hard question to answer at the moment i would have to have more context like what's in the svg um and things like that like what what colors so yeah but typically if if you're just working with paths and things like that you should be good okay so let me resize this red image so i'm going to call this hero underscore red text a red svg and let's give it a width of i don't know 300 pixels that looks good and just going to move this around a little bit something like this yeah and to be honest i kind of like that it had the um me let me try something here i'm going to try to open this in adobe illustrator because adobe illustrator might export it better no okay never mind so oh it's lagging um okay hold on let me try closing a few windows and hold on one sec okay uh let me know if it's still lagging um and yeah i do not like when it does that um okay so back to the build um so i'm gonna try to export this i do want the stroke added i like that stroke so i'm gonna export it as png excuse me losing my voice and let me go ahead and re-export it as a png and you know what to make sure the quality is super high i'm going to do 2x png there we go all right so let me oh uh sweet nice thank you masheen nation appreciate it ah gotcha all right so let me drag and drop in here okay so let me replace this image with the png okay nice perfect that looks awesome all right cool so we have red okay so this image we might have to change actually to the top all right yeah that'll work that'll work um let me set this image hero image content to 50 percent and remove the margin and i'll i'll play with this and then i'm going to add a text block hero available text and we're going to say oswald white and we'll do available now all right and we'll play with this to make it a little bit better let's see what size i set here in figma it's very large 7d oops 7d and we'll do one dash nope that's the color all right and for this we'll do flux vertical and justify like this okay cool let me add some margin from the bottom here and then let's center this okay remove some of this margin from the top and yeah i think that looks pretty good um this image is too wide yeah that's kind of bothering me so we are going to yeah add the padding here 10vw and 10vw okay that's better and for the hero image wrapper i'm going to put it in a container as well just to keep things nice and neat so i'll say container for the container we're using a 1440 max width so i'll put this hero image inside of the container perfect all right yeah and that just gives us a bit more structure um for the site and i'll add a little bit more margin from the top there okay so so far so good i'm liking that i also want to add a bit of an overlay i have an overlay here on the image so excuse me sorry i didn't mean to do that um so for the image wrapper i'm gonna add a div we're gonna we're gonna call this image hero underscore image overlay i'll set it to a position of absolute and full and make sure the hero image wrapper is set to relative so that the overlay is relative to this image okay and then i'll add a background and i'll set it to gradient for the left gradient we're going to set it to transparent for the right color on the gradient we'll set it to this tan color wow that looks kind of dope yeah kind of kind of like that but that wasn't what i was going for i want more of a 90 degree overlay just like that and then the overlay is going to go behind the the text okay so this uh hero image content needs to be a position of relative so if if uh you weren't kind of aware of that if you if you have an element behind another element and the elements in front are not coming to the front you just want to set that element that's in front to a position of relative so it will respect the z index values of the navigator from top to bottom all right uh let's see and yeah i do want a bit of more definition on the image let me try something here i'm gonna try setting a border a border here to this red color and that might be kind of nice uh so let me the hero image wrapper let me try setting a an overflow of hidden so we get that border i don't mind that i don't mind that uh at all let's uh let's go back into the back the hero image overlay um so again any feedback is welcome um definitely want this to be kind of a fun collaborative design project or live stream so i'm just going to change the alpha here to something a little darker maybe 70. yeah i like that that looks looks good so we have a little bit of that tan here on the right we have the red element let me set it to 2x images high dpi make sure it's nice and crisp all right so yeah let me add some padding here to the left of this put it more to the right and i might center this no not center but move it over a little bit yeah that'll work and just for fun i'm going to try a few other things just to you know make this border a little bit thicker hmm i don't mind that all right so just getting creative uh in the live stream so i'm gonna add a box shadow to this the blur is going to be zero let's make it red red okay and the size will be uh let's set it to 40 no uh 20 definitely not 20. uh distance 20 size 10. so you got kind of see what i'm going for here uh distance maybe 10. and maybe the size could be five or something like that yeah distance needs to be greater yeah let's uh if it doesn't work out i'll just remove it but i'm just trying to mess with this uh the shadow here distance we'll see if that works i'm not i'm not sure if it's going to work but uh we'll try that and let me make this border here a little bit smaller i do want it to be maybe like one so i want thin lines and maybe some of the those uh those borders or those shadows in the background all right uh wow that live stream is going fast um we're almost out of time here so great so we have this section here um we might kind of work with that let's go ahead and add some subheadings uh also can you can use a shape behind the hero image to make it look cool uh maybe yeah yeah possibly what kind of shape are you thinking uh maverick okay so so far so good available now and yeah let's go ahead and add the next section so the next section is gonna be the i'm gonna call this the main section or the content set section and this will make more sense in a second when i when i add it so to the main wrapper let's add a section like curvy shape maybe yeah the the design i'm going for is like this uh rounded borders design which i think looks more modern and kind of pops a little bit um if there's room for other you know shapes we can we can possibly look at that all right so cool so the next section i'm just going to call this section content and then in here we're going to add a i'm just going to say top i'm going to add a div block and i'm going to say top top section oh wait first let's add a container yeah container great and then in this container i'm gonna add a div and i'm gonna call this um yeah let's see section content container i'm going to call this top underscore content for now um because this is where i want to add the video actually this is going to be main uh main dash content underscore wrapper okay and for this i'm going to give it a display setting of grid and i want two columns and one row so two columns yep one row then um i'm going to add a div and i'm going to say main content underscore left and i'll add another div and i'll say main dash content underscore rate so on this right side and actually for the grid i'm going to make the left side much larger maybe 2 fr and the right side 1fr right because if we go to the figma file we're going gonna have this section here and we're gonna have the content here on the left so as as the user scrolls i just want them to have access to this element here on the right cool so for the section let me give it some or the section hero i'll just add some margin to the bottom great all right so now in here i'm going to add a heading and i'm going to say it's an h2 heading and we're going to style the all h2 tag right now so let's make it red um oswald medium and what size did i have here for the heading uh 48 okay 48 and we'll do one dash for the line height and we'll make it all uppercase so this is the heading for the section content let me set it to 10vw and 10vw cool so for the heading this heading is going to be all too well the short film all too well the short film and actually for the headings i want them to be uh normal okay there we go so we have that we have the content left and actually in this content left i want to put another wrapper so div and it's going to be called um video underscore rapper uh yeah video underscore wrapper cool or short film short film underscore wrapper great heading will go in here perfect then in uh and here we'll we also want to add a video so i'll add a video and we have the video there and let me add a div block actually because i want to try a few things here i'm going to call this video underscore wrapper place the video in here and good and then for the border radius of this wrapper i'm going to set it to 30 and set it to overflow of hidden perfect and give a border radius of red right because we're going to put this video in this element so i'll call this short film underscore video then let me look up that video from taylor swift and let's see uh all too well okay i have it here and we'll just paste that link right in there all right and then for this heading we'll say um short film heading and we'll give it some margin from the bottom maybe 30. great let's take a look here yeah it's looking good whether i step for this uh border set it to 50. maybe this should be 30 instead of 50. so we'll use 30 throughout yeah i like 30 and this is 30 great all right so let me change this to maybe one yeah that's a little bit better so it's not as large uh for the section content let me add some padding in the meantime like so so we have some scrolling okay yeah i like that so all too well do we have a container yep it's in a container section content perfect cool so let's build out this right side and then we'll get into uh super chats so for this right side i'll add a actually for this i can just say 30 border radius give it a border and set it to red okay because it's just that the main content is actually just this section here then i'll add an image choose image this is the actual album cover so that's all good let's try images high dpi sure border radius on the image let's do 30 and let's add some margin or actually some padding to this element maybe 20. okay and then we have some buttons so just add a button and we'll say buy now on amazon on amazon and we'll just give this a we'll give the class name button we'll call it primary button set the background to this red border radius of 30 nope uh eight maybe yeah and the text size will make it much larger so let's see what i have here it's 24. let's do that and definitely add some padding from the bottom and the top so 20 and maybe 24. okay so for this main content right let's go ahead i want this to be 20. let's set it to flex vertical and center for this image we'll say um let's say content main dash content underscore image main kind uh content yeah my class naming isn't top notch today so i'll just say main content image um cool so when i'm working so fast sometimes the class name is like just like a primary button let's add some margin there and then listen on spotify listen on spotify and let me make the text here to light yeah let's try that and cool and we'll remove some of that padding actually i know that works alright and i want these buttons to be the same size so let's do like this and we will set this to flex and center and add some margin from the left and the right no don't like those buttons so big so i might do like a specific width yeah that's better okay and for this main content right i think i will do a specific width as well maybe 300 pixels um maybe 350. we'll have to see actually how about i undo this and we add about 60 pixels between the columns something like this yeah i still want it to be thinner so maybe 100 pixels between the columns maybe a little bit more 140 yeah that looks good uh add a bit more margin to the bottom here 40. all right yeah i like that okay that's looking good and uh we can set this to position sticky so for now i'm just gonna add like tons of padding just we have some scroll space maybe even more for for now 600 okay perfect so for this main content right we're gonna set it to position uh sticky and set it to zero or 60 from the top how about that so nope uh main content right content left i think this has to be set to relative let me see here main content rate position sticky zero [Music] yeah i love it one position sticky doesn't quite work uh here let's see i think it has to be set to position absolute ah if any element has a set height okay do we have a set height i don't believe so all right we'll come back to position sticky but yeah there's many different things to it okay but so far so good uh we have the video and let me try something with this video wrapper so what do we have for the the shadow on this so 35 yeah 35 225 okay so main video wrapper let's add that box shadow make it red 225 and 35 no blur and size of zero yeah we might not need that shadow only for the top and i don't even know if i like it on the top so i'll just remove it from here nice uh great so it's looking good we have 10 minutes uh in the live stream so i'll just open it up to a general discussion but yeah we'll continue building this tomorrow we'll work on the position sticky but already i'm liking it more than this site definitely tomorrow will probably work with photoshop and use some of these uh these vinyl mock-ups and cd mock-ups uh it should be set to height instead uh for the position sticky eric um not sure not sure let me see it could it be the padding so let me set the section content to 300vh because we need some scrolling here position sticky no it still doesn't work yeah let me undo that let me try something here position sticky oh okay yeah it's always like you have to like target children elements in position sticky you know i i don't know the exact science behind it but basically what i can do here is add a div and in this div be like um uh by now uh right okay something like that um and then i can place these elements in here and i can set this to position sticky and this should work no it doesn't work that's weird like if i set this image to position sticky it works but the other elements inside of it see like yeah don't know what that's about uh so we have the button oh the buttons have a width is would that do anything to it no hmm say image so the image if i set this to sticky does work you see how the image sticks to the top that's basically what i want to do for all these elements maybe the buttons have to be set to relative as well and then i can add a div set this to position sticky nope oh wait yeah no uh is the parent relative ah grade point main content wrapper yep it is main content right yep set div block main content rate set to relative this the block should be sticky huh it works for a moment oh i see ah i think i get it so the container is a container set to relative no okay that's the reason so div now i'm thinking this should work so this main content right position sticky zero nope oh main content wrapper no that's a relative relative anyways we'll work on that it's being kind of weird let me remove the height but uh the main wrapper let's give the main wrapper 2000 pixels nope we'll come back to it not going to spend too much more time here with position sticky uh yeah so so far so good it's looking good so we have the right side i do want these buttons to be the same size so add a bit more padding here maybe 40. nope those buttons are too big all right so yeah it's looking good um anything else i can think of at the moment we can add some animations to the maybe the the menu items at some point or maybe we can just do something like here let me make this smaller and on hover we'll just give it a background so we'll say hover and we'll set the background color to white and border radius of 30 nope of 8 and the text color will be red okay looks good and then for the transition we'll add a transition we'll say background color that's a easing is fine and then we'll say font color okay so now when we hover and we also have to do so one thing if you note like the border radius on these elements it goes from no border radius two border radius and that's because on the the main state or yeah the main state we have to give it the same border radius so i'll say eight but we don't have to give it any color or any background color but now the border radius is the same for both the hover and the not hover state so it doesn't have this weird like thing where it goes from no border radius to border radius and i'll add maybe 10 pixels of margin cool looks good all right so yeah maybe taylor swift will reach out and say hey can you make my website i'll be like all right um yeah because i couldn't believe it i mean her site his images like i've never seen that like who who's hiring their developers i mean it's not like she doesn't have money and her team doesn't have money to create a really nice site you know um and this is me just spending just a few hours right like with a high quality image this image isn't even like super high quality and maybe i can make it let me try setting it to uh high dpi see if we can get or no it's a background image so that wouldn't quite do it but let me see actually uh do can i do idpi no i can't i can't let me try fixed i want to see like you could even do something like that like right like so many little i just set the background to fix and just added another like interesting little effect to the site right where she stays the image stays in place but everything else scrolls i don't know if i'll use that but that's just one example that you could do to like make things interesting so yeah that's kind of a cool effect like available now should be smaller i don't like that it's so big here let's do uh 58. maybe 48 yeah that's better and we'll add a little bit more like this actually let me justify to the right and i'll add the padding here remove the padding here yeah that's it's a bit better kind of like that maybe even more [Music] thank you lit appreciate it uh let me add some margin some padding here all right so yeah we had some fun today building this site um we'll definitely get more creative as we build this week but you know so far so good we have the video so for me like if i'm interested in her album i'm gonna go to the site and i'm like oh cool she has a video i'm gonna watch the video because that's an important part right to selling your product or whatever you have you want you know people like video so obviously i'm gonna click on the video get inspired or love the cinematography the music and be like oh my god this is amazing and then i can be like boom i can buy on amazon or listen to it on spotify perfect call to actions and then we'll we're going to add the album down here the vinyl version and the digital version and the the compact disc version with some nice mock-ups and just really make things pop on the site um i definitely want to get an svg version of this so i'm gonna work on that because i want this to be super crisp this red here and yeah so i think that's it i think that's it for today's live stream uh it is one o'clock thanks everyone for joining participating um yeah i appreciate appreciate you joining the live stream and we will see you tomorrow um yeah i think that's all i got for now anything else i want to mention uh no that's it if you have any questions feel free to write them tomorrow definitely spread the word about my live streams trying to get as many people as i can to these live streams oh i did want to mention the discord so i've been getting asked a lot about the discord i am working on it i'm creating a patreon membership for those users who want to be part of my discord and you know where we can build this whole webflow community on the discord channel i'm going to have different tiers and i'm going to offer different things through each tier the live streams will continue but if you want even more after the live streams there's going to be a patreon membership that you can join uh yeah so thanks everyone uh thanks again for for watching and i'll see you tomorrow thank you peace

Channel: WebDev For You

Views: 357

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

Id: s2zIh9cVDLo

Length: 62min 45sec (3765 seconds)

Published: Mon Nov 22 2021