Responsive Personal Portfolio Website using HTML CSS & JavaScript


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 portfolio 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.

On 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]

Update: Now you can send the message from the contact form of this website. If you still haven’t watched this video [Update] Responsive Personal Portfolio Website – Working Contact Form then please watch this video first.

You can download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it. Once you extract it there is a folder name with Portfolio Website - CodingNepal and inside this folder, you’ll get two subfolders with the name of Website with working contact form and Website without working contact form. If you want to use the working contact form folder then you’ve to configure your XAMPP to send a message. Here is the blog about How to configure XAMPP to send Mail from Localhost in PHP?

Remember if you want to send a message using this website contact form then you need to configure your XAMPP and paste this folder inside htdocs folder of your XAMPP installation directory and open the index.php file on your browser otherwise you can use another folder without doing anything more.

If you face any problem during downloading or after downloading the source code then feel free to comment down or contact us through the contact form.


Previous articleColorful Gradient Text Effect using only HTML & CSS
Next articleSimple Chatbot using PHP with MySQL & jQuery (Ajax)
CodingNepal is a blog where we post blogs related to HTML CSS JavaScript & PHP along with creative coding stuff and free source code files.


  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.

    • thanks bro love u from india i usualy visit your website every day for free sourcecode thanks bro keep making videos like this

  2. 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.

  3. 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 [email protected]

    Please send me the zip file of the whole website include the contact for

  4. 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 ?

  5. wow thank you, you are great!!!
    I modified a little bit, just changed the "my team" section to "my works". And now i'm trying to add a modal popup to images so when I click on photo this make bigger :). Hope I succes πŸ˜›

  6. I have a problem to those sticky class and youtuber to blogger animation.

    I already downlaod you're work(source code) and same thing happen sticky class not work also the animation.

    Do u use any element that imternet (cause i dont have) needid?

    I'm just working on plain note++ and run in to chrome

  7. Hi sir please notice me, i have a problem with the sticky class also with the animation of Blogger Youtuber parag. I already download the source code and run it. The result is same even in you're work.

    I'm just working on plain note++.

    Now my question is do u use any elements that nid a internet(cause i don't have) to run those feature?

    Thank you sir.

  8. Hi mate. I know that you’ve stated many times, that there’ll be no copyright issues linked to using your design and your code and modifying it to suit one’s own needs. But does this count for business use as well? I’d use it and modify it to create a website for my local language school. Is that good with you? Thanks in advance.

  9. no idea why index file had a php file extension…??? i changed it to html and the website seems to function normally…

    • You can try open this page on incognito mode or send us screenshot link but make sure you’ve disabled your AdBlocker on our site.


Please enter your comment!
Please enter your name here