How to Create a Modern Responsive Animated Website [Part 1] | Bootstrap 4 Tutorial

How to Create a Modern Responsive Animated Website [Part 1] | Bootstrap 4 Tutorial



it what's up YouTube Hulya here in in today's video I'm going to be showing you guys how you can create a responsive animated bootstrap for website as you can see the theme of the website is a bakery if i refresh my page you can see one of my animations and the main text I also have a nice hover effect on the buttons if I scroll down you'll see the rest of my content being animated as well as my icons then for my main menu you can see that I have a really nice layout again with the same hover effects on my buttons and then finally I have the final section for the chef's and you can see it also has some nice animations now I did mention that this website West responsive so if we go on the inspector and then the responsive view now we can actually see how the layout changes as I make the viewport smaller and now everything is just going to stack my logo will move to the middle we get the hamburger menu and then as you can see that I scrolled down everything will just stack except for the menu where everything is going to be an image description description image and so on and if I make it even smaller you'll see that now everything is gonna be completely stacked on top of each other so yeah guys this is going to be pretty much it for this website if you want to see how I built this make sure that you continue watching the video but before we start if you already haven't subscribed make sure you hit that subscribe button and hit the bell notifications so that you're notified every single time I upload a new video with that being said thank you so much for watching let's get right into the video so before we begin I just wanted to say that if you plan on following along you don't have to copy all this I'm going to be placing a link to my github on the description below and there you can find all the started files for this particular project which includes the index styles scripts as well I saw the images you see here and that being said since bootstrap is a mobile-first framework we're going to be starting off by doing the mobile styles first and we're just going to be starting off with the header so we'll just gonna open a header and for now we're just going to be doing the HTML by itself we're not going we're not going to be applying any classes until we actually finish up all the markup so the next thing we need is another div and for this I guess we could just do this bootstrap class which is a container and inside of that container what we want to do is just create the markup for the hamburger menu so we're going to have a div with the class of hamburger menu and inside of that we weren't we want to have two icons from font awesome and the classes for that is FAS in the class of FA bars and we also want to apply a custom class called toggle now that we have that we can just simply copy it paste it down below and now what we want to have is that little X so we can just simply change this two times and now we have the two icons for the menu that we can change later on and click Next what I want to do is open up and nav tags and inside of the snap what I want to have is an anchor tag inside of that anchor tag I'm going to have an image tag and it's going to point to the images folder and then the logo for now we're just gonna leave it as is next I just want to have my basic structure of a nav and for that I'm going to have a UL then I'm going to have an Li and then inside of it I'm going to have an anchor tag for now we can just simply oh actually we want to give the header the ID of home because we're going to be using the IDS later on with the navigation to navigate through the site M here we can just simply say home and now we just plug in the ID for home now that we have the basic structure we can actually go ahead and move down to the hero section don't worry about this for now we're going to be applying the classes and they and then later on we can just copy them below because it's gonna save us a lot of time so now underneath of the UL why you want to do actually not the UL but the nav tags what we want to do is just create a div with the class of hero text and inside of the hero while we want to have in a sin h1 that's just going to say welcome then let me just throw this down a bit then we can just simply have AP tag and that's just going to say baked goods like you've never had before well seen before now underneath of the P tag we want to have two more anchor tags and that's going to be our buttons the first one will just simply say explore and the second one will say find a store and that's going to be pretty much it for the header now what we want to do is actually style it but using bootstrap classes and then later on we can move into the stem style sheet so that we can apply the custom bootstrap not the custom boot shop album dope the custom CSS that we're going to be doing so now as you can see here as I mentioned before the container class is a bootstrap class that basically limits the space as you can see over here we have from a fixed width and we also have a little bit of padding I believe it's like 15 pixels but for now we're going to keep it as it is then we have the hamburger menu and the icons now to style the navigation what I want to do here is apply the class of D flex and that's a bootstrap class that will allow you to make the container a fleshed container so now I want to use the bouche applies a line items Center and if you're familiar flexbox that's just going to align them vertically in the middle and then now I can just say justify content center so the next step is for us to actually go under the anchor tag and system this is going to be the logo we can just simply say Index that HTML and then what we want to do with the image is apply the class of IMG fluid which is a bootstrap class that's going to make the image responsive and fit its container but later on we're going to go into the CSS and we're gonna get this a fixed width to make the logo smaller now the second thing that I want to do is actually go on my UL and we want to apply the bootstrap class nav list but now you're not gonna see a big change but later on it's gonna make sense now I want to make sure that the text inside of it is centered so I'll do Tech Center which is another bootstrap class and finally I want to get rid of the default padding by doing P Zero so that's going to basically take the padding away from all sides now I'm going to move to the li and I'm just gonna give it the class nav item and then for the anchor tag I can do nav list actually not an atlas netlink and now you see that we have some basic styling so what we want to do now is copy this and we're gonna paste it below a few more times so the next link is going to be for about menu and then our team let's not forget to change the IDs this one will be about this one will be menu and this one will just be chefs so the next step is for us to move down to the hero text and what we want to do here is just apply the bootstrap class of w100 which is basically going to say give it 100% width again I want to make my text white so we're gonna use the class text white and you can't see you now because it's merging into the background but you'll see you'll see it later on when we do the background image and the overlay next I want to give it some padding top actually not top and bottom but padding on the left and right so for that we can do PX and for now I'll do about 8 pixels which is the value of 2 remember that it can only go up to 5 which is about 48 pixels and something else that I want to do is get rid of the padding on smaller screens when the phone is on like landscape mode so for that I can use a responsive break point by using PX SM and then 0 now I'll go to the h1 and I'll use the bootstrap class of display 4 which is the smallest one out of the bunch it goes from 1 being the biggest 4 being the smallest and finally last thing I want to do here is go to my P tag and add the class of lead which is going to give us some nice styles on the text and let me just remove it so you guys can actually write me so P tag when I add the class lead actually I don't know what's going on oh there we go I just didn't save and what I want to do here is also I'm gonna give this a marching bottom to create some extra separation between the buttons by doing mb4 well five four I think for it works best now I just have to add two additional classes to the links since there will be buttons what I want to do here is just apply the bootstrap class BTN and that's just gonna give it some default styling and I also want to add some extra padding left and right to make the buttons bigger so I'll do PX and then I'll do five and then I want to do basically the exact same thing for my other button so PT n PX 5 and something else that I want to do is create some additional separation now you see here although now you right now you can't see it but you see the the spa highlight here I want to make that space and bigger by seeing marching right mr2 and then I want to do the same thing here except that it's going to be margin-left – and that's just gonna give us a bigger space now that the header is complete what we want to do is actually go into the CSS and we're going to be applying the Styles for the header so before we start I want to apply some global styles to the anchor tags and what I want to do here is just change the color and it's going to change it to white now I want to make sure that I do important because the way bootstrap works is that they have their own styles so I want to override them even when it has a hover effect so the next thing I want to get rid of the default margin from the P tags so I'll just do a margin of zero now we can finally style the header just going to have it with 100% and then we wanted to take a height of 100 of the people right now we want to have a background image so we'll do background so that we can use many of the background properties and first we want to apply a linear gradient of RGB a 0 16 2944 and then the alpha is going to be point 95 we want to do the same thing again so we do a comma and we can actually just copy the rgba because it's gonna be the same color and as you can see here we get the nice background that we want now the next step is for us to actually style the UM knot style but at the image so we're gonna go here after the closing linear gradient and now we're just gonna tap it over and we're gonna do URL and then we're gonna go into the images folder and then we can just do header BG now we'll go outside we're gonna Center it and make sure it doesn't repeat and I also want to set my background size to cover finally we want to give it a position of relative because we're going to be placing some stuff in there that's gonna be position:absolute so I wanted to be relative position absolute relative to the header now something else that I want to do is actually get rid of that padding that I mentioned earlier so what I would do here is select the container that's directly a descendent of the header and again here I just want to do some position:relative I'll set the height to 100% and then the padding is going to be set to zero so now you see that the padding that it had on the sides is gone the next step is for me to actually style the NAP brand itself oh actually I didn't apply that class yet which is one that I forgot so when we go back into the HTML we find the anchor tag for the logo and we can just simply apply a class nav brand and that's actually a nap bar and that's actually a bootstrap class it's gonna apply some additional styles to whatever logo you're trying to put them in your navigation or website so the next step is for us to actually select it should map our brand and here I just want position to be absolute we're going to make sure that the width not height width is 100% and we're gonna set the max width to 100 pixels and now you see that the logo is set the size that we want so when you do a max width it just means that it's not gonna get any bigger than 100 pixels but it's still gonna be flexible with the with a 100% once it get smaller than 100 pixels so we want to position it 10 pixels from the top and then we want to make sure that it's perfectly in the middle so we can just simply do 50% and then to make sure that it's perfectly centered we do transform translate X negative 50% so the next step is for us to actually well I was thinking about giving it a nice hover effect so we can just do an app bar brand it's going to be really basic we can just do the opacity and we can set it to 0.8 so you can't see it very well now because of how the other Texas in front of it but here oh it's because I haven't done the hover pseudo-class and here you can see the hover effect but it would look a lot nicer if we did a transition so we can do transition opacity and then we could just simply do something like 650 MS and now don't hover effect is a lot better next step is for us to actually style the hamburger menu so this is going to be pretty simple we just want to do a position affixed I want to make sure that it's positioned 24 pixels 25 pixels from the top and I also want to make sure that I position it 15 pixels from the right so now you see that my icons aren't right I also want to give it a width of let's do 50 pixels not 50% 50 pixels height will also be 50 pixels display we're gonna set it to flex and the reason for that is because I want to be able to Center perfectly in the middle my icons inside of the hamburger menu container so for that we do a display a flex and then we can later use margin Auto on the icon itself but for now I'll just give it a background color of 1001 d2c and I also want to give it a border radius although it kind of matches the background so you can't see the color really well but you will later on if it I'll just do about 4 pixels I'll set the cursor two-pointer so that we get that kind of like clickable icon or item effect and finally I want to make sure that it always stays on top of everything so I'll give it AC index of a high number like 999 now we can move down and style the icons themselves so we can do a hamburger menu I and then here we can just make the font size bigger we'll do about 30 pixels next step is for us to actually give it a color and for that we'll use the color of let's just say an RGBA because I want it to be a bit transparent so we can do 198 153 then 99 and then the Alpha will just be point 7 and now here we can make sure that's right in the middle of the container by doing a margin of auto next step is going to be for us to actually style the items in here individually it what I mean by that is just hide the X and then hide the bars whenever it's clicked and toggle classes in between so that we get the appropriate icon so for now we can just simply say hamburger menu fa x and here I can just simply do display and set that to none so now we only have two bars next step is for us to actually create a class that we will apply later on with JavaScript to toggle each on the navigation itself as well as the icons so for that I can just simply say hamburger menu fa x and then I can just change the class I'll change the class open which is what I'm going to be applying via JavaScript and here I can say that when it has this class we can just set it back to display black so that it's visible and now we want to do the same thing for the bars so we can just copy this place it down below and now I can just change this to bars and we want to say display:none so I'm going to show you guys how this works we're gonna go into the JavaScript and what we want to do here is actually add the functionality so that when we click on it the icons will be switched and we're gonna be using jQuery for this and if you're not familiar with this this is going to be the shorthand for the document ready function and in here what I want to do is simply just select my hamburger menu and then I want to say I'll click actually in here wait did I mess up yeah so it's gonna be in here click and then we can finally say function this is where we want to actually place the toggle so what I want to do here is actually select that toggle class that we applied earlier within the HTML and I want to say toggle class open so if I did it correctly you should see that now my items will be switched but as usual for some reason I have to find myself closing the window and then reopening it again for my JavaScript to take effect so now if I click on it you see that my bars are switched with the X and then the X is switched with the bars so that is perfectly working now we can just go back into the CSS and style the read the rest of the header so the next thing I want to do here is actually styled an add list so nav list we can just simply say that the position will be also be fixed I want to make sure that it's right in the middle so we can just say starts at the top and the left is also going to be 0 then in here I want to make sure that the width is 100% and the height will be 100 of the viewport height next is for us to actually get rid of those bullet points so we can do list-style:none and we can now apply the background color of that navy blue so now we kind of get a set better sense of how the navigation is going along so the next step is for us to actually do AC and X again this one will be a little bit lower than the X because we want to make sure that it's on top of everything but not on top of the toggle hamburger menu now I want to make sure that I Center this so I can do this play flex and then we can do a flex direction of column to get them back into a column and now I can just simply say justify content center that's going to be placed in the middle now I also want to make sure that I hide it and then show it on click so for now what I want to do is set the opacity to zero but you see that I can still click on the links even though I don't see them so the way I fix this is by doing a transform scale and set it to zero now you see that the links are no longer there so the next step is for us to actually show the navigation unclick so we can simply achieve that by doing nav list and also chaining the open-class that we applied through JavaScript and what we want to do here is just simply say it say that the opacity will be back to one and the transform scale will also be back to one so we have to go back into the JavaScript now and this is basically going to be essentially the same so we can just copy and paste it down below except that as opposed to the toggle we can just select the map list and now when we click on it you see that the navigation shows up but we better we should I think we should add some transitions so that it looks a lot better when we click on it so we're gonna go back into the stylesheet and then we can just say a transition it's going to be on the opacity and again we can just do 650 Ms now when I click on it you see that we have a nice transition so the next step is for us to actually go down and style the main hero text so that's going to be pretty simple as well all we're going to be doing is just selecting the hero text and I'm gonna give it the precision of absolute top will be set to 50 actually I want to be further up top so I'll do something like 45% and then left also be about 50% and then we can just simply say here transform translate and then we can just do an X of negative 50% to bring it all the way back to the middle and then the top will just be back to 40 45 % and although you can't see it now it's because of the the text within it it's not actually centered there's only the container that we centered so now we took we can just simply do text-align:center and you see that our text is now in the middle so the next step that I want to take is going to be pretty simple as well I just want to say that my hero text each one will have a pop family of Nicole and then the fallback will be cursive I also want to make sure that I give it that golden color that you see here so for that I can just simply do AC $6.99 and then I can do with six three next step is for us to actually style to buy herbs so we can do hero text BTW actually I want to make sure that I saw all my buzz is the same not just the one inside of the hero so I'll just say BTN and the width is going to be and your pixels the height actually I'm not gonna give it a height at all but for now let's just leave it as have your pixels I'll give it some padding of five pixels top and bottom and then I can just simply say zero left and right and make sure that it's important else it's not going to take effect so I also want you to give it a border so the border will be one pixel and it's just gonna be that golden color again so solid and finally what I want to do now is just apply the position of relative because I'm using I'm going to be using a pseudo element to create the shining hover effect and also something that I want to do now well I'll show you guys in a little bit why it works but I'm gonna give this over full hitting and you'll see later on why so now we could just simply do BTN before send my content then do a position of absolute and I would consistently do a top of zero and then left will be – 100% and then the width will also be 100% we also want the height to be a hundred percent and now we can just create a background of a linear gradient so linear gradient and we want to rotate the color 120 degrees we want to make sure that is transparent at the start in the middle we want to make sure that it has the color of white but it's going to be a faded white so we'll do an RGBA of 255 and then we can just simply do a point three opacity so now you see that it's a bit blurry finally the last thing we want to do is make sure that it's transparent at the end as well you know you see that we get the nice effect that we wanted but now we still have a few more things to do so here what I want to do is basically do the hover effect so BTN hover before and I just want to say that the left is gonna be a hundred percent remember that we made a negative over here so now when I hover over my items you see that it just flashes something else that we can do to fix that is going to be pretty simple here we can just do a transition so that it looks nicer and it's going to be all six hundred fifty MS and you see that we get the nice sliding effect but there's an issue you see that it's out of cell that they're outside their container so how do we fix that remember that I said overflow so we go back into the bud and just say overflow:hidden and now it's hidden and we only see it once we hover over the items so that's going to be pretty much it for the buttons the next thing for us is to actually create the next section but that's going to be for the next video so jomi next video so that we continue to build this site

19 thoughts on “How to Create a Modern Responsive Animated Website [Part 1] | Bootstrap 4 Tutorial”

  1. Hey thanks for this tutorial
    I have a small problem on the js file it says on the line 2 ($('.hamburger-menu').on('click', function(){
    )
    i have this error Missing "use strict" statement
    so if u can help me and thanks for this

  2. Hi there it`s really awesome design and really appreciate your efforts that you give in this tutorial and wait for you next one. Big Thanks bro.

Leave a Reply

Your email address will not be published. Required fields are marked *