How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section

Key Takeaways

hey guys welcome back to my series on how to build a responsive website from scratch today we're going to be focusing on this portfolio section so we're going to build this cool grid put a little hover effect in so we can click on the link to find out more about the [Music] projects before I really jump into that I just want to say thanks so much for watching uh so far I hope you've liked the series so far if you have don't forget to hit the little like button on this video it really helps me out and leave a comment below let me know if I've been doing things properly if it's been easy to understand or if you'd like any more explanation on things also this series is going to be wrapping up pretty soon I got this video and one more left after that for the two sections down at the bottom uh so if you have any suggestions for other things you'd like to see leave them down below in the comments and I'd be glad to uh take a look at those going forward but enough about all that let's uh actually start looking at what we have here so I've already gone and done the htl a while back if you haven't seen that video go check it out it's number one there should be a little thing you can click on somewhere on the screen screen now to go see basically I built a nice big section uh class portfolio on there I put a title on it and then I put in a bunch of figures uh inside each figure uh is a class of it's a port item portfolio item I have my image in there which is there and then I have a fig caption and my fig caption is the little title here as well as my big button now this button I want to be a small button and I never actually got around to creating a style for small buttons so why don't we start with that right now uh I'm just coming in here I'm going to find where all my other buttons are there we go um so let's just put my button small right here so button small and for that all I think I need to change is my font size so let's just do a nice little font size of let's try 6 rim and it's not working because I have my media query down here um so basically this class let's just bring this up then that's not a big [Music] deal um basically what was happening is it was saying my font size for button small should be 6 and then my button size should be 1.5 so because this was lower down in my CSS it was winning there we go and wo 6 is too small well before I say that for sure well it is too small but uh I am going to bring up my responsive and just set this up to be uh the phone size I'm at 100% uh and let's just make that a little bit bigger that should be pretty good except um the I'm also going to increase the font weight cuz that's at that font size it's kind of small uh let's just go with a 700 I think that' be easier to read it's hard on the white right now but it's not going to stay on white it's going to come on top of our picture now a few things that are going on let's just take a quick look um well I do need uh some space here to push you know I'm glued to the top there I going to move that down um these aren't the full size and this is a strange little thing if I look in here um let's just make that a little bit bigger I'll make these font sizes a bit bigger um figures for whatever reason have um where is it um a margin on the left and the right by default and it's point is it 40 uh yeah margin start margin and the left and right it comes as a user agent stylesheet where they're just they have that um so I am going to have to turn that off uh I'm just going to do all that down in my portfolio CSS which I probably don't have anything for yet um so for my portf portfolio I do uh the first really quick thing we'll do is just figure uh margin zero we shouldn't need any margins on them and right away that helps with there it goes full size uh we can just come and this is my portfolio margin of let's say top margin with an R uh top and bottom three M and left and right zero just to give us some space up top there I Clos that but I don't want to I want to keep that opened okay so the next thing I want to do is move my uh these things on top of the picture so we have a little bit of work to do but it shouldn't be too much um let's go and grab my port item so I want my portfolio items uh really important they need to have a position of relative to be able to uh move things propably pro probably properly inside of there um and so let's leave that like that and then come and say my did I give them a class figure image fig caption is my port description uh I should be Port item I shouldn't change this I should change this to Port item my port item will have the margin of zero oh did I really do it like that Port my figure is my port item I can put all this together that's silly of me okay and then my port descript description uh will have a position of absolute so let's just save that and see what happens Port description it's not Port description it's Port description like that nice and short um and then it disappears so I do believe I'm going to need to do oh it's underneath Zed index 100 ah there we go so now they're on top so that's good um I'm going to say bottom of 1 M left of zero right of zero just to center it whoop why did it oh I forgot my there we go okay so the bottom is 1 M off the side the bottom I'm going to make that a bit bigger actually let's make that 3M just to move it up a little bit and I'm going to do a couple more things let's change my color to white and now let's give this a background uh background of rgba because I want it to be transparent and we'll do black 0000 z0 and not zero .25 no much more 75 cool um I'm going to say left also of 3M 3M I find it a bit weird that I'm sticking it to the sides there so let's just see that looks a bit better and we'll add a little bit of padding padding of 3M let's see how that looks that's too big 1 M and I'm actually going to drop this down to like a two um basically I want to just be able to you know I'm thinking if I'm on a mobile device I want to always be able to see the picture and this is just going to stay on the top all the time that's inside a paragraph This is um let's just do uh my port description paragraph has a margin of zero H I just assumed the space up there was coming from this but it's not let's just do a padding bottom 1 M padding top 5m I keep forgetting my semicolons just to try and balance it out a little bit I don't really like how that looks right now though uh what do I want to do I think all I'm going to do here I put a margin of zero let's just do a margin of one m i can take off my padding top that way that looks a little bit better um I also have this really annoying little space underneath these this is actually coming from these images um there's just the annoying thing with images in general um I'm going to say my port [Music] item images yeah uh Port item and so uh anytime you have images and they're the only thing Port item image so if you have an image and it's only an image inside a div because they're inline block by default um there's this little space that comes up underneath all images to account for the descenders on text you know something like down here the letter P has this thing sticking down so if the image was in with the text it would take that into account but in this case we don't need it so if an image is all by itself the simple thing is just to do a display block uh the whole purpose of it being inline block isn't really needed in this case and we can stick them together nicely cool it sort of fits with we have this nice dark thing there and we get into these I think it looks fine and normally the project titles would be a little bit more varied too so I think that looks pretty good the real fun of this is going to start once we start getting up to bigger screen sizes because there it looks okay uh but once I get to a bigger screen size and it's not on a phone anymore or a tablet I do want these to um disappear and it's only on Hover that they appear and also I want to turn this into a grid because obviously my pictures aren't big enough even for it to work right now uh so we have a few little things to do we want to make it be able to turn into a grid so uh where's this actually breaking at about six just over 600 pixels okay so uh we need my at media not media query Ono media uh we need that and that and I don't know quite where this is going to be so let's do a minwidth of we'll start with 30 REM and we'll come in here with our Port item and my port item is going to have a width of 50% let's just see what happens cool so it works uh except it's h yeah it's happen it's happening at 500 pixels which I think is fish let's make that 35 that's better I like that we can keep it single jumps up so that's cool um actually let's bring that up to 40 can we get away with 40 we can definitely get away with 40 oh we can't okay 37 of course this really depends on my picture size um but I think that looks pretty good there and then we want it to jump up to a two column so there there they're also going to need to float to the left there we go so now they're at 50% super and of course when I get to the even bigger screen sizes I am going to want that to change as well where we're going to want it to break into a grid of three uh so I'm just going to copy this whole thing and that one I think I'm just going to do it my standard one that I've been doing for everything of 60 rim and it's going to be at 33.33 3334 and I don't need to float left it's always floating left because of this one over here and there we go so I have it in a grid like that and then that grid will snap and I have two and then that will snap and go to one super great um I'm not super actually happy with this a little over delay that I have here but uh I'm going to leave it there for now because that's it is what I want it to look like at the bigger screen size um so at the 60 here there's a few other things that I'm going to want to do though I'm going to want my um Port description pretty much I want to move it away I want it to be off that space so uh I'm I'm going to move it down so it's not inside this block anymore it's too far down so I'm going just going to do a transform Translate Y so y access is up and down and let's just try 150% and there we go so they all moved down like that obviously the problem is I can still see what's going on so on my port item I'm just going to do an overflow of hidden and now I can't see them so if they're not inside that box they're now hidden and what I can do which is always fun is a port item hover my port description will do a transform and it will do a trans uh Translate Y again but it will go to 0% so when I hover on top except a hover won't work because I'm in responsive view uh so when I hover on top bang it appears like that and that I'm pretty happy with actually let's just go back up here bottom zero left zero I don't need I'll keep the M's I don't really need them but I'll keep them and let's just see that looks a little bit nicer right and we'll add my padding bottom out like two H I like that a lot more actually now the only problem is I don't want it jumping and just snapping into place like that I want it to transition um I could put my transition just on my port item or Port description I mean but I like having everything have the same transition on a site so up here where I have everything selected I'm going to add a little transition uh so we're transitioning all properties we'll just do a nice ease in out and it'll be 250 milliseconds which is sort of the default that I tend to use most of the time so now when I hover over anything you get that nice little transition where whoop whoop whoop whoop I think that looks pretty cool and then on the responsive ones so once we get down to the two where someone's on their tablet it's going to look like [Music] that and then that will drop down and get to a single and it will look like that maybe it's is too dark let's just jump back down there there's something that's sort of bugging me about these six yeah there we go I like that a lot more it was just really taking everything away from it a little bit so we have this nice sort of grid here now and this could obviously more than six pictures this could I could add as many pictures as I want to this grid and it's going to keep working all the time which is nice and fun and then it collapses and it collapses down um so I could technically uh do something where when someone's on a mobile thing if they were to click on it this could sort of fade in um but really uh if I'm on a mobile site and I'm just I get to the top here uh or even you know I'm on a tablet I get to here if I just saw all those pictures there I wouldn't always necessarily think of clicking on one I know that sounds really weird uh if you're a big time web user you click on everything pretty much especially you're on a site like this but for usability sake um you know someone technically could get here and then just scroll past it without ever even knowing that you get more on more details for these projects so I do like keeping it um for ux reasons just make it really clear that those are things they can click on but of course uh if I get to it on a normal screen and I'm I have to hover so the hover effect uh for me I don't mind having the the nice little hidden hover effect on those um so yeah I think that looks pretty pretty cool and I think we did that pretty quickly so I'm really happy with that and how it turned out project details uh they're not going to link anywhere for now CU it's not really a real site but it's looking pretty awesome uh and if you were to do this you could link it off to your own thing so yeah if you like this video please go down and hit the like button cuz that would make me very very happy and leave a comment please say hi say hello ask any questions you've got and uh or recommend things you'd like to see me try this video is almost done the series is almost done we're wrapping it up we're getting near the end I only have one video left and then it's on to other cool stuff so uh but we're not quite there yet in the next video we will be looking at down here the call to action which should be pretty easy to put together as well as this footer so we're we're almost there and one last time don't be shy say hi go down and until the next video have yourself an awesome day and week and I'll see you next week when the next one comes out