Portfolio with Bootstrap 5 & Material Design 2.0

Watch other courses

In today's video tutorial, we're going to teach you how to design your own responsive personal portfolio website from scratch.

Download Newest Version of MDB 5 from here

00:00 hey guys it's david from mdbootstrap.com 00:02 and in this video we're going to learn 00:04 how to build 00:05 your portfolio if you watch our previous 00:08 tutorials you already know how to build 00:10 different 00:10 kind of pages like a landing page or a 00:13 blog 00:14 so it's a high time for you as a web 00:16 developer to build your 00:18 portfolio which is going to be your 00:20 resume 00:21 and which is going to help you to find 00:24 your next job 00:25 your next customer so uh without further 00:29 ado let's 00:30 get started we're gonna start 00:33 with um downloading md bootstrap 00:38 so navigate to mdbootstrap.com 00:41 go to mdb5 section 00:45 and download the newest version of 00:48 mdb from our page 00:52 if you want to stay up to date don't 00:54 forget to subscribe to our 00:56 newsletter as you're gonna get all the 01:00 notification about 01:01 updates new version and so on and once 01:04 you download 01:05 package just download it and unzip it 01:09 just unzip it and you will be ready to 01:13 go so i have my project over here and 01:16 this is 01:16 a starter which you can see over here 01:20 so once you download and zip the package 01:22 and open the 01:24 index.html file you're going to see 01:25 something like that 01:27 other than that i also prepared myself 01:30 some 01:30 images i'm going to use in this page you 01:33 can see them 01:34 over here in the background here and 01:37 over there 01:38 and i want to say uh that i've got this 01:41 this files from unsplash.com which is a 01:45 great website where you can get 01:47 free images so and you can use them in 01:50 your 01:50 uh personal and commercial projects so 01:53 really really 01:54 really great kudos to do all the outers 01:57 and by the way you will find all the 01:59 links to 02:00 to the images in the source code because 02:04 i want to leave the copyright 02:06 to them as well okay so let's get 02:09 started i'm gonna open this one 02:10 in visual studio code and we're gonna 02:13 create 02:14 this page from scratch so 02:18 let's close this one we're gonna leave 02:20 this because we will be using 02:22 mdb5 docs and let's 02:26 open this one in the 02:29 live server so we will see we'll have 02:33 a real time refresh over there so as 02:36 soon as we remove something from here 02:38 let me do it this full screen 02:40 so if i remove for example 02:44 this part start 02:48 and your project here and save the file 02:51 it will automatically 02:52 refresh it and so that's how we have 02:56 empty starter over there okay let me go 02:58 here 02:59 let me close this one so we could see 03:01 code better 03:02 and let's get started so the first step 03:06 to build our website 03:07 is going to be a basic structure so 03:10 we're going to start 03:11 with a header 03:15 main part and a footer so let me remind 03:20 you that since html5 03:22 we are supposed to use semantic 03:25 tags so obviously we could use this 03:28 using like div and giving this some id 03:30 or class name or whatsoever but that 03:33 tells you 03:34 nothing and this is much more readable 03:38 okay now once we have our sections ready 03:40 obviously we can't see them here 03:42 yet because they are empty so let's move 03:45 to the 03:46 first stage to the first component which 03:49 is 03:49 enough bar so we want to have 03:52 nav bar in our page which you can see 03:55 over here 03:57 like this one so let's see how we can 04:00 get there 04:03 if you open documentation go to 04:06 navigation 04:07 and navbar 04:11 you're gonna find many examples and 04:14 detailed docs about how to use nav bars 04:17 as you can see there's a whole lot of 04:19 documentation so every single 04:21 option is documented so let's start with 04:24 a very basic example so we're going to 04:26 copy this 04:27 basic example from docs and we're gonna 04:31 paste it 04:31 over here inside our header 04:35 okay now let's have a look how our nav 04:37 bar looks like so 04:38 here already you can see that it's 04:40 responsive because 04:42 it collapsed so on the smaller screen it 04:44 will collapse like that 04:46 but on the full size screen you will 04:48 have a and the full nav bar expanded but 04:52 what we want to do we don't want 04:55 the snap bar to take or actually these 04:57 icons elements to take the full 05:01 width of the screen we would like to 05:04 put it somewhere in the middle because 05:06 this is how we're gonna 05:08 create our page if you look at this we 05:10 try to keep our 05:11 content within this line 05:14 here so we want to leave this margin 05:16 because this is 05:18 this this allows us to focus our 05:21 site on the center right we cannot we 05:24 are not capable of 05:26 analyzing content if this is too wide 05:32 so in order to change our nav bar from 05:35 full size to centered one we're gonna 05:39 change 05:40 um one of the class which is container 05:44 so container container fluid it's a 05:46 bootstrap class and it takes a care of 05:48 the full width 05:50 for the container if we remove if we 05:52 remove fluid 05:54 then it will get centered like this 05:57 so now it gets centered and by the way 06:00 if you are not familiar with bootstrap 06:02 don't worry just check the description 06:04 below this video where you're going to 06:05 find 06:06 a link to our other tutorial 06:08 specifically 06:09 on bootstrap 5 grid so don't worry 06:13 you can either follow this tutorial 06:14 because 06:16 you're probably going to understand most 06:18 of the stuff which i'm gonna 06:20 which i'm gonna use which are gonna 06:21 explain about the bootstrap grid or just 06:24 pause video here and go 06:25 and check bootstrap and grid tutorial 06:28 first and then come back 06:29 and continue okay now let's 06:32 move on the next step we want to do is 06:36 we want to 06:37 place a logo over here 06:40 instead of this brand text over there so 06:44 let's 06:44 let's do that now let's see 06:48 how we can do it in a docs so 06:51 if you have a full screen you have this 06:54 links over here and you can search for 06:57 brand 06:58 which is describing this part 07:02 of uh our navbar so we can have 07:05 this nav bar as a text or we can have 07:08 this one as a logo so what i'm gonna do 07:10 i'm gonna just copy this part 07:12 from the source code i'm not gonna copy 07:13 the entire nav bar 07:15 i just want this image and what is 07:18 important to know um in this 07:22 place so i'm i'm replacing this brand 07:25 text with the image 07:26 so what is important here is that we are 07:28 giving a height to our image because if 07:31 we're not going to do that 07:32 navbar will automatically uh scale it 07:36 to fit the content so if the image is 07:39 too big 07:40 our our navbar also going to be 07:43 too big so we have to change the size um 07:48 to whatever looks good in your opinion i 07:51 think the sturdy 07:52 will look nice and neat okay now what we 07:56 want to do 07:57 is we want to get rid of this search 08:00 and we want to replace this with icon so 08:03 let's again 08:04 go to the docs and search for icons 08:08 example so here it is here we have our 08:11 icons 08:12 so again i'm gonna copy this it's 08:14 important to copy this with this 08:17 uh not only li elements but also 08:20 ul uh unordered list so i'm gonna copy 08:24 all of that get back to our code 08:27 and we want to get rid of this search 08:32 form as you can see this comments helps 08:35 us to find out 08:38 what it is so let's update this one and 08:41 say this is 08:42 uh social icons it's gonna be social 08:45 icons once we remove it so 08:47 let's get rid of this form and paste our 08:50 social icons 08:52 let's see if this works yeah now we have 08:55 icons here let's see it on the full 08:57 screen yeah we have icons over there 08:59 but we want to change them we want to 09:03 have a real social icons like facebook 09:05 instagram and so on so 09:08 let's go there let's get back to the 09:10 documentation 09:12 and let's go to icons you can use the 09:14 search tool 09:16 so just start typing icons 09:21 and you're gonna find our icons 09:24 search so if you just start typing the 09:27 name 09:28 of what you're looking for let's say 09:29 facebook 09:34 you can use whichever you like 09:37 click on it and here you will get a 09:40 called html code to use it 09:42 if you click copy it will get copied to 09:44 your clipboard 09:45 and let's go and replace our 09:48 um our icons 09:52 so we have this 09:55 icon 09:58 here so we have icon number one 10:02 two and a three so let's replace first 10:05 one 10:07 let's have a look so now we have a 10:10 facebook twitter 10:11 already it was there and let's replace 10:13 the last one the last one is a drop down 10:15 so we have to remove this one this 10:19 entire 10:20 piece of code and let's copy paste 10:23 the one which we already had here so 10:25 we're gonna have two 10:27 two tweeters now and let's change it to 10:31 let's say an instagram 10:36 copy and a replace 10:40 and let's have a look and now we have 10:42 all our 10:43 social icons in enough already now where 10:46 our navbar is ready it's a high time to 10:49 move to the next section which is 10:51 intro which is that part so 10:54 let's build this one now let's get back 10:58 to 10:58 documentation let's navigate to 11:01 navigation 11:02 and headers where you're gonna find 11:06 different headers 11:09 options so as you can see you can have 11:11 headers like this 11:13 that and so on and what i'm gonna use 11:18 i'm gonna use 11:19 uh this background image so 11:22 i'm gonna copy but i'm not gonna copy 11:24 the entire header from here you could do 11:26 that 11:27 but it contains snuffbar we already have 11:29 navbar so what i want to do i want just 11:32 this section this background image 11:34 section so i'm going to copy 11:35 this one and paste it still 11:39 within a header 11:43 and this will give me this nice intro 11:45 heading 11:46 section now let's have a closer look 11:50 at this code over here for a second 11:54 so what you can see here is that um we 11:56 are setting 11:57 these styles directly in here and here 12:00 obviously 12:00 we all know that the using inline styles 12:03 usually is in a good practice but in 12:05 this particular case 12:07 uh it's a better way to do it this way 12:11 rather than using class because classes 12:13 by default are you know reusable right 12:15 but we're not going to reuse 12:17 this this construction 12:21 anywhere else obviously if you would 12:22 like to reuse it somewhere else like 12:24 create a component and use it under 12:25 multiple pages then yeah that's a good 12:28 good call for using classes but for our 12:31 case 12:31 we want to just do it like that and we 12:34 won't set 12:35 this to even uh to this this height to 12:38 500 pixels 12:39 let's replace this default uh image with 12:43 the one 12:44 in our image folder 12:47 for c1 cover one and this is how it 12:50 looks like 12:51 now now let the other interesting thing 12:54 here is our mask 12:56 so we used um this mask component 12:59 and have a look at this one if we change 13:02 uh this this mask consists of 13:06 two parameters or actually one rgba 13:09 color which consists of 13:11 two parameters one is color defined by 13:14 three numbers 13:15 and the other one is opacity so if we're 13:17 gonna change this one we can change the 13:18 opacity let's have a look how 13:20 how our image will change here if i'm 13:23 going to save it now 13:25 you can see it's much lighter now 13:31 and we can even change and we can even 13:34 give it some color mask like this 13:38 whoops maybe a little bit too much 13:41 like that so using the mask we can 13:44 change how this 13:45 image looks like so we can easily adjust 13:48 our images using 13:50 masks now if you want to get more 13:52 information about masks 13:54 just check our docs page over here 13:57 because there are 13:58 multiple different options 14:02 and you can even use this gradient mask 14:04 which can give you a really 14:06 really amazing effect so i strongly 14:08 encourage you 14:09 to check other options 14:13 okay let's get let's revert our changes 14:15 to the previous one 14:17 okay and now let's fill this part 14:21 with a proper text and content 14:30 now we want to have two buttons so i'm 14:32 gonna copy paste this one 14:34 and let's change the content to 14:38 my skills and 14:42 my portfolio now let's 14:45 stop here for a second and have a look 14:49 and add few interesting components over 14:52 here 14:52 or actually classes so the first part is 14:56 this line where we are using flexbox 15:00 to center our content horizontally and 15:03 vertically if you had 15:07 occasion to try center something 15:09 vertically 15:10 you know how big pain that can be 15:14 so um you can see that using this 15:18 classes let's see what's going to happen 15:19 if i'm going to remove this one 15:21 so this class is taking care of 15:24 alignment 15:24 in in a horizontal position and this one 15:29 in a vertical one right so 15:33 if you tried it before you know that it 15:35 was very very difficult to 15:37 to center elements vertically uh 15:40 but with the use of flexbox it's it's 15:43 fairly easy so 15:44 if you're using mdb you can just use 15:46 this class and that's gonna 15:47 that's gonna work for you the other 15:49 thing is that 15:50 uh we are using this text wide and then 15:54 again 15:55 you can check more about these classes 15:59 in our typography 16:00 section which will tell you how to 16:03 use different attributes and you can 16:07 check 16:07 also color sections which will give you 16:10 uh this 16:14 insight into different color classes 16:17 which allows you 16:18 to easily change the color 16:21 of given text like this one 16:24 now another important part of the 16:27 development 16:28 is the spacing so as you can see there 16:31 are already some spacing classes over 16:33 here which is like 16:34 mb3 what does it mean this stands for 16:37 margin 16:37 bottom three so if i'm gonna get rid of 16:40 this one you're gonna see that this 16:42 margin will change here so using md 16:45 bootstrap five 16:46 mdb5 um 16:50 we can easily use uh the spacing classes 16:53 and they works like this that we can 16:55 search set 16:56 uh this margin and padding 17:00 uh classes so you have like m for margin 17:03 then you have a direction like 17:04 b for bottom t for top 17:07 left and right so you can use any 17:10 direction 17:11 you can use axis so if you're going to 17:13 say m 17:14 x is gonna add 17:17 margin uh from on the left and the right 17:20 side 17:21 um and you can use values from one to 17:23 five which will which will change 17:25 um which will change uh value of the 17:28 margin 17:28 so if you go to spacing dogs 17:32 you're gonna find exactly the the exact 17:34 values 17:35 so this is uh these are the values so 17:38 this is 17:38 what 5 stands for and here we have 17:41 explanation for different 17:44 directions so uh for example what we're 17:46 gonna do 17:48 is we're gonna add margin um 17:52 to our buttons so i'm gonna add margin 17:55 one which means i'm gonna add this 17:58 margin 17:58 into all directions and i also want to 18:01 do this one here 18:03 and the reason why is although 18:07 at this screen i want this margin just 18:10 between those 18:11 between those buttons but let's imagine 18:14 we have another button over here 18:16 and we will change our view to 18:21 some phone let's say iphone so 18:25 then buttons will collapse 18:28 one below the other and without these 18:30 classes 18:31 there wouldn't be any margin in between 18:34 them so that's why 18:35 even though on a big screen we can't see 18:38 that 18:39 because they are next to each other we 18:41 always should keep in mind 18:43 our spacing also on the mobile devices 18:47 and that's why also using 18:50 these developer tools is very very 18:53 crucial in the web development and i 18:55 strongly encourage you to get familiar 18:57 with this one because you can already 18:58 see how this web page will look 19:00 and behave on a mobile device 19:03 okay let's get rid of this extra button 19:06 now by the way i want to give you some a 19:09 good 19:10 tip um for creating your portfolio page 19:14 and as you can see i'm linking here 19:16 directly my skills and my portfolio 19:19 and the reason behind it is because i 19:21 want to uh this is something which you 19:23 should make very very visible to 19:25 your um to your potential customers to 19:28 your potential 19:29 uh clients to your potential potential 19:31 employers 19:33 because you know i see that very often 19:36 the people 19:37 the young developers they they create a 19:39 section when they 19:40 talk um a lot about them 19:43 their hobbies and so on which is 19:45 obviously nice to know 19:46 but what um potential uh 19:50 employer is looking for is actually what 19:52 your skills are and what's your 19:54 portfolio because that 19:55 that's that's what he's looking for you 19:57 when he want to hire you so 19:59 uh don't do that mistake just makes your 20:03 makes your uh portfolio 20:07 very very descriptive about you in the 20:10 sense that 20:10 show uh to everyone what they are 20:13 looking for 20:14 and don't make them to search for it 20:16 just make show it directly 20:18 uh below the main part of the page 20:22 or even on the main part of the page 20:24 okay finally 20:25 to to to polish our 20:29 intro section let's add some 20:32 shadows to it so in order to 20:35 add shadow we gonna use 20:39 uh shadow classes so we're gonna add it 20:42 to 20:42 our div and we're gonna add 20:45 shadow 2 20:49 but when we use shadow you can't see it 20:52 here 20:53 we have to use shadow 20:57 too strong at the end 21:00 because since this one is black you 21:02 can't even see this shadow here 21:04 it's too light so you have to use this 21:06 strong option and this will give us this 21:08 shadow over here i hope you can see the 21:10 difference let me 21:11 let me remove it for a second 21:14 and then add again so you can see this 21:16 shadow over here which 21:18 gives us this nice now look 21:22 and 3d effect so our intro is ready 21:25 it's working perfectly on um 21:29 on different devices by the way i didn't 21:31 mention that we have this nice ripple 21:33 this wave effect over here when the 21:35 customer clicks so this is also very 21:37 nice we have 21:38 navbar so let's move to the next section 21:41 which is a main section now within our 21:45 main sections we're gonna have some 21:48 subsections which is 21:50 features about me my projects 21:53 and a contact form so we're gonna create 21:56 these three sections now 21:58 let's start with the first one 22:01 so the first section is 22:06 features 22:10 and i'm using id because then i will uh 22:12 i want to 22:13 i'm going to link um these sections 22:17 into our navbar so i'm going to give 22:19 links which will get me directly 22:21 to given sections like this so when i'm 22:23 going to click 22:24 it will just get me to the proper 22:28 part of my page so this is why i'm 22:30 adding an id now 22:32 and we will be using uh bootstrap grid 22:36 to place our content 22:40 like here which 22:44 as you can see will behave differently 22:47 depending on the screen size 22:49 so on a big big screen we have four 22:52 icons next to each other then we're 22:54 gonna have 22:55 two next to each other for the lap for 22:58 the tablets 22:59 and on the small screen they will just 23:01 nest one below 23:02 the other and we're gonna achieve that 23:04 using bootstrap grid 23:06 so let's do that but first let's add 23:09 some comments here 23:11 which will help us to understand code 23:16 once it gets bigger and bigger 23:22 okay so let's start with a grid we're 23:24 gonna put our grid 23:26 or actually our container outside the 23:29 section which means that 23:31 um all sections which we're gonna create 23:33 later 23:34 they will be wrapped up with the same 23:37 container so i'm gonna use container 23:42 class and i'm gonna wrap this section 23:45 up with this one okay 23:48 now let's add some heading into our 23:52 feature section 23:53 so i'm gonna use heading 3 23:58 and i want 24:01 use strong to add features 24:05 and they will show up over here let's 24:07 switch this one 24:09 to the normal screen and then again just 24:11 to remind you this is 24:13 uh it's it's it's placed over here 24:15 because our 24:17 container is centering everything to 24:20 this line is leaving the margin if we 24:22 would use 24:23 fluid it will just get the full width 24:26 but we don't want this one 24:27 so that's great so we have it here now 24:30 what we want to do 24:31 obviously we want to center it so 24:34 what we're going to do we're going to 24:35 add class to our section 24:39 text center which will center content 24:42 over here 24:43 and now we want to 24:47 we want to add some spacing over here 24:51 so what we're going to do we're going to 24:53 just add class to our main part 24:56 to use my5 so it will add 25:00 margins to top and bottom let's have a 25:03 look at this one 25:04 here so you're looking for main 25:08 section and this orange one 25:11 is our our margin from top 25:14 uh and the bottom and it's 25:18 it's exactly the same okay 25:21 now once we have heading let's move to 25:23 our 25:24 grid so what we're gonna do we're gonna 25:28 add row 25:31 and inside that row we're gonna add 25:33 columns so i'm gonna add column 25:36 with the size of 3 on the large screens 25:40 and we want to add column with the size 25:43 of six on the medium 25:47 screens and we want to have four divs 25:50 like this one and i'm going to show you 25:54 and that in a second why these values 25:58 are here 25:58 if you are not familiar with bootstrap 26:00 um so now let's get back to dogs and 26:03 let's get back to icons some things you 26:04 already know 26:06 and we will be looking for some icon 26:10 which 26:13 is about speed because we want to say 26:16 that we are building 26:18 a very fast website so i'm gonna use 26:21 icon over here 26:23 here it is now obviously 26:26 we want this icon to be bigger in order 26:29 to make it bigger we just need to use 26:31 another class 26:32 which is fa now number like 26:35 2 x and it will make it extra large if 26:39 you want it even bigger 26:40 i'm gonna use three and this is this is 26:43 um the correct size now i want to change 26:46 the color so then again 26:48 we learn about color before so i'm gonna 26:50 just say text 26:51 primary and what is cool about that is 26:54 is this 26:54 primary color is defined for the entire 26:57 page 26:58 so you know if you're gonna use another 27:00 components like button primary it will 27:02 also have exactly the same color 27:04 and then you can change this primary 27:07 color 27:07 in your css in your sas files and this 27:10 will change and affect the entire page 27:14 okay now the next thing uh 27:17 is unheading so i'm gonna say 27:21 fast and then i'm gonna say 27:25 p blazing fast load times 27:30 as my highest priority 27:35 okay now we need to add some extra 27:37 spicing over here so i'm gonna add 27:40 some margins here and i also want to add 27:46 some 27:53 some spacing over here this class by the 27:55 way this construction says that we want 27:58 to have this margin bottom 28:00 on the medium screen size to be zero 28:04 and this is because when they set 28:07 next one below the other we want to have 28:10 this margin 28:11 on the zero because that basically looks 28:14 just better and i'm gonna show you that 28:15 in a second okay so we have our icon 28:17 ready now what we have want to do we 28:20 want to just create 28:21 four um four three more 28:24 to have four in total so that's what i'm 28:26 gonna do right 28:28 now 28:44 okay our icons are ready now as you can 28:46 see here we are still missing some 28:48 spacing so 28:49 i'm gonna adjust this one by adding this 28:58 margin only on the medium screen size 29:02 which is this one 29:03 to three and now it looks very very good 29:05 so we are ready to go to the next 29:07 section 29:09 and this next section's gone and this 29:12 next section is gonna be 29:14 called about me 29:18 now what we want to do we also want to 29:20 add some divider over here 29:22 like this line and we want to add some 29:27 spacing to this one as well 29:32 okay let's move to the section about me 29:38 this section will consist of uh 29:42 two columns uh where we're gonna say 29:44 something about us give our photo 29:47 photo of us and then we're gonna say 29:49 what technologies 29:51 we know and what is interesting is we're 29:53 going to 29:54 use grid inside the grid because this is 29:57 obviously possible 29:58 with bootstrap 5. so let's start 30:02 with uh we have the heading 30:05 so then again we have h3 30:08 strong about me 30:12 then oops i made a typo 30:16 oh i forgot about this section so let's 30:19 add section 30:24 and let's obviously keep it with inside 30:27 section now here we have 30:31 again we want to add this class text 30:35 center to center our content over here 30:41 and we want to add some 30:46 class to that margin 30:53 okay and now we are ready to add 30:58 row 31:01 and to 31:05 md six 31:09 columns which will split our i was gonna 31:11 split 31:12 our page into two columns 31:16 so let's start with that with the first 31:18 one on the left side 31:19 first we're gonna add image 31:24 on the left now to make it 31:27 round um 31:30 what we have to do is just to add a 31:34 single class 31:36 called rounded 31:39 circle and we will get this result what 31:44 is important is this 31:45 image have to be square image because 31:48 otherwise 31:49 if it's not if it's not square 31:53 if this is if it's rectangular 31:56 then we're going to get oval instead of 31:59 this circle 32:00 so this is something important to keep 32:03 in mind 32:04 okay now what we also want to do 32:07 we will add some shadow 32:10 to it so let's add another class 32:15 shadow 32:18 one strong now by changing this number 32:22 obviously we can 32:24 change the strength of the 32:28 shadow so you can see how does it change 32:33 but one is sufficient in our case 32:37 okay now next alignment is 32:45 who's this guy below 32:50 we want to add some 32:54 margin to push it down 32:58 to the bottom 33:01 and now let me let me paste description 33:07 okay and what we also want to do we want 33:10 to add 33:11 this icons and we can find these icons 33:15 in 33:16 docs if you start typing icons but this 33:18 one we 33:19 are not going to icons we are going to 33:21 buttons 33:22 because these are buttons which looks 33:24 like this 33:25 social icon so you can have this social 33:29 social icons like this one but they are 33:32 also this 33:33 available so i'm gonna copy them 33:36 i'm gonna paste it over here i'm going 33:38 to get rid of google 33:42 and here it is if you prefer other 33:46 icons option you can for example choose 33:49 this one 33:50 so i'm going to use these buttons over 33:52 here 33:56 and it looks like this and we can easily 34:00 change it looks 34:04 to a circle by adding this 34:07 button 34:10 floating class which will make them 34:14 round so let's let me remove google and 34:18 let me add this class the other thing is 34:22 we want to add some spacing over here so 34:24 let's just say margin one 34:27 so this will give us some spacing and 34:28 now just let's add this one to all three 34:33 all three icons here okay so this part 34:36 is ready 34:37 now we can move to the part on the right 34:39 side 34:40 where we're gonna list our skills 34:43 and let's also make a stop here because 34:46 um 34:47 i very often see that people especially 34:50 the young developers that are using this 34:52 um 34:52 they're checking other portfolios and 34:54 they see those you know 34:58 portfolios where people say they're 35:00 using either percentage 35:02 or stars or bars like 35:06 progress bar so um for example this one 35:09 right 35:10 but my very good advice as 35:13 you know as an employer is 35:17 you don't use this because what does it 35:19 really mean 35:20 that you know html for 50 percent i mean 35:24 what kind of tax do you know when you're 35:27 at 50 or when you're on 70 what does it 35:29 mean that your js 35:30 is for 4 out of 5 star that tells me 35:33 nothing right 35:34 i mean so please don't do that because 35:36 because this doesn't tell me anything so 35:38 that's why we're going to use something 35:39 else 35:39 what we're going to say we're going to 35:40 say how long we've been using a given 35:43 technology 35:44 which is obviously a much better 35:46 indicator 35:47 still i mean there are there might be 35:48 differences uh 35:50 and you know someone can learn a lot 35:52 within one year 35:54 and someone other will take at least 35:56 three years but this is much better than 35:58 stars or progress bar so please 36:00 do use this kind of stuff or 36:03 just put uh effort in creating your 36:07 portfolio because then i will just 36:09 see with my own eyes what you can really 36:12 see 36:13 uh what you can really do what you can 36:16 what you can 36:17 what you have created what you're 36:18 capable of doing so please do that and 36:20 that's what we're gonna use 36:21 in this section so let's move there now 36:24 so this is this column 36:27 and within this column we're gonna 36:30 use as i mentioned before we're gonna 36:32 use container we're gonna use grid 36:34 inside grid so let's start with uh 36:38 be strong proficient 36:42 five plus years so we're gonna start 36:44 listing our technologies which we know 36:46 for which we've been using for at least 36:47 five years 36:49 and we're gonna add row 36:52 and we're gonna add call md4 36:57 and we can add margin bottom four 36:59 because we know we're gonna 37:01 need it now let's get back to our icon 37:04 search i should have it in separate 37:06 windows because i'm using this so 37:08 often let's go for html5 copy this one 37:12 paste it over here probably it's going 37:16 to be too small yeah 37:17 so let's change it to something bigger 37:20 you already know how to do it 37:22 let's add some margins oops margin two 37:26 and let's put html tag over here 37:31 okay now let's do it 37:36 three more times now i didn't mention it 37:39 before 37:39 uh so for someone who doesn't know 37:41 bootstrap grid in a bootstrap 37:43 each row can have columns with the size 37:47 up to 12. so with this column size is 37:50 four we can fit 37:51 like three columns like that so that's 37:53 why we always try to 37:55 add them to sum up up to 12 so this is 37:57 four if we want to have four columns 37:59 that size obviously should be three 38:00 because it would be like three 38:02 three three and 3 which is 12 obviously 38:05 okay now let me let me just quickly 38:07 change this one so the second 38:08 one as css3 as far as i can remember yes 38:13 okay and the last one was um 38:16 js i guess 38:20 yep okay so let's quickly have a look at 38:24 behavior 38:26 so now you can see that the smaller 38:27 screen they will look like 38:29 this one by the way we need to add some 38:31 margin to this one 38:33 because it's too close so we can uh 38:36 either do it by adding this 38:38 margin bottom here yeah or we could just 38:41 add margin to this one 38:42 i just choose this one so let's also 38:46 add it here for a future so we'll have 38:49 a margin in the bottom okay so now 38:52 we have it ready let's create uh 38:55 remaining 38:58 icons 39:07 okay so our icons are ready um 39:11 now as you can see i added some comments 39:13 because there is so many 39:14 code already that i'm getting lost 39:17 so i like adding these comments to help 39:19 me figure out where 39:20 which part i'm changing right now and as 39:22 you can see in the last one we use a 39:24 little bit different columns because we 39:26 have just two 39:28 of them and that's why we use this md6 39:31 instead of md4 because there are just 39:32 two columns 39:34 next to each other 39:37 so since this part is ready let's move 39:39 to the next section which is 39:41 my projects 39:45 let's copy paste this one let's change 39:48 section name to 39:49 my project actually we could do it like 39:54 this okay now 39:57 section with the name 40:00 projects and class text center probably 40:04 we're gonna use it 40:05 as we've been doing so far 40:08 let's add 40:15 heading 40:18 okay let's add margin 40:27 now in order to create this section 40:30 we're gonna use 40:31 uh mdb cards so then again if you go to 40:35 docs 40:36 you're gonna find many different 40:39 [Music] 40:41 card types so you can use whichever 40:45 you want so as you can see there are a 40:48 lot of 40:49 different varieties of cards so you can 40:51 use whichever you like 40:53 now let's say we want to have 40:57 the one with the ripple with this nice 41:00 effect so i'm going to copy this one 41:02 and now if i'm going to paste it over 41:05 here 41:06 it will take the full size so what we 41:09 want to do we want to use 41:10 and we want to use grid 41:14 to make it smaller so let's do it now 41:18 row we want to have call lg 41:24 for call md6 and i'm going to explain 41:30 in a second why and we want to want to 41:33 have three 41:34 cards like this so now i'm gonna paste 41:38 three cards over here i just use 41:41 multi-cursor 41:43 and let me change this one to 12. 41:46 so what's happening here we have this 41:48 three columns 41:50 let me close this card this card 41:53 and that card for you so we have three 41:55 columns 41:56 each of them has size of four lg four 41:59 which means that 42:00 in a huge screen i'm gonna have three 42:01 next to each other right 42:03 it's four four and four which gives 12 42:06 but on a medium size screen 42:09 like this one so on the tablet instead 42:12 of having them 42:14 like on the mobile device 42:17 one below the other we still have some 42:19 space so we're gonna use this trick to 42:22 have one bigger card 42:24 and two smaller ones so this 42:27 is because this is this is 12 and this 42:30 is 6 plus 6 so that's how we have 42:33 this effect here and you can already see 42:35 that we are missing some 42:37 margins over here so let's add 42:41 this one so we have some spacing 42:44 over here okay now let's quickly add 42:47 some 42:47 content to our pages so i'm gonna what 42:50 i'm gonna do 42:51 uh i'm gonna 42:55 change the pictures over here 42:59 so this is image 43:02 project 1 image 43:09 project 2 image 43:12 project three 43:15 okay so now we have this project icon so 43:18 let's just quickly 43:20 change title and description 43:32 and finally we want to change this 43:35 button text to something like c 43:38 live and 43:42 i think our section is ready so we are 43:45 ready to move to the next section 43:48 which is contact section 43:54 so let's create new section 44:11 and as always let's 44:14 add heading 44:26 let's add row 44:30 let's add some column this time we have 44:33 only single column 44:37 and let's add some 44:41 form i'm going to show you how we can 44:42 center this column 44:44 because by default these columns are 44:46 aligned to left 44:48 but that in a second before that let's 44:50 go to forms 44:52 overview and then again as always you 44:55 have multiple examples of 44:57 working forms over here so what you can 44:59 do 45:00 you can just choose which one you like 45:02 which one you prefer 45:04 oh this is already a contact form so 45:07 let's just copy 45:08 this code and let's paste it over to 45:11 here and as you can see as i mentioned 45:14 it's 45:15 six columns so it's just taking 45:18 half of it obviously we could use like 45:20 something like 12 45:22 and then it will get the full width but 45:25 if you want to make it smaller what you 45:28 can do 45:29 you can just use this 45:33 flexbox so to enable flexbox we just say 45:37 deflex 45:38 and then we can say just t5 content 45:42 center and this will center our content 45:45 for 45:46 us and now we can change this size to 45:48 something 45:49 to size we want like eight or 45:52 six for example and this will 45:56 this will work perfectly for 45:59 our for our project and obviously keep 46:02 in mind that this is just 46:03 um this is just uh 46:08 in front of our html contact form so it 46:11 doesn't work obviously 46:13 uh but we have another tutorial for you 46:16 where we 46:17 can when we where we teach you how to uh 46:20 make this contact form actually working 46:22 to send email 46:24 to you so every time someone feels it it 46:26 will send an email to you so 46:27 don't forget to check the description 46:28 don't forget to subscribe to our youtube 46:30 channel 46:31 as this is where you're gonna find more 46:33 tutorials like this okay now let's 46:35 just polish it so let's add some margins 46:39 here like 46:42 my five to have this distance over here 46:46 maybe it's a little bit let's have a 46:48 three 46:48 for example actually you know what let's 46:51 do it 46:52 even something like this 46:59 my5 and now we will have this 47:02 this margin from top and the bottom 47:06 so it should be same okay so the last 47:08 part 47:09 for today is our footer 47:13 so then again let's get back to docs 47:15 let's go 47:16 to navigation 47:19 footer and let's search 47:23 for this very minimalistic one 47:26 copyrights this is all we need for 47:29 for today and we could use something 47:32 else like this one but 47:34 this one will work for us so inside the 47:36 footer section 47:38 i'm gonna paste it so we have this 47:40 footer here 47:41 so the last thing is to fix our 47:44 links in buttons 47:47 here and in the number so let me do it 47:50 now 48:00 so what we want to do we want to get rid 48:02 of this drop down and disabled 48:04 we don't want them we don't need them so 48:07 i'm gonna go 48:08 find this links so this is our first 48:11 link 48:12 this is drop down we don't want drop 48:14 down here we're gonna remove this one 48:17 we don't want this disabled we're gonna 48:20 remove this one 48:22 what we need is our home and we need a 48:25 couple of links so we won't have 48:28 um features about me my projects and 48:31 contacts so let's do it like this 48:33 features and this is 48:37 features this one is 48:40 about me so 48:43 about so this is corresponding with an 48:45 id right which we added 48:47 to our sections like 48:51 this is section id features 48:54 so this has to correspond with 48:57 this name so we have about then we had 49:03 projects so we're gonna add projects 49:06 here 49:14 and the last one is contact 49:19 so now if we click to any of this 49:22 it will get us to the proper section and 49:25 finally let's 49:27 um add this links to this one 49:32 so we have about 49:35 and here we have projects if i'm not 49:39 mistaken 49:39 yep my skills okay so our page 49:45 looks good now it's ready 49:48 and it's fully responsive including 49:51 different screen size so it will behave 49:53 differently on the tablets 49:56 right and on the mobile but what is most 49:59 important is that this fully responsive 50:01 and it will look good on each 50:04 and every device 50:08 okay now i want to show you how you can 50:11 quickly 50:12 deploy our page so 50:16 if you're already mdb customer what you 50:19 have to do 50:20 is very simple because what you need to 50:23 do 50:24 is just open a command line or terminal 50:27 on your page 50:28 navigate to the folder where your 50:30 project is 50:32 created and just type mdb publish 50:36 and this will create a json package file 50:39 for you 50:39 you can give a name to this one so we 50:42 can say 50:44 let's say mdb5 landing 50:47 that's what we want to call it and you 50:49 can accept 50:50 any default values and 50:53 within a second your page will get 50:56 deployed 50:57 to the web and it will be available 51:00 for everyone so as you can see it's 51:02 already there it's secured with ssl so 51:04 your page is 51:05 ready and if you don't have mdb 51:09 account yet or if you don't have um and 51:12 you don't have mdb cli 51:14 installed just go to mdbootstrap.com 51:18 and check our mdbcli section where 51:20 you're gonna find everything about the 51:22 cli 51:23 or you can check description down below 51:25 this video 51:27 because we have a separate tutorial on 51:29 how to create account md bootstrap and 51:31 how to 51:31 use how to install ndbcli how to use it 51:34 because you can do much more 51:36 than just this simple deployment 51:40 and finally i strongly encourage you to 51:42 join our 51:43 facebook group you're gonna find a link 51:45 in the description down below 51:46 where you're gonna find a lot of new 51:48 tutorials materials questions and in 51:50 case you have 51:51 any issues don't hesitate to post it 51:53 there i also encourage you to create 51:55 your version 51:56 of portfolio page and post it there 52:00 share with others share with us and show 52:03 us 52:04 what you've built with mdb