Responsive Personal Portfolio Website using HTML CSS & JavaScript

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.

You might like this:


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:

CSS CODE:

JAVASCRIPT CODE:




99 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. Replies
    1. How I wished i cld be with u guyz'i may be kidding to others buh u guyz re d best

      Delete
    2. You're the best for doing what you do

      Delete
    3. I can't find images and background image here. Can you help me out ?

      Delete
    4. Just 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.

      Delete
  2. I found a bug! If I try the contact and I press the t or s
    letters then I can't knock them down.

    ReplyDelete
    Replies
    1. No there is no js codes have written to restricted these keys. Please download files instead of copying.

      Delete
  3. Thank you for all tutorial. They were very effective.

    ReplyDelete
  4. js file error plz provide correnct

    ReplyDelete
    Replies
    1. 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.

      Delete
  5. Hi there,
    can i used this source for my portfolio can i edit this and used it?
    pmanohar858@gmail.com DM

    ReplyDelete
  6. 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.

    ReplyDelete
  7. can I use the template commercially without credit or attribution?

    ReplyDelete
  8. 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.

    ReplyDelete
    Replies
    1. Please download files, there you get codes with all images which are used in this website.

      Delete
  9. nevermind I found it... thanks

    ReplyDelete
  10. is it possible to send the correct files to jefinjohn06@gmail.com?

    ReplyDelete
    Replies
    1. Download all files from the above download link.

      Delete
  11. Replies
    1. Sure and I've also uploaded a blog about how to create Chatbot using PHP.

      Delete
  12. sir,what do you useing app for code ?

    ReplyDelete
  13. no errors found in js file.but it is not working menu-btn and other js file things.can you please help.

    ReplyDelete
  14. do you have documentation of this website??

    ReplyDelete
    Replies
    1. No, you can watch video tutorial of this website for understanding the codes.

      Delete
  15. Can you attaached website zip file. Please!
    That wiil be very kind of you.
    Thnkas

    ReplyDelete
    Replies
    1. Yes there is ZIP file of this website. Please download from the above link.

      Delete
  16. I can use this source on my website? I love your design and wish use in my portfolio web, hi from Brazil!

    ReplyDelete
  17. I'm web developper. U do the good Job. May i use for my web site?

    ReplyDelete
  18. Thank you very helpful! Keep it up. May God Bless you!

    ReplyDelete
  19. Video tutorial me music ke jagah bolte to aur achchha hota.

    ReplyDelete
    Replies
    1. Yes bro but I'll try to add my voice in my upcoming videos.

      Delete
  20. Hye! Thank you so much to provide the code. Can i know your name?

    ReplyDelete
  21. Can y please attached the image and the whole zip file with everyhting in it
    Include
    Images
    Files

    Thanks

    ReplyDelete
    Replies
    1. 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.

      Delete
  22. 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

    ReplyDelete
  23. I want to practice your website, but I do not have the images used on your website. What if you would benefit from the images?

    ReplyDelete
    Replies
    1. You can download all images and code files from the above download button.

      Delete
  24. 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

    ReplyDelete
    Replies
    1. For that we need backend languages...please check our PHP videos or blogs.

      Delete
  25. I want to know how to make image so better for use in website like in this website you use a boy with no background

    ReplyDelete
    Replies
    1. You've to learn Photoshop and I didn't edit this image..I've used non copyright image.

      Delete
  26. 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?

    ReplyDelete
  27. Hi Bro awsome design i love it i am making a portfolio website can i use it and add my own changes

    Thank you

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal

Don't forget to Subscribe to our YouTube Channel.

Subscribe To CodingNepal