Landing Page with Bootstrap 5 & Material Design 2.0

00:00 hey guys it's david from mdbootstrap.com 00:02 and in this video i'm gonna 00:04 teach you how to create this landing 00:06 page for and restaurant 00:08 so let's imagine you have your first 00:10 first customer 00:11 and you're about to create a landing 00:14 page 00:14 for them so taking uh into account that 00:18 more than 50 traffic is currently 00:21 generated by 00:22 mobile devices we always have to 00:25 design our pages to keep that in mind 00:29 and to make sure that they are 00:31 work and look perfectly on every device 00:35 as you can see here 00:36 this is exactly what's going on what's 00:38 happening here so this page is fully 00:40 responsive so 00:41 depending on which 00:44 screen size your device uses 00:48 it will just adjust everything to looks 00:52 perfectly and work perfectly as well 00:55 so without further ado let's 00:58 get started let's jump into 01:01 developing this website from scratch 01:05 using 01:06 md bootstrap in the newest version 01:10 mdb5 so the first step to start 01:14 is to go to mdbootstrap.com 01:17 and to mdb5 version the newest one 01:20 and then download the newest version so 01:23 once you do that 01:25 you're gonna download the zip don't 01:27 forget to subscribe to e to our 01:29 newsletter if you want to get 01:31 notification about new version released 01:34 which comes with new features 01:36 so download it unzip the package and 01:38 then you will see 01:39 this kind of file structure and once you 01:42 open this index.html c 01:44 in index.html you're gonna see something 01:47 like 01:48 that now what i did extra here 01:51 i prepared some pictures 01:54 from unsplash.com which i highly 01:57 recommend 01:58 you and you're gonna find the links to 02:00 outdoors 02:01 of the pictures in the source code which 02:04 you're gonna find in description down 02:05 below 02:06 so let's open uh visual studio 02:10 code so here it is 02:13 so this is our starting project and 02:15 let's 02:16 start building this patch 02:19 so what we're going to do we're going to 02:21 start with enough bar 02:23 so as you see in this is our navbar and 02:25 navbar is responsive 02:27 so in um on the mobile devices 02:30 it's going to collapse uh so you can 02:33 expand it 02:34 if you wish so and on the bigger screen 02:37 it just looks like 02:38 this one so let's go and 02:42 find number so we're gonna go to docs 02:43 you can either use search form 02:45 and type navbar or you can just go to 02:50 navigation and navbar okay 02:53 now we want to use this basic example as 02:57 a starting point so i'm gonna get rid of 02:59 this one 03:00 i'm gonna remove this one i'm gonna add 03:03 some semantic placeholders 03:12 like header main and footer which will 03:16 help 03:16 us to understand where um 03:20 in which part of document we are 03:22 currently working 03:23 at because when the files get bigger it 03:26 might be a little bit confusing 03:28 and now our nav bar is here obviously 03:30 it's clouds 03:31 collapsed because our windows is small 03:33 so if we have it like this 03:35 we can see entire navbar and if we get 03:39 it 03:40 smaller it will collapse it will change 03:43 to 03:44 mobile version so let's keep it like 03:45 this for now what we want to do we want 03:47 to get rid of things which 03:48 which we don't need over here so what 03:50 i'm going to do i'm going to 03:52 remove this search form so let's look 03:54 for it here it is search form 03:57 so i'm going to get rid of this one 04:00 i also want to do small cleanup with the 04:03 links are 04:04 here we don't want this one disabled we 04:06 don't want this drop down in that 04:08 project so 04:09 let's remove disabled and let's remove 04:12 the one which is drop down 04:15 and on the other hand i have my home 04:19 okay so let's change this brand name to 04:23 stack steakhouse 04:28 and let's add some more links 04:31 and we need three of them so the one was 04:34 was gonna be 04:36 um about next one 04:39 many or actually book table i guess and 04:42 the last one is a team 04:44 now we use this link to navigate to a 04:47 certain section so once we click on it 04:49 it will jump 04:50 into into a certain section 04:53 of the page so here we have this one 04:57 so now we want to do two more things 04:59 with our navbar so one thing is we want 05:01 to pull the content 05:02 into the center so we won't use this 05:04 margin here 05:05 because we try to keep the 05:09 entire content within this center part 05:12 of 05:12 our page using this margins because it's 05:16 easier for 05:17 for user to uh to 05:21 to read it right if this is not too wide 05:23 or actually if this 05:24 is too wide then it's difficult to read 05:27 the content so we don't want that 05:29 so we want to pull it into the center 05:31 and we're going to do it using 05:33 uh changing this class from container 05:35 fluid to container and if you don't know 05:37 what's going 05:38 on right now what's happening i strongly 05:40 suggest to check our description because 05:42 there you're going to find 05:44 tutorials on bootstrap 5 grid which 05:48 we are using here which is making our 05:49 website responsible okay 05:52 once we have this one we can get back to 05:54 docs 05:56 and if you can if you check our docs 05:58 you're gonna see that there are a lot of 05:59 options which you can customize over 06:01 here 06:01 so there are plenty different version of 06:04 navbar using logos 06:06 including some icons search forms 06:09 placement and there are really 06:13 really numerous things you can 06:16 you can adjust in our navbar and one of 06:19 this thing 06:20 as a color so we can change colors so we 06:24 have 06:24 also entire docs about colors itself but 06:27 long story make sure 06:28 you can just change the entire look of 06:31 navbar using different classes and 06:32 that's what we're gonna do right now 06:34 so what i want to do now we have this 06:36 navbar light and 06:38 background light i'm gonna change it to 06:40 navbar dark 06:41 and we could change to background dark 06:45 or we could even go i'm going to go even 06:47 farther i wanted this to be fully black 06:49 so now we have 06:51 this nav bar dark which is changing a 06:54 font color 06:55 to white a whitish and background black 06:58 to make it 06:59 totally back black okay since our navbar 07:03 is ready let's take care of this part 07:05 which is intro part 07:06 so let's get back to docs and let's go 07:09 to headers section which 07:13 which offers us a different version of 07:16 intro 07:16 or header so here like full size 07:20 screen or full image intro 07:23 and many many others i'm gonna use this 07:25 one so background image so i'm gonna 07:28 copy this one i don't want to copy 07:29 entire code because it 07:30 includes navbar which we already have so 07:32 i'm going to just copy this 07:34 part background image so let's copy this 07:36 one 07:37 and let's paste it 07:40 still within a header so i'm going to 07:41 collapse navbar for a second 07:44 i'm gonna paste it over here and let's 07:46 have a look 07:47 now okay so here it is what i want to do 07:50 i want to get this styles from here 07:52 because you know 07:55 yeah sometimes it's better to use inline 07:57 styles sometimes it's better to put it 07:59 to classes 08:00 if you use just this heading over here 08:04 um it's it's um 08:07 it's a good idea to have it here because 08:09 it doesn't make sense to create a class 08:10 for this one because you're not going to 08:12 reuse it 08:13 uh but in other cases like ours so we 08:15 want to add some media queries 08:17 uh to it then we're gonna 08:21 uh it's it's it makes sense to put it 08:24 into a separate file so what i'm going 08:25 to do i'm going to create a new file in 08:27 css 08:28 i'm going to call it styles css oops 08:31 styles.css 08:33 yeah i'm going to place it over here 08:38 and i'm going to add this to let's say 08:40 intro 08:43 okay now we're gonna add 08:47 um this intro over here 08:50 so id intro 08:56 okay and we want obviously we want to 08:59 link 09:00 this file with styles 09:04 so here is mdb so we want to add custom 09:07 styles over here link 09:10 css style css 09:14 okay so now we have id 09:17 intro and here we have 09:20 this one now let's 09:24 now it doesn't work because i messed up 09:28 quotes here right so yeah i didn't close 09:31 this one 09:32 so now it's working fine okay so what we 09:35 want to do now 09:36 is we want to add some media queries so 09:39 we want this one to have 09:41 to be bigger on large screens and to be 09:44 smaller 09:45 on the mobile devices so i'm going to 09:47 i'm going to say media 09:48 and i'm going to say minimum width 09:52 to 576 pixels 09:57 and if you don't know what's going on 09:58 right now um 10:00 i'm using media queries so if you want 10:02 to get familiar with this and you should 10:04 if you want to create pages 10:07 then i strongly encourage you to check 10:10 description under this video and we're 10:12 going to find 10:13 links to our css tutorials okay so we 10:17 have this 10:18 different height set depending on the 10:20 screen size 10:21 now we want to change this file 10:23 obviously so we want to add 10:26 image intro so 10:29 here it is okay 10:32 and now this is how our intro 10:36 looks like on the full screen 10:39 so as you can see it's now is bigger 600 10:41 pixels but when 10:42 when we open this on a mobile device it 10:45 will 10:46 get just 400 pixels and look looks like 10:49 that okay now let's fill 10:52 this part with some content 10:57 so we're gonna change the name 11:01 to steakhouse or stake 11:05 house and we're gonna add this 11:16 subheading and we want to 11:20 add we want to have two buttons over 11:23 here 11:24 okay so we have two buttons now have a 11:26 look at this ripple effect 11:29 [Music] 11:31 which which gives us this this really 11:33 nice 11:34 this really nice wave effect on the 11:38 button which comes from material design 11:40 as always you can read more about this 11:45 ripple effect in the docs because there 11:46 are many options to use it you can use 11:49 it on 11:49 images you can change the color like you 11:52 see here 11:53 and there are many many many different 11:56 cool options to use it 11:58 so i strongly encourage you to get 12:00 familiar with 12:01 this one okay now what we have to work 12:05 on is spacing 12:09 so these buttons are too close to each 12:11 other so what we're going to use we're 12:12 going to use 12:13 um we're going to use 12:16 margin we're going to add margins and 12:19 we're going to add them using 12:20 this classes which you can see already 12:22 here this mb3 stands for margin bottom 12:25 three so this is adding this bottom 12:28 margin to this element so now we want to 12:31 add 12:32 margin to this button so let's say 12:34 margin two 12:36 what does it mean this means that it 12:38 will add 12:39 it's going to add margin into all 12:41 directions 12:42 so we have margin from top bottom right 12:45 and left and i'm going to be set to 2 12:47 and you can use it in many different 12:50 ways so we can say 12:51 margin top like empty you can use 12:54 margin bottom margin left margin right 12:57 you can use 12:58 accesses like margin x axis which is 13:00 left and right 13:02 y for top and bottom and you can also 13:05 use paddings 13:06 in the same way so it's very very very 13:09 easy to use 13:10 to use margins and paddings and if you 13:13 go to spacing docs 13:14 you're going to find a lot more 13:16 information on how it works 13:18 and how you can use it you can even 13:20 specify 13:22 a different spacing for different screen 13:24 size like you know this 13:26 this uh extra large large medium 13:29 and so on and so on so this is very very 13:33 powerful tool 13:34 because it allows us to very quickly add 13:37 the 13:37 spacing to this element which we usually 13:41 which we are usually doing anyway so 13:43 this makes our life easier 13:45 and just to show you why i'm using this 13:47 margin in all direction let's add third 13:50 button 13:51 so now if we make our screen smaller 13:54 now we have this here if our to do mx 13:58 so only in the x direction left right 14:01 then we wouldn't have this margin 14:03 in the in the vertical 14:06 um axis so since we have this in all 14:10 directions 14:10 they look really really cool okay now 14:13 let's get rid of this extra pattern over 14:15 here 14:16 and let's add let's change this call to 14:19 action 14:20 to see menu let's say 14:24 and it should be linked to menu and 14:27 book a table okay so 14:31 let's just have a final look how it 14:33 looks like 14:35 yeah i think it looks really really 14:37 really cool 14:38 so let's move to the next section our 14:42 next section 14:43 will be placed inside our main part 14:47 and we're gonna use 14:51 we're gonna use a 14:55 section element here so i'm going to 14:57 create section 15:00 now i'm going to keep my section 15:03 inside container fluid so all our 15:07 sections will be 15:09 inside container so this is bootstrap 15:12 grid system again 15:15 and what we want to do what we want to 15:17 achieve we want to use 15:18 um this two column 15:21 structure here to the left and to the 15:23 right so let's see how we can how we can 15:26 achieve that 15:27 so inside our container i'm gonna add a 15:31 row 15:33 i'm gonna add two columns so i'm gonna 15:36 use 15:36 md6 for now we're gonna change it later 15:40 you're gonna see 15:40 why and inside the first column 15:43 where i'm going to add some heading 15:47 like discover our menu okay 15:54 and in the next one i'm going to put 15:58 some 15:58 paragraph so if i have some text 16:01 prepared 16:02 like this one okay so now we can see how 16:05 these columns looks like 16:06 and that's because of the six they are 16:09 taking the 16:09 entire width so what we could do 16:12 we could we could do now multiple way 16:16 we can do multiple things to get them 16:19 into the center so 16:20 obviously one thing which we can do is 16:23 we can just align our text to 16:25 to the right so i'm going to say text 16:28 right 16:29 and it's what's going to happen right 16:31 but it's still 16:32 too big over here right i don't want 16:35 this text 16:36 to be so close to the right 16:41 so what we can do we can instead of 16:42 container fluid we could use 16:44 container it's it's getting better 16:49 yeah but now we have this disproportion 16:52 between this part 16:54 and that part so what i'm going to do 16:56 i'm going to switch it back 16:58 back to container fluid i'm going to 17:01 change 17:01 size of this of these columns so once 17:05 it's going to be md4 and this one is 17:09 also going to be md4 17:11 but what happens here is that 17:15 and they will be on they are getting 17:16 aligned to the left side so we have to 17:18 add 17:19 a class to our 17:23 to our row the first class is justify 17:27 content center 17:31 which will center our our content over 17:34 here 17:34 and next one will align 17:38 item center which will align them 17:40 vertically so now we have 17:42 this one here and now we have this 17:46 looking like 17:50 like here so this is what we wanted to 17:52 achieve over there 17:54 we still need some spacing from the top 17:56 bottom and next to each other so let's 17:59 let's do it now 18:03 so i'm going to add padding right 18:08 5 which will pull off the text 18:12 left and let's add some class 18:16 to our section 18:23 and let's add 18:31 some margins and within our css styles 18:35 let's add um two classes so 18:39 first is we want our body 18:43 to be black 18:49 yeah and next we 18:52 want our divider class 18:57 divider 18:59 to have background 19:03 color something let's say grayish 19:06 like this 19:09 okay now as you can see since we have 19:13 this 19:13 margins over here our background is 19:17 actually pulling off so we're gonna 19:19 change it to 19:20 to padding 19:24 yeah and since we have this 19:27 black strips here because um our 19:30 container is adding 19:31 extra padding over here we need to reset 19:34 this to 19:35 i use padding x zero 19:40 and the last remaining part is to switch 19:43 this one to actually 19:44 have padding on both top and the bottom 19:48 okay so this section is ready now so we 19:52 are ready to move to the next section 19:56 so our next section is 20:00 section we're gonna call about 20:08 and in this section we're going to use 20:11 grid again so 20:15 let's start with a heading 20:19 saying our promise 20:23 okay now we want 20:27 everything in this section to be 20:35 centered and we're going to want to add 20:39 some margin 20:43 from the top and the bottom 20:46 now we also want to change the color of 20:48 this 20:49 text within this section to white we can 20:51 again use it 20:52 do it easily using text 20:56 wide class which will change text for 20:59 all that and now we are ready to add 21:03 new rows and columns over here so let's 21:06 start with row 21:09 and we're going to have use two columns 21:11 called 21:12 md4 21:15 times 2 and inside the first one 21:19 we want to have some text 21:25 like 100 percent 21:28 meat and some paragraph 21:35 and on the other one we want to add 21:38 image 21:40 with image one jpg 21:44 okay so this is how it looks like now as 21:46 you can see 21:47 our image is too big so what we want to 21:50 do 21:51 is 21:57 add class 22:01 called image fluid 22:04 which will make our image responsive 22:08 which means 22:09 that once we start enlarging our screen 22:13 our image will also get bigger and once 22:15 we make it smaller it will also make it 22:17 smaller so it's basically 22:18 responsive now um okay now since we have 22:22 these two columns 22:23 here md4 uh which means 22:27 this size of this column is four and 22:29 that one is a four as well 22:30 which means we have still four to go 22:34 and they're aligned to the left so it 22:37 doesn't look good so what we can do 22:38 about that we can again 22:40 use classes which you already know so 22:43 justify 22:45 content center which will 22:48 put them in the center and then we can 22:51 also add 22:52 a line item center which will align them 22:56 vertically okay now few 23:00 last changes we want align this text to 23:03 the right so we will just say text 23:05 writes which is another uh 23:08 mdb5 utility and this one is ready so 23:12 what do we have to do we have to use 23:14 we have to create two more so that's 23:16 what i'm gonna do right now 23:18 let's just have a look this is how it 23:20 looks like on the 23:22 large screen and this is how it gonna 23:25 looks 23:26 on a mobile device so as you can see 23:29 everything 23:30 scales automatically including the 23:32 images so let me now 23:34 quickly create two remaining sections 23:46 okay so this section is ready i'm just 23:48 i'm gonna increase this margin 23:50 over here to five make it bigger bigger 23:54 and now it's ready and obviously it is 23:57 responsive so once we shrink the screen 24:00 it will reorganize itself okay 24:04 so 24:07 it's a high time to move to the next 24:10 section so the next section 24:14 is this small divider which we're gonna 24:17 called book 24:18 section so 24:21 section book 24:26 so what we're gonna use here is 24:28 something you already know from 24:30 this part so 24:33 we're gonna use this 24:36 image background component 24:39 so let's reuse something which we 24:41 already know which we used over here 24:44 so we had this intro section 24:47 which was here 25:04 let's get rid of uh everything 25:07 except for uh 25:12 yeah for this one we're gonna change 25:15 i'll get rid of this intro 25:20 and now let's add some styles here so 25:23 for a 25:23 book we want to have 25:28 this one again obviously we want to 25:31 change different we won't use different 25:33 image here 25:35 so book yeah 25:38 and we want to make it smaller to 300 25:42 pixels let's say okay 25:46 we will also change background 25:50 size to cover 25:55 okay and now let's get back to our 25:58 index.html 25:59 here now let's remove this masks here 26:08 and by the way that reminds me that i 26:10 didn't tell you um 26:11 about masks which we used over here so 26:15 when we were talking about the intro we 26:17 had this mask 26:18 over here here so this mask 26:21 is using an rgb color 26:25 so we can change the transparency of it 26:27 now it's using black color so now let's 26:29 have a look what's going to change if 26:30 i'm going to 26:31 set this transparency to value like this 26:34 as you can see everything becomes 26:35 brighter or we can make it even more 26:38 darker 26:40 and we can also play with different 26:43 colors over here to give 26:44 our image or background a mask so this 26:47 also 26:49 important part so let's revert this one 26:51 and let's get back to this 26:52 do the book part so here it is book a 26:55 table 26:56 so here we could also obviously use a 26:58 mask to make this one 27:00 a little bit darker so if you want learn 27:03 more about mask just go to the mask 27:05 section and you can see that there are 27:07 many many different ways of using mask 27:09 you can even use a gradient one so i 27:11 think it's really cool feature and you 27:13 should check 27:14 yourself okay so once we have that one 27:18 let's move to the next section 27:19 which is our team section 27:27 okay so here we're gonna use greed 27:30 again let's start with uh 27:35 h2 our team 27:39 let's add class text center 27:43 to center this text 27:47 our theme and text white 27:51 now we want to add class margin y5 as 27:56 always we have some spacing 27:58 and now we are ready to start using 28:02 grid so we want row and we want call 28:06 md 28:10 four times three so we want three three 28:16 rows like this one 28:17 and we want to use some cards over here 28:21 so if you go to cards you're gonna see 28:23 plenty different 28:25 cards over here available for you 28:30 and 28:33 i'm gonna use let's say 28:38 this this one the vertical one 28:42 so i'm gonna copy this one i'm gonna 28:45 paste it over here let's go full screen 28:49 now 28:54 yeah so we have three of them right now 28:57 here 28:58 okay we don't want entire text white 29:02 because it's making our font here white 29:05 as well so we're gonna just leave it to 29:06 the 29:07 heading and here we're gonna leave 29:09 what's left 29:11 okay now we want what we want 29:15 these cards are too big i'm gonna change 29:18 it to call 29:24 md3 29:26 yeah and we want to center this one so 29:28 what we're going to do 29:30 is again we're going to use 29:33 justify 29:38 content center so it will get to center 29:42 and now i'm just going to fill this with 29:44 data so with the name 29:45 and the picture so let me quickly do 29:52 that 29:56 i updated all the cards so now 30:00 this is how it looks now and obviously 30:02 if we check this 30:04 on a mobile device then they will 30:07 nicely change order oops i didn't change 30:11 the picture 30:12 of the last one fix it quickly 30:22 okay so this section is ready so the 30:24 last one 30:26 is footer and this is what we're gonna 30:29 take care of 30:30 right now so for a footer let's go and 30:34 see 30:34 what we can use out of the box 30:39 so as you can see you have different 30:42 varieties of 30:43 footer available over here 30:47 so uh let's use 30:50 one of existing 30:54 one 31:02 so i'm gonna use this one and then again 31:06 you can already see that you can easily 31:07 adjust 31:08 footer colors using different 31:11 classes so let's do that now 31:20 okay so here it is but obviously we want 31:22 to make it 31:23 darker so what we're gonna do 31:26 we're gonna change this classes here 31:30 to background black 31:36 and text 31:40 wide 31:43 yep and now let's 31:46 add some content so we're gonna add some 31:48 locations here 31:53 we're gonna get rid of this listing 31:57 and what we're gonna do here is we're 31:59 gonna add some paragraph here 32:02 so let me add this address 32:06 over here so this is what we have in the 32:09 first 32:12 column we also gonna add some 32:17 margin to it to push it to the bottom 32:21 then we're gonna use this column we're 32:22 gonna get rid of this one and we're 32:24 gonna use the last one 32:25 so let me quickly do this one 32:29 so let's get rid of 32:32 this content from a second column 32:41 yeah now 32:45 let's leave this one empty 32:50 and let's move to the last one which is 32:51 gonna be interesting one 32:53 because we're gonna have this one here 32:55 as i'm working 32:57 hours we're gonna remove this one 33:02 and what we're gonna do here we're also 33:04 gonna use 33:05 a grit inside the grid so we're gonna 33:07 add row and we're gonna use 33:12 call six 33:16 times two and we're gonna add this 33:19 working days 33:21 in the first column and working hours 33:23 and the second one 33:25 which will give us this nice effect 33:29 over here which looks very very good 33:32 here let's add some margins 33:36 margin bottom five 33:40 and here it is 33:44 let's change this one to text white 33:49 and voila our page 33:52 is ready now so the last thing we have 33:56 to do is just to update 33:58 this link in the nav bar so let's do it 34:01 quickly 34:02 now our navbar is collapsed 34:05 so now i'm just gonna do here 34:09 about book 34:13 and team and now we can easily 34:17 move to any section we want 34:20 okay so now since our page is ready it's 34:23 a high time 34:24 to publish is publish it to web so what 34:27 you have to do is just open your 34:28 terminal 34:29 or command line and just type mdb 34:32 publish if you are mdb user 34:36 you will be able to publish it within 34:38 just few seconds 34:39 so what you need to do just give an 34:43 name to your project or you can 34:46 you can leave this default like 34:49 i had it working so i just changed it to 34:51 mdb5 landing and you can actually accept 34:53 any other values here 34:55 and it will publish your page within 34:58 a seconds and as soon 35:01 it's gonna be published you're gonna get 35:04 a link 35:04 to your page which you can just copy 35:10 paste and you're ready 35:14 so that's easy if you are not mdb user 35:16 and you are not familiar with 35:18 cli don't worry just check the 35:20 description down below where you're 35:21 going to find 35:22 link to the cli tutorial or you can just 35:26 go to mdbootstrap.com and check 35:28 mdb cli now i strongly 35:32 encourage you to create your own website 35:36 with all in your pictures 35:37 and designs and publish it to mdbcli 35:42 and once you do that i encourage you to 35:44 join our 35:45 group on facebook where you can show off 35:48 your projects 35:50 so you're gonna find a link to this 35:53 to this group also in the description 35:55 down below so 35:56 once you create something do not 35:59 hesitate 36:00 show this to our developers and the 36:01 other users on a group