Blog with Bootstrap 5 & Material Design 2.0

Watch other courses

In today's video tutorial, we're going build entire blog, including the main page which lists all of our posts as well as the single post site. It will feature the single article where we can read the entire content of the article including different typography, social share buttons and components like outer box comments section with a form. We're also going to talk and learn today how to make elements sticky like nav bar, which is sticky to the top, and this advertisements which are getting sticky as soon as we start scrolling to the bottom.

Download Newest Version of MDB 5 from here

00:00 hey guys it's david from 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 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 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 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