Personal Website Using HTML , CSS & JS| responsive portfolio html css javascript| portfolio website

hello everyone i'm tane and welcome back to my youtube channel the junior programmer so in this video i'll be bringing you a project that is creating a website so i'll be telling you how to create your own personal website you can use it for anything like if you have some project if you have a company or a page you can use this idea you can use this and create a website so first of all we'll start off with the html file so i've named it index.html so first of all we'll just start with the basic html stuff defining the basic tags for example the html head meta title link so i have linked it to the style.css style sheet which i'll be styling afterwards so now moving on to the body so first of all i'll be making the navigation bar that is at the top and it will have the buttons for example for the home for the about us for the portfolio for the team for the services price and so on in the href i have pointed them to that particular id of the section so when i click on them it will it will move to that id by this i mean it will scroll down itself to that particular area on the website so now we have also defined this home page and the introduction so for the introduction you can just introduce yourself i'm writing my name and some random text so you've you can also see that i've given some classes to all of the divs and i'll be using these classes to put the style afterwards using the css in the style sheet so till now i'm just writing some text here nothing much different their divs and i'm using text using divs so i can style them afterwards so now moving on to the about us page so the about this page is also mostly about the text there isn't any more mostly input required like any buttons or anything it's just a introduction or maybe a description of your portfolio or maybe the website you can put in as much text as you want and then you can use the tips i'm just creating some text and just creating some divs and filling it with some text that i'll be styling afterwards so now there's another div and the class is orbitron black orbee so they're different divs as you can see i'm also giving them giving some divs to classes by this i mean it will have the style of both the classes and i can also then get to this particular element in the style sheet more easily because i can use the two of the classes that i have given it so now the portfolio so in the portfolio there's basically the just some text first of all is the heading for the portfolio there are some other divs that have basically just a little bit of text for example show all design graphics motion video and so on then after that there's another div that is pretty much empty for now but we can put in text afterwards and we can like style it you can also keep some tips empty and can style it so we can style the whole hall of the page and we can get a very good visual output so for some of the information i'm just giving it about my youtube page for example the views sub subs and instagram followers and so on you can give here anything you want according to your portfolio it can be number of projects you have done or maybe some expertise or some reviews or anything that you want now i'm going to define the team so in the team i'll be writing the description about the team that is involved in this so for now it if it is an individual pro individual website like an individual portfolio you can use only your name if there are multiple team members you can use all of the names and pictures and all that then the client sends experience here you can put in the clients that you've worked in the previous experience that you had then you can also put in the reviews they have and all those kind of things that relate to the clients and your experience so you can this is just like a portfolio it will have these important sections for example the user reviews your information the product information and so on so whenever someone lands onto it onto your website he or she may have a good overview of what the website is about what are the services that you offer and so on so try to make it as much descriptive as possible try to include more things good graphics and graphics should be easy to read so it doesn't complicate the things for the user afterwards so keeping all these things in mind i'm just trying to make a simple website that should provide with the all the information and also should be not complex enough but should have a good style and a good theme so that it can be appealing to the user so similarly now we have moved on to the price section here you can tell about the prices you have maybe you have different plans for the projects or anything that you offer for the services or the products you can write here the plans of your like what are the plans about the monthly yearly or these kind of charges the subscription charges and so on here i'm also writing down some some customer support some things like customer support lifetime updates these are just the description of the different tiers of subscription you can say so for example there was a basic one then is the standard one it will have customer support more cloud storage and more email boxes and then i'm going to write some contact information this is very important in a website so that the users can contact you if they have any questions or have any issues it's a very important section and you do not need to miss that section so similarly now what i'm doing is i'm just simply writing some text here there's not much of like input required from the user for example the buttons or the text input or the radio buttons or these kind of stuff this is just mostly the information about your portfolio and to how to style it so it will mainly have text only that will be mostly the description of the products you're offering or the services you're offering or maybe you're simply your portfolio the past experiences and all that stuff you can also like include the buttons and maybe link through the project but i'll not be doing this in this video but you can always do this you can check out my video videos of how to do it then you can include it so in the end i'm just writing some information for example where the office is located any phone number the how to contact via email or any other medium and then some timings of when it is of when the when i'm available and all that you can change them according to your timings according to your location according to your email and all that now if you want to just make the website just as it is just the one that i showed you you can simply copy paste the code and just make the changes in the names and the description and so on and you'll be good to go and then you can see whatever you need to change and then you can change it afterwards so now the css style sheet so in the css style sheet first of all i'm importing some fonts from the google so this is the syntax of how to do it then i'll start with the styling so i'll just go from the main tags for example the body the whole tag and then just go into the inner tags so as you can see i'm going onto the inner text for example ab syntax orbitron orbitron after arbitron before so before and after i used to like if there's some interaction then how it will be changed and when the interaction is over how it was originally so that is what we can do do with the before and after so as you can see the styling that i'm doing is basically pretty much for example there's not much difficult thing or any complex thing for example i'm just trying to decide the position of that particular element give it a bit of height letter spacing font weight let margins found family or position or border so these are just like the visual things that you will be able to tell about the name for example if i'm doing background color or width or height then you know what it's supposed to change about that particular element in the html so it is pretty much descriptive itself because whatever property i'm changing it will tell you what i'm changing so what i'm doing is just changing a little bit of content the top left right left bottom then maybe adding some then i'm also adding some images in the background for that you've got to have the image that you want to put in there in the same folder or if you do not have it in the same folder you should have a complete path or if you're using from some online resource you should have a complete url or a link of that particular image so by doing this we have now styled almost a lot of elements in the from the html so what we're doing is we're just going on step by step the things that we've created in the html and then we're styling them as we write the things you can just go into the html as you move down then you style those particular elements according to your likings now as you can see i'm i've also used the percentages so percentages is more convenient sometimes because if the screen size differs it will take the measurements according to the percentage of the particular screen size and that will make it much more it will make make it much more compatible with the different screen sizes of different devices so as you can see i have up till now covered for the team section portfolio of your portfolio view container profile image so here the image that i'm giving as i told you i have it in the same directory in the image and then i have the image so i'm giving it a complete path i'm not basically giving it a complete path but i'm giving it the part relative to the files where i have it to the project folder so you can do that too for the background color as you can see i'm just sometimes giving a simple solid color you can also give a gradient color or any other type of color that you'll see in my other videos too i have some tutorials too so moving on we're now just reaching the end part of the css because we need to style each and everything so if you do not want to change anything again i am saying that if you do not want to change anything you can simply just copy paste this as it is then see how it pulls up on your computer then you can make changes to the style sheet like maybe change the colors or maybe change the position and then whatever you like you can use that in your personal website you can use this for your personal portfolio if you do not have a website or company or anything you can design your own portfolio your online portfolio that can be accessible by anyone over the internet you can host it over any service and then you can share the link and obviously it can also be done with any like if you have a maybe company or a product or some bigger thing it's not an individual thing it's a team thing so you can do it too and just introduce the team members in the team section so now we are just at the end of the html the footers and the contact information and all that then the social buttons so social buttons are now pretty much must to be include for example the linkedin or the instagram or the facebook because they allow the user to see your profile and give a much wider overview of how you work and all that so i would suggest that you should include your social links for example if you have any like instagram linkedin or any others so now we are just styling the nav link this is the class that we have used here then when it's active and non-active and all that stuff now the client so we just style them so the styling is pretty much the same for example the weight the height the letter spacing the font size and so on now when i use the media this is just to point out to some animation or a video or a picture that i have and then i can tell the css of how it will look when the website loads i can tell the style of it and i can all if it's a video i can i can tell it the speed of the animation or anything or something like this so this is why you can use the media so this styling is done the css is complete now we'll just need to do some javascript coding so that we can make it much more responsive so what we'll do is that will make functions for page scrolling so what this means is that when the page scrolls that particular section should be visible and the previous section should be like eliminated and also when we click on a particular button in the start for example when the navigation bar we could we click on a particular button for example our products then it will jump down to the our product section so this is how we make it responsible so and just like as i'm saying there's a better way to do this but this works so i'll fix it later since this is like just a tutorial video so there is a better way like a more advanced way but for the sake of this video and to keep it simple for you guys i'll just do it like this so what i'm doing is that when the when the person clicks on a navigation bar for a particular section it will go on to that section and the previous sections will will be hidden and you cannot see that so this will make the website much more appealing to the user much more good to use and will like include some functionality so the javascript is done and as you can see the output the personal website there are some buttons on the top in the navigation bar i have some information mostly so this was the project and i hope you guys liked it so if you liked it please do like like this video and if you haven't subscribed please do subscribe to my youtube channel and also if you have any further questions or any suggestions regarding any projects that i should do please do mention it in the comments i'll surely go through it until then thanks for watching and see you in the next video goodbye

Channel: Tanay Padar

Views: 5,137

Keywords: portfolio website, portfolio website html css, personal portfolio website, responsive portfolio html css javascript, responsive personal portfolio website, responsive portfolio website html css javascript, portfolio website html css javascript, responsive portfolio website, responsive web design, portfolio html css javascript, complete personal portfolio website html and css, web development, one page personal website html css, responsive website, html5

Id: K_l8KNvPi_I

Length: 15min 47sec (947 seconds)

Published: Fri Dec 17 2021