Javascript but in this video i'll just give you a demo of the website that we're going to design and this is how the hero section of our.
Website looks so we can see we have some content over here and we have the hero image on the right and if we scroll down we can see we have the second section where.
We have the projects of our portfolio displayed over here and we also have a hover effect so if i hold over this image we can see we have the title of the.
Project displayed over here in the same way we have the title of all the other projects displayed over here and if you scroll down we can see that we have the services section and we have.
The three services displayed over here we also have this hover effect and if you scroll down even more we have the testimonials section and we can go to the next testimonial by clicking on.
The skills displayed over here so we have all these logos displayed over here if i hover over any of these logo we have the name of the language or the tool or the framework displayed over.
Here so this is the my skills section and if you scroll down even more we have the contact me section and here we can fill in these details and we also have this.
Button over here and if you scroll down even more we have the footer over here and we have the social media icons displayed over here.
And here we can see on the left we can go to these different sections directly so this is a quick navigation menu so for example if i click on this services dot.
We scroll down to the services section and then if i click on this skills section we are taken to the skills section and if i click on this first dot over here.
We are taken to the hero section and we Wesdigital
Also have a button over here to go to the next section so if i click on that we go to the my projects section and if you notice over here in the.Navigation bar if you scroll down a little bit it changes the height so we're gonna also add this effect and then lastly we have this menu icon.
Over here and if i click on that we have all the menu items displayed over here and if i hover over any of these icons we also have the hover effect and if i click on any of these.
Menu icons so let's click on testimonials and we are taken to the testimonials section let's go back to the home and this is also responsive so let.
Me just decrease the width of this browser window and here we can see this is the first breakpoint and we have a different layout for the hero.
Section and if i scroll down we can see that for the projects we have two projects displayed in one row in the desktop version we had three.
Projects displayed in a row but here we have just two projects displayed and we can see that we have the correct font size for all the other elements.
And we also have lesser height for these logos and here we can see for the footer we have a different layout.
And the menu icon works all right right now let's decrease the width even more and this is how the mobile version looks.
Right let's scroll down and here we can
See we have one project displayed in a row and everything looks alright in the mobile version as well.And we can see for the my skills section we have just two logos in a row so that's basically how our portfolio website is going to look all right so that's it for this video this was just.
An introduction of our tutorial series from the next video we will actually start writing the code and i will also give you the link of the source code at the end of the tutorial series alright.
So that's it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video.
Updates thanks a lot for watching have a nice day you.