How to code a Dribbble Design from Image to HTML/CSS

hello welcome back so in this video we're going to be following along with a design i found on dribble and trying to create this as close as possible or maybe even just using it as inspiration with perhaps some different images um alongside it so if you're interested in you know getting started with css this could be quite useful for you so here is the design i'm going to be uh trying to recreate so it's by this designer just here i'll put a link to their dribble account in the description of this video so you can check them out but i thought this was a good design for something that i can hopefully put together in one video and it shows a few different techniques um in terms of css now with this i'm not going to be using any framework just plain css but in future videos i'm going to be [Music] starting to introduce you know frameworks like tailwind as we go forward but all i'm going to be doing here is using a code pen here to show where we put this together and i'll share a link to the completed code pen at the end of the video so i need to make sure i actually log in so i don't forget that i'm going to use unsplash to actually find some images rather than the ones they have here so let's get started straight away so let's start by just planning out this first page just here so we're going to have two pretend screens over here so we'll just call them screen one and screen two [Music] so they're going to be in uh section elements like this and this one will be screen too but we've both given them a class of screen so over here we can just set out what these elements need to be so roughly we need to work out what size we want this to be um and then we can position them so they look similar to this on the page um so let's just first give them a height of around let's say 600 pixels and a width of 320 just to see how that looks we'll set a a gray background for now and let's just see how that appears on the page um let's just make sure that in our body actually let's not put it into the body let's make a holding element just here we'll just put a div called hold like that [Music] so i'm gonna try and do this um quite quickly so we can fit it all into one video so if i make any mistakes like that just bear with me um so we've got our hold element just here we'll give this a display of flex so we can use the flexbox here and we'll say justify space between so it positions them nicely across the page um that should yeah so we've got this part just here but towards the end we'll work on actually making them have this display where one's slightly higher than the other so that's great for now and we can change that but what we want to do is just set a border radius here it looks like it's quite a lot maybe 80 pixels just to mention as well normally when you are following on with a design like this you can actually go in and interact with it say it's a figma file or a sketch file you can actually check what these are but because this is just an image we have to try and do this all by eye which makes it a little bit more complicated and you know there's going to be parts we're not going to get exactly but it's a good exercise just to see how um we can you know look at this and see what we're what we're working with so we're gonna work on this one first we've got this header then this extra bit of text then this button at the bottom here then we can just find an image that will fit for this and then maybe position a boat um similar on there as well so let's first just reduce that radius i mean that's a bit too much let's see yeah that looks a bit better so we're going to go over to our screen and put in a h1 so this is our heading so there's our h1 so as we can see this this text comes in a little bit on either side so it looks like um first let's go to our screen 1 and then we're going to go to the h1 in there we're gonna center the text if i can spell um and then we want to make sure that we have this uh padding in on the sides here let's just fix the letters there so if we inspect this we can get an idea of where we actually are at the moment so if we see over here we can see that it's spanning the entire page but we probably only want to have a width that's you know a bit smaller here so if we actually put a padding on each side so we're going to have 0 here because that's the top and the bottom then we're going to set a padding of about 30 pixels on the left and the right let's see how does that how does that work maybe a little bit more just to push that bottom one in um so we've got an immersive travel experience yeah and we'll put it a little bit smaller maybe like that and then just increase the size of the text so we can get rid of that go over here and then we'll make the font size a little bit larger probably about 26 pixels something like that yeah maybe a little bit more 32 yeah there we go and then in terms of the font we'll look at adapting our fonts later on but that seems like it's just about right and maybe move it down a little bit like that a little bit more okay so that's our first area so now we need a little element underneath um down here what i'm actually going to do though is put these as we can see we have these elements just here and this button down the bottom now we're going to use flexbox to push these so this one stays at the bottom and these two stay at the top so we're going to make sure that our entire screen one is applied for flexbox so if we put these two elements um at the top here so we've got our header and then the text underneath into a div that will get moved just one element so when we make the whole screen as a flexbox it'll push the bottom uh button at the bottom and that element to the top so if i just explain what i'm doing here so put this div just here then we'll have a let's use an h3 here so our line of text like that and then we're going to close off that div so we have this part just here we're going to have another div at the bottom which where our button will be so if we look at the minute you can see it's appearing just here but when we go to our screen one over here and we're going to say display flex what you'll see is it's changed things around a little bit we want to use flex direction column and then we'll say align items space between hang on like justify content space between like that and that should push that to the bottom there we also want to make sure that we are centering this line of text as well but in terms of the way we've got that pushed to the bottom that works quite nicely so again we want to focus on this area just here so we've got a little bit of a gap there probably about 20 pixels again so if we go down here where we had our h1 and put in h3 we're gonna first align our text to center and then if we see here this isn't bold and it's quite a bit smaller so we put a font size of around maybe 18 pixels font weight normal i may make even a bit smaller still say 16 yep and then margin top we want to reduce this a little bit [Music] maybe even take it away completely because this h1 here will already have a margin bottom applied to it so if we inspect that we can see yeah so it's got quite a large margin bottom there and this one doesn't have much at the top so we can probably reduce that so go to our h1 and change that to 10 pixels see if that gets what we're looking for does that seem about the same gap maybe a little bit a little bit more 15 pixels okay so what you want to do is update that text so start exploring beautiful places around your area today okay so we've got that in there then we want to have show travel destinations at the bottom here okay and then we have um two little arrows like that um but for this we want to uh probably set this as a link it seems that's what it is so we'll just go a like this so we have our link down there let's just make sure that it's all appearing correctly so we're going to use a screen one we'll set a class on this link we'll just call it bottom link now obviously if this was a larger file we're working with would have a bit more planning in terms of the classes we're using so we can reuse these as much as possible which is what a framework like tailwind really helps with but for this example i'm just showing you how you can do that with plain css so here we have our bottom link here we're going to align it center again and then let's have a look so this is white bold i think that font uh could be this one so what i've done there is i've set the font color i've set the weight to be bold and we've set it to be centered what we need to do actually is create change the display type here to be block because a link on its own is basically just like a similar to a span so it doesn't have its own um own area but by changing it to block it will fill that width so we can then do something like this we can adjust the margin bottom to move this up from the bottom of the area there a little bit so if we see now we have that little gap um which is starting to look okay so now actually lift up a little bit more maybe 35 yeah so what we're going to do as well is set a width onto this element just here so that is actually smaller than this other one so where we set the padding here we'll use exactly the same on here but we'll increase that by about 10 pixels like that so we're starting to get what we want now what we need to find on unsplash is an image that has this sort of nice gradient of mountains we have the water here and the mountain there so let's just start by searching like lake mountain or something like that um okay there's a few options here none of them are exactly what we want this one could work though i'll scroll through a few more and then then come back okay so i think i've found one that will work so if we go to our screen one over here we're just going to say background image url let me paste in the url so that'll take a moment there they want to say background size cover so we can see that actually starts to fit the area that we want what we can actually do is adjust the position of the background so if we adjust that like that you can see it's starting to move a little bit now what we probably would want to do is push this down a little so rather than moving it from the side we can push this down so if we set that to be about the size of our page we've got 600 pixels we want to increase that a little bit a little bit more so it still fills that width um like this okay that seems like it's roughly what we want but because of the size of the dimensions we work with it's not going to fit perfectly so we'll just use it like that and then we want to find a boat that we can put in here let's just see is there going to be a transparent boat i doubt it might have to find one somewhere else pressure search for this first actually we could find one that could do our background and have this what we wanted i mean this one does look a bit more in line with what we're looking for let's just try changing that let's see is that any better so if we look now we can see this sort of fits a bit better so all we need to do is just update the position to be centered and that seems to fit a bit better again it's not exactly what we had um in the example here but you can see how that would fit quite nicely now one thing we have here is this extra border at the bottom and i think we could probably create a similar flow to that um but actually let's just push this heading down a little bit from the top let's go to h1 and just add i'm probably another 20 pixels there okay maybe not 20. [Music] okay slightly less so it's just five um so we have this here um you'd probably want to set an overlay and as we mentioned it'll be the fonts that'll make the big difference there um but the main thing with this that i'm not quite liking is obviously the image isn't right but if we were to zoom in a little bit here and just grab these fonts so let's just change the fonts up here in the body [Music] and then we can just start to work from there so we'll reduce the the size here let's get that line back okay so that small tweak is working a little bit there and then what would probably do is have a overlay on this image here just to soften the colors there so what we can do is do something a little bit like this so over here where we have that let's just move that across give us a little bit more room so we have a background image we could set a gradient here so if we just move our url across to here we'll see if we just hide that it's just a light gradient but we can then tweak the actual color we have here so if we go to inspect um what we can find is we have we just first get rid of this one so over here we have these colors so if we can adjust the the way of the gradient there you can actually go to a css generator to get a gradient here all you need to do is make sure you have your gradient and then a comma here and then have your url and it will apply both of them um on top of each other to a site like this and then look what we have here so we probably want to have a gradient that'll go from like a green to a white at the top here or like a light gray so if we just try and pick a similar sort of green to that something like this and then over here we want to have a transparent white color something like this and then if we just look and see the radius of this so there's the gradient there so if we take that and then copy that into our code so here is the part of the gradient just there in fact what we're actually going to do is just copy the colors we have here so we have this one over here we'll paste that over here on this first one and then we'll just grab the second one and paste that over the second one like that so if we have a look now what we can see at the minute is that you can't actually see anything but if we adjust this now to be like 0.8 or something like that we'll start about to see through um which is why you know before it was slightly overpowering but you can see now we have this fading just there we could even adjust this one to be you know something like that we can get the effect coming through but you can just tweak that slightly to get the effect that you're looking for you can see how that is a little bit more a light in line with this but obviously without the exact styling it's gonna be quite difficult to get that now for this border around here um there's a few ways you could do this um i think the best way would be to have a natural block on the page the gradient as it flows down but looking at the time we're on i think i'll leave that for now and just move on to the next part here over here we have a few changes so we have this area over here with this scrollable area on top of it so if we go across to our co-pen now and just start to put these blocks in place so we'll go down here to our code so looking at the way we had it before we've got this top area just here and then this area and then we have this block so we'll probably put them again as a flexbox um and have this top section here with the navigation the notification and the name bit at the top and then we have this block area at the bottom so put them in first so we've got a div in here and then the other one at the bottom here just fix that like that and in between those two we just want to have that space and then this first one will have the the heading area actually call this a head header and then inside here we want to have a menu icon which we're putting as a button actually and then on the other side of that we have our notifications which we're just using the emoji for now so what we can see slowly is these elements over here and then just underneath that we want to have a picture and then a sort of welcome area so that'll be just underneath this block here switch user div for that and then if we look at this so we need to have inside here another another div on to the side so we've got this section here and this section here you can probably put that straight in as an image actually so put the image in here and then that will span across the side then here we have two parts we've got um welcome back get ready for a new experience and then underneath that we have an h3 that has their name so i'll put it rusty so at the moment you can see we have these raw elements appearing so what i'm going to do first is just grab a example profile picture it's just any one that's sort of similar to this so a simple background ideally a square this is probably the closest thing we can find that's the square and then all we need to do is just put this in here and we can set some styling on that as well um but for now if we just look at this i reckon that's about 100 pixels so we'll just put a class name in here of profile picture and then we'll almost be ready to start styling this out so down here we've got our screen 2. i'll first just put this one in so it's not um you know taking up all that space because it's huge in a minute and what you'll see at the minute because that isn't it's not an exact square we need to use um object fit cover and that adjusts it so it fits that space nicely now moving back from here what we need to do is use the same adjustments we made for screen one so if i just push this over here so that we can actually fit this on the page so as you can see over here let's just clear out the css we're not using we have this part so we want this all to be in screen 2 as well so what that will do is it will push the block underneath but we haven't actually got anything there yet so if we see here this is our part down here that's just underneath that top part so we're going to give these names so we're going to call this heading and then welcome welcome text then underneath so from this div just here we're going to call this a it's this block here so we'll just call it um let me just write in recommended trips now [Music] so okay now that we have this you can see how it's pushed it to the bottom again and what we need to do now is actually adjust these a little bit so where we have our screen too we need to go into the the heading part so we have our heading and then adjust this here so we're going to say heading again it'll be display of flex and we want this to fill the entire width of the page so we'll use justify content just copy it here space between it's actually now fit all the way across now again we'll go in and actually add padding on these to make sure they're not right in the corners here but we can see how that is appearing now and then for this next part we need to do exactly the same thing so we can actually do is apply that that styling onto here as well like that and now then push them across um and again now we can go in to actually adjust that uh styling a little bit more so we want to make this even smaller i think i got that a bit wrong there and then add some margins on each side so if we were to say padding 20 pixels that might be enough maybe slightly less down a little bit okay maybe a little bit more okay so now what we want to do is go to our profile picture add a border radius about 10 pixels and then as we said we want to reduce the size of this a little bit more add a margin at the side so we probably add that from the text so over here we have a welcome text and then we have this area as well so what we'll do here is call it uh text we've got welcome text text which just gives us a way we can get in to style this now this we want to span a little bit more of the page so we're first we're going to set a a margin on the left just to make a bit more space between these two elements um and if we actually look at it we can see that the top part here yeah the margins are pushing that down which we don't want we want to remove all those margins so we'll just go into here and grab both of these it'll be h4 and h3 i just removed the margins completely but don't worry it's not going to look like that because as you can see we want these to be centered in this area so if we go back over here what we can do is center it so like that it now should appear alongside each other like that but if we wanted to center it we could switch it to center and just add some margins there to push it away um okay so next we need to start working on this area just here it's a little bit more complicated than i thought without actually being able to interact with this um so what we have here then is a scrollable um part of the page that has these different blocks so we're just going to go into here now and make some space this is a heading let's use an h3 and then we want to have these blocks so they start with a padding there which looks like it's on the whole element so we'll do this first one which is a bit larger so we've got our scroll trips just in here so here we're going to have our trips now these have an image and then a tag at the top and a tag at the bottom so what we're going to do first is just find a couple of pictures we can use we've got a mountain here we'll grab that image and we'll set that in here like that and then the rest of it will actually put in here so we'll do another one of these actually just make sure we've got the right amount of elements here okay so inside here we need to have a tag up here and then two tags down here so as we saw before we're going to push these at the side so probably have a row on the top and a row along the bottom so that'll be two divs inside here probably don't need to use divs all the time but for speed i'm just jumping straight to them so inside here we'll just put a span that says top rated like that and then down here we have two elements so we have the title and then the location so put this first one in a span as well like that and then underneath it we have the location so we'll just use another span but we just put different uh styles on them so this one here we'll put location this one here we'll put name and this one will put tag okay so that should be all the parts we need for this um so if we look back over here we can now put in a second one and we can get to this part afterwards so first we're going to tie this up a little bit so we have our actual box here which is quite a bit larger than the other part of the page so if we go to uh recommended trips so we'll put this rec trips and we want to make sure that this is actually you know relative to the other parts of the page a fair bit larger this is screen 2 recommended trips and i'd say that's about 70 percent height-wise over here so let's start with that height of 70 percent let's see yeah it seems like it's something like that we want to have a rounded uh part here so actually we'll use the same radius we have at the very very top of our screens like that okay and then we want to make sure that we are having a bit of padding in here so probably want to have half amount of padding that we have width so let's see yeah something like that at the minute i'm just going to put a uh a one pixel border around just so we can see where this is going so one pixel solid so that's the area we're working with so if we look over here we have these parts we want to make sure this is overflowing into a scroll area so at the moment where we have these blocks we have our scroll trips we want to set this to overflow so if we just make sure we're on screen too so we have x and y so that's horizontal i want that to overflow there and then over here on the actual item so we're going to set a thing here called class and trip trip box something like that so if we copy this whole element if i go back here so we'll find the whole element which is this one [Music] i'm just going to copy that once so we should now have two yep um so we'll adjust that in a minute so that it goes across let's see what the next one is so we'll just change that to italy [Music] okay um and we can adjust that in a minute so that will scroll but you can see it's starting to slowly take shape but obviously there's a few um things that are quite different just purely because of the fonts and the exact colors here and and the images um but as this would adapt you can see how this would start to take shape now i'm just checking how long we've been recording this is quite long so i'll probably have to record a second part that's going to finish this off and go into more detail on how i would actually you know tidy these parts up and get the right fonts in so the next part will be focusing on uh finishing off these trips making sure we can scroll through these and then adding in you know the right colors i'll start getting our color picker and really look for the fonts that we want here this is a quick introduction on how you can start styling just with pure vanilla css and then later on i'm going to look into actually adjusting this with tailwind to show the difference in those approaches but if you're first getting started with css i'd recommend definitely starting by right now yourself just so you can get an idea of what is actually behind the frameworks and how css works especially for things you know if you come into bugs or issues you need to have a better understanding of how css works you know the hierarchy um things like the the zed index of where things are on the page um positioning all these different parts which you won't get if you're only using the framework welcome back so rather than recording a separate video i thought i'd go ahead and uh you know finish work on this a couple of days later now but i've gone ahead and actually finished off um this design that we're working on so when we last left off we had this just here so we were working closely to try and get to this design and we'd started by you know outlining the different elements and parts of the page that we needed to create before going ahead and getting the color picker and as much as we can do without having the actual source file that we can really interact with to get the right sizes fonts and elements so i've been using this color picker extension over here that helps you really grab the colors on the page so you can get as close to this as possible without like i say having the full information available so this is what i've managed to get together so far if i just close that so this is the finished version i've been working on at the moment so as you can see here we've got this font which is the georgia font um down here we're using pop-ins as our secondary font you can see this area down the bottom here isn't actually a border but it's a rounded rectangle that just applies to the bottom part of this element down here to give this rounded border effect with opacity here moving across to the other side actually also we've reduced the um overlay here to sort of not saturate this background image as much on this second screen as you can see at the top here i really like this mobile menu which is just a simple div here with three spans of different widths and they all have the same background color but we've just um reduced the opacity um of the top and the the bottom one there slightly and just aligned one of them to the left and the right and have the middle one you know span the whole width um these fonts here are also georgia we used um this color we use the color picker here to get this font color which i think makes a big big difference for this text element over here we increase the border radius of this image um i went on google just to find some sort of mountain outline image that's a little bit similar to what they have um i definitely prefer the one they have here but i couldn't find anything close to that available but this one here is just uh it's this image just here so i just open it fully this is what we're working from so i just inverted these colors it's a transparent background and then just adjust the size to fit this in here and just use relative positioning to move it slightly further down so you get the feeling that it's sort of part of the page and then in this area here we have pop-ins again for this heading and then these blocks which scroll across so the way we got this to scroll is by having an extra element here so if i move this down you can see we have our scroll element here which is just set to width of 100 and this is to overflow any content that's outside of that um container so if there's anything more than 100 that'll be scrolled so what we have instead is this trip hold class in here which actually contains all of our trip boxes underneath that and that's set to width max content so that's the equivalent css property is going in with javascript or something and calculating the width of everything inside of that box and then that's that property so not all browsers support mac's content yet so if you want to use that i definitely recommend going to can i use or something like that and looking for max content and here you go you can find out which browsers support it so these days it's it's quite well supported um but again i'd recommend just going in checking that before you use that in in projects you might be using as i say an alternative to that is using like javascript or something to calculate the inner width of the the elements inside that area um but then inside these boxes we just have some simple styling in here i'm not 100 happy with how i put this together um because we're using absolute positioning for the elements inside here so we have this one here for example um to be up in the top right corner um where is it yeah just here i would probably change that to use the flexbox and just have these two blocks here so we have this top block and this bottom one here with these two elements to use sort of space between there and then have one aligned flex end these two flex start um which could have worked as well but i just sort of rushed that a little bit so you can see how that fits in we have an overlay um actually i'll first start by explaining this one but we have an overlay over here just so you can read that but as i mentioned yeah this part over here if i show that first um i put the links in the description to all of these uh the first part and the second part so you can actually compare the two and see if you can get this second part finished as well without actually you know start with part one and see how close you can get to part two that'd be a good exercise to try um but i'll put links to all of the code in the description and as you can see we have this before element just here so when you're using these pseudo classes you need to first make sure you have this content attribute set here because if you don't have that set this element just sort of doesn't get added onto the page and then the main thing here to look at is the background image which is just a gradient that goes from white to transparent and then that's faded in so you can see we have a pasty set on that as well if we take that off you can see how it has that um you know it's a bit too saturated for the background image and then the border radius is the same as the radius around the whole screen element we have here we use width and then we use this calc setting just here which is really useful when you're working with percentages so we want to make sure that we're taking off 12 pixels from the left and from the right so rather than calculating what that is this helps keep it responsive because we know if that's going to be a border effect that we want we need to make sure that we take it off both sides so if we double that and then take it off the percentage it's always going to be there no matter what we ch if we change the over width of the page that percentage is going to stay the same and that's pretty much it for this side over here again we adjust the colors um of these fonts so you can see this one here if that wasn't the same doesn't quite fit and then this one as well is a slightly customized font color just to fit in with this we use the color picker for that on here and then over here if i just click onto these you can see we have these three spans as we've mentioned and then over here just finally show you this part we're using another pseudo class this time after there's before and after you can use here they're both basically the same so we use content absolute uh to give that positioning when you're using absolute though make sure that the parent class you're applying it to has position relative otherwise you're sort of gonna bleed outside of that area um see if i untick that you can see it's going over the whole page or if i tick it it's going to be applied just to that one element i'm just going to look for um and as i mentioned earlier we're not using any css frameworks here so it's a way for you to sort of use css on its own and get to really understand the different properties here so i definitely recommend trying out this exercise as well find something on dribble that you'd like to look of you could even use this one as well this design i really like and you can find more information about this designer here i'll put a link in the description and you can even hire them if you're you know if you really like their work and you want to work with them as well and they've got other designs on here or there's more designs on dribble as well but if you've got any questions on how how to do this or if you get stuff or anything just let me know and i'll be happy to you know see if i can help but otherwise that is it for um this video here so we've taken this picture without any other information so we couldn't really inspect the fonts we couldn't get the colors about using the color picker we couldn't even find out the sizing really without getting another extension to do that so it's just using your eye seeing what you think there what the elements how can you make these appear on the page and then so part one we did this we managed to grab those elements put them there and then the second part was more about you know these finer details adjusting things tweaking the font sizes and you can see how big these changes are which is just a few small subtle changes so i definitely recommend trying this out thanks for watching and i'll see you in the next video

Channel: Rusty Zone

Views: 442

Rating: 5 out of 5

Keywords: chrome extension, create chrome extensions, chrome, extensions, how-to chrome, manifest v3, mv3, chrome extensions, google chrome, new tab extension, javascript, how to, build a chrome extension, how-to chrome extensions, rustyzone, chrome extension tutorial, background page, manifest version 3, content script, firebase, firebase mv3, lambda function, inject code, service worker inject, inject js file, psd to html, image to html, dribble to html, image to html css

Id: tQZC1tqJL20

Length: 46min 24sec (2784 seconds)

Published: Thu Apr 22 2021