How To Make A Portfolio Website Using HTML CSS JS | Complete Responsive Website Design

Learn How To Make A Portfolio Website Using HTML CSS JavaScript | Complete Responsive Website Design | Make Personal portfolio website

In this video, we’ll build a fully responsive personal portfolio website using HTML, CSS, and JavaScript. This project is ideal for showcasing your online resume, CV, or developer profile.

We’ll start with the user’s name and role, then include a profile image, skill highlights, work experience, and educational background. You’ll also learn how to add service listings and a portfolio section to feature your projects.

At the end of the page, we’ll set up a professional footer with contact details and a functional contact form — connected to Google Sheets to collect messages directly.

The entire website is designed to be mobile-friendly and works smoothly on all screen sizes. We’ll go through every part step by step using only HTML, CSS, and JavaScript — no external frameworks.

---------------------------------------------------------------------------------------------------------------------------
Form to Google Sheets GitHub:

--------------------------------------------------------------------------------------------------------------------------

Steps to build your own portfolio website:

00:00 Portfolio Website Overview
07:38 Creating HTML And CSS file
10:20 Make Header section of website
45:50 Make About section of website
01:59:29 Create services section of the website
02:26:14 Create portfolio section of the website
03:03:05 Make contact section of the website
03:45:01 Make copyright section of the website
03:51:50 Make the website responsive
04:02:07 Add website scroll on menu click
04:43:28 Send contact form data on Google sheets

---------------------------------------------------------------------------------------------------------------------------
🔗 Credit:
This video was inspired by GreatStackDev and his tutorial "How To Make A Portfolio Website Using HTML CSS JS | Complete Responsive Website Design." Be sure to check out his amazing work!

In this video, I’ve recreated the portfolio website originally designed by GreatStackDev in his video "How To Make A Portfolio Website Using HTML CSS JS | Complete Responsive Website Design." While the layout and sections remain the same, I’ve taken extra time to explain each step in more detail to help beginners follow along more easily.

---------------------------------------------------------------------------------------------------------------------------

Recommended Videos:

How To Make A Calculator Using HTML CSS And JavaScript:

How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials | Beginner Friendly 2025:

HTML Tutorial for Beginners: HTML Crash Course 2025

How To Create A Portfolio Website Using HTML and CSS Only - Easy Tutorial for Beginners 2025:

Login Form in HTML & CSS 2025:

How to Make Money With Only HTML & CSS 2025. 100% Working Ways To Earn in Dollars As A Web Designer:

How To Create A Portfolio Website using HTML & CSS | Step-by-Step Tutorial 2025 For Beginners:

How To Create A Website using HTML & CSS | Step-by-Step Tutorial 2025 For Beginners:

How To Make Quiz App Using JavaScript | Build Quiz App With HTML CSS & JavaScript in 2025:

How To Make Website Using HTML & CSS | Full Responsive Multi Page Website Design Step by Step 2025:
📂 Materials/Resources:

Here is the link to access the images below:

---------------------------------------------------------------------------------------------------------------------------
Images Credit:
---------------------------------------------------------------------------------------------------------------------------
Like - Follow & Subscribe us: