Hello readers, Today in this blog you'll learn how to create a Fully Responsive Personal Portfolio Website using HTML CSS & JavaScript. I already shared many blogs on web design stuff like [Navigation Bar, Cards, Image Slider, Owl Carousel, Buttons, and many more] but still I' haven't created a full website and now it's time to create a portfolio website.
Personal portfolios sites are consistent that need to be taken care of throughout your work. It gives a convenient way for potential clients to view your work while also letting you expand on your skills/experiences and services.
In this site [Personal Portfolio], there are six sections on one page - Home, About, Services, Skills, Teams, and Contact, and each section is attractive and eye-catching. On the home page of this site, on the top, there is a sticky navigation bar with a logo on the left side and some navigation links are on the right side. On the left side of the home page, there are texts which are about the author's name, profession, and a button labeled as "Hire me" as you can see in the image.
Video Tutorial of Responsive Personal Portfolio Website
In the video, you've seen the Responsive One Page Personal Portfolio Website and I hope you've understood the little bit codes of this design. I tried my best to make this video understandable for all viewers and I've shown each line output in the video. If this video is a little be helpful for you, don't forget to like it and leave a comment.
If you like this portfolio and want to get the source codes of this tutorial, I have provided all the codes of this program below and I've also provided the download link of this program where you can easily download the source files of this program. You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.
Responsive Personal Portfolio Website [Source Codes]
To create this program [One Page Personal Portfolio Website]. First, you need to create three Files one HTML File, one CSS File and the last one is JavaScript File. After creating these files just paste the following codes into your file. You can also download the source code files from the given download button. Remember that, In the source files, there you also get the images of this program.
Note: I do not recommend you to copy the following codes and paste this into your files because while posting this blog I got multiple warnings in these codes so, I have commented on some lines in HTML codes. If you know basic HTML, you can uncomment the commented lines after pasting it into your files, otherwise, download the source code files of this program from the below download button, and I also recommend you to download the code files. alert-info
HTML CODE:
My skills
My creative skills & experiences.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ratione error est recusandae consequatur, iusto illum deleniti quidem impedit, quos quaerat quis minima sequi. Cupiditate recusandae laudantium esse, harum animi aspernatur quisquam et delectus ipsum quam alias quaerat? Quasi hic quidem illum. Ad delectus natus aut hic explicabo minus quod.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Someone name
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Someone name
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Someone name
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Someone name
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Contact me
Get in Touch
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum corporis fuga corrupti. Doloribus quis soluta nesciunt veritatis vitae nobis?
Note: I've commented some lines of code because I got multiple errors in codes while uploading this post. So I recommend you download the source code files from the above link instead of copying codes. But If you're going to copy codes then uncomment the commented lines after pasting the following codes.
I am from Bangladesh, thank you very much, brother, I love your country very much and I pray that you will not forget what you have done for us, may Allah bless you.
hi, what size is the background image in the home section? My about section the line is showing up in my home section above the about me title. I don't know why.
Above there big a big button labeled as "Download code files", just click on that button and you'll redirect to another page. In that page, there is timer and you've to just wait. Once timer completed, the zip file automatically download.
Can you please create a same contact form for me so when people contact me i get an email. Please create the same css contact but add my email to it so when people email me i get an email.
My Email is Shaheera875875@gmail.com
Please send me the zip file of the whole website include the contact for Thanks
what should i alter or edit in code so the message goes to my gmail. plz help. thanks a bunch for providing this great theme for free. mail me at:samirkhanaal9@gmail.com
I take 2 weeks to do this Portfolio website I got many new things when while typing coding this website vvvv nice sir and i have question can upload this website ? No copright issues ? Licence?
Amazing ...
ReplyDeleteThank you!
DeleteHow I wished i cld be with u guyz'i may be kidding to others buh u guyz re d best
DeleteThank you bro
DeleteYou're the best for doing what you do
DeleteI can't find images and background image here. Can you help me out ?
DeleteJust click on this link - https://www.codingnepalweb.com/p/download-timer-responsive-portfolio.html then you'll be redirected to the next page where you've to wait until the timer is not 0...Once timer will be 0 then the source files automatically download in a zip format then unzip it.
DeleteGreat design
ReplyDeleteThank you!
DeleteThank you So much bro
ReplyDeleteYou're welcome bro :)
DeleteI found a bug! If I try the contact and I press the t or s
ReplyDeleteletters then I can't knock them down.
No there is no js codes have written to restricted these keys. Please download files instead of copying.
DeleteThank you for all tutorial. They were very effective.
ReplyDeleteYou're welcome...Keep visiting!
Deletejs file error plz provide correnct
ReplyDeleteNote: I've commented some lines of code because I got multiple errors in codes while uploading this post. So I recommend you download the source code files from the above link instead of copying codes. But If you're going to copy codes then uncomment the commented lines after pasting the following codes.
DeleteHi there,
ReplyDeletecan i used this source for my portfolio can i edit this and used it?
pmanohar858@gmail.com DM
Yes you can use!
DeleteThank you bro
ReplyDeleteYou're welcome bro...Keep visiting!
DeleteI am from Bangladesh, thank you very much, brother, I love your country very much and I pray that you will not forget what you have done for us, may Allah bless you.
ReplyDeleteYou're welcome bro...Keep visiting!
Deletebro u are lagend thanks bro
ReplyDeleteYou're welcome bro...Keep visiting!
Deleteit is free for use?
ReplyDeleteYes!
Deletenice design
ReplyDeleteThank you
DeleteTnQ
ReplyDeleteYou're welcome :)
Deleteproud of you
ReplyDeleteThank you :)
Deletecan I use the template commercially without credit or attribution?
ReplyDeletePlease take a look our FAQ
Deletehi, what size is the background image in the home section? My about section the line is showing up in my home section above the about me title. I don't know why.
ReplyDeletePlease download files, there you get codes with all images which are used in this website.
Deletenevermind I found it... thanks
ReplyDeleteYou're welcome :)
Deleteis it possible to send the correct files to jefinjohn06@gmail.com?
ReplyDeleteDownload all files from the above download link.
Deletecan you make chat app next?
ReplyDeleteSure and I've also uploaded a blog about how to create Chatbot using PHP.
Deleteawesome design
ReplyDeleteThank you very much
DeleteThank you very much !
ReplyDeleteYou're welcome :)
DeleteGreat Bro. Very Helpfull.
ReplyDeleteThank you very much
Deletesir,what do you useing app for code ?
ReplyDeleteAtom
Deleteno errors found in js file.but it is not working menu-btn and other js file things.can you please help.
ReplyDeleteRead the blog carefully.
Deletejs not working
ReplyDeleteDownload files instead of copying codes.
Deletethankyou so much sir
ReplyDeleteYou're welcome
Deletedo you have documentation of this website??
ReplyDeleteNo, you can watch video tutorial of this website for understanding the codes.
DeleteCan you attaached website zip file. Please!
ReplyDeleteThat wiil be very kind of you.
Thnkas
Yes there is ZIP file of this website. Please download from the above link.
DeleteCan i get banner images??
ReplyDeleteYes you download from above link.
DeleteAmazing Design
ReplyDeleteThank you.
DeleteI can use this source on my website? I love your design and wish use in my portfolio web, hi from Brazil!
ReplyDeleteYes but don't forget to view our FAQ's.
DeleteI'm web developper. U do the good Job. May i use for my web site?
ReplyDeleteYes but don't forget to view our FAQ's.
DeleteThank you very helpful! Keep it up. May God Bless you!
ReplyDeleteYou're welcome :)
DeleteAmazing Design
ReplyDeleteThank you.
DeleteVideo tutorial me music ke jagah bolte to aur achchha hota.
ReplyDeleteYes bro but I'll try to add my voice in my upcoming videos.
DeleteHye! Thank you so much to provide the code. Can i know your name?
ReplyDeletePrakash
DeleteCan y please attached the image and the whole zip file with everyhting in it
ReplyDeleteInclude
Images
Files
Thanks
Above there big a big button labeled as "Download code files", just click on that button and you'll redirect to another page. In that page, there is timer and you've to just wait. Once timer completed, the zip file automatically download.
DeleteThanks
ReplyDeleteYou're welcome :)
DeleteCan you please create a same contact form for me so when people contact me i get an email. Please create the same css contact but add my email to it so when people email me i get an email.
ReplyDeleteMy Email is Shaheera875875@gmail.com
Please send me the zip file of the whole website include the contact for
Thanks
Sorry for that
Deletethanks dude
ReplyDeleteYou're welcome :)
DeleteI want to practice your website, but I do not have the images used on your website. What if you would benefit from the images?
ReplyDeleteYou can download all images and code files from the above download button.
Deleteyou are awesome
ReplyDeleteThank you :)
Deletewhat should i alter or edit in code so the message goes to my gmail. plz help. thanks a bunch for providing this great theme for free. mail me at:samirkhanaal9@gmail.com
ReplyDeleteFor that we need backend languages...please check our PHP videos or blogs.
DeleteI want to know how to make image so better for use in website like in this website you use a boy with no background
ReplyDeleteYou've to learn Photoshop and I didn't edit this image..I've used non copyright image.
DeleteI take 2 weeks to do this Portfolio website I got many new things when while typing coding this website vvvv nice sir and i have question can upload this website ?
ReplyDeleteNo copright issues ?
Licence?
Yes no copyright issues.
DeleteHi Bro awsome design i love it i am making a portfolio website can i use it and add my own changes
ReplyDeleteThank you
Yes you can
DeleteAwesome tutorials are great
ReplyDeleteThank you :)
DeletePost a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.