Advanced Portfolio with Bootstrap 5 & Material Design 2.0

00:00 hey guys it's david from mdbootstrap.com 00:02 and welcome to another tutorial 00:04 this is the second part of our landing 00:06 page tutorial so if you've seen the 00:07 previous one 00:08 we've built together that page it's a 00:11 landing page for the restaurant 00:14 and if you haven't seen it uh check 00:17 link down below in the description you 00:19 don't need to follow the previous one 00:21 because we're gonna start 00:23 with this source code already i'm gonna 00:26 show you how we can download it 00:28 uh but if you want to learn how to build 00:30 it from scratch then i 00:31 highly encourage you to go through the 00:35 previous part 00:36 so what has changed what's gonna change 00:38 in this second part of our tutorial so 00:40 the basic 00:41 uh page is already there all the 00:44 components are here ready to use but 00:47 what's gonna change we add some 00:49 extra features and those features gonna 00:51 be 00:52 an animation unload so i'm gonna refresh 00:54 the page now and please have a look at 00:56 these components these elements over 00:58 here 00:59 how they're going to appear to our 01:01 screen on load so i'm refreshing right 01:02 now 01:03 and as you can see they are showing up 01:06 they are fading in 01:08 in this nice order from top left right 01:10 and then to the bottom 01:12 so we're gonna learn how to do that what 01:13 else we're gonna do is we're gonna add 01:15 something which is called a smooth 01:17 scroll 01:18 so if you're gonna click this one you 01:20 can see that i'm not jumping 01:22 right the page is not jumping directly 01:24 to this place 01:25 it's just nicely smoothly scrolling down 01:28 to this 01:28 um to this element on the page what we 01:32 else 01:32 added uh we're gonna learn how to use 01:35 models so these are those 01:37 small pop-up windows over here so we add 01:40 two models here one allows us to leave a 01:42 review for our restaurant and the other 01:44 one allows us to book a table 01:46 so we also gonna learn how to use inputs 01:49 and a very basic one was like a name 01:52 phone 01:53 phone or email but also some advanced 01:55 one which allows us to select a date 01:57 from a calendar 01:58 so like this one so you can choose when 02:01 you want to go to restaurant let's say 02:03 july 02:04 and then okay and define a date so we 02:07 will say we're gonna go 02:09 at 8 pm and here it is 02:13 so um yeah that's what we're going to 02:15 build and 02:16 without further ado let's get started so 02:19 in order to start this one if you watch 02:22 the previous version of our tutorial you 02:24 can start 02:26 from from a previous one you can start 02:30 exactly in a place where we finished the 02:33 part one of this tutorial if you haven't 02:37 done that uh you can navigate to github 02:40 uh to our repository you're gonna find 02:44 link to this repository in description 02:46 down below 02:48 and just go to this repository here 02:52 and then clone it uh or download this 02:55 and download it via as a zip file 02:58 so what i'm gonna do i'm gonna clone it 03:00 right now 03:02 so i'm gonna open uh git here and i'm 03:05 gonna 03:06 start type git clone 03:10 and our repository address 03:14 which will clone this project for us 03:18 now another thing which we have to do 03:20 because we're gonna be using this 03:22 premium components 03:23 we have to use mdb pro for that so in 03:26 order to download 03:27 imdb pro just log in 03:31 to your account on mdbootstrap.com 03:35 navigate to your orders page 03:39 hit the download button next to mdb5 03:44 it will download the newest version for 03:45 you 03:47 and once you're there 03:51 what we're gonna do we're gonna 03:54 replace existing files 03:57 uh so i'm gonna replace i'm gonna unzip 04:00 this one 04:04 and i'm gonna replace our js 04:07 and css file which will 04:11 update our package to a pro version 04:15 and once we are done with that we can 04:18 start 04:19 coding so i'm gonna open this current 04:22 project 04:22 using visual studio code and i'm gonna 04:26 run it 04:28 and let's open it and this is our 04:32 project 04:33 as you can see it doesn't have this 04:36 animation on load it doesn't it's 04:39 jumping like this so it doesn't have a 04:43 smooth scroll 04:44 and we don't have any models here so 04:46 let's start 04:47 with animations let's navigate to 04:51 animation documentation so let's go to 04:53 mdbootstrap.com let's choose 04:55 mdb5 so the icon on the right side 04:59 and let's search for animation i'm going 05:01 to use this 05:02 search tool here animations here 05:06 now within mdb uh you can use uh 05:10 dozens of different animations so 05:13 you can check all of them on these small 05:17 rectangulars over here so as you can see 05:20 there are plenty of them 05:21 and so we can mix them you can choose 05:24 the one you like 05:25 the one you prefer and now i'm going to 05:28 show you how 05:29 easy it is to add animation like this 05:32 to any element on the page 05:35 so we're going to start with the basic 05:37 example which is this car 05:40 here in order to start the animation we 05:42 have to click on it 05:43 and it will start the animation so there 05:47 are two options to use animation 05:49 one the easier one is to use data 05:51 attributes like here 05:53 and the other one is to use js to 05:55 initialize it the first one is much 05:57 easier and we're going to use it this 05:58 one 05:58 in our tutorial so in order to use 06:02 animation 06:03 let's have a look at this basic example 06:05 so what we need 06:06 are these attributes so data toggle set 06:09 to animation 06:10 data reset this 06:14 tells us this defines whether animation 06:17 can be run only once or multiple times 06:20 since it's true 06:22 we can run this animation multiple times 06:25 so once animation is over you can reset 06:27 it it will reset it automatically and 06:29 you can 06:30 re-trigger it again finally we define 06:32 which animation 06:34 we want to use and you've seen them 06:35 before so you can just change it to some 06:37 other animation okay let's add this 06:40 animation 06:42 to our heading so i'm going to copy 06:45 these three 06:46 attributes over here and let's get back 06:49 to code 06:50 and let's search for our heading 06:55 this one and let's add this attributes 06:59 over here 07:00 and let's see how it looks now 07:04 so as you can see every time we click 07:08 on our heading it will run the animation 07:12 now there are multiple options how you 07:15 can launch your animation 07:17 so the one which we've seen so far is on 07:20 click 07:21 but there are others so we can start 07:23 trigger it on 07:24 hover the next one on scroll is a little 07:28 bit tricky 07:28 because it already scrolled when i went 07:32 down to this place so i'm going to go up 07:34 i'm going to refresh the page to show 07:36 you the result and now if i'm going to 07:38 scroll 07:39 have a look at this car over here 07:43 as it start animation 07:46 when i start scrolling now here you can 07:50 see that 07:51 we can define whether we want to repeat 07:53 this animation on 07:54 each scroll like here so every time i'm 07:56 scrolling it's 07:58 animating our car or if we want to do it 08:01 just once like in this example 08:04 we're gonna use some variation of on 08:06 scroll animation in our project so 08:09 let's add this data start on scroll to 08:12 our heading 08:22 okay so it's working now let's change 08:24 this animation to 08:26 something like fade in 08:32 okay and now we want to run our 08:35 animation on 08:36 load the page so we're going to do some 08:38 small trick over here 08:40 we're gonna add new attribute which is 08:45 data show unload and we're gonna set it 08:48 to false 08:49 and we're also gonna get rid of this 08:51 data we said 08:54 this small workaround allows us to 08:57 trigger this animation 08:58 on load so we not we don't need to 09:01 scroll right so otherwise our page would 09:04 load 09:05 entirely and this heading would be 09:08 missing 09:09 and it will be waiting until we start 09:11 scrolling and now thanks to using this 09:14 attribute we can animate this element 09:17 immediately after page is being loaded 09:21 now finally we want to 09:24 animate this um elements over here 09:28 in certain order with some delay we 09:31 want to achieve effect like this right 09:34 so we have this like 09:35 fading in elements 09:39 so we're gonna use another attribute for 09:42 this one 09:43 which is called data delay so i'm gonna 09:45 add now animation to another heading 09:48 and these two buttons 09:52 i'm just going to copy paste them from 09:54 the previous example 10:00 so now they all appear all together 10:03 and we're gonna add some delays to 10:07 following elements so i'm gonna add some 10:09 delay 10:10 to our heading 4 10:15 by adding data 10:18 delay attribute 10:21 and set against to 100 milliseconds 10:25 and let's add this one to our buttons as 10:28 well 10:29 and let's set it to 200 and 10:33 300 which will 10:36 give us this nice fading 10:40 effect now obviously we could add this 10:43 animation to more elements like this we 10:45 could add this animation 10:47 on scroll so we could make this effect 10:50 that once we are scrolling down 10:52 these elements will just appear and i 10:55 highly encourage you to play with this 10:57 animation and 10:58 then with this template and try to 11:01 achieve some nice effects for example 11:03 here you could just do like from left to 11:05 right 11:06 or from right to left or top to the 11:08 bottom 11:09 so just take some time and play with it 11:12 what i'm gonna do 11:13 i'm just gonna add this animation 11:17 to the entire main component 11:21 so it will just animate the rest of the 11:24 page 11:25 and i'm gonna leave it to you to play 11:27 with 11:28 now let's move to the next step which is 11:31 booking 11:32 model so as i said before we're gonna 11:35 use 11:35 model so let's go to model documentation 11:39 models are the small windows 11:41 like this one which allows us to show 11:44 some extra content to our user 11:47 so let's copy the basic element here 11:51 and paste it into our code 11:57 this will add this button over here so 12:00 we have a button 12:02 code over here and the model model 12:06 obviously isn't ever isn't visible at 12:09 the very beginning 12:10 and we have to click this button to 12:12 trigger our model 12:14 i'm going to leave this button for a 12:15 second here because now we're going to 12:16 fill this model 12:17 with content and inputs 12:20 and once it's done i'm going to get rid 12:23 of this model and i'm going to 12:24 attach the same functionality to open 12:28 model to 12:29 our button here book table 12:33 let's navigate to forms 12:36 documentation 12:40 and let's choose one of the examples as 12:42 our starting point so 12:44 i'm gonna use let's say yeah this one 12:47 contact form so we want to have some 12:49 place for a name 12:50 email address some message if we have 12:53 some 12:54 extra requests to the restaurant and 12:55 we're gonna add some more inputs like 12:57 the phone number 12:58 date and the time picker so let's copy 13:01 this example 13:02 and let's paste it into our model body 13:09 okay let's have a look 13:13 yeah let's adjust it so what we're gonna 13:16 do 13:16 first of all we want to change id of 13:18 this one so 13:20 i want this one and this one 13:24 to called reservation 13:28 model okay now let's change the title 13:32 let's call it a book a table 13:38 let's get rid of this check boxes we 13:40 don't need this 13:43 right and let's change the submit to 13:47 something like book 13:52 table 13:55 okay now we want another input over here 13:59 so let's go to the docs let's go to 14:02 inputs 14:05 and let's search for phone number 14:10 so here we have a phone number example 14:12 i'm going to copy this one 14:17 and let's add it after 14:19 [Music] 14:21 name 14:25 let's set some comments here phone 14:28 input 14:33 now let's go to datepicker 14:41 and let's copy this example 14:45 paste it below the email add some 14:49 comment 14:57 and the same with a time picker and 15:12 let's see 15:13 how it works now as you can see we are 15:16 missing some margins we're gonna add 15:18 them in a second 15:20 but our time picker seems to be working 15:23 let's have a look at the date picker 15:26 8 pm 30 15:31 okay so let's add 15:34 missing margins 15:37 so we're going to add this mb4 15:42 which stands for which stands for margin 15:44 bottom four 15:45 obviously okay 15:50 let's have a look now yeah now it looks 15:52 good 15:53 now before we move on i encourage you 15:56 to check our docs because you can 15:58 customize your time and date picker 16:03 in a many different ways so you can have 16:05 a time picker which is 24 hour format 16:08 like this one or you're going to have 16:12 many many different options right so 16:15 in regards to front-end parts so how 16:18 does it look like so we can have this 16:19 time picker 16:20 in 24 hours format or the previous one 16:24 but also 16:25 in the way they return the date format 16:28 so you can have a string so you can have 16:30 a date 16:31 and so on and so on so just take some 16:33 time 16:34 and see how it looks 16:39 as you're gonna find many different 16:42 customization options 16:43 options like setting max time minimum 16:46 time 16:47 maximum hour and so on and so on and 16:49 obviously the same applies 16:51 to a date picker so you can have like an 16:53 inline version which is smaller 16:55 more compact and you can define 16:59 formats as you wish obviously you can 17:01 internationalize them 17:03 to translate to different languages and 17:06 so on 17:07 and so on so you can use your own 17:11 month names so play with it 17:14 and see what you like the most okay so 17:17 finally the last thing we have to do 17:19 is to get rid of this button over here 17:23 and launch this model on 17:26 this button click so let's do this now 17:34 as you can see in order to trigger model 17:36 we just need to use 17:38 this uh attributes like data toggle and 17:41 take the target 17:42 so i'm gonna just cut them i'm gonna 17:44 remove this button 17:46 i'm gonna remove this command as well 17:48 and let's go to our button 17:51 down below 17:56 and let's add this 18:00 to our button over here so now it's 18:04 triggering our model okay so 18:08 we can also remove the save changes here 18:11 as we don't need this one 18:13 so let's just go to our model and i 18:17 think we're going to be done with this 18:18 one 18:19 so let's get rid of that one 18:23 yep and now let's get let's move to the 18:26 next one so we want to add 18:28 another model over here we're gonna use 18:30 rating 18:31 components so we're gonna let our 18:33 customers to 18:34 leave a review for us so they can just 18:38 rate us and they're gonna be able 18:40 they're gonna be able to 18:42 leave us a review so what we're gonna do 18:43 we're gonna again add a new model here 18:46 so i'm gonna copy 18:47 basic example i'm gonna paste it over 18:51 here 18:52 or let's add comment here so we know 18:54 this is a reservation 18:56 model as we're going to have more of 18:58 them reservation 19:01 and let's add another one which is going 19:04 to be rating 19:05 or review let's call it writing model 19:10 and let's change the id 19:15 writing model 19:20 okay and now let's 19:24 get back to our ratings so 19:29 let's copy this example 19:33 let's paste it over here 19:37 okay let's check it now rating is here 19:41 we're gonna use flex to center it 19:53 okay now is centered now let's change 19:56 model title to something like leave 20:00 as review 20:06 okay and let's add also some text area 20:10 so our customers could leave 20:12 some other some extra comment not only 20:14 the 20:15 rating so let's get back to forms 20:19 input fields then text area 20:22 let's copy this one and let's paste it 20:26 over here 20:29 and down below let's 20:35 yeah and let's remove 20:38 the save changes 20:42 and 20:45 let's change the save changes to 20:49 submit 20:53 okay now finally we want to add new 20:55 button over here so 20:57 next to book table we gonna 21:00 have 21:04 new button 21:08 i'm gonna copy paste this one 21:11 and say leave a review 21:17 and change it to right 21:23 writing 21:29 yeah and now everything's looks 21:32 works like a charm we can add some 21:34 margins here 21:36 to give it a better look so let's add 21:39 just some margin 21:41 let's say four 21:45 yeah yeah we could play with it for a 21:47 little bit longer but 21:48 i'm going to leave it up to you how do 21:50 you want to do it we could obviously add 21:52 some paragraph over here saying that we 21:54 really 21:55 appreciate all the feedbacks and so on 21:57 and so on but now let's move to the last 21:59 element oh we need to get rid of this 22:01 button as well so let's get 22:05 rid of it and now finally let's move to 22:08 the 22:09 final one which is a smooth scroll so 22:11 let's get moved to a smooth scroll 22:13 as i told you before smooth scroll is 22:16 this 22:17 nice effect which allows us to scroll 22:21 to this section in a smooth way so it's 22:24 very very simple it's very very easy 22:26 what we have to do we obviously we have 22:28 to define 22:30 location uh i mean final location using 22:33 href attribute and add some data smooth 22:36 scroll 22:38 attribute to our link so since we 22:41 already have this links 22:43 used over here what we have to do is we 22:46 just need to add 22:48 this data attribute to our 22:52 navbar links so let's get there let's 22:56 find our links 22:57 here it is so uh 23:00 let's use it here here 23:05 and here 23:08 and now it's working perfectly fine and 23:12 then again as always i encourage you to 23:14 play with docs 23:15 as you can have many different options 23:19 you can see like 23:20 we can define for example offset here so 23:23 instead of going to the top 23:25 we can have this offset bigger over here 23:29 right so 23:30 like this one so it's not going here it 23:33 will 23:33 give us some offset from the top so just 23:36 take your time and play with it 23:39 okay guys our page is ready thank you 23:41 very much for watching 23:42 you can find a source code of this final 23:45 project 23:46 in the description down below so if 23:48 something doesn't work for you just 23:49 download it 23:50 and compare with your code i hope you 23:52 enjoyed it 23:53 and this was the second part of the 23:55 landing page 23:57 um let me just remind you that we have 23:58 more so we have 24:00 other pages like portfolio like blog 24:04 and we have a plenty of admin dashboard 24:07 tutorials uh when we're gonna teach you 24:09 how to build a real 24:11 application dashboard and connect it to 24:14 the external data sources 24:16 and so on and so on so uh i hope you 24:19 enjoyed it 24:20 um don't forget to leave a like don't 24:22 forget to subscribe to our channel as 24:24 we're gonna create 24:25 more and more content like this one 24:28 i also strongly encourage you to join 24:30 our facebook group you're gonna find a 24:32 link to the group in the description 24:33 down below 24:34 so thank you for watching and see you in 24:36 the next 24:44 video