Design & Build A Website Crash Course - HTML & CSS

Alohomora my gorgeous friends on the Internet in this episode we are gonna continue our three-part series on building a complete website from you know the deal I don't need to tell you so this part is gonna be all about building out the code and making it responsive and then on the last part finally we're gonna do the animations and deploying Utah there is not going to be any magic trick today well you are wrong that hurt here we go we're gonna take a card let's go with this one here this one I am NOT looking I promise I'm not looking remember this one okay we're gonna drop it in the middle now with the magic of my hands okay I actually left a mark with my finger II grease on the card so I can tell where it is I just feel I just feel the cards I know I know it's around here alright I'm gonna guess don't tell me but I'll try to guess the car so I know it's here somewhere okay let's see was this the one I say no was this the one hmm let me feel it's not this one either I have a good feeling it's this one was it this one I don't think it was not this one was it this one nope how about this one yeah I have a good feeling it's this one tatata it's the seven of Hearts was I correct no it was one of these let's take a look was it are you sure I'm pretty sure it was this one and that's it folks goodbye end of the video and we are back to the code hope you enjoyed that magic trick okay so the first thing we're gonna do I just have an empty folder here is we are gonna make the basic files we always need index dot HTML then we're gonna need a CSS and actually that's gonna be it for this one and we're gonna cover the JavaScript again in the future and the next part okay and I will provide you a folder here with all the necessary pictures that we created and figma if you want you can export those if you done the design this one that we just made in part one or else yours is gonna find it in my description somewhere so I'm just gonna copy over everything that I have from there and as you can see you just a bunch of images and that's gonna be it so let's get going let's go in here and we are gonna do let's actually make this a bit bigger all right how about that it's a bit better for you okay so that's what we have let's rename this to what we have in the website which is Dimitri Marco and we are also gonna use the live extension so we can open it up if we right click if you don't have that extension you can go here and search for live server lotting live server like that and it's gonna appear down here you can pop it open and then you can see your website live okay perfect so right now it's empty like our lives but it's gonna slowly become better I promise okay so let's link our style sheet so link dot slash alright so we can add our styles and in here let's kind of start off simple I'm gonna create a big diff this is gonna hold all the content and I'm just gonna add a class portfolio to this portofolio and the reason why I'm doing this is because eventually I kind of want to have the whole website to apply this background color okay that's why I want to apply it to everything and if I just start with nav and then create another DEATH here well then it's gonna be a bit tough to apply I mean you can apply it on the body but let's just do it like this so we're gonna create a portfolio dev here and then I'm gonna have a header and we're gonna drop a nerve in here which is gonna hold basically our logo and our menu so for this one we can do a ch3 and we're gonna say class logo and all I'm gonna say is my name Demetri Marko it's not my real name by the way for those of you who did not see my other videos it's my alias name my Italian model name and for the second one now we in figma we kind of made the menu here but I eventually replace this with a hamburger you can do it either either way whatever floats your boat for now I'm gonna do that so I'm just gonna do menu the image not menu we're not gonna do the menu so if you navigate to the folder you're gonna find something called hamburger all right and we're gonna name this burger so if we if we hit save let's see if we can see this we cannot see it because it's white but we can see this one so that's good okay we have our nav now what's the main content of our website well you create a main for that for those of you who are not sure what this is like there's no need for you to create a div you can add a main that holds basically the important content of your website header and nav things that every website has so like a logo and some navigational links those are not important so you would drop them I mean they're important but they're not really like for SEO or actual real content okay what am I talking about let's create a section in here I'm gonna add a clip class in place of page and we're gonna add another one of photographer all right we're gonna add basically one that's kind of generic because we're gonna have multiple sections so this is one section here this is another one so every one each and every one of them has a page but we also want to add a class that is specific to this one so this is like photographer this is like chef or hand this is like hairstylist okay so that's what we have now what we need to add in here is basically we have the details so this is the details the picture and then we're gonna add this so we're gonna create another div with the class of details this is gonna be basically all the text so I wrote Elena more rel I have it here on my left just to make it easier for me h2 is gonna be photographer and the last one is gonna be debate 0 2 0 page 2018 the day that I stayed on the toilet ok so that's all we need in there now the inside still inside the section we're gonna have another div that's called hero and that's basically the image that you see in the center and so for now what we're gonna do is just drop those two images in here and the ones that we're gonna use our model left and model right so we can just kind of duplicate this and call this right and that should be fine and we can add an alt here of model just kind of describe what's here and that's gonna be fine ok let's also add a class let's say model left alright were just kind of gonna do the same thing and model right ok perfect hit save okay do we need anything else and you know what I think we are gonna keep this static because I don't want these to move because we're gonna animate a lot of these things from here ok and I don't want to duplicate these three dots across all the pages so what I'm gonna do is position this absolute so we're not gonna add it to this section okay so what we're gonna do is basically copy paste this two more times this one two and basically just replace all the necessary details so page photographer all right so that's the first one down here we have page chef all right and we're gonna say John Sabo's on this one I just come up with these names on the spot so I apologize pro chef all right we're just gonna change the date here at zero five let's do 2015 and everything else is gonna be the same and down here we're gonna change it to pro page I just say hair stylist hair style okay so this is gonna be hair style everything is still gonna be the same but we are gonna change the name so we have John Mayer here we can copy that paste it in here Pro hair stylists like that let's change the date as well and that should be kind of it perfect okay so after we do that we can leave the last section and this is where we're gonna add those three dots so I'm gonna name this pages alright so navigation pages and then we're just gonna do a few dips here we're gonna do a page one alright and this is gonna have basically a h3 a g3 yungang to the three page three that's a zero one alright and then we're gonna actually not have the SVG now I think I actually included the whole SVG in here so either one of these you can take dot empty or full I'm not exactly sure which one I used but I think we can just grab either one of these and we can just we make it let's just go with the dot full here okay I'm gonna grab that and copy it over here okay so hit save because we can change this with CSS anyways so on this SVG just drop a class of slides active okay this our first page is going to be active and what we're gonna do is just go back to page one so grab this whole div as you can see if I toggle it we can see it's highlighted just grab this page one copy it and we're gonna duplicate this two times and all we're gonna do is just change this to page two and page three and we're gonna remove the slide active we're just gonna keep it with slide all rights slide slide and the first one is active okay okay that's gonna be it so that's the HTML let's see what we have so far it's gonna be disastrous perfect now what we do need to change are the images here so I forgot to change those so let's go back in time let's minimize this let's go all the way let's see photographer alright then we have the chef so this is what we need to change model left so go to the source dot slash this is gonna be let's see here do we have it in here barber there we come part chef left okay and then we're gonna change this one to chef right I know what you gonna do chef right this chef is right hit save let's take a look all right we have two chef's there my sexy man and the last one is gonna be our hairstylist so just search for the last one hair style and this is the one we need to change we're gonna save dot slash hair left and hair right okay without slash hair right okay it's safe oh no I messed up dot slash this dot slash doesn't want to work where is my hair right there it is it's safe okay perfect everything is perfect okay so what we are gonna do is just go to style dot CSS and style everything up alright let me scroll all the way up what I usually like to do is just remove all the margins and all the other things that we don't want in our lives so by adding star we can grab everything and then we can grab the Sotelo I'm not sure how to spell this show the elements like that just in case we had any and we can just remove all the margins so we can say margin zero we can say padding:0 and box sizing order box okay perfect let's also grab some fonts so let's go here to google fonts the one we used in the design is gonna be Poppins I'm gonna pop a vein in my head so we can click on plus we can open it up here you can just hit download okay and what I actually grabbed are the irregular and the medium and I'm actually gonna just save it and drag it in my folder so go in your folder just create a fonts folder and just drag in those fonts I added the light medium and regular Poppins okay so just get those drag them in here and you should be good to go vs code JSON okay nobody cares about that so how can you add the fonts on your website well you can use the font face like that and then you can just say font family and you can give it any name you want font family okay now I I'm gonna have Poppins light so you can name this pop light then that's how I'm gonna name it you can name it any how you want but I think that sounds fancy and you just give a source with a URL and then you just navigate to the fonts poppins light that's all you need to do to do you can copy everything here paste it and we can just change it to pop regular all right it's your upper case and then this one just can be regular okay so that's it pretty simple okay then we can just go on our body that's what she said and then we can just say font-family and by default we're gonna start with pop light okay let's save let's take a look if that changed so there we go change that looks so nice okay so that's part one part two is we're gonna grab that portfolio portfolio and what we're gonna do is add a color of white so to the text so all the text we're gonna add an overflow:hidden because we're gonna actually let's not add this we're gonna do all of these things when we add the animations because right now it doesn't matter and finally we're just gonna add a background of radio really have a hard time saying this radial gradient which we did up here alright so basically I'm just gonna get those colors we can just do our GPA here I'm gonna do 4355 96 and then this the last one is gonna be the opacity so I'm gonna do zero point I mean we can do full one you don't even need our GPA we can just copy the hex from it if we really need it let's keep it full okay and the second one is gonna be RGB a and this one is gonna be eleven sixteen thirty five and one okay let's take a look now that's not the one okay there we go everything looks good everything is white now so as you can see we can see the menu bar and let's kind of start aligning or navigation so actually what I'm gonna do is close this up and I'll try to drag this in here hopefully let's take a look if this looks fine but if it doesn't look fine yeah something like that I think it's gonna be fine okay so what we're gonna do is go down here we're gonna grab the nav and we're just gonna give a minimum height to it of like 10 mph all right just give it a bit more space we're gonna add a width of 90 percent and the reason why I'm doing this is because we left some space in here if you remember we left a bit of margin everywhere so you can just add with 90 percent and just same margin auto and that's gonna leave a bit of space here so five percent here and five percent there okay we're gonna do this to everything okay then what we're gonna do is just say display flex all right to drop those to justify content Center yeah let's do space between my apologies space between like that and aligned items Center and look at that we are done with that whoo we can also add a padding of 20 pixels zero pixels like that so top and bottom okay and that's gonna be fine so there we go a few lines of code we have the nav bar okay and we can grab our logo let's try and make this a bit bigger font size 24 pixels 22 you know I like 20 that was fine I'm trying to be ambitious here but that looks fine okay now what what I'm gonna do is I'm gonna grab the photographer actually you know what we can do is we can just grab all of them you remember we actually gave it a generic name of page so we can just say page and we can say min height of 90 VH like that so basically this is full screen now because this is 10 th and this is 90 okay and then what we're gonna do is say display grid like that and then we're gonna create a grid template column okay I'm gonna add 5% here so we're kind of keeping them margin five percent 1fr of one F or one F our five percent so let me actually show you because we gonna tell by by the size of the screen I need to make this full screen if we make this full screen you're gonna see that we still have that margin that five percent so that's perfect and even here so as you can see we're gonna start right there and the reason why the three columns is is because I'm gonna leave empty space here because I'm gonna position:absolute those dots and I want this image to be perfectly in center with flexbox that's a bit more difficult to do but with grid we can do this in like two lines of code so I'm gonna show you how to do that so again I just want to leave empty space here but I do want this image to be centered and that's the reason why we're doing it with grid okay so let's go back here and what we're gonna do I have here some code that we're gonna add animations but for now I'm gonna skip that we are gonna go to the hero section so where the images and what I'm gonna do is say overflow:hidden and I'm gonna show you why we do this I'm gonna add a height of 500 pixels we're gonna make this a bit smaller align self-center and justify self-center alright let's hit save take a look alright and what we're gonna do is push this text basically here and this column so after the margin so let's search for that real quick okay you got the hero let's see where the text is I kind of forgot how I named it let's go back here did you do to Tim so we have our so this is called details all right that's the one I'm looking for details so what we're gonna do Jesus Christ look at the file system here it's a mess all right there we go we can grab the details as well like that and basically what I want to do is drop it in grid column two three okay and that is basically take a look grid column as you can see those lines so it starts from one two and we set to two three okay so basically from here to here and it's automatically gonna drop this image here in the center so that's phenomenal and now what I want to do is just drop it down here so the way we can do that is just say a line self and and boom that should be done there we go it's down there perfect okay so we have that going which is perfect now what we can do is just go to this hero for now as you can see there's a bit of space in between these and I want to get rid of it so we can just add a display blanks and that's gonna get rid of it hopefully yeah that's perfect good okay what else do we need let's grab the image that's a hero image and what I'm gonna do is addy we're gonna add the height of 500 pixels we're gonna add a transition of transform 0.3 seconds keys out because we're gonna move these up and down and then when we hover over they're gonna come together and the cursor is gonna be pointer because eventually and we can click this and enter into the details of another of the actual website so good that's what we need and now we can do the animation so we can say hover a hero hover so when we hover over the hero like that we can just animate the model right okay so the right side of the image and we can just transform this transform yeah translate back to 0% and 0% okay let's save this now we actually need to modify these so let's go up here and say right it's gonna be transform translate and we are gonna do that I do translate I can translate remember the first one is X and the second one is y so what I want to do the right one what did we do let's let's take a look we move this one down so what we can say is the first one is 0% ok the X we don't want to move it horizontally but this one we can move it 10% and when we hover over it there we go so do you see that's why we added that overflow:hidden so we get that nice fluid thing it doesn't actually go down it kind of comes out of nowhere okay and we are gonna do pretty much the same thing to the left but just reverse so I had the minus here okay like that and you can copy paste this one again and you can just change this to left okay just reverse it put it in gear drive away and this is what we have nice looks good okay the problem here is let's make this one a bit bigger kind of like what we have here and yeah I think that's pretty much all we need on this part so let's go back here okay we're gonna grab the details so we have the h1 in there we're gonna make the font size extra big font size 64 pixels and font family is do you pop regular for this one so it's gonna be a bit thicker details h2 font size 42 pixels okay and let's take a look what we have okay so something like that now I do want to add some more space in between these so what I like to do is just go in between the middle one so just grab the middle one and add padding top and bottom rather than just grabbing this one and then adding bottom and then this one adding bottom you know so just grab the middle one which is our h2 and just add a padding of 20 pixels and zero pixel so basically what that means is just top and bottom and this one is X my X my top bottom right and left I mean oh Jesus okay and then finally we can grab the details P I'm gonna get demonetised for that hey we're gonna write good we're gonna grab the details P demonetized and here all we're gonna do is add a font size of 24 pixels and just a bit of padding again let's see how we're gonna add this padding actually it's save alright so I want to push this way down and I do want to separate these two elements as well from this so here we can add a four padding and basically what that means is we're gonna add four values here and the way it starts is basically clockwise so the first one is gonna be 20 pixels which is stop then you go right and that's gonna be zero then bottom we're gonna add the big one there 50 pixels and zero pixels on the left okay but the Bing badda boom take a look that looks pretty good okay so let's go into the dots for some reason I reminded my eye like something came to my mind that I got fireworks for a Christmas it has nothing to do with this episode but I just wanted to share with you that when I was a little boy I got fire fire for Christmas oh Jesus why is that coming to my head right now okay so we got everything poppin and goin all we need are the dots so let's get the acne in our lives and that is the thing that we called pages okay we're gonna position that absolutely then we're gonna add a right of 5% to keep them margin okay and top 50% now you're going to see this is not centered I mean it's hard to tell right now but what you need to do is translate this up 50% okay so that's what we're gonna do we're gonna say transform translate dy- 50% and it's gonna drop it perfectly in the center Brunell of the galaxy Reno okay then we are gonna grab the pages and I'll give this like that and we can just display flex all of them a line item center and just add it justify content space between its save let's take a look and that shouldn't make it well we cannot see anything now because we do need to add some padding to these and kind of customize the way we want so what we're gonna do is grab the pages h3 we're gonna increase the font size to like 24 pixels and just add a nice padding okay grab the pages SVG I think we're gonna make this a bit bigger so let's do a cursor:pointer first to make make it obvious that these are clickable opacity it's gonna be 0.5 on all of them transform and let scale this up like to just so they're a bit more easy to see okay there we go take a look how nice so remember when we have the active it's going to be opacity 100% so what we're gonna need to do is just say hey all the pages that have an SVG of active like that octave active we're gonna Jesus we're gonna have a pass to T of 1 and when we hover over it I also want to add a bit of nice fancy animation so what we're going to say pages SVG hover so when we hover over the SVG I'm gonna run an animation called dot 0.5 seconds ease and out we're gonna say infinite and alternate okay now we're gonna create this it's gonna be super simple you just add a keyframes and we're gonna call this thought and then we just say 0% I want this to trance trend transform scale from 2 so our original scale all the way up to 4 transform scale for hit save let's take a look boom boom yeah boy yeah boy and the reason why we added infinite is so the animation lasts infinite an alternate basically goes backwards as well I mean you can have fun with this you can go like crazy I mean well that's not too bad how about that whoa all right let's keep it at 4 these were normal human beings ok subtle nice and subtle ok that's that's pretty much the first page now the reason why we're not adding backgrounds to the other one so these ones is because we are gonna transition these so it's gonna be automatically animated when we click on these boom boom boom everything is gonna transition nicely which we're gonna cover again in part 3 ok let's also change these numbers here from 0 1 I forgot that so in my HTML we can say 0 2 0 3 ok that's good so again we are not gonna touch these however what we are gonna touch is making the second page so I'm gonna make one and I highly recommend you to make the other ones it's gonna be very simple we're just gonna copy paste everything and just change the con but I want you to also grab some practice into creating these things and plus it's really not worth the time to just make the same thing three times even though we kind of did it here anyway simpler so leave me alone okay let's go back to our code we're gonna create another page this can be called photo dot HTML okay we're gonna create a new page and what we're gonna have here is we're just gonna link everything again our stylesheet like that it's gonna be called Lena Morelle okay and then in here we're just gonna have a main tank so the main content and we're gonna have a banner which is this image here with some text so banner we're gonna drop the image this one is gonna be image photo background so search for photo background okay I think that's all we need there and besides this we're gonna create another div with otter and here we're just gonna add h1 with aleena Morel and also h3 photographer like that okay perfect after that we're gonna create our story so this with the image and then the gallery down here so here what we can do is say story then we're gonna have a story description like that and then h3 my story and then we're also gonna add some random text so you can just create a P thang here and just add the lorem ipsum let's do another one all the texts perfect yeah that's good and then after this div after our story description we can create a profile so this is gonna be the actual image that's coming next to it so I'm gonna say image source this is gonna be photo profile okay that's the one profile let's also add an alternative and after that we have our second one so this part so let's get out of this story Biv like that and this is gonna be called my work or my gallery whatever you want to say and we're kind of gonna be consistent with this one story story description my work auric description okay again we're kinda just gonna copy paste everything that we have up here you can copy paste this here I just change this to my work and finally what we're gonna have is the image gallery so let me sure I'm in this div and here I'm sure I'm not messing this one up okay and in here so after this work description we are gonna have a gallery let's say work gallery okay and here we're just gonna add all of those images that I'm gonna give you so photo gallery one you can duplicate the six times one two three four five six and just change this to two three four five six I made life easy for you okay and that's all you need and again for the next pages if you want to do you can just keep everything the same just add the class of story just add the the same classes that you have here just change the Conte and and the pages are gonna look exactly the same exactly like this because we're going for the same layout across all the pages okay so that's all you have to do is just change the images add the content and you are good to go so let's see what we have here it is gonna look horrible we actually have to navigate there so let's go to what is this called it's called photo HTML all right so this is what we have okay let's make this thing look pretty so go back to our CSS we can close everything else up we can just go all the way down here grab that banner that big image add a height to it I'm like 50 B H with a hundred percent like that and we are also going to add a position:relative and the reason why we do this is so we can place the author text and everything on top of it so let's take a look for some reason it's not working let me make sure I added the classes and everything why don't you want to work okay let's take a look let's go back here well I do need to add on the image a width of 100% so let's go banner image and add a height of 100 percent and a width of 100% so it takes actual the size of the banner so I believe that was the problem there we go now this looks okay super stretched so if you want to fix that color you can do is just go here say object fit cover okay and then we can also change the position of it object position to top there we go you can move the image around if you want you can object position Center bottom whatever you like I kept at that top I think it looks fine okay let's grab the altar and place it on top of banner so we can just say position:absolute top 70 percent left let's do 50 percent and then we transform to position it perfectly in the center minus 50 and minus 70 now I drop this a bit down not perfectly in the center so somewhere along that line I like the way that it looks I'm gonna change the color to white and add I'm actually gonna just and this looks bad now because we cannot see it so we can drop a drop shadow or a text shadow on top of it text shadow to pixels to pixels to pixels and let's do black or we can do RGB a and kind of change the intensity of this zero we can do zero which is black and then this is the opacity let's do 0.5 aha there we go let's add a text-align:center nice looking good we can make it a bit larger if we want as to author h1 font size 42 pixels is to author h3 we can add a bit of padding to this 10 pixel zero pixels so top and bottom font size let's do 32 pixels and that should be it there we go a bit larger nicer looks good okay finally we can go down here and we can just grab the story and we can also grab the mic work alright both of these sections this one and this one because we're gonna align them the same way okay just add the display flex justify content space between wit 90% and margin auto again to just add that margin thank that just add a bit of padding to it as do 80 pixels zero pixels okay there we go that's what we have looks good now I don't want this text to go all the way this one this way I kind of want to limit it towards the center here so we're gonna make this a bit smaller but other than that it's fine and so what we can do is go back to our vs go grab the descriptions so story description and also work description and we can just say with 50% okay much much better perfect bit more space is always good okay let's change some font sizes here we can grab the story description h3 and also the work description h3 we can just add a font size of 36 pixels and a bit of padding padding we can do padding-bottom 30 pixels okay it's safe let's take a look there we go a bit of padding there that's good all right let's also grab the P tag make it a bit larger you can say story description P and word description P we can just say padding that's outside the padding of 20 pixels zero pixels top and bottom and font size 20 pixels there we go so I want a bit of space in between these two it's a bit easier to read in my opinion looks nicer okay very good let's go back here now what I want to do is just grab that word gallery like that we're gonna create a grid and recreate this grid okay so what we are gonna do is say display grid we're gonna create a grid template column and we're gonna repeat three times 200 pixels okay hit save let's take a look and there we go it does it for us magically so basically what we said is just repeat 200 pixels and then drop into a new line repeat three times 200 pixels okay now to make sure they are the same size because it's scuffed right now what we can do is just grab the images and that word gallery like that and say image and we can give a width of 100% and we are done boys take a look fancy BAM nice okay everything looks the way we want that's perfect now when we go smaller screen Stratton's the screen size everything breaks Oh No Oh God it doesn't horrible but it's not good okay we can go back to this one as well and oh no we have issues let's fix this up a bit let's go down here and create a media and we're gonna say hey max Witt if it reaches this width of 1024 pixels then we want to add alternative styles so the first thing I'm gonna do is I'm gonna grab the pages okay and I'm gonna change the the grid column now we have three but I don't want to have three I want to have one and I want to drop this text down here okay so as you can see we have three columns right now come on see we have three we're gonna make one so what we can say is grid template columns we're gonna keep that 5% still well we're gonna just make one like that we're also gonna make some rows I'm gonna do 2 1 2 F 4 & 1 1 fr give a bit more space to the image and this is gonna be for the text and just a line-item Center okay so we can actually make this a bit smaller now let's take a look if this works make sure I selected this properly because sometimes I'm doing stuff and it just doesn't work so good way you can test this is just say body display:none now there we have so it works as you can see when we hit that mark make sure everything still looks decent before you hit it so it looks fine when we go a bit smaller though okay so that's good now did I name this pages or page I think we named it page yeah there we go page so that's good alright so let's see what's wrong here I think we need to modify the columns because up here we added like mm I think we added to the each individual like this image to go from my column 3 to 4 but right now we don't have those columns anymore so we have to do them again so we can grab the hero and just say read column we can go to 2 to 3 now because as you can see that's centered now because we have the margin one two three and then margin okay let me show you see 1 2 to 3 and then 3 4 so 2 3 the main big page we can do it with the text as well now okay shall we make this a bit let's add the height outer to this okay there we go and let me tink here and do hero image and say the height of 500 pixels is that a bit smaller no that's fine we might modify these later a bit and we're gonna just see how it looks but for now let's just grab the details because I don't like the way that looks here we're gonna change grid row to three again there we go perfect that's what I was looking for and then we can do grid column 2 to 3 and text-align:center Hey there we go now I'm not sure you can kind of mess around with this see what looks good on different displays if you have more time to experiment with this when you go super large we can kind of change this again for now let's just keep it like this we can kind of make these a bit smaller I guess let's do details h1 on size 48 pixels as to details h2 on size 38 pixels okay and yeah I'm happy with this it looks fine let's go into the photo HTML let's see what's going on here alright everything's a mess perfect here what we can do is just do a let's grab the story and be my work I'm just gonna change the direction because right now it's flex Direction horizontal okay we can do column and we can say flex Direction column there we go that just drops everything beneath each other so that's good I can change the wet others back to 100% because we changed it to 40 and so we can grab the story description and B my work what was it called work description we can just say with 100% I can't stretch it all the way out that's good and here we can do the magic with the work gallery all right so this part down here and what I want to do is actually change everything we can do display grid and we're gonna do grid template columns and what we're gonna do is make this responsive I did a tutorial on this but what you can do just add an auto fit and a min max like that and you can say a minimum value and a maximum value so you're gonna say hey I always want this to be a minimum minimum of 200 pixels but when there's more space you can take up whatever it space is left so take a look you're gonna have that nice responsive bar so that's super cool if you can make this one column as well so if we change it to something like 300 as you can see you can kind of play around with it see what you like I'm gonna keep it at this is you like 250 250 yeah I think it looks better with two columns because these images are very compressed they're not that high quality so I think that looks just fine finally let's just grab the profile and add a padding let's do padding top like 30 pixels and text-align:center okay we want to Center it nicely okay shall we do one on the story as well or it looks fine that looks fine I like the way that looks okay finally when we go super small screen and we can modify a few things we can just do another media let's go down here dear media and do a max width of 7 6 8 pixels okay we can grab all the pages again page and we can do grid template rows 1 fr 1 fr ok so let's go back here like that make it even more compressed then late like that okay and then we're gonna grab the here hero image make this way smaller 300 pixels like that that's good okay then we're gonna grab the actually I think this looks better yeah bit smaller yeah I don't want this to be touched we might change this I'm not sure if I want to keep this in part 3 we're gonna see how we're gonna do it yeah we're gonna see what we're gonna do with this in part 3 let's make this smaller a bit as well details h1 font size 38 pixels alright and we can copy/paste this one and change the h2 to 28 okay there we go and for now everything should be fine let's shape let's check the photo HTML here yeah everything still looks fine yeah that's good I'm happy with this one okay let's go back here again you can kind of mess around with this to get it perfectly however you want please do some tests on mobile and see what you're getting now this is a bit too on top here let's actually look at this okay so I think I liked it better with this taking up more space like this yeah cuz it kind of pushes it down because it takes up double D space yeah let's keep it like that you can get rid of this screw it there we go that's fine and yeah other than that I'm gonna attach the files for the rest of it and I highly encourage you to recreate the D chef HTML and the hairstylist HTML which is pretty much gonna be the same thing alright same layout you can just copy paste everything from here and just change the information because the classes are already added ok and then in part 3 we're gonna finish this up we're gonna do the all the bug fixes at the JavaScript and finally push it up my voice is killing me jesus take the wheel so there we go we gone quite far young traveler and part 3 we're gonna slay some dragons revive Jon Snow actually he's not dead anymore damn it so stay tuned for part 3 make sure to ring the bell Delphine and I'll see you there

Channel: Dev Ed

Views: 194,733

Keywords: html tutorial, html tutorial for beginners, html css, html css javascript, html css website design tutorial, html css javascript tutorial, html css tutorial, build website, website html css, build website from scratch, css tutorial

Id: EwmvBnR_xtA

Length: 54min 59sec (3299 seconds)

Published: Wed Aug 14 2019