Portfolio with Bootstrap 5 & Material Design 2.0

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