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 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 at 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 these following codes in your file. You can also download the source code files through the given link. Remember that, In the source files, there you also get the images of this program. Click here to download source code files.

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.

HTML FILE:

CSS FILE:


JavaScript FILE:

Thanks for visiting, Keep visiting.


33 Comments

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

  1. 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
  2. Thank you for all tutorial. They were very effective.

    ReplyDelete
  3. 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
  4. Hi there,
    can i used this source for my portfolio can i edit this and used it?
    pmanohar858@gmail.com DM

    ReplyDelete
  5. 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
  6. can I use the template commercially without credit or attribution?

    ReplyDelete
  7. 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
  8. nevermind I found it... thanks

    ReplyDelete

Post a Comment

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

Previous Post Next Post