Advanced Portfolio with Bootstrap 5 & Material Design 2.0

Watch other courses

This is the second part of our Bootstrap Portfolio tutorial. In this part, we will add some extra features like animations, smooth scroll, lightbox, and more.

Important - this tutorial requires the MDB 5 Pro package

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