Build a Spotify home page using tailwind.css and Vue.js

here's a quick preview of the final product that we'll be creating it's got all the hover styling and on-click styling but really no functionality other than this button right here which will play just one song we can compare it to the actual Spotify homepage you can see they're extremely similar yeah but like I said it'll only play one song so if you're interested in recreating this stay tuned alright so let's get started the first thing I did was Google the branding guidelines of Spotify it gives you their logo and their colors and what kind of font they use everything will need so I went to my code and in the Tailwind config I just put all the colors in the font that I'll be using tail wind has default colors which is really handy if you're not familiar with tailwind you can just type in like red 500 or yellow 200 and it gives you the default color but if you go to your tailwind config j/s file you can put in your own colors so if I want to use this specific green I can just say green and it'll show up as this hex code say what darkest light is so these are all the colors we'll need they use the approximate nova font so I put that in as well and this is where we are going to be doing all of our coding so let's get started all right I think the best way to start is just getting all of these elements in place so we'll make our side nav the main body and this play bar at the bottom some things to note when we scroll there is a fixed header up here obviously this play bar is always fixed to the bottom and this side nav no matter what size we are it is a fixed width so with those notes in mind let's get started to go to our localhost it's obviously blank cells get coding I'm gonna start by making just an outer div to hold all of our content and I'm gonna give it a background dark height screen all right so within this I'm gonna create another day that's gonna be the parent div to the side nav bar and the main content so we're gonna flex this we'll say not just set it background so using normal CSS in line I'm gonna give it a height say like 88 VH it's gonna take up most of screen but not all of it because we need to leave some for that play Bart and the reason I use normal CSS while doing this is because as I discussed earlier Dylan has some set values for width and height and padding but I wanted a really specific height which tail in has not set a class to so that's why I use normal CSS there all right so within this we're gonna have our side nav let's mark it just to make it easier to find in the future I'm gonna give it a width of 56 which is a tailwind with a background black and a height full there it is I mean the content content alright for this will have another dev will say with full height full relative and the reason saying relative is because I'm gonna give it this fixed header and for visualization reasons I'll give it a background of blue 400 you can see her side now I've just got pushed a little bit let's go up and say flex none to that side now so that it stays it's with alright so now within the main content will create the header with full sticky top:0 we can make it yellow for visualization and some padding all right so there it is and it's sticky we have no content to scroll right now but in the future when we do it'll stick to the top so let's take these crazy colors away and move on to the footer the footer is gonna go outside of this div containing the side nav and main content I'll label it it's not a footer it's a play bar I'll probably call it footer a lot throughout this video though alright so we'll give it a with a full background light and lastly we'll say height 12 eh which is a Sura mean the remainder of the screen awesome so we've got our main elements in place so next I'm gonna go in and fill this side nav bar with its content alright so on the side nav the first thing we're gonna add is that Spotify logo which I've already added to my public folder it's gonna be an image what did I just do all right I named it Spotify logo dot PNG the issue is the logo is black so we're gonna have to use some CSS filters to make it white which tailwind doesn't have classes for yet so I'm going to use some normal CSS and line again our just a filter brightness zero and invert one all right so now we've got this giant logo let's fix this sizing we'll give it a height of 10 maybe yeah size looks good and then we just need padding I'm tempted to give the entire side nav padding but I know when we get down to this image there is no padding so I'm gonna make another div to house this image fix the tabs all right so it's got let's try padding of six that's like perfect cool moving on to these buttons I'll do another div for these with just a margin of like two that'll probably change in a little bit we've got a button I've got three buttons actually and I'm gonna use a little bit of JavaScript it's not really necessary but just so you can see how you entailing can be use together for these three buttons since they all have the same styling now we're gonna add the on click styling to the buttons but it's not going to change pages so there won't be any function out functionality but we'll see the styling so we'll say with full rounded padding X like maybe three and padding y2 and see it's a little more on the outside which is why I did that it's a button so by default buttons are centered so let's say Flex items center justify start alright and I'm gonna make our library before we get or a dictionary before we get any more into this let's call it pages and we'll give it an ID a name and an icon so this will be home the name is home and the icon it's actually called home as well I'm using material icons it's not identical to the Spotify icons but it's so close as I could find and I just really like this set of icons and it's free the second one is search name is search and the icon again is called search then lastly we have libraries so the idea will be library the name will be your library and the icon so they have this really cool icon which material icons doesn't have but I don't want to use a book a bar chart I know it's kind of weird but it looks a little more like the icon that Spotify chose alright so going back up to our button now that we have our dictionary made within it we're gonna have our icon and within it before that so this is view that this is the syntax we have to use for view you just say v4 I called it playlet pages page and pages and now I can start this so page dot icon here we'll say page name and then we can see that it has special styling on click so what I'm gonna do is say at click which again all of this is view it just makes writing JavaScript so much simpler so at click I'm going to say set ID to equal page dot ID so down in our data let's add that by default I'm gonna make it be home so then if we go into this CSS or the classes using Taylan get our view syntax this is so we can write javascript within a string we're gonna say if set idea is page dot idea then we'll have this CSS which is background light text white otherwise let's have it just be text lightest then lastly I'm gonna give font extra small or it's text extra small font semi bold let's see how that came up not too bad I do have some things I want to change let's go to this icon and give it a margin right of three and instead of text extra-small let's just do small alright that's a lot better so if we move on to the next section once again let's give it a margin X of to just be consistent well actually we want it to line up with the icons and we gave the button of padding X of 3 and the margin X of 2 so let's give it a margin X of 5 and see what that looks like all right we've got this header I think it just said playlists or playlists so we'll say text extra small text lightest the letters are pretty spaced apart so I'll say tracking lightest upper case see what that looks like cool let's go up to this div and give it a margin bottom I like five maybe and then we'll make our buttons all right so first I'm gonna once again flex items center justify start and then we'll add our image and I named this ad new dot PNG I think new I said oMG that's image alright I'm gonna give it a height of 10 a width of 10 and a margin right of 3 that's a little big let's try 8 better we'll give this header margin-bottom up three as well all right just gonna say add new say text small text white font semi bold it's create playlists all right and then it's got this hover action so when you hover on it is when it turns white otherwise it's a little muted so let's say opacity is 75 and when you hover it goes back to 100 that's perfect so let's just copy this button and make another one for the I think it's liked songs I'm gonna give this top button margin bottom of two and then this one let's make sure yeah like songs so I need my image favorites and this will say like songs then lastly for this section we've got this almost a border like separator line so let's just say height one pixel with full background light margin y3 and there we have it all right so we can move on to next section once again actually what is the next section this little tiny scroll guy so yeah I'm going to once again give it a margin X of 5 as we did up here just keeping it consistent and then I'm going to have this roll area let's say with full and a height let's just say like 24 will probably change that later overflow Y scroll and within this I'll probably make another dictionary for this let's say text lightest hover text white text extra small and padding y1 within this okay let's make the dictionary so what we're scrolling through in this section I believe it's all my albums so I'll call it albums name and that's actually it it's all say drive let's copy this I'm not gonna do all of them I'll stop there God drive the all-new Indy classic roadtrip songs and Lana Del Rey all right so we'll go back to this and we'll say just like we did above before oops what did I call it albums before it album and albums and then right here name dot album album dot name so if you go back here we've got that it's way too tall though so let's go back to this height of 24 and change it to like 10 awesome and if we hover it turns white I'd say text is a little larger here so let's go from extra small to just small again awesome then we've got that other button which says install app so I'm gonna flex it item center justify start I'm gonna say text lightest hover text white then within this button we've got this icon and some text it says install app so let's go install I will say text oops class equals text small and font semi bold for this icon we can go ahead and give it a margin right of three and then let's look up what this icon is I just go down I'm sure it'll oh cool yeah so just arrow downward and it's in a circle so let's say rounded full border border lightest all right this icon is way too big so let's switch it to small and then to the button let's give it some padding padding lied to that looks really similar awesome lastly before we're done with this side navbar we just have to add the picture which is the album or a song that's currently playing and it's got this hover action going on so this little button shows up let's make one last day this time there's gonna be no margin takes up the entire but on hover that's gonna be an absolute child so let's just go ahead and make this div relative we'll need that later and we've got our image it's forget what I called this one I called it plane alright so there's that let's give it we need to push it down a little bit I guess I could try yeah No this is a padding-top before all right so for this hover we're just going to get this additive and say with full height auto background yellow 400 or 500 just so we can visualize it right all right I didn't say absolute all right let's say height 40 that's huge also let's put this on top all right all right let's go with height full we're gonna flex this and say items justify end items start and then within this will have the div containing the icon so just say background is black rounded full height 8 with 8 and then within it we've got this icon let's find it I think it's like keyboard so text white all right it's gonna be a little smaller let's give this div some padding say padding before it's too much too perfect then we can take this crazy background away and what we're gonna do is say opacity:0 hover opacity 100 so now if we hover there it is so I think our search bar looks super super similar we've got the scrolling action hover these hover and click let's go to ours for comparison we can click hover scroll one last thing I forgot to do is up here let's say focus outline so now when we click we won't get that ugly blue outline so now we can move on to this main content okay so now let's get this header made if we go back to Spotify we can see we've got these two arrow buttons and a drop-down menu all right so the way I'm going to do this we already have our header made down here so let's go ahead and say Flex items Center justify between here and within that let's do another day this will have our two arrow buttons so let's say once again flex items Center then they'll have one button we can say but it's rounded full background black with eight high eight there we have it yeah it's good let's say text Wyatt and then within it will put our icon I think this is like oh yeah we're already there keyboard or a left let's take a look at it if we make the text a little bigger text Excel to excel ready exhale yeah that's good let's fix the padding really quick let's see padding live 3 adding why is nv3 padding X is going to be try 5 even a little more so I'll switch this to four and let's just six that's better then we'll just copy this button and make another one but this time instead of left will stay right and we'll probably want to put margin 3 on this top button Arjun right 3 so now we've got our two buttons alright then we need another dive for the drop down for this we're gonna have a button once again and we'll say background what's the background have to widen this background light rounded full padding one flex items Center and then we have this image I named my profile image I think I said my face dot PNG let's say class rounded full-height six-foot-six okay it's a good size then we've got my name let's say text white font semi bold text extra small and to the image let's say margin-right like to and then we need that icon okay what is this called I hope I find it fast and let's say text white alright let's put a little more padding I think just in the X direction so here I'll say margin right three and then padding y1 padding x2 much better all right so now let's give this drop-down some functionality all right so first let's say this outer div is relative and this one's gonna be absolute let's say background is it light yeah background light padding to just to look at it all right I'll say with full rounded margin X 2 e hikes whatever rounded stay margin-top on all right take the padding away and we'll say but so the first one says account and then log out okay we'll see padding y2 will say text lightest hover text white order bottom lightest supporter bottom boarder lightest let's take a look at it yikes that's not good because we have to say with full better say text small and this bordercolor let's change it to light all right then we make another button but this time they'll say log okay we can barely I use the same border [Music] let's say border white let's say text white we're gonna do similar to what we did with these buttons here it's a border white text why opacity 75 hover opacity 100 all right so if we hover cool I'm just gonna leave it at that close enough so let's make this drop down and work here we're gonna say at click show drop down we're gonna have show drop down be false initially but sorry I click show drop down equals true ok and this is a movie if show a drop down is true then we'll be able to see it and for either of these buttons we'll say it at click show the drop down is set back to false so if we click it works let's take these focus the blue outline away so focus outline I'm gonna put those all three buttons and this man up here and then lastly this icon if we go to the real Spotify this icon flips when it's clipped so let's go ahead and get the other all right um yes I should copy this first I think I just changed this down to up and I'll say it down we'll say V if show drop down is false and this arrow up is gonna be a show dropped on it's true so let's try that it works that looks really good okay so now we can move on to well let's make this fullscreen just so we can see what it looks like and I think it's looking really good looks very somewhere okay so let's move on to our main body this area for these cards so they've got this hover element so do these titles and that one doesn't okay that's weird when we make the screen smaller okay so they're removing cards as it gets smaller instead of doing that I'm just gonna do flex wrap so instead of removing the card it's just gonna go to the next call uh next row okay yeah so within this main body div we're going to create these cards so let's label this I think already did that actually I see it overflow scroll no I didn't let's say overflow why scroll on the top of this and it will continue down here okay so first up here we did padding EXO six right in the header yeah so we're gonna do that here as well and let's do it padding Y of 3 and we have a heading that says recently played and then we've got C all over here this one says see all so this one let's say text to XL font semi bold text white tracking wider I need a dash there hover underline I'm missing anything and then this one will say text extra small text lightest upper case tracking wider hover underline all right so it should look like this let's take a look all right I forgot to flex it flex items center justify between much better okay even though I put the same padding it doesn't look like it's lined up and this needs some padding on the top or margin alright that's kind of annoying and weird so these don't line up I almost wonder if this is just in a container nope alright let's go back to what I had I'll just add like padding left to padding right it was kind of a hot eight yeah cuz it goes right to the corner of that arrow that's kind of weird but alright looks correct for this let's say cuz it's so much smaller than this text so it doesn't look centered let's say padding top before that looks better okay now we can finally do the main portion which are these cards so to this we will say margin bottom three and then let's add a div for the cards so we'll say with full flex flex wrap and then we'll make a div for gutters so let's say actually I'll say justify all right say padding to with like I don't know 40 maybe 48 background light not yet we'll do a dip within this dude and this is where we're gonna have the actual card so say background light with full white auto padding:5px let's make the height:auto with full shadow and then we'll need a margin bottom maybe two we will have the title of the song let's say text small font semi bold text white tracking wide and then the artist we'll say text is extra small text is lightest and tracking white again now to speed up the video a little bit already made the dictionary for this it's called recents and I just included the path to the images the title of the song and the artist so again I called it recents so if I go back up to this div right here I'm gonna say V for recent in recent this SRC is going to be recent dot that's our to see this will be recent dot title I think yeah and then recent dot artist actually I think I forgot to write here let's say rounded large and shadow medium okay well the cards look good but looks like I made a mistake with the flexbox so we've got our title here and I said flex flex call long and delete you know we don't need a flexus at all actually uh-huh I forgot to put those in mine yes we do flex items Center justice so I'm just putting it back to how it was I need to add another div to separate these and then this one is gonna end up here alright let's fix the tabs and then I need to apply the padding classes to the outer death all right there we go okay so they've got to be a little longer so let's go to let's just go here and say padding-bottom five cool and it wraps now we're gonna do pretty much the same exact thing for down here so let's just copy and paste this entire div I'm gonna change the title to made for Stephanie I can totally delete this they don't have that anymore I can take away the Flex and I'll just I'm gonna copy whatever they're out here and I'll put it in here texts small text lightest it's probably fine let's put this padding left to on the other dudes so that they're even oops Oh then I made a second dictionary already also I called it customs so we'll say for custom in customs this will be custom that title custom artist and custom that's her seat so it's really starting to come together it looks really good one thing I'm noticing is that I forgot to give this header its own background so it's transparent right now let's go up to the header and just say background dark so that way when we scroll it covers awesome and just so we can scroll a little further I'm gonna copy this isn't that cool okay so we've got a lot of cool stuff going on here I think it looks really similar to the actual web app oh my gosh I forgot these hover e things cool let's do it I'm gonna delete this last one okay for these hover play buttons we're gonna go down to the div that starts with the dictionary let's call it relative and then we're gonna do another dip within that this one will say absolute with full height full flex items and justify and padding eight and then within that let's get another div this one is going to be background green rounded full height ten with ten flex items Center justify:center and then within this we're going to have our icon all right let's go to icons let's play arrow oops come back we'll say text white and text like to excel okay then lastly let's say opacity zero but on hover it'll be 100 so if we go back to this it works but it's not in the right position so let's see I said with full height full flex there we go I forgot the X on my flex so let's move this down to these and then we're done with that section copy and paste we gotta say absolute I mean relative and this is our Spotify app it looks really good but lastly we need to do this play bars so let's go ahead and start that so [Music] for the play bar I'm going to recreate it as close to the Spotify version as possible with that being said it's not going to be super functional you'll be able to click play and have one song play but this bar here isn't gonna keep up with you know the progression of the song you won't be able to like fast forward or change the volume here so I think after I post this video because it's already getting pretty long I'll post a follow up one of how to make a completely functional play bar but it's not gonna look like Spotify so yeah I'll start coding this I already found all the icons I'm going to need so that I don't waste time searching through material icons I already added just flex items Center and justify between and some padding to our already existing play bar so now I'm going to create this section right here so this again is going to be flexed and items Center and then we're gonna have two divs within this I'll start with the first one within here we're going to have our h1 tag which is going to be the name of the song remastered okay we'll say text small text white yeah I think that's good actually tracking why it's a little spaced out then our h2 is going to be the artist text extra small text lightest tracking wide we got the lovin spoonful let's put a little padding actually that should probably be a margin all right next let's create a section with these two icons actually we don't even need to put these within their own div because it's already flexed so the reason I put these two in their own div is because I don't want them to be flexed side by side so that contains them but since the rest is side by side I'll just put it outside so we've got two icons so the heart is just called favorite and this green thing I think was like picture in picture and picture and I wrote these down so that just speeds up the process okay let's say text base text green margin x4 and this one text base text lightest let's see how that looks yeah I think that looks awesome maybe a little less spacing between the title and the artist so let's go ahead and do that I'll just take this margin away okay I think before I get to this part let's skip to this part and then I'll go back to up so let's go this one's gonna be pretty simple I think so we'll just do another day flex items Center and we've just got three icons and a volume bar okay the first one is called playlist underscore at play what did I just do than important devices and lastly volume and I'm gonna steal the same classes that I put up here for these so just the lightest text color and text space and then let's say margin x3 lastly this div let's make it with like 12 background light test rounded full let's say height 1 okay it can be a little bigger xx perfect margin left 3 actually okay this looks really really tiny let's look here let's make them a little bigger I didn't even realize this hover so I'll have to add that oops I meant to go here okay so this text base let's see what it's like by default it's just a little too big though Tech's large text extra-large and then if it's nothing okay let's go text extra-large that's so weird I hate I can't love them hate on I'll do the same up here this one just looks so tiny so I'm gonna go ahead and say like to it what's it like by default yeah I'll just keep it it's normal size and then the volume bar is actually closer to the volume icon then other spacing so let's just give it a margin one and now for the fun section which goes in between these two once again actually we're not going to flex that one we're going to flex this one flex items center so once again we're pretty much just gonna have a ton of icons but they're gonna be buttons so we need five buttons with five different icons okay let's say text large text lightest hover text white I'm going to add that to all of the icons actually except the heart okay so text large text lightest hover text white let's say actually I think that's fine so let's copy this and then of course an icon is in it material icons okay so now let's copy this two three four five actually we're gonna need six I'll show you line actually you know don't okay this first one is called shuffle followed by skip previous play circle outline skip next and repeat so let's take a look at that gosh that looks very very bad so wrong okay what did I do so it looks like this play circle outline isn't working oh all right cool next this play button is gonna be way bigger than the others you know I actually well let's try let's try three XL that simply do not work okay I'm going to try something else rounded full I ate with a order lightest and border and then instead of saying place or go outline let's just say play is it play arrow maybe play era yeah then we'll have to flex a button items center justify center okay then let's say margin x4 not three same thing for the outer ones it's a margin X 3 and margin X 3 so they need to be a little more spread out and it's like I can't find the right size they're too big the icons so let's make them smaller I guess they're being so difficult doesn't look like that's doing anything what if we said small oh it's because I'm doing this on the button and not the gosh okay actual icon oh well alright let's take those away and go to the actual icon I'm gonna say text large much better text art okay problem solved but we still need more spacing let's just go with five and always change it okay dogs good and then what's I made this time should be bigger okay then let's actually flex but flex column and say justify:center and now we will add the play bar we'll say class equals with let's make the West like of this let's make the with 1/3 and then with full here height 1 background lightest rounded full okay and margin-top like for so few things something that is which oh I didn't even still that makes it worse say wet and then up here with one third and I don't Oh let's take a look at the original okay so play button actually needs to be smaller back to what I originally had it at a and hopefully that fixes the spacing issues I'm saying that is my okay I think it needs to be a little longer for sure maybe one half you and what's going to mine so I said with one-third if I say one half its that too long yeah let's just leave it and then there is actually isn't there's this green so let's see background light oops wrong one up here background light dang it I just want a darker shade of light background I forgot we have dark oopsies background dark that's probably too dark but I'm just gonna roll with it and within this let's have another one it's also gonna have a height of one rounded full background green let's go to style and we'll say with like 18% and at the very end of it we want that white circle so say class super small so height to width to background white rounded ol and I'll say well if I go here and I flex it I know just centered let's see what that looks like let's make it a tiny bit bigger and then give it a negative margin left I've just like one maybe yeah and then give it shadow cool and let's give our footer or not footer our play bar a border top order dark okay so if we go back to this I mean ours is obviously longer darker okay I could work on I have an idea maybe this will be a little better let's go back to ours I'm going to say the width of this section I'll make it one for the width of our middle section I'll make two fourths and then our last section I'll also make one for it and then for this flex items center justify and so now if I go back to our other one yeah that definitely looks a little bit better still not exact but I could even go to this instead of saying with full we'll say with like 3/4 much better and let's add those numbers so I'm 28 seconds in and we've got 2 minutes and 40 seconds so I go back to this on either side all right I'm gonna have to say flex items okay 0-8 texts extra small text lightest margin-right one let's copy this and go to the other side 2:40 and change that's margin-left I stay okay oh I had a margin-top that's why okay and to this entire did I'll say margin top three that looks so similar awesome so lastly let's just make our play button play a song I already have an mp3 downloaded and it's in my project so I'm just going to use that let's go up to my play button so right now I have the play arrow I'm going to copy this and add pause but this is going to be an if condition if the pause is that's little keys if pause is true then you'll see that icon but if pause it's false you'll see the play button so let's go down to a data and add that pause it's gonna start off as false back up so we'll say I've click pause is true actually say at click dot prevent I'm going to create a method called play song and I'm going to pass in the song which I called song dot mp3 and then also on click I'm gonna set pause to true so let's go make this method called play song so down in methods you place on and we'll pass in song so if song equals new audio and then we'll pass the song again play okay let's see if this so now if we go here [Music]

Channel: this.stephie

Views: 14,316

Keywords: vue.js, vue, tailwind, tailwind.css, css, html, html5, javascript, spotify, code, coding

Id: w5GQcHxJH1w

Length: 87min 8sec (5228 seconds)

Published: Wed Feb 26 2020