#1 - Recreating Dribbble shots from scratch with HTML/CSS

hey there guys it's amit you're watching dev dreamer and in this lesson we're going to be building this dribble dashboard design from scratch using html and css now you might recognize this from the css grid video in that lesson we actually built this out using css grid alone but in this lesson what we're going to be doing is building this from scratch so we're going to start with a blank canvas and build this out so the first thing to say is that this isn't my design of course this is from dribble and it's from outcrowd so i'll leave a link to this in the description box below do go check them out i've already opened this in a new window though so let's go ahead and close this okay there it is there and the first thing we need to do then is we need to set our project up so i've used three different tools here i've used font awesome flat icon and google fonts i'll leave a link to all these in the description box below so i've used fun awesome for these icons here so the check mark icons this bell these more than signs here as well as this pencil icon and these icons as well i've used that icon for these buttons over here so i'll fly icons used for the buttons and then finally i've used google fonts to pull in this font that they're using here as you can see these in the same font throughout this design and i've already found that font it's called poppins okay so let's go ahead and close these and let's take a look at our project i've gone ahead and created an index.html file and a style.css file and i've also got this images folder and let me just pull in the window here so you can see what we've got inside there we've got these four images here which relate to these four buttons okay we've got this profile images image which is basically just this here we've got the devroom logo which i'll be using for this profile section and then finally we've got this spanish flag which we're going to be using for this section right here okay so let's start then with building out our html so just close this and let's start so first then let's work on the html so let's put in the basic shell for html okay let's change this to dribble and punch because that's the name of this design let's also go ahead and link our css file so i'll say link and start our css let's just double check that this actually is linked up so i'll just say body and background red yep that's cool now i'm also going to put in my unique font awesome script okay and finally then let's add in our google font script just paste that in like so okay so that's everything in the head section done let's now work on the actual design so one of the questions that i've often had is how do i approach the structure of my site well one of the things to keep in mind is we're always thinking about our css remember the two are connected so when you're thinking about how to structure your site you want to make things as easy as possible for yourself when it comes to writing css so the key to writing good html is think about how you're going to style this html with your css so for example let's take a look at our design the first thing that stands out for me is the fact that this design has 1 two three separate columns so i'm thinking i'm gonna put this into a container give the container a display of grid and these are going to be three columns okay if we then look at each individual column we can see that for example this one in the middle has one two three four rolls so again we could use css grid there to create our rows we've also got sections where we have elements with space in between them like for example this image here and this text here and again this text here and this text here so we can use something like css flexbox on those elements so you always want to be thinking ahead about how you're going to be styling this with your css so let's start then by creating a div and id of container so let's give ourselves some space different idea of container and then inside that i want to create one two three divs we're going to call this one nav this middle section here is going to be called main and then this one's going to be called profile so we'll say nav main and finally profile let's now work on each of these individually let's start with the nav section so first of all then we can see that there is a logo then we have some space and then we have our four buttons or links so let's go ahead and add those in and this logo as well looks like it's literally just the letter p and then it's got some rather intricate box shading on there as well so in html in nav i'm going to create a different id of logo and then inside that just normal paragraph tag and we're going to say p with a full stop now let's go ahead and create our links we need four of them and now i'm going to use something called emit and that basically helps us write our html a lot faster so basically because we want four anchor tags i'm going to say a and then in brackets we can specify any attributes so this i have an href of just a hashtag this isn't actually going to go anywhere and we want four of those and inside each of those we want an image and each image will have a class of button so class button and now if you hit tab this should work perfect so we've got one two three four links with four images inside them okay let's go ahead and add our images so for the source we're gonna say images and this first one was the filter image so filter and we'll just give it an alt of filter as well then we had dashboard and i'm going to give this a class up active as well because we've got this indented design here so let's just add our button in first so images dashboard give an alt of dashboard as well and a class sorry a class of active and then finally we had profile and stats so let's add those in okay perfect so now we've got our four images in there and that's the html for our lab section done so let's go ahead and give this a comment saying the navbar let's put some space in between these as well just separate them okay and now we can work on the next section which is the main section okay so let's take a look at our design so again here then we've got the column with one two three four sections okay so first let's add this text in here and it just give ourselves some space actually as well so in here i'm just going to say h2 progress dashboard okay and now for these three sections here i'm going to call this one top this one middle and this one bottom so let's go ahead and add those in one section we've got three of these this will have a class up top and just copy this [Music] this of middle and then finally this of bottom so let's first work on this top section here so we have one two three elements let's go ahead and add those so i'm gonna call this first one um exam i'll call this one homework and this one reading so in our section with a class of top i'm going to create a class of exam homework and reading i'm also going to give these two divs here the same class because as you can see they're pretty much the same except for the colors and obviously the content so let's go ahead and give those the same class of to do okay let's now work on this first section and if you can see what we're doing guys we're actually looking at the big picture first and then we're going into more and more detail for each section okay so for this then we can see we've got one two three four sections or elements rather so let's start at the top we've got deadline and 12 o'clock well we can see that deadline has different styling to 12 o'clock but it's also on the same line so what i'm going to do is i'm going to say paragraph and inside this i'm going to do a span it's going to say deadline and then for the actual paragraph text i'm going to say 12 o'clock and i'll just give a space in between these as well now if we look carefully we've got the similar styling that's been applied to this text and this one and these as well and then these titles here have similar styling as well you can see they're all pretty much the same size these as well over here and they've got some slightly bigger titles for example unit 5 spanish for beginners and courses progress so for these very small titles i'm going to give a class of subtitle for these large titles here i'm going to say paragraph class of large title and what does that say it says exam hyphen unit five so exam hyphen unit five next we have another subtitle here so i'm going to say paragraph with a class of subtitle and that says spanish for beginners [Music] and then finally we've got this section here we've got two elements with space in between so much you can put both of these into a single container then we're going to use flexbox on that container so that we can put space in between these items so i'm going to call that test inside that we have our image and we have start testing so image let's pull in our image which was this one right here just give it an alt as well and also within our test class i'm going to put this link here so an a tag so i'm going to go anywhere and we're going to say start testing okay so that's this little element done now let's work on these two here let's just close this okay so for these we need to put in our check mark icon and this is just from font awesome okay so we've got it there next we have a title and then some text underneath so let's give this a class as well and call this to do title and that was homework and the text was for today's lesson so okay so we can actually go ahead and copy this because this element here is pretty much the same so it's going to go in so we just change this to reading and the text is 25 words per week so there we go so that's this top section now complete let's look on the middle section so let's go ahead and close the whole top section actually and now we can work on the middle section so for this middle section then we've got these two blocks we've got this group info one and then this progress one over here so let's go ahead and create those so in the section of class for middle we're going to say class of group for this left one here and then for the right hand side i'm going to call this [Music] flag progress let's work on this first section [Music] okay so for this and i can see we've got this header section here then we've got this bit in the middle then we've got this sort of footer section in this element so let's go ahead and name those so i'm going to say group header [Music] group homework and finally group footer okay so for this top section then we've got once again two elements that are side by side so i'm going to put these in the same container and then put a display of flex on it so that container is going to be group header and so for this part here i'm going to say give it a class of title group info and then we're going to throw a break tag in and put this span in here so i'm going to give this a class of sub title and i said 13 students in the group okay and then on the other side then we've got this bell icon here so let's use fun awesome to put that bell icon in like so perfect let's now work on the next section which is going to be this orange section here so here then we've got pretty much the same thing as this over here we've got these elements on the left some space in between and then this icon over here so i'm actually just going to go ahead and copy this and paste this in for a middle section called group homework and let's do the same for footer as well i believe uh except here we've got a paragraph tag instead of this so let's go ahead and fill this in so for a class of group homework it says group homework let's change this to group homework and then five students from the group online now so okay and then for the icon we've got this so you can just put this in from awesome finally for the first section in here we've got today's lessons you need six articles and then we've already put this in so today's lesson and let's change this for unit six articles okay so that's this section complete and just close this out once again here then we've got two separate elements we've got one here that contains the flag and the title and then down here we've got this progress bar so i'm thinking let's put this in a display of flex set the flex direction to column and then we can put space in between so in html let's give this top section here a class of flag progress title inside that we have image and then the text so let's drop image in there is right there and then our title and again we're going to give this a class of large title [Music] okay let's now work on this progress section here so let's give this a class of flag progress amount inside here then we've got the percentage let's just zoom in sorry percentage and then the progress bar as well so paragraph and it was 75 and then down here we have a progress element with a value of 75 and we'll do a max of 100 as this is a percentage okay perfect so that's this middle section then let's now work on the final section of our main column and it's going to be this bottom section here so again let's close out our middle class open up the bottom class and in here similar to this section here we have two elements side by side but this time they have pretty much the same styling just different content so we want to give these unique classes but also a similar class as well so let's call the first one but grammar and let's also give it a class of bot as well but it's just short for bottom and let's do the same thing here let's just copy this actually okay so let's see what we've got then once again then we've got these elements and a space and then this element here so i'm going to create div for these elements and put them both in there so div and we have first of all this pencil icon here let's just paste that in from font awesome and then here we've got our class of title and class of subtitle as well so inside that same div we're going to say paragraph with a class r of title i'm going to say grammar that's our breakthrough again span with the class of subtitle and that says plus 30 grammar rules [Music] okay and then finally we've got this icon as well so let's just throw that in like so now this section as i said is pretty much the same as the other one so let's just copy this and let's paste it into here let's change this to dictionary and plus 10 new words okay and let's change these icons as well [Music] okay and so with that then we finished our main section let's now finally work on this profile section over here let's just close this out and let's close this out as well let's go ahead and put a comment on this and i'm just going to say main and i might as well put one in for this as well of profile okay so for this then we've got three main sections this picture area here this ad and then this course progress section so let's go ahead and first add those in so we'll call this first section pick the second one add and finally the third one progress and again let's now focus on each of these starting with this top section here okay so this has an image and some text so in here i'm going to say paragraph with a class of large title i'm also going to give it a class of name as well and let's say dev dreamer let's also put our image in as well sorry so up here image let's go ahead and find that logo just put this in as an alt tag as well let's just change it now quickly in here with 200 pixels and then finally down here we have this subtitle text so paragraph for the class of subtitle we're going to put in here like share and subscribe and if you take a look at this we've got this box here and then once again inside that we've got these elements here on the left some space in between and then this element here this icon so i'm going to say on a class of ad first of all for that box i'm going to give this a class of add box then we'll go ahead and style that and inside that then you see paragraph with the class of title and what did it say get 10 sale price so [Music] okay and then this said for spanish a2 course so in a span let's say for spanish educause finally let's add this icon in so that's his ad section then let's now work on the last section which is going to be this course progress section okay so for this then we can see we've got a title and then we've got these three boxes here and once again these three boxes have got pretty much the same styling the content is the only thing that changes so we want to give these the same class as well so firstly let's just put this title in so paragraph i'm going to give it a large title class and it's courses progress and then for each of these let's give those a class of progress box and we've got grammar dictionary and reading so i also want to give each of those a unique class as well so grammar and what we can do is pretty much just style this one and then just copy it through so inside here then that's what we've got we've got some text an icon and then some more text so first we'll say paragraph for the class of percent and this was 63 then we have our icon and then this text says grammar learn new rules so we're going to say paragraph for the class of title grammar and then span with a class of subtitle we're going to say learn new rules so there is right there now what we can do is actually as i said copy this so let's just save ourselves some time so let's copy this okay now let's just go ahead and change that so this is going to be dictionary and reading okay we've got 78 and 34 so change this to 78 and 34 learn five new words and train your skill so let's just say learn new words so it lines up with this and finally train your skills uh okay i also need to put those icons in as well so this for the dictionary and this for the reading section okay guys and with that then let's now move on to our styling to make this look a lot better so let's go to our css okay so the very first thing we want to do then is just set some reset styles for our design so i'm going to say margin 0 pixels same for padding set box sizing to border box and because we're using the same font on this let's just go ahead and say font iphone family and the font that we want to use is poppins and we'll say sans serve as well okay so now we're using that same font throughout now the next thing we want to do is add some variables so let's take a look at this design the first thing that jumps out to me is the fact that we're using the same sort of colors throughout we've got this purple okay orange and this red so let's go ahead and put those in variables so in our css i'm going to say hyphen root so send these variables globally and i'll also leave a link to my video on these variables as well if you're not sure how variables work then do go and check that out they are really really cool so first i'm going to say hyphen hyphen orange and we'll get the hex code for this in just a second and then we'll say purple [Music] and finally hyphen hyphen red and now to find these colors i'm actually going to use a google chrome extension and i'll leave a link to this in the description box below so here then i'm just going to say pick color from web we've got this purple one here so it's this right here so we can just paste that in there let's get the orange color as well [Music] okay and then finally the same for the red color okay let's see what other variables we can add so if we look carefully we can see that all these boxes have a border radius on them and they seem to be using the same border radius so let's say border radius and let's just say 10 pixels and also these boxes here this one these three here and these two down here have all got the same border style so i'm going to say hyphen hyphen border it's great variable for that and we'll just go for let's say 0.5 solid like gray okay so that's all our resets and our variables as well and now what i'm going to do next is we want our design to always be 100 in height so i'm going to say body and html and set the height on this to 100 view height let's now start with the container so let's say container and i'm going to give this a width of 100 view width and a height of 100 percent so on this we also want to say a display of grid and we want one two three columns so we're going to say grid template columns and we're going to say 1fr 6fr and 3fr and so now if we take a look at our page we've got one two three columns i'm also going to set grid template areas on this as well so grid template areas and for those of you that recall this is a visual representation of a container so n for nav and for main and p for profile and we'll add these to the relevant sections when we come on to them so let's start then with this nav section so what i'm going to do here is i'm actually just going to move this across okay so we're just focusing on this nav section so let's put a comment in here this gives us some space um select this by saying id of nav and let's get this background color first so we'll use this so i'll say background color and paste this in okay so we've got the background color in there let's set good area on this [Music] to n and now i'm also going to give this a display of grid as well and then we're going to set some good template rolls inside it so if you have a look at this we could say that each button takes up one row so this would be one two three and four up here the logo take another one so that's five six seven and eight so we're going to say grid template rows [Music] repeat eight modifier and let's also place these items in the center so here we can see they're centered horizontally and vertically so we're going to say place iphone items center and that hasn't worked because ah we haven't put display grid on here yet okay so now they're all centered and so nav is now a group container that has eight roles inside now if you take a look at our logo we can see that the logo seems to be taking up more space than a single row it seems to start up here and end down here with all this empty space so let's go ahead and select the logo okay and i'm going to say grid raw one stroke three and all that basically means is start on with roll line one and end on grid row line three let's go ahead and do the same for these buttons as well but you're just going to expand this a bit so let's first select all of these buttons [Music] okay and now let's add in the grid rows so we want this one to start on four line three and end on line four this to be four stroke five [Music] five stroke six and then finally six stroke seven okay now let's go ahead and style this logo here so if you look carefully you can see that there's a dark border on the bottom and the right and there's a light border on the top and the left there's also an inset border which means that we're placing the border inside that element a dark one here and then a light one here which gives it this really cool embossed effect so let's see if we can recreate this okay so let's go ahead and select our logo and let's just zoom into this as well here okay so we're trying to recreate this first of all let's give it a color and we're going to use our variable which was hyphen hyphen red let's increase the font size to 2em and the font weight to bold okay let's give it a width and height as well so we can create that square so width of 70 pixels and a height of 70 pixels as well and now let's work on this box shadow so box hyphen shadow so first we're going to say 5 pixels 5 pixels 8 pixel blur 0.2 okay now because we're doing multiple values these need to become separated next we're going to work on the white shadow on the other side so we can say minus five pixels minus five pixels and pixel blur again and this time we want to say 255 and 0.6 okay so now we've got the dark shadow and the light shadow on the other side as well let's now work on these shadows on the inside so we do that using insert and we'll go for 0.8 so now if you could look very carefully here we've got a white shadow here on the inside of our square let's not do the same for this side but it's going to be a dark shadow and check this out guys this gives us this really cool embossed 3d effect really really cool let's move our lettering into the middle by saying display flex just by content center center it horizontally and then center it vertically we can say align items center as well okay so this is what we wanted and this is what we've got let's just zoom out let's now work on styling these buttons and for this we're going to say opacity of 0.4 i'll just zoom out now this okay so you can see these are slightly lighter and also a padding of 10 pixels let's also specify a width and height on this so with 0.5 pixels and a height of 45 pixels as well now we will also style this active button here so quite similar to our box shadow on here it said this is just on the inside let's zoom in so i'll show you a light shadow here and then a darker shadow there so let's see if we can do that [Music] so here let's zoom into this one here and select the class of active [Music] let's go ahead and add the box shadow so we can say box open shadow and point eight and then for the other side okay we can't really see that so let's bump that up to 0.2.3 0.4 maybe yeah i'll do i think and with that we're done with our nav section let's now work on the next section which is the main section okay let's go ahead and put a comment in here [Music] okay so first then we don't need to change the background color on this because it's already white we've got a padding on either side and we can say padding zero pixels on the top and bottom and 100 pixels either side just move this up slightly let's set our grid area which was m grid of an area of m let's also give this a display of grid and we want one two three four rows and if you look carefully grids one two and four roughly have the same height so we're going to say display grid first let's not forget that this time and grid template rows is going to be 1fr 1fr auto for row 3 and then 1fr for the bottom row okay next let's dial this h2 up here i'm going to say main h2 okay so let's change the color [Music] and the font size i'm actually going to bring the font weight of this down as you can see ours is a lot thicker than this is so fun weight let's add some left spacing as well if you have a look at the design we can see that this is actually placed at the bottom of its cell vertically and horizontally it's at the start so we're going to say because remember this is a grid item we can say place hyphen self end and start i'm also going to say margin bottom of 20 pixels to move it up a bit let's now work on this next section which was our top section so say section with a class of top i'll just move this up slightly so looking for this one here so first of all i'm going to give this a display of grid with three columns and this first column is going to be bigger than these two over here so i'm going to say display of grid and then grid template columns and for this first column i'm going to say 3fr and then 1fr 1fr for the other two okay so this is what we've got so far let's go ahead and style these now let's start with this one so this had a class of exam and the background color is our purple so we're going to say background color we're going to use our variable of hyphen hyphen purple let's also use our border radius variable hyphen hyphen board radius that didn't work why doesn't that work uh okay because it's not hyphen radius but just simply board radius okay cool let's change the color to white let's give it a padding and we need to space these out so i'm going to say display of flex okay by default set to roll when change this to flex direction of column and justify content space around okay now let's work on this bottom section here which had a class of test we're going to give it display of flex okay so now they are side by side we're going to align these vertically so they're both centered so we're going to say align items center so now they're both aligned in the center on the vertical line and finally to put the space in between them we're just going to say justify content space between okay next let's actually sort these titles out as well so up here actually i'm going to say title a class of subtitle and a class of large title so for title it's basically these over here so let's set these to okay for subtitle which was basically these here [Music] and then finally for large title which is basically exam unit five spanish for beginners course progress name as well okay so now this is starting to look a bit more like this let's sort out this link over here [Music] next we're going to work on these to do sections so i've got pretty much the same styling for them so i'm going to say let's give ourselves some space again i'm going to say class of to do so display flex okay again so everything's been set to flex direction of roll by default let's change this by saying flex direction column because we want them stuck on top of each other and then let's also say justify content space between okay let's increase the font size of our icons let's also style text inside okay now let's start them individually so [Music] now i can also see there's some spacing in between these columns so back on section top we're going to say column gap of 25 pixels now the last thing we need to do is if we look carefully at this on us the section is filling up the full row whereas on the design it's actually pushed up at the start so on section top i'm going to say align content start and now you can see it's pushed up slightly brilliant that's the top section done let's now work on the middle section okay so we also want to give this display of grid and we've got two columns in here so i'm going to say display grid and then grid template columns i'll just say repeat to modify okay so we've got this section here and this section here side by side let's first work on styling this one here okay so first one let's apply this box shadow on to this so box shadow and i'm gonna go for four pixels six and twenty pixel blur the color is going to be light gray we've also got a border radius on there as well so next we want to give it a padding as well okay all around and we want to set the content in here with display of flex so remember we've got one two three items so we're going to say display of flex again by default we source it to roll we can change that by saying flex direction column and justify content space between let's set a height on this because at the moment it's well way too big so high of 350 pixels okay now let's work on these three sections individually so first is top one here so this had a class of group header and here then again we're going to set this to a display of flex and justify content space between so display of flex okay so these two here and the tool space between them just by content space between now let's work on this middle section here this orange box once again let's set this to a display of flex and we can say justify content space around this time and see that let's just increase the size of this we also need to align these items to the center okay as you can see our icon up here is off center so we can say align items center and finally then let's give this a height of 150 pixels finally let's work on styling this bottom section down here let's get this display our flex and it's pretty much the same thing as before we've got two elements side by side so we're going to say justify content space between okay so it's starting to take shape let's not work on this section so that was called flag progress let's set the display on this to flex and we want to set this to column so flex direction column let's first just minimize the size of this so let's set the size of this by saying flag progress image and set this to width of 50 pixels okay so it's a lot better let's also give this some padding as well around block shadow half [Music] and for the board radius again we'll say to our variable in fact i'm just going to bump this up slightly because i don't think it's 10 pixels i think it's slightly more go for 12 pixels okay let's now continue working on the overall container here so flag progress so i'll say justify content space around okay align items flex start and let's give it a padding of 40 pixels and 80 pixels let's now work on styling this progress bar over here so for that i'm going to say and then let's style the actual color in here so we're going to say [Music] and i'm going to set the background color on this to our variable of orange so hyphen hyphen orange and give it a border radius of eight pixels so now we can see that the value has a border radius on either side of eight pixels let's do the same for the container so that's going to be the progress bar let's change this to bar and the same board radius so that's the middle section done as well finally then for our middle column let's work on this bottom section down here okay so let's select section with a class of bottom so i'm going to say display of grid once again grid template columns it's going to be repeat u 1fr we've also got a column gap as well on here [Music] so let's say column gap of 25 pixels and now let's start styling each individual section so first of all we've got the same class so press robot and now let's use display flex inside of these to sort out the text so we're gonna say display of flex and why isn't that done what we want to do let's go back to our html and it's going to be in main section class of bottom and ah okay i see the problem we've actually put the icon inside the div so we want this to be separate so put this outside and put this icon outside of that div as well [Music] okay so now you can see the two elements this one and this one are side by side that's what we wanted now we're going to say justify content to space around and center them vertically we're going to say align items center perfect now let's work on these here so you can see ours are stuck on top of each other so we want to go ahead and select those this gives us some more space as well so we're going to say give this container display flex okay so these now are side by side also get a flex basis of 50 let's align this vertically as well and finally justify content space around let's now work on these icons [Music] and we can't see the shadow so let's go ahead and let me just zoom in as well sorry okay let's go ahead and put a padding on this of 15 pixels okay now let's go ahead and color these now the last thing we want to do here is on a design we can see that we've got some spacing in between whereas with us this row and this row are bunched up close together so for that we just want to go back to our section of bottom and we want to say align items center perfect so that's now the first section and the second section done let's now work on the final section which is the profile section so let's just move this up and let's go so first one let's put a comment in let's select profile and this is some background color so once again let's go ahead and find that background color [Music] okay it's also got some padding either side so we're going to say padding 0 pixels on the top and 100 pixels on the side and this was grid area p so grid i have an area p now if you look at our container we can also set this to display of grid as we've got one two three rolls so i'm going to say display of grid and grid template rows of 30 15 and then 55 for the last one okay so it's taking shape let's now work on this top section here and we're going to say display of flex set the flex direction to column and then we want to say just about content center and align items center as well okay now let's work on our image [Music] perfect now let's work on this next section here which was the add so we've got this add box here so add box was our class [Music] and now for the content we're going to say display of flex justify content space around let's say align items center and let's give it a padding of 20 pixels okay so now let's work on this icon here just zoom and show you [Music] so now finally then let's work on this course's progress section so let's go ahead and select it with the class of progress [Music] and let's give this a display of flex [Music] flex direction column and then justify content we'll go for space evenly now let's work on these individual boxes so that had a class of well they rather had a class of progress box [Music] let's now give this a display of flex let's align these vertically so we're going to say align items center so now they align vertically let's say justify content space evenly okay so we'll get in there let's work on these percentages here let's go ahead and just copy this for the other two now let's work on these icons [Music] i've bought it radius and with that guys i believe we're done so let's go ahead and maximize this okay so this is what we wanted this was the design and this is what we've got so that's it for this lesson guys i hope you found it helpful and useful if you did don't forget to hit the like and subscribe button down below and don't forget to share the video as well also let me know in the comment section down below if you want to see more videos like this where we take a design and then recreate it from scratch so get practicing don't forget to like and subscribe and as always i'll see you on the next one [Music] you

Channel: Dev Dreamer

Views: 7,479

Rating: 4.9649124 out of 5

Keywords: dribbble, dribbble shot, dribbble design, website from scratch, building a website, html, css, javascript, web developer, web design, recreating websites, dribbble from scratch, dribbble html css

Id: f7ECiT4aAFg

Length: 43min 33sec (2613 seconds)

Published: Fri Nov 13 2020