How I Built My Portfolio Website with HTML, CSS & JS
How I Built My Portfolio Website with HTML, CSS & JS
A step-by-step guide to building a modern, responsive portfolio from scratch
Step 1: Planning the Structure
I started by outlining the core sections I wanted for my portfolio:
Hero section (intro)
About Me
Projects
Skills & Tools
Contact form
Step 2: Building the HTML Structure
I created a basic HTML layout for each section. For example:
A hero section with a heading and paragraph, and a projects section to list my work.
Step 3: Styling with CSS
I used CSS Flexbox and Grid for layout and responsiveness.
The design is clean, with custom fonts, subtle shadows, and good spacing.
I also used a dark hero section for contrast.
Step 4: JavaScript for Interactivity
I added smooth scrolling using vanilla JavaScript.
This helped create a more modern user experience.
Step 5: Testing & Optimizing
I tested on mobile, tablet, and desktop. I also:
Compressed images using TinyPNG
Wrote semantic HTML for accessibility
Minified CSS and JS files
Step 6: Hosting
I hosted my portfolio on Netlify — it was fast, free, and easy to deploy.
GitHub Pages or Vercel are also great alternatives.
Final Thoughts
Building this portfolio taught me how to structure, style, and enhance a site from scratch.
Now it serves as my digital resume and a showcase of my work.