Blog with Bootstrap 5 & Material Design 2.0

00:00 hey guys it's david from mdbootstrap.com 00:03 and today i'm going to show you how to 00:05 build 00:06 this entire blog including 00:09 the main page which lists all of our 00:12 posts 00:13 as well as the single post 00:16 site which will feature the single 00:19 article 00:19 uh where we can read the entire content 00:22 of the article including 00:24 different typography over here 00:27 um social share buttons 00:30 and components like outer box comments 00:33 section with a form 00:35 and we're also going to talk and learn 00:37 today how to 00:38 make elements sticky like this nav bar 00:41 which is sticky to the top 00:43 and this advertisements which are 00:47 getting sticky as soon as we start 00:48 scrolling to the bottom 00:50 so without further ado let's get started 00:56 as always in order to start we need to 00:58 get the newest version of 00:59 md bootstrap material design for 01:02 bootstrap currently mdb5 01:05 so just navigate to mdbootstrap.com find 01:08 a proper section for you and download 01:11 the button don't forget to subscribe to 01:12 our 01:13 newsletter as you're gonna get all the 01:15 updates uh 01:16 all the information regarding new 01:18 versions new updates 01:19 so uh that will be very very useful for 01:22 you 01:23 in the future to not to miss any 01:26 new components so once you download it 01:29 just 01:30 unzip it and once you unzip it we're 01:32 gonna see 01:34 file structure like this one and if you 01:37 open 01:38 this index html you're gonna see this 01:40 welcome 01:41 screen okay i'm gonna be using a visual 01:44 studio code 01:45 so this is this is um this is the editor 01:48 of my choice of my preference 01:51 and since we're gonna create two pages 01:53 let's start with duplicating this 01:55 index.html 01:57 and changing its name to posts which 02:00 gonna be used 02:01 for a single post 02:04 so the one which you've seen here so 02:07 this is the single post and this is 02:08 our main listing now i want to do 02:12 a small disclaimer over here since this 02:15 is already 02:16 third tutorial on mdb5 and you if you 02:19 haven't 02:19 watched the previous one don't worry you 02:21 can still follow this one but my point 02:23 is that i'm not gonna 02:25 be explaining some things which has been 02:28 explained already 02:29 in the previous tutorials um in 02:32 much in detail for example navbar we 02:34 already talked about a lot about navbar 02:36 so i'm not gonna 02:39 i'm not gonna give you much details on 02:40 how to adjust it 02:42 uh we're gonna focus on how to make it 02:44 fixed to the top so this is something 02:46 new which you didn't know 02:47 so feel free to continue this and this 02:50 tutorial 02:52 and we're gonna focus more on some new 02:54 elements like ripple effects 02:56 in this video uh like the sticky content 02:59 and so on 03:00 but if you feel that you are missing 03:02 some knowledge don't worry just 03:04 pause it here check our previous videos 03:06 you're gonna find a link to them in the 03:08 description down below video 03:10 and then once you finish them you can 03:12 get back to this one and everything 03:14 should be 03:14 clear for you okay so let's start 03:18 uh with a blog post which is a little 03:21 bit more 03:22 complex component so um 03:25 let's start with with this one so let's 03:28 open post html 03:30 let's make it a little bit oops not this 03:32 one 03:33 this one a little bit bigger okay 03:37 and we're gonna start with the very 03:40 first element which 03:41 is uh which is gonna be our jumbotron 03:46 so let's navigate to dogs let me use 03:49 them in the 03:50 full size and let's go to 03:54 navigation headers and this is where 03:57 we're gonna find 03:57 this jumbotron and by the way i 04:00 strongly encourage you to explore these 04:04 docs because you're going to find 04:05 many many more examples over here 04:08 but what we need for today is this 04:11 jumbotron 04:12 example so what i'm going to do i'm 04:13 going to copy this code open this visual 04:15 studio 04:16 maybe i should let me do it this way i 04:19 will be working on a full screen i'm 04:21 going to make this font 04:22 larger for you so let's start 04:25 with this one i'm going to get rid of 04:27 this starter here 04:30 and paste our header so 04:34 as you can see our header already 04:35 includes navbar 04:37 and this jumbotron section so let's see 04:40 how it looks like 04:42 so this is our um jumbotron 04:46 now we're gonna do a quick cleanup over 04:48 here so 04:49 i'm gonna get rid of things which we 04:51 don't want so we don't want this button 04:53 actually we don't want 04:57 we don't need this hub 05:00 subheading and we're gonna leave just 05:03 this title of 05:04 our article 05:10 title okay now what we also want to do 05:14 we want to 05:15 change this nav bar to container not 05:19 container fluid so it will get 05:21 to the center 05:24 and as i said we're not going to go talk 05:27 much about 05:28 navbar you can check the previous 05:30 tutorials on that 05:32 now what you have to know is 05:36 that we are using this h1 element here 05:39 and according to seo google seo 05:41 guidelines 05:42 there should be only one h1 um element 05:45 on um on a page uh because this is this 05:48 is something which google scraps for you 05:50 and so using multiple h1 components 05:54 might confuse its crawlers 05:58 so just keep in mind that the best 06:00 practice is just to use 06:01 one but now the problem here 06:05 is that um this is very huge 06:08 and if you see the final version we want 06:11 this to be a little bit more 06:13 subtle um a little bit more smaller 06:16 so what we can do uh thanks to 06:20 thanks to mdb is that we can style 06:23 our elements to look differently 06:26 and what i mean by that um is when you 06:29 go to typography 06:31 you're gonna see that you can have 06:35 this you have this hx classes which 06:38 means 06:38 that you can make even a paragraph 06:41 to looks like a heading and sometimes 06:44 you just want to do that because you 06:45 want 06:45 um you want um your you know you want to 06:48 have your heading 06:50 uh for a google which is something else 06:52 so the title 06:53 and you want something for human which 06:55 is more human-friendly 06:57 um unlike the h1 which is optimized for 07:01 seo 07:03 you want something else to looks like a 07:04 h1 but even though 07:06 it's not in our case it's other way 07:08 around so we have our h1 but we won't 07:10 give it a look for h4 let's say so this 07:13 is what we're gonna do 07:14 i'm going to add this class h 07:19 for 07:23 and this will make looks our h1 07:27 paragraph as it was 07:28 h4 now the last change we want to make 07:31 is we want to change this margin bottom 07:34 um to margin y uh 07:38 and this is because we want to have 07:41 this margins from top and the bottom and 07:44 we want to change it to one 07:45 not three and i also covered margins in 07:48 the previous tutorial so if you don't 07:50 know how to use it just 07:51 check this out okay since our jumbotron 07:54 is ready 07:55 let's take care of our navbar 07:59 and by me by saying take care i mean 08:02 let's make it fixed what does it mean 08:04 it's fixed let's have a look at example 08:07 so first we're going to add an extra 08:10 class 08:10 to to our navbar and this class 08:14 is called fixed 08:17 top okay and nothing happens 08:21 now except that we screwed our heading 08:24 but don't worry we're gonna fix it very 08:26 soon 08:27 but let's do something um let's do 08:29 something else to show you 08:31 how does it work so i'm gonna add um 08:34 diff and i'm gonna 08:37 give it a height 08:41 of 2000 pixels so something very very 08:44 big 08:44 so this will make our page scrollable 08:47 as you can see we have a scroll over 08:49 here and now as soon as 08:51 i start scrolling you can see that this 08:53 snapbar got 08:54 fixed to the top and this is something 08:56 which we wanted achieve like here right 08:59 so this is exactly behavior we want this 09:02 is because we want our 09:03 navigation to be always visible right so 09:06 we don't want our user if it scrolls and 09:09 it's 09:09 you know it disappear then when user 09:12 wants to get back to home or other 09:14 category he will have to scroll up all 09:17 the way to the top and now he doesn't 09:18 have to do it so the navigation is 09:20 always visible which is obviously a good 09:22 practice okay so now um 09:26 we messed up our heading so and this is 09:29 because our navbar is out of 09:31 dom uh it's out of this element 09:34 so this heading thinks that the top of 09:37 the page is starting here so it doesn't 09:39 take into account this number so what we 09:41 have to do we have to add some margin to 09:43 this 09:43 okay so now we messed up with our 09:46 heading and the reason behind is because 09:47 our nav bar is currently kind of 09:50 out of dome so this 09:54 heading section doesn't see it as an 09:57 element 09:58 as a block element so it's setting up 10:00 from the top so we have to add 10:02 margin this nav bar has 10:05 a height of around 10:08 58 pixels so what we're gonna do 10:12 we're gonna add margin to 10:16 our jumbotron and we're gonna use it 10:19 use inline styles for this one 10:27 and as you can see this fixed our issue 10:31 with a navbar now we can get rid of this 10:35 test div because we're gonna add some 10:38 more content 10:38 soon so now it's not scrollable anymore 10:41 but don't worry we can continue 10:43 to the next section now for the next 10:46 section we're gonna create a structure 10:50 like this 10:51 so let me start with comment 10:54 here okay and then we're gonna create 10:59 main we're gonna add 11:02 some margins already from the top and 11:05 the bottom 11:06 and we're gonna use grid bootstrap grid 11:09 so i'm gonna create container 11:11 and a row and two columns 11:14 so first one is gonna be lg eight 11:18 and let's add some 11:23 margins already and the second one 11:27 is meant for our 11:30 side nav 11:36 so this is gonna be left and it's gonna 11:39 be 11:40 right side so let's have a look at this 11:42 one 11:44 yeah something didn't work 11:49 okay because i have a typo here now it's 11:51 working fine 11:52 and obviously as soon as we start 11:54 shrinking our 11:56 screen they will collapse one below the 11:59 other 11:59 so this is exactly what we are looking 12:01 for 12:03 now let's create new section which will 12:06 hold 12:07 our post data so this feature 12:10 image um outer social buttons are 12:14 basically all this content 12:16 including until up this uh this line 12:20 over here 12:21 so let's create this 12:25 over here so it's post 12:28 data 12:33 and let's add section here 12:41 okay and now we're gonna start 12:45 with uh adding an 12:48 image to our pause data this one so 12:51 let's do 12:52 it 12:59 we're adding alt attribute 13:03 just in case something doesn't work and 13:05 now we have this image and 13:07 now we can clearly see that this image 13:09 is definitely too big 13:11 for our container because our row is 13:14 ending somewhere here 13:16 and this image is bigger so what we're 13:18 gonna do 13:20 to solve this is we're gonna make 13:23 our image responsive and 13:27 by using mdb you can achieve that 13:31 simply by adding image fluid class 13:35 which will make our image responsive 13:39 like 13:39 here and you can what you can also 13:42 see is that when you resize the window 13:44 it will change 13:46 its the size of the image as well 13:48 automatically 13:50 to always fit the container 13:54 above it okay now we're gonna add 13:57 some more classes to give our image a 14:00 nicer look so i'm gonna add 14:02 shadow we talked about shadow in the 14:04 previous tutorial so 14:06 you can check that if you want and round 14:08 it to make 14:09 our corners surrounded and we're also 14:12 gonna add some 14:14 margin as we're gonna need it in the 14:16 future so now as you can see we have 14:17 this corner 14:19 uh we have this nicely rounded corners 14:21 and a little bit of a shadow 14:23 beneath now we want to take care about 14:27 this section 14:28 so we're gonna use grid system again 14:34 so let's add row 14:38 and call md6 14:41 multiply two so we have two columns 14:46 and inside the first column we're gonna 14:49 use we're gonna we're gonna add 14:52 avatar of our outer so 14:56 we have an image a 15:00 and we're gonna add some classes here 15:03 and what we're gonna do we're gonna add 15:04 rounded to make it round i'm gonna add 15:10 shadow 15:13 i'm gonna add margin 15:17 what we also gonna do we're gonna set 15:19 height 15:20 to 35 to make it smaller 15:24 and let's check the final result okay so 15:27 this is this is it 15:28 so now we also gonna add few more 15:31 elements here 15:32 so within the same div we're gonna add 15:36 span published 15:41 some date like zero tens you're right 15:44 2020 15:48 by 15:53 some link to the outer page 15:57 text dark 16:04 okay so this is this one now we're gonna 16:07 move to the 16:08 next column where we're gonna put when 16:10 we're gonna add 16:11 some social icons so 16:15 let's get back to our dogs and let's go 16:18 to buttons 16:19 component buttons 16:22 let's search for social okay so here we 16:25 have the social ones 16:27 and let's copy some of them 16:37 and paste it over here 16:42 now what we want to do is 16:45 obviously want to put 16:48 this content to the right so what we're 16:52 gonna do we're gonna do text 16:54 right and 16:58 we want to make this button smaller 17:01 so we're gonna add 17:05 a few classes here so i'm gonna add px3 17:09 which will change our padding 17:13 like this and also i'm gonna add some 17:17 margin 17:18 right so we want to keep this margin 17:21 when our screen becomes smaller 17:23 and i'm going to show you what does it 17:25 mean in a few seconds on the mobile 17:27 device 17:28 okay so now it's more or less ready 17:32 let's see how it looks on a mobile 17:34 device 17:35 okay so as you can see it's a little bit 17:37 messy 17:38 on the mobile device so we have to 17:41 fix it and how we're gonna fix it 17:44 so basically what we're gonna do we're 17:47 gonna 17:48 set all elements to 17:51 align um to the left and the right when 17:55 we are on the big screen 17:57 but once we change the to some 18:00 mobile version like this one we gonna we 18:03 want this content to be 18:05 centered this is a good practice to 18:08 center element on the mobile devices 18:10 when you don't have 18:11 enough space for everything so let's do 18:14 it now 18:15 actually um and before we gonna do that 18:18 i'm also want to change 18:19 this icons a little bit so i want to get 18:22 rid of this 18:23 google and instagram and what i want to 18:26 do i will just put linkedin 18:28 and linkedin and and 18:31 comments section over here so let me do 18:35 this 18:35 first so we have linkedin here 18:53 and for the comment one i just prepared 18:55 myself called before 18:57 it's a very simple construction uh using 19:00 just 19:01 button and icon so we learn 19:05 how to do it in a previous tutorial 19:08 by the way you can see here that you can 19:10 use either button or a 19:12 so depending on what's the purpose if 19:15 this 19:15 is supposed to be an anchor 19:18 then you can use a and if not 19:22 then um then you can 19:26 use button for example if you want to 19:28 serve some different purpose 19:30 okay so let's now take care of of the 19:34 mobile 19:35 display so what we're going gonna do 19:38 we're gonna change 19:39 some classes here so to the left 19:42 column which is this one we're gonna add 19:44 following 19:45 uh classes so text center 19:49 which will center out our text text lg 19:52 left which will pull it left on the 19:54 large screens we're gonna add some 19:57 margins again we all explain all of that 20:00 in the previous tutorial 20:01 and to the right one we're gonna do 20:05 we're gonna change these classes as 20:07 follows 20:08 text center 20:10 [Music] 20:12 text large right 20:18 and by the way what is worth noticing is 20:20 that you can change your icon 20:22 color by setting up this color over here 20:26 okay let's see if we fixed our issue so 20:28 now 20:29 it looks um as it's supposed to on a 20:32 large screens like 20:34 here we have to the left to the right 20:36 and 20:37 on the mobile device everything is 20:39 centered and looks 20:40 nice and neat now 20:43 finally to a row we're gonna add 20:47 a line item center just to make sure 20:49 that everything is centered 20:52 vertically and we're gonna add some 20:55 margin bottom because we're gonna need 20:56 this space 20:58 to the next section okay 21:01 let's move to the next section which is 21:05 a proper post here so let's create 21:09 section for this one so we have 21:14 post content or text whatever we 21:17 want to call it and let's add this 21:21 section 21:26 okay now this section is um 21:30 is is a very often used section 21:34 so let's have a look at 21:37 docs uh here so if you go 21:41 to content and typography you're going 21:44 to see a different 21:46 different options different typography 21:49 options 21:50 um so um yeah i think you should you 21:53 should 21:54 put a lot of attention and 21:58 give some effort uh yourself to get 22:01 familiar with this one because 22:02 typography is one of the commonly used 22:05 you know uh think when you build 22:08 websites because it's all about 22:10 typography it's all about you know 22:11 quoting something making it bigger 22:13 smaller aligning and so on and so on 22:16 so yeah i mean you know let's let's take 22:19 something so 22:20 let's add some paragraph here 22:24 oops 22:28 lorem 14 which will generate 40 words 22:31 for me 22:32 then let's paste something over here 22:35 and yeah see how this renders 22:39 on a screen right 22:43 so yeah just play with it just check 22:46 different options like lists um 22:49 inline list and and like many many 22:52 others 22:53 check this 22:57 styling styling classes 23:00 and and yeah i mean just play with it 23:03 because it's crucial in any 23:04 in any uh project so i 23:08 just prepared some content to show you 23:12 how text can 23:15 looks like 23:20 depending on 23:24 classes you use so you have paragraphs 23:27 bold 23:27 notes list and so on and so now even 23:31 some images 23:31 inside the text so 23:35 yeah this is very important especially 23:37 in a project like 23:38 block now before we move further 23:42 let's um add some divider over 23:46 here and we're gonna add it 23:49 by adding some by adding class 23:53 to our section 23:58 post data 24:01 which is over here and we're gonna add 24:05 class border bottom 24:09 and some margin to it which will 24:14 generate this nice line over here 24:16 obviously we could use 24:17 hr but this is just adding this 24:20 uh this is making this bottom border 24:23 visible which is which is nice divider 24:27 uh okay let's move to the next section 24:28 which is a social 24:31 sure button so this is something which 24:33 you also want to use and by the way here 24:35 we also have this line so what we're 24:36 gonna do 24:37 we're gonna add this line 24:41 also to this section so let me just copy 24:44 paste this one 24:46 and 24:49 add it here now we have this line 24:52 okay and now let's create a new section 24:55 so let's collapse this one 24:58 and let's add some social share 25:05 comments section 25:08 social and then we're going to reuse 25:11 this 25:12 classes here 25:15 and this is fairly easy there is nothing 25:17 new here we already did it in the past 25:20 so let's just quickly 25:21 go through it share with your 25:25 friends okay and now 25:29 let's just add 25:32 the social buttons here so you can get 25:35 you know that you can 25:36 get them from button docs 25:40 so just go then pick whatever you want 25:44 whatever whichever you like so just pick 25:47 them 25:48 use use them here choose which social 25:52 platform you want 25:53 and i have prepared it before for you 25:57 so i'm just gonna reuse it now 26:04 okay so 26:07 here it is and now we want to obviously 26:10 add some margins 26:11 and paddings to it so let's 26:16 add this one here 26:19 so we're going to add some paddings some 26:22 margin 26:24 and we want to center everything 26:28 okay so now it's ready let's move to the 26:31 next section 26:32 which is the outer box 26:36 let's collapse this section 26:41 and let's add new one which is 26:44 outdoor box 26:55 okay then again obviously let's get this 26:58 classes 26:59 over here 27:02 i think we're gonna need some padding 27:05 here as well 27:06 and nothing fancy here we're going to 27:07 just use a grid 27:09 so again row call 27:13 md3 and we're going to put some 27:16 image here and 27:21 call md 27:26 nine i'm gonna put some 27:30 info uh like paragraph 27:34 strong and mario do 27:38 okay and now we're just gonna add 27:42 social icons again so let me just copy 27:46 paste them 27:48 here nothing really fancy you've seen it 27:52 before and then finally let's add some 27:55 paragraph here 27:57 and let's generate some 28:00 text over here 28:06 yeah okay we need some margins over here 28:09 and we still need to add our image so 28:12 let's work on image first 28:15 so we have this one in image 28:19 avatar outer avatar 28:22 and classes 28:27 image fluid as we want it to be 28:29 responsive 28:31 shadow one strong and around it 28:34 so nothing new here okay let's add 28:38 some 28:42 margins and 28:46 also here 28:51 yeah now it looks good and 28:55 it looks even better on a mobile device 28:58 great so let's move to the comments 29:02 section 29:03 and then again as you can see there is 29:06 nothing fancy over here just a grid 29:08 with some data so let me quickly go 29:10 through it with you 29:14 so let's 29:17 collapse this section 29:24 comments 29:26 section id comments 29:30 comments okay 29:34 now let's add the same classes as always 29:44 margin bottom 29:50 row some 29:54 margins now 29:59 call 2 and that's going to be image 30:02 and call 10 30:06 and that's going to be 30:10 our text so we have p strong 30:14 marta dolores 30:19 p lorem 30 30:23 let's add some 30:27 margins let's add image 30:33 comments one 30:42 some classes 30:50 okay yeah 30:53 okay so i'm just now i'm just gonna make 30:56 three 30:57 uh comments like this and by the way 30:59 just notice one 31:01 thing that since this one is called two 31:05 it's not getting reorganized so it's 31:07 always remains in this 31:09 ratio 2 to 10 which is something we want 31:12 in this particular case so i just forgot 31:16 about 31:17 adding some 31:24 heading over here 31:28 yeah and now let me just add 31:44 remaining 31:46 yeah we are missing some margin here so 31:52 let's add this one to the first row as 31:55 well 31:56 okay this is because i have 32:00 row here and it's row 32:03 is not closed over here okay 32:06 so now it's now it's working fine okay 32:10 and finally the last section will allow 32:13 our 32:14 users to leave a comment to our 32:17 post so there's gonna be a form and 32:19 we're gonna 32:20 use a section 32:23 form for this one we also did it in a 32:26 past 32:27 so let me just quickly 32:30 take this one we're going to use contact 32:34 form and we're going to change it to 32:36 to be a comment form 32:39 so again 32:45 reply 32:50 section reply 33:05 okay and 33:15 here it is oh there is a dipole so let 33:18 me fix it quickly 33:22 leave 33:27 name email message send me a copy of 33:30 this 33:31 comment okay then again please keep in 33:34 mind that this is just the front end of 33:36 our 33:37 form and we have entire series of 33:40 tutorials 33:41 on how to make your comments uh 33:44 form or contact forms working so how to 33:46 deal with them how to validate them 33:49 how to send data how to pass data and so 33:51 on so so if you want check this one 33:53 you're gonna find a link to other 33:55 tutorials in description down below and 33:57 don't forget to subscribe to our channel 33:59 as we are creating now a lot of contents 34:02 a lot of tutorials 34:03 like that okay now this part 34:06 is ready the left side is ready so now 34:09 it's high time to take care of our 34:12 sidebar 34:16 let's create section for it 34:32 now inside the sidebar we want to use 34:35 this 34:35 um area over here 34:39 to place an advertisement so we're gonna 34:41 use this construction which utilize 34:44 uh two masks so let's have a look at the 34:47 following examples 34:53 we're gonna search for overlay and masks 34:56 so 34:57 as you can see there are two masks 34:58 applied here the first one is applied on 35:00 the image itself 35:02 and the second one is getting triggered 35:06 when we hover 35:07 over this element so let me copy this 35:09 one 35:11 and paste it directly here now let's 35:14 change the image of it 35:21 for a two 35:26 so this is how it looks like now 35:30 and what you can see here uh is 35:33 that as i mentioned there are two masks 35:36 so 35:36 what we can do is change transparency 35:41 and color for the default mask so let's 35:43 say we're going to make it darker 35:45 so as you can see it's getting very very 35:48 dark 35:48 let me put it aside so you could see it 35:51 so this is the one right and if we 35:54 change this one 35:56 it will adjust transparency and we can 35:59 also 36:01 adjust what's going to happen when we 36:03 hover over 36:04 so for example we could just do it like 36:07 this and now when we hover it get 36:09 greenish okay so masks are very 36:12 very powerful tools so i also encourage 36:15 you 36:15 to get familiar with them as we're gonna 36:18 use them 36:19 and as you're gonna see them in multiple 36:21 projects 36:22 one thing which we also have to keep in 36:24 mind is that mdb is a mobile first 36:26 framework which means 36:29 all of these elements are very cool but 36:32 you should 36:33 avoid using this on the crucial ui 36:37 elements because when you are on mobile 36:40 you cannot actually hover over right you 36:42 cannot hover with your finger 36:44 so that's why you should avoid you know 36:47 using this 36:48 over behavior as much as possible 36:51 because this is 36:52 impossible to you know to recreate on 36:55 your mobile 36:56 device now regarding the code 36:59 there is nothing fancy over here what we 37:01 did is we 37:02 center it using flexbox which you 37:04 already know from the previous tutorials 37:07 so now let's just add another one 37:11 and let's adjust some content of it 37:14 so let me just do it 37:19 let's get rid of this one we will 37:21 replace it with h4 37:23 with text white 37:30 orange zero i'm gonna say like 37:33 only now strong you 37:37 best price 37:43 yeah we need to add also some 37:48 class over here 37:51 and by the way you can see this ripple 37:54 effect over here 37:55 so this is another cool stuff which you 37:58 should definitely look 37:59 into so if you go to docs 38:04 you're gonna find out that you can 38:06 easily adjust 38:08 a lot of um a lot about this 38:11 ripple effect so we can change color 38:13 right so for example here we have a 38:15 success 38:16 and we are using this light so let's 38:20 change it to success 38:23 and now it's green then again 38:29 you can use different kind of colors you 38:30 can use css colors you can change the 38:32 duration 38:33 right so you can make it faster slower 38:36 very slow very very slow 38:40 so that could be cool effect for example 38:42 for some games 38:43 you can define whether you want have 38:45 this unbound ripple which means whenever 38:47 you click this ripple fx so called wave 38:50 effect as well 38:51 uh very often um it's happening r is 38:53 always centered right so regardless 38:55 whether 38:56 where i click it always centered you can 38:58 also change the 38:59 radios so this is the small one 39:03 bigger and very big one so play with it 39:06 keep in mind very important thing is 39:08 that you can um 39:09 initialize and adjust all these settings 39:13 using attributes html attributes 39:16 right here like here or you can use them 39:19 javascript but it's a little bit more 39:20 complex so if you can 39:22 do it with html just go for it it's 39:23 going to be much lighter and better for 39:25 you 39:26 okay let's get back to our ads 39:29 let me quickly uh finish this stuff 39:39 and yeah oh this is green so let's just 39:42 revert this change 39:44 this was light so let 39:47 let's make it light again okay and now 39:50 we want to make this one 39:52 sticky so let's move into that part 39:56 now before we move on let's also add 39:59 some 40:01 rounded corners and shadows 40:04 to our ads so they look 40:08 good 40:11 yeah so now we have shadows and rounded 40:14 corners so 40:15 they align with other elements okay now 40:18 let's 40:19 move to the sticky part so what we want 40:22 to 40:23 achieve is this effect which you can see 40:25 here but 40:26 unlike with navbar this element is not 40:30 sticky 40:31 yet it starts to be sticky once we hit 40:34 certain 40:35 depth of scrolling so how we can achieve 40:38 that 40:39 obviously we can't use the same class as 40:42 we use in navbar 40:43 fix stop because that will stick our 40:47 section our sidebar to the top of the 40:50 page which we don't want to 40:52 and that's why we want to use a 40:55 different class 40:57 which is sticky top 41:06 now it gets sticky but the problem is 41:08 that 41:09 our nav bar is covering this part 41:12 so we'll have to fix it by adding 41:16 some margin 41:26 to our sidebar and now as you can see 41:29 it's perfectly perfectly positioned with 41:32 the left column and now it starts 41:34 scrolling 41:35 down when we reach this 41:38 depth finally the last part in our 41:41 project 41:42 is obviously a footer so what we're 41:45 going to do we're going to just use 41:48 predefined footer from documentation 41:52 which is this one i'm just gonna copy 41:54 that one 41:56 and paste it below our main section 42:01 and our page is ready i'm just gonna do 42:05 some final cleanup changing links 42:08 in in the navbar and so on and our 42:11 page will be ready 42:16 okay let's do final check on a mobile 42:20 let's see yeah everything works as 42:23 expected everything renders 42:28 correctly 42:30 yeah as you can see we don't have this 42:32 hover effect here as i said because 42:34 obviously when we place our finger over 42:36 screen it doesn't hover but this 42:39 ripple effect still works perfectly and 42:42 our footer 42:44 as the remaining part of the content is 42:46 also responsive so 42:48 yeah we are ready with this part so it's 42:50 high time to move to the next one which 42:52 is the main page of our blog 42:55 and this is how it's gonna look like so 42:58 let's 42:59 start with this now what we're gonna do 43:02 we're gonna switch to index.html 43:04 and open this one now 43:10 okay so this is the starting point 43:15 and what we're gonna do we're gonna 43:16 start with the basics 43:18 um now please note that since 43:21 uh we're gonna use everything which we 43:23 have learned so far in this and previous 43:25 tutorials 43:26 this is gonna be very very fast and it 43:28 shouldn't take us more than 43:29 i think 10 minutes so i'm going to show 43:32 you how quickly 43:34 you can create an entire page once you 43:37 know 43:37 the basics of mdb so let's get started 43:41 we're gonna start with header 43:46 we're gonna use fixed nav bar 43:49 with this image so i'm gonna copy this 43:52 one 43:53 and paste it here 43:58 okay so here it is 44:01 now what we want to do we want to change 44:04 container 44:07 we want also change or add 44:10 logo here instead of a brand 44:16 so i'm gonna change this one to 44:19 logo by the way i think we haven't done 44:21 it here yeah so now we have this logo 44:24 over here 44:27 now we're gonna change cover image here 44:40 yeah get rid of unnecessary 44:45 elements over here 45:08 okay now it's ready so let's move to the 45:10 main section the main section will 45:12 consist of two columns 45:14 and it will list all our posts so 45:17 let's do it now 45:31 adding some margins 45:44 we want to center everything add some 45:46 margins and now we want to create 45:48 this row container row construction 45:55 with call md 46:01 six and margin bottom 46:06 and we want six elements like that 46:10 now i'm gonna use image with 46:14 mask so so let's move to masks or 46:18 actually hover effect 46:24 let's copy this one let's 46:27 paste it six times now 46:30 now after our image we want to 46:34 add some heading 46:41 let's add some paragraph rm30 46:49 and finally we're gonna add some 46:53 button over there 46:58 so let's get this one from components 47:02 button 47:05 we want to use rounded one this one info 47:09 so info 47:14 and let's change 47:18 so let's paste it and save it and let's 47:21 see how it works 47:22 how it looks yeah it looks okay so now 47:25 let me quickly update 47:27 all the images so i'm gonna select this 47:30 one 47:31 select all of them then do image slash 47:44 okay now we also want to change 47:49 text in the button 47:52 so it's not in full and it's gonna be 47:57 read more and we want to add 48:01 some 48:05 margins to our image so 48:10 we want 48:13 half margin bottom four here and 48:18 put it in all places 48:32 okay now let's just 48:35 update images so this is number two 48:38 this is number three obviously when you 48:40 create a dynamic page 48:42 that would be generated auto-generated 48:44 by some back-end 48:46 um language like php or node 48:49 but this is something which we're going 48:50 to cover in future tutorials for now 48:53 we're using 48:54 just html okay so more or less it's 48:57 it's ready now one thing which is 49:00 important to remember 49:02 now is that you should always optimize 49:04 your 49:05 uh images so you know you if you if you 49:08 get some image from uh 49:10 from an ad it might be very heavy like 49:13 two three five megabytes so you should 49:15 always optimize it so you can use 49:17 optimizers like this one kraken io or 49:19 any other 49:20 which will basically compress image so 49:22 you're not gonna see any difference 49:24 it's it's a loseless compression so 49:26 you're gonna you're gonna lose the 49:27 quality but the 49:28 size will be much much smaller okay now 49:31 let's move to the 49:32 last part which is um pagination so 49:35 let's add pagination 49:36 over here like this one and then we're 49:39 gonna add footer and we will be 49:42 done with our blog main page and a blog 49:46 post so 49:46 let's get pagination from 49:51 imagination let's use 49:57 was it rounded yes let's use rounded 49:59 example 50:00 so this one 50:04 and let's create new section for this 50:08 so this is post and let's add 50:12 imagination 50:21 okay now let's 50:24 imagination 50:29 okay let's paste it 50:33 now obviously we need to center it 50:38 but you already know that we can easily 50:40 do that using flexbox so 50:42 just enable flexbox deflex 50:45 and then add justify content center 50:48 and this will get centered and finally 50:52 let's get footer 50:57 so the same one which we just used 50:59 before 51:01 and after main part let's just save it 51:07 and yeah more or less our page is ready 51:09 so let me just 51:11 fix some last stuff like this navbar 51:15 links over here 51:24 last final check to see how it works on 51:26 mobile 51:28 everything looks great yeah 51:31 so yeah our project is ready 51:35 so i hope you enjoyed it and 51:39 if you like don't forget to subscribe to 51:40 our channel as there are gonna be 51:42 much more than just this kind of 51:46 tutorials we're gonna have uh tutorials 51:48 also on the backend 51:50 technologies so stay tuned for more 51:54 now it's high time to publish our 51:56 project to web 51:58 so let's do it very quickly using mdbcli 52:02 so you just need to open your project 52:05 inside the using command line or 52:08 terminal and just type mdb 52:10 publish if you are mdb 52:13 user well it will ask you 52:16 whether you want to create packet json 52:18 file provide 52:19 a name for your project i'm going to 52:21 call it mdb5 blog 52:23 and then i'm going to accept all the 52:25 default values and it will publish 52:27 everything to the web 52:28 so if you are mdb5 user already you can 52:32 do it right away and if you don't have 52:34 mdbcli yet or you don't 52:36 have an mdb account don't worry 52:40 just check um description and you're 52:43 gonna find tutorial there 52:44 how to create how to register with mdb 52:46 to get this free hosting 52:48 for you and as you can see it's 52:49 extremely easy because now our page 52:52 has been created and published within a 52:55 matter of minutes so now 52:57 it's published to the page 53:00 and yeah as simple as that so if you're 53:03 mdb user you can use it for free so i 53:06 highly encourage you to to do so what 53:08 you can also do you can buy a domain and 53:09 you can 53:10 use use your own domain so instead of 53:13 mdb go and so on you can have like my 53:15 travel blog.com and you can all set it 53:17 up 53:17 very easy so if you want get to know 53:19 more about it just go to mdbootstrap.com 53:22 to the mdbcli section 53:23 or check tutorial in the description 53:26 down below and 53:27 finally i strongly encourage you guys 53:30 to create your version of a blog 53:33 using mdb and post it to our facebook 53:37 group 53:38 which you're going to find by searching 53:41 the skip coding 53:42 or you i'm gonna provide you a direct 53:45 link in the description 53:46 down below this video so thank you very 53:49 much for watching stay tuned because 53:51 um what we're gonna do in the next video 53:54 we're gonna create 53:56 even more awesome version of this blog 54:00 or if you want um 54:03 you can you can continue with the next 54:05 tutorial 54:07 where we're gonna create an admin 54:09 dashboard panel 54:10 so thank you for watching and see you in 54:13 the next 54:21 video